Merge branch 'develop' into feature/439-theme-url

Author: ravichdev

.env.dist

@@ -5,6 +5,6 @@ MYSQL_USER=wordpress
 MYSQL_PASSWORD=wordpress
 
 # WordPress
-WP_VERSION=5.5.1
+WP_VERSION=5.6
 WP_DB_USER=wordpress
 WP_DB_PASSWORD=wordpress

.travis.yml

@@ -94,9 +94,11 @@ jobs:
         - echo "Running E2E tests with code coverage ..."
       script:
         - npm run env:start
-        - npm run wp -- wp core install --title=WordPress --admin_user=admin --admin_password=password --admin_email=admin@example.com --skip-email --url=http://localhost:8088 --quiet
+        - docker-compose exec wordpress bash -c "chown -R www-data:www-data /var/www/html/wp-content/" # ensure WP folders have correct permissions
+        - docker-compose exec mysql bash -c "chown -R mysql:mysql /var/lib/mysql"
+        - npm run wp -- wp core install --title=WordPress --admin_user=admin --admin_password=password --admin_email=admin@example.com --skip-email --url=http://localhost:8088
         - npm run wp -- wp plugin activate material-design
-        - npm run build:js
+        - sudo chown -R travis:travis tests # ensure coverage folder can be created
         - npm run test:e2e:coveralls
 
     - name: JS unit tests (7.4, WordPress latest, with code coverage)

assets/css/src/block-editor.css

@@ -32,7 +32,8 @@
 }
 
 .block-editor-block-types-list__item[class*="editor-block-list-item-material-"],
-.editor-autocompleters__block {
+.editor-autocompleters__block,
+.components-autocomplete__popover {
 
 	& .material-icons-outlined,
 	& .material-icons__button {

assets/src/block-editor/blocks/button/block.json

@@ -47,7 +47,7 @@
     "icon": {
       "type": "string",
       "default": "",
-      "source": "html",
+      "source": "text",
       "selector": ".material-icons"
      },
     "backgroundColor": {

assets/src/block-editor/blocks/button/edit.js

@@ -353,10 +353,30 @@ const ButtonEdit = ( {
 };
 
 export default withSelect( ( select, { clientId } ) => {
-	const { getBlockParentsByBlockName } = select( 'core/block-editor' );
+	const { getBlock, getBlockParentsByBlockName, getBlockRootClientId } = select(
+		'core/block-editor'
+	);
+	let isSubmitButton = false;
+
+	if ( 'undefined' === typeof getBlockParentsByBlockName ) {
+		let parentId = getBlockRootClientId( clientId );
+
+		while ( parentId ) {
+			const parentBlock = getBlock( clientId );
+
+			if ( parentBlock && parentBlock.name === ContactFormBlockName ) {
+				isSubmitButton = true;
+				break;
+			}
+
+			parentId = getBlockRootClientId( parentId );
+		}
+	} else {
+		isSubmitButton =
+			getBlockParentsByBlockName( clientId, ContactFormBlockName ).length > 0;
+	}
 
 	return {
-		isSubmitButton:
-			getBlockParentsByBlockName( clientId, ContactFormBlockName ).length > 0,
+		isSubmitButton,
 	};
 } )( ButtonEdit );

assets/src/block-editor/blocks/card/components/card-action-button.js

@@ -70,6 +70,17 @@ const CardActionButton = ( {
 						value={ label }
 						onChange={ onChangeLabel }
 						placeholder={ __( 'Button', 'material-design' ) }
+						allowedFormats={ [
+							'core/bold',
+							'core/italic',
+							'core/code',
+							'core/image',
+							'core/strikethrough',
+							'core/underline',
+							'core/text-color',
+							'core/subscript',
+							'core/superscript',
+						] }
 					/>
 				</button>
 			) : (
@@ -80,7 +91,10 @@ const CardActionButton = ( {
 					className="mdc-button mdc-card__action mdc-card__action--button"
 				>
 					<div className="mdc-button__ripple"></div>
-					<span className="mdc-button__label">{ label }</span>
+					<span
+						className="mdc-button__label"
+						dangerouslySetInnerHTML={ { __html: label } }
+					></span>
 				</a>
 			) }
 			{ isFocused && isEditMode && (

assets/src/block-editor/blocks/card/index.js

@@ -41,7 +41,7 @@ export const settings = {
 		'material-design'
 	),
 	keywords: [ __( 'Material Card', 'material-design' ) ],
-	icon: <i className="material-icons-outlined">chrome_reader_mode</i>,
+	icon: () => <i className="material-icons-outlined">chrome_reader_mode</i>,
 	example,
 	edit,
 	save,

assets/src/block-editor/blocks/contact-form/index.js

@@ -38,7 +38,7 @@ export const settings = {
 	),
 	category: 'material',
 	keywords: [ __( 'Material Contact Form', 'material-design' ) ],
-	icon: <i className="material-icons-outlined">mail</i>,
+	icon: () => <i className="material-icons-outlined">mail</i>,
 	example: {
 		attributes: {
 			preview: true,

assets/src/block-editor/blocks/contact-form/inner-blocks/common/components/text-input-edit.js

@@ -90,10 +90,11 @@ const TextInputEdit = props => {
 		textFields.forEach( textField => new MDCTextField( textField ) );
 	}, [ outlined, displayLabel, fullWidth ] );
 
-	if ( ! id || id.length === 0 ) {
-		setAttributes( { id: `material-design-${ inputRole }-${ instanceId }` } );
-		return null;
-	}
+	useEffect( () => {
+		if ( ! id || id.length === 0 ) {
+			setAttributes( { id: `material-design-${ inputRole }-${ instanceId }` } );
+		} // eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ id ] );
 
 	const setter = genericAttributesSetter( setAttributes );
 	const textInputProps = {
@@ -188,12 +189,10 @@ const TextInputEdit = props => {
 export default compose( [
 	withInstanceId,
 	withSelect( ( select, ownProps ) => {
-		const parents = select( 'core/block-editor' ).getBlockParents(
+		const parentId = select( 'core/block-editor' ).getBlockRootClientId(
 			ownProps.clientId
 		);
 
-		const parentId = parents[ parents.length - 1 ];
-
 		return {
 			parentBlock: parentId
 				? select( 'core/block-editor' ).getBlock( parentId )

assets/src/block-editor/blocks/contact-form/inner-blocks/common/components/textarea-input-edit.js

@@ -73,9 +73,11 @@ const TextAreaInputEdit = props => {
 
 	const setter = genericAttributesSetter( setAttributes );
 
-	if ( ! id || id.length === 0 ) {
-		setAttributes( { id: `material-design-${ inputRole }-${ instanceId }` } );
-	}
+	useEffect( () => {
+		if ( ! id || id.length === 0 ) {
+			setAttributes( { id: `material-design-${ inputRole }-${ instanceId }` } );
+		} // eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ id ] );
 
 	const textareaInputProps = {
 		inputValue,
@@ -187,12 +189,10 @@ const TextAreaInputEdit = props => {
 export default compose( [
 	withInstanceId,
 	withSelect( ( select, ownProps ) => {
-		const parents = select( 'core/block-editor' ).getBlockParents(
+		const parentId = select( 'core/block-editor' ).getBlockRootClientId(
 			ownProps.clientId
 		);
 
-		const parentId = parents[ parents.length - 1 ];
-
 		return {
 			parentBlock: parentId
 				? select( 'core/block-editor' ).getBlock( parentId )