release: version 2.0.12

- Fix Custom CSS not working with certain selectors
- Disable Author Block for WordPress 5.9 or above; use Core’s block instead
- Small Dynamic Text enhancements
- Add separator alignment option in Countdown block
- Fix Category not shown on Featured Post in Posts Lock
- Fix Alignment control breaking in Section & Posts block

Author: HardeepAsrani

.github/workflows/tastewp.yml

@@ -0,0 +1,18 @@
+name: InstaWP WordPress Testing
+
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  create-wp-for-testing:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: instawp/wordpress-testing-automation@main
+        with:
+          GITHUB_TOKEN: ${{ secrets.BOT_TOKEN }}
+          INSTAWP_TOKEN: ${{ secrets.INSTAWP_TOKEN }}
+          INSTAWP_TEMPLATE_SLUG: otter-qa
+          REPO_ID: 46
+          INSTAWP_ACTION: create-site-template

inc/css/blocks/class-countdown-css.php

@@ -298,6 +298,21 @@ public function render_css( $block ) {
 			)
 		);
 
+		$css->add_item(
+			array(
+				'selector'   => ' .otter-countdown__container .otter-countdown__display .otter-countdown__display-area[name="separator"] .otter-countdown__label',
+				'properties' => array(
+					array(
+						'property'  => 'display',
+						'default'   => 'none',
+						'condition' => function( $attrs ) {
+							return isset( $attrs['separatorAlignment'] ) && 'center' === $attrs['separatorAlignment'];
+						},
+					),
+				),
+			)
+		);
+
 		$style = $css->generate();
 
 		return $style;

inc/render/class-posts-grid-block.php

@@ -119,7 +119,7 @@ public function render( $attributes ) {
 				}
 
 				if ( 'meta' === $element ) {
-					if ( ( isset( $attributes['displayMeta'] ) && $attributes['displayMeta'] ) && ( ( isset( $attributes['displayDate'] ) && $attributes['displayDate'] ) || ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) ) ) {
+					if ( ( isset( $attributes['displayMeta'] ) && $attributes['displayMeta'] ) && ( ( isset( $attributes['displayDate'] ) && $attributes['displayDate'] ) || ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) || ( isset( $attributes['displayComments'] ) && $attributes['displayComments'] ) || ( isset( $attributes['displayPostCategory'] ) && $attributes['displayPostCategory'] ) ) ) {
 						$list_items_markup .= '<p class="o-posts-grid-post-meta">';
 
 						if ( isset( $attributes['displayDate'] ) && $attributes['displayDate'] ) {
@@ -277,6 +277,14 @@ protected function render_featured_post( $post, $attributes ) {
 		$html .= '<div class="o-posts-grid-post-body' . ( $thumbnail && $attributes['displayFeaturedImage'] ? '' : ' is-full' ) . '">';
 
 		foreach ( $attributes['template'] as $element ) {
+			if ( 'category' === $element ) {
+				if ( isset( $attributes['displayCategory'] ) && isset( $category[0] ) && $attributes['displayCategory'] ) {
+					$html .= sprintf(
+						'<span class="o-posts-grid-post-category">%1$s</span>',
+						esc_html( $category[0]->cat_name )
+					);
+				}
+			}
 
 			if ( 'title' === $element ) {
 				if ( isset( $attributes['displayTitle'] ) && $attributes['displayTitle'] ) {

src/blocks/blocks/about-author/index.js

@@ -26,5 +26,9 @@ registerBlockType( name, {
 	],
 	edit,
 	save: () => null,
+	supports: {
+		inserter: Boolean( window.themeisleGutenberg.isLegacyPre59 ),
+		html: false
+	},
 	example: {}
 });

src/blocks/blocks/button-group/group/inspector.js

@@ -164,23 +164,7 @@ const Inspector = ({
 						]}
 						onChange={ onAlignmentChange }
 						hideLabels
-						style={{
-							button: {
-								color: 'black',
-								boxShadow: 'none',
-								borderRadius: '0px'
-							},
-							active: {
-								color: 'white',
-								backgroundColor: 'black',
-								boxShadow: 'none',
-								borderRadius: '0px'
-							},
-							group: {
-								marginLeft: '0px',
-								marginRight: '0px'
-							}
-						}}
+						hasIcon
 					/>
 				</ResponsiveControl>
 			</PanelBody>

src/blocks/blocks/countdown/block.json

@@ -143,6 +143,9 @@
 		"borderRadiusType": {
 			"type": "string",
 			"default": "linked"
+		},
+		"separatorAlignment": {
+			"type": "string"
 		}
 	},
 	"supports": {

src/blocks/blocks/countdown/edit.js

@@ -133,9 +133,14 @@ const Edit = ({
 			}`,
 			`.otter-countdown__display-area[name="separator"] .otter-countdown__value {
 				color: ${ attributes.separatorColor };
-			}`
+			}`,
+			'center' === attributes.separatorAlignment ? `
+			.otter-countdown__display-area[name="separator"] .otter-countdown__label {
+				display: none;
+			}
+			` : ''
 		]);
-	}, [ attributes.valueColor, attributes.labelColor, attributes.separatorColor ]);
+	}, [ attributes.valueColor, attributes.labelColor, attributes.separatorColor, attributes.separatorAlignment ]);
 
 
 	const blockProps = useBlockProps({

src/blocks/blocks/countdown/inspector.js

@@ -220,6 +220,30 @@ const Inspector = ({
 						}
 					]}
 				/>
+
+				{ attributes.hasSeparators && (
+					<SelectControl
+						label={ __( 'Separator Alignment', 'otter-blocks' ) }
+						value={ attributes.separatorAlignment }
+						onChange={ separatorAlignment => {
+							if ( ! separatorAlignment ) {
+								setAttributes({ separatorAlignment: undefined });
+							} else {
+								setAttributes({ separatorAlignment });
+							}
+						}}
+						options={[
+							{
+								label: __( 'Default', 'otter-blocks' ),
+								value: ''
+							},
+							{
+								label: __( 'Center', 'otter-blocks' ),
+								value: 'center'
+							}
+						]}
+					/>
+				) }
 			</PanelBody>
 
 			<PanelBody
@@ -334,21 +358,19 @@ const Inspector = ({
 					]}
 				/>
 
-				{
-					'none' !== attributes.borderStyle && (
-						<ResponsiveControl
-							label={ __( 'Width', 'otter-blocks' ) }
-						>
-							<RangeControl
-								value={ responsiveGetAttributes([ attributes.borderWidth, attributes.borderWidthTablet, attributes.borderWidthMobile ]) ?? 2 }
-								onChange={ value => responsiveSetAttributes( value, [ 'borderWidth', 'borderWidthTablet', 'borderWidthMobile' ]) }
-								min={ 0 }
-								max={ 50 }
-								allowReset
-							/>
-						</ResponsiveControl>
-					)
-				}
+				{ 'none' !== attributes.borderStyle && (
+					<ResponsiveControl
+						label={ __( 'Width', 'otter-blocks' ) }
+					>
+						<RangeControl
+							value={ responsiveGetAttributes([ attributes.borderWidth, attributes.borderWidthTablet, attributes.borderWidthMobile ]) ?? 2 }
+							onChange={ value => responsiveSetAttributes( value, [ 'borderWidth', 'borderWidthTablet', 'borderWidthMobile' ]) }
+							min={ 0 }
+							max={ 50 }
+							allowReset
+						/>
+					</ResponsiveControl>
+				) }
 
 
 				<BoxControl

src/blocks/blocks/countdown/style.scss

@@ -99,7 +99,9 @@
 
 		&[name="separator"] {
 			.otter-countdown__label {
-				display: none;
+				opacity: 0%;
+				text-overflow: clip;
+				word-break: normal;
 			}
 			border: unset;
 			background-color: transparent;
@@ -108,6 +110,8 @@
 	}
 
 	.otter-countdown__value {
+		display: flex;
+		justify-content: center;
 		font-size: var( --value-font-size );
 		font-weight: var( --value-font-weight );
 		line-height: 1.2;

src/blocks/blocks/countdown/types.d.ts

@@ -59,6 +59,7 @@ type Attributes = {
 	paddingTablet: PaddingType
 	valueFontWeight: string
 	labelFontWeight: string
+	seperatorAlignment: 'center'
 } & LegacyAttrs;
 
 export type CountdownProps = BlockProps<Attributes>

src/blocks/blocks/lottie/placeholder.js

@@ -39,7 +39,7 @@ const BlockPlaceholder = ({
 		return (
 			<Placeholder
 				label={ __( 'Lottie', 'otter-blocks' ) }
-				instructions={ __( 'Add Lottie animations and files to your website.', 'otter-blocks' ) }
+				instructions={ __( 'Add Lottie animations and files to your website. You need to use a .json file.', 'otter-blocks' ) }
 				icon={ <BlockIcon icon={ video } /> }
 				className={ className }
 			>

src/blocks/blocks/posts/components/layout/featured.js

@@ -17,6 +17,7 @@ import { applyFilters } from '@wordpress/hooks';
 import Thumbnail from './thumbnail.js';
 
 import {
+	PostsCategory,
 	PostsDescription,
 	PostsMeta,
 	PostsTitle
@@ -26,7 +27,8 @@ const FeaturedPost = ({
 	post,
 	attributes,
 	author,
-	category
+	category,
+	categoriesList
 }) => {
 	if ( ! post  ) {
 		return '';
@@ -48,6 +50,8 @@ const FeaturedPost = ({
 			<div className="o-posts-grid-post-body">
 				{ attributes.template.map( element => {
 					switch ( element ) {
+					case 'category':
+						return <PostsCategory attributes={ attributes } element={ element } category={ category } categoriesList={ categoriesList }/>;
 					case 'title':
 						return <PostsTitle attributes={ attributes } element={ element } post={ post } />;
 					case 'meta':

src/blocks/blocks/posts/components/layout/index.js

@@ -121,7 +121,7 @@ export const PostsTitle = ({ attributes, element, post }) => {
 };
 
 export const PostsMeta = ({ attributes, element, post, author, category }) => {
-	if ( attributes.displayMeta && ( attributes.displayDate || attributes.displayAuthor ) ) {
+	if ( attributes.displayMeta && ( attributes.displayDate || attributes.displayAuthor || attributes.displayComments || attributes.displayPostCategory ) ) {
 		return (
 			<p key={ element } className="o-posts-grid-post-meta">
 				{ ( attributes.displayDate ) && (

src/blocks/blocks/posts/edit.js

@@ -232,6 +232,7 @@ const Edit = ({
 							attributes={ attributes }
 							post={ posts?.[0] }
 							category={ categoriesList[0] }
+							categoriesList={ categoriesList }
 							author={ authors[0] }
 						/>
 					) }

src/blocks/components/toogle-group-control/editor.scss

@@ -5,6 +5,26 @@
 	justify-content: center;
 	width: 100%;
 
+	&.has-icon {
+		margin-left: 0px;
+		margin-right: 0px;
+
+		.components-button {
+			&.is-primary {
+				color: #fff;
+				background-color: #000;
+				box-shadow: none;
+				border-radius: 0;
+			}
+
+			&.is-secondary {
+				color: #000;
+				box-shadow: none;
+				border-radius: 0px;
+			}
+		}
+	}
+
 	.o-toggle-option {
 		&:root {
 			--o-toogle-btn-rad: 0px;

src/blocks/components/toogle-group-control/index.js

@@ -16,7 +16,6 @@ import {
  */
 import './editor.scss';
 
-
 /**
  *	A group of buttons that actions as a toggle
  *
@@ -30,19 +29,22 @@ const ToogleGroupControl = ({
 	hideLabels,
 	hideTooltip,
 	showBottomLabels,
-	style
+	hasIcon = false
 }) => {
 	return (
 		<ButtonGroup
-			className="o-toggle-group-control"
-			style={ style?.group }
+			className={ classNames(
+				'o-toggle-group-control',
+				{
+					'has-icon': hasIcon
+				}
+			) }
 		>
 			{ options?.map( option => {
 				return (
 					<div
 						key={ option?.value }
 						className="o-toggle-option"
-						style={ style?.option }
 					>
 						<Button
 							isPrimary={ value == option?.value }
@@ -51,12 +53,11 @@ const ToogleGroupControl = ({
 							label={ option?.label }
 							onClick={ () => onChange( option?.value )}
 							showTooltip={ Boolean( hideTooltip ) }
-							style={ value == option?.value ? ( style.active ?? style?.button ) : style?.button }
 						>
 							{ option?.label && ! Boolean( hideLabels ) && ! Boolean( showBottomLabels ) ? option?.label : '' }
 						</Button>
 
-						<p style={ style?.label }>{ option?.label && ! Boolean( hideLabels ) && Boolean( showBottomLabels ) ?  option?.label : '' }</p>
+						<p>{ option?.label && ! Boolean( hideLabels ) && Boolean( showBottomLabels ) ?  option?.label : '' }</p>
 					</div>
 				);
 			}) }

src/blocks/plugins/dynamic-content/autocompleter.js

@@ -15,10 +15,12 @@ import { addFilter } from '@wordpress/hooks';
  */
 import options from './options.js';
 
-const autocompleteOptions = [];
+let autocompleteOptions = [];
 
 Object.keys( options ).forEach( option => autocompleteOptions.push( ...options[option].options ) );
 
+autocompleteOptions =  [ ...autocompleteOptions.filter( i => true !== i.isDisabled ), ...autocompleteOptions.filter( i => true === i.isDisabled ) ];
+
 const dynamicValue = {
 	name: 'dynamic-value',
 	triggerPrefix: '%',

src/blocks/plugins/dynamic-content/components/inline-controls.js

@@ -43,7 +43,7 @@ const InlineControls = ({
 			attrs[ o ] = obj[ o ];
 		});
 
-		attrs = Object.fromEntries( Object.entries( attrs ).filter( ([ _, v ]) => ( null !== v && '' !== v ) ) );
+		attrs = Object.fromEntries( Object.entries( attrs ).filter( ([ _, v ]) => ( null !== v && '' !== v && undefined !== v ) ) );
 
 		setAttributes({ ...attrs });
 	};