Avoid getBlock in block-list/block (WordPress#11899)

* Avoid getBlock in block-list/block

* Update data docs

* Fix unit tests post rebase :)

* Rename props

* Clarify the filter position

* Avoid repeating the selector dependants

* Fix small typo in the docs

* Avoid rerending the current block if the previous block change (WordPress#12379)

* Avoid rerending the current block if the previous block change

* Always show the sibling inserter

* Optimize the insertion point component (WordPress#12384)

* Fix lock file

* Fix linting

docs/designers-developers/developers/data/data-core-editor.md

@@ -411,6 +411,20 @@ Returns whether a block is valid or not.
 
 Is Valid.
 
+### getBlockAttributes
+
+Returns a block's attributes given its client ID, or null if no block exists with
+the client ID.
+
+*Parameters*
+
+ * state: Editor state.
+ * clientId: Block client ID.
+
+*Returns*
+
+Block attributes.
+
 ### getBlock
 
 Returns a block given its client ID. This is a parsed copy of the block,

docs/designers-developers/developers/filters/block-filters.md

@@ -113,10 +113,6 @@ wp.hooks.addFilter(
 );
 ```
 
-#### `blocks.isUnmodifiedDefaultBlock.attributes`
-
-Used internally by the default block (paragraph) to exclude the attributes from the check if the block was modified.
-
 #### `blocks.switchToBlockType.transformedBlock`
 
 Used to filters an individual transform result from block transformation. All of the original blocks are passed, since transformations are many-to-many, not one-to-one.
@@ -198,19 +194,13 @@ _Example:_
 ```js
 var el = wp.element.createElement;
 
-var withDataAlign = wp.compose.createHigherOrderComponent( function( BlockListBlock ) {
+var withClientIdClassName = wp.compose.createHigherOrderComponent( function( BlockListBlock ) {
 	return function( props ) {
 		var newProps = lodash.assign(
 			{},
 			props,
 			{
-				wrapperProps: lodash.assign(
-					{},
-					props.wrapperProps,
-					{
-						'data-align': props.block.attributes.align
-					}
-				)
+				classsName: "block-" + props.clientId,
 			}
 		);
 
@@ -219,27 +209,22 @@ var withDataAlign = wp.compose.createHigherOrderComponent( function( BlockListBl
 			newProps
 		);
 	};
-}, 'withAlign' );
+}, 'withClientIdClassName' );
 
-wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-data-align', withDataAlign );
+wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withClientIdClassName );
 
 ```
 {% ESNext %}
 ```js
 const { createHigherOrderComponent } = wp.compose;
 
-const withDataAlign = createHigherOrderComponent( ( BlockListBlock ) => {
+const withClientIdClassName = createHigherOrderComponent( ( BlockListBlock ) => {
 	return ( props ) => {
-		const { align } = props.block.attributes;
-
-		let wrapperProps = props.wrapperProps;
-		wrapperProps = { ...wrapperProps, 'data-align': align };
-
-		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+		return <BlockListBlock { ...props } className={ "block-" + props.clientId } />;
 	};
-}, 'withDataAlign' );
+}, 'withClientIdClassName' );
 
-wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-data-align', withDataAlign );
+wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withClientIdClassName );
 ```
 
 {% end %}

packages/blocks/src/api/utils.js

@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import { every, has, keys, isEqual, isFunction, isString } from 'lodash';
+import { every, has, isFunction, isString } from 'lodash';
 import { default as tinycolor, mostReadable } from 'tinycolor2';
 
 /**
  * WordPress dependencies
  */
-import { applyFilters } from '@wordpress/hooks';
 import { Component, isValidElement } from '@wordpress/element';
 
 /**
@@ -40,14 +39,10 @@ export function isUnmodifiedDefaultBlock( block ) {
 	}
 
 	const newDefaultBlock = createBlock( defaultBlockName );
+	const blockType = getBlockType( defaultBlockName );
 
-	const attributeKeys = applyFilters( 'blocks.isUnmodifiedDefaultBlock.attributes', [
-		...keys( newDefaultBlock.attributes ),
-		...keys( block.attributes ),
-	] );
-
-	return every( attributeKeys, ( key ) =>
-		isEqual( newDefaultBlock.attributes[ key ], block.attributes[ key ] )
+	return every( blockType.attributes, ( value, key ) =>
+		newDefaultBlock.attributes[ key ] === block.attributes[ key ]
 	);
 }
 

packages/editor/src/components/block-list/block-invalid-warning.js

@@ -9,7 +9,8 @@ import {
 	createBlock,
 	rawHandler,
 } from '@wordpress/blocks';
-import { withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -96,18 +97,23 @@ const blockToBlocks = ( block ) => rawHandler( {
 	HTML: block.originalContent,
 } );
 
-export default withDispatch( ( dispatch, { block } ) => {
-	const { replaceBlock } = dispatch( 'core/editor' );
+export default compose( [
+	withSelect( ( select, { clientId } ) => ( {
+		block: select( 'core/editor' ).getBlock( clientId ),
+	} ) ),
+	withDispatch( ( dispatch, { block } ) => {
+		const { replaceBlock } = dispatch( 'core/editor' );
 
-	return {
-		convertToClassic() {
-			replaceBlock( block.clientId, blockToClassic( block ) );
-		},
-		convertToHTML() {
-			replaceBlock( block.clientId, blockToHTML( block ) );
-		},
-		convertToBlocks() {
-			replaceBlock( block.clientId, blockToBlocks( block ) );
-		},
-	};
-} )( BlockInvalidWarning );
+		return {
+			convertToClassic() {
+				replaceBlock( block.clientId, blockToClassic( block ) );
+			},
+			convertToHTML() {
+				replaceBlock( block.clientId, blockToHTML( block ) );
+			},
+			convertToBlocks() {
+				replaceBlock( block.clientId, blockToBlocks( block ) );
+			},
+		};
+	} ),
+] )( BlockInvalidWarning );