Merge pull request #483 from xwp/fix/480-list-block

Fix/480 list block

Author: emeaguiar

.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/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/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 )

assets/src/block-editor/blocks/data-table/edit.js

@@ -35,24 +35,11 @@ import {
 	Placeholder,
 	TextControl,
 	ToggleControl,
-	ToolbarGroup,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import {
-	alignLeft,
-	alignRight,
-	alignCenter,
-	tableColumnAfter,
-	tableColumnBefore,
-	tableColumnDelete,
-	tableRowAfter,
-	tableRowBefore,
-	tableRowDelete,
-	table,
-} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -69,20 +56,21 @@ import {
 	toggleSection,
 	isEmptyTableSection,
 } from './state';
+import { ToolbarGroup } from '../../components/polyfills';
 
 const ALIGNMENT_CONTROLS = [
 	{
-		icon: alignLeft,
+		icon: 'editor-alignleft',
 		title: __( 'Align Column Left', 'material-design' ),
 		align: 'left',
 	},
 	{
-		icon: alignCenter,
+		icon: 'editor-aligncenter',
 		title: __( 'Align Column Center', 'material-design' ),
 		align: 'center',
 	},
 	{
-		icon: alignRight,
+		icon: 'editor-alignright',
 		title: __( 'Align Column Right', 'material-design' ),
 		align: 'right',
 	},
@@ -379,37 +367,37 @@ const DataTableEdit = ( { attributes, setAttributes, hasCaption } ) => {
 	const getTableControls = () => {
 		return [
 			{
-				icon: tableRowBefore,
+				icon: 'table-row-before',
 				title: __( 'Add Row Before', 'material-design' ),
 				isDisabled: ! selectedCell,
 				onClick: onInsertRowBefore,
 			},
 			{
-				icon: tableRowAfter,
+				icon: 'table-row-after',
 				title: __( 'Add Row After', 'material-design' ),
 				isDisabled: ! selectedCell,
 				onClick: onInsertRowAfter,
 			},
 			{
-				icon: tableRowDelete,
+				icon: 'table-row-delete',
 				title: __( 'Delete Row', 'material-design' ),
 				isDisabled: ! selectedCell,
 				onClick: onDeleteRow,
 			},
 			{
-				icon: tableColumnBefore,
+				icon: 'table-col-before',
 				title: __( 'Add Column Before', 'material-design' ),
 				isDisabled: ! selectedCell,
 				onClick: onInsertColumnBefore,
 			},
 			{
-				icon: tableColumnAfter,
+				icon: 'table-col-after',
 				title: __( 'Add Column After', 'material-design' ),
 				isDisabled: ! selectedCell,
 				onClick: onInsertColumnAfter,
 			},
 			{
-				icon: tableColumnDelete,
+				icon: 'table-col-delete',
 				title: __( 'Delete Column', 'material-design' ),
 				isDisabled: ! selectedCell,
 				onClick: onDeleteColumn,
@@ -465,7 +453,7 @@ const DataTableEdit = ( { attributes, setAttributes, hasCaption } ) => {
 				<ToolbarGroup>
 					<DropdownMenu
 						hasArrowIndicator
-						icon={ table }
+						icon="editor-table"
 						label={ __( 'Edit table', 'material-design' ) }
 						controls={ getTableControls() }
 					/>

assets/src/block-editor/blocks/data-table/hooks.js

@@ -120,8 +120,9 @@ domReady( () => {
 	);
 
 	if (
-		! stylePreferences[ 'core/table' ] ||
-		'material' !== stylePreferences[ 'core/table' ]
+		stylePreferences &&
+		( ! stylePreferences[ 'core/table' ] ||
+			'material' !== stylePreferences[ 'core/table' ] )
 	) {
 		dispatch( 'core/edit-post' ).updatePreferredStyleVariations(
 			'core/table',