Block Editor: Replace dependency on Core Data with an Editor filter.

WordPress · Aug 23, 2019 · 8f3ede8 · 8f3ede8
1 parent 217bcad
commit 8f3ede8
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
@@ -28,7 +28,6 @@
 		"@wordpress/blocks": "file:../blocks",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
-		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/dom": "file:../dom",

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -8,15 +8,7 @@ import { animated } from 'react-spring/web.cjs';
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
-import {
-	useMemo,
-	useCallback,
-	useRef,
-	useEffect,
-	useLayoutEffect,
-	useState,
-} from '@wordpress/element';
+import { useRef, useEffect, useLayoutEffect, useState } from '@wordpress/element';
 import {
 	focus,
 	isTextField,
@@ -61,51 +53,6 @@ import useHoveredArea from './hover-area';
 import { isInsideRootBlock } from '../../utils/dom';
 import useMovingAnimation from './moving-animation';
 
-const EMPTY_OBJECT = {};
-function useMetaAttributeSourceBackwardsCompatibility(
-	name,
-	_attributes,
-	_setAttributes
-) {
-	const { attributes: attributeTypes = EMPTY_OBJECT } =
-		getBlockType( name ) || EMPTY_OBJECT;
-	let [ attributes, setAttributes ] = [ _attributes, _setAttributes ];
-
-	if ( Object.values( attributeTypes ).some( ( type ) => type.source === 'meta' ) ) {
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		const [ meta, setMeta ] = useEntityProp( 'postType', 'post', 'meta' );
-
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		attributes = useMemo(
-			() => ( {
-				..._attributes,
-				...Object.keys( attributeTypes ).reduce( ( acc, key ) => {
-					if ( attributeTypes[ key ].source === 'meta' ) {
-						acc[ key ] = meta[ attributeTypes[ key ].meta ];
-					}
-					return acc;
-				}, {} ),
-			} ),
-			[ attributeTypes, meta, _attributes ]
-		);
-
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		setAttributes = useCallback(
-			( ...args ) => {
-				Object.keys( args[ 0 ] ).forEach( ( key ) => {
-					if ( attributeTypes[ key ].source === 'meta' ) {
-						setMeta( { [ attributeTypes[ key ].meta ]: args[ 0 ][ key ] } );
-					}
-				} );
-				return _setAttributes( ...args );
-			},
-			[ attributeTypes, setMeta, _setAttributes ]
-		);
-	}
-
-	return [ attributes, setAttributes ];
-}
-
 /**
  * Prevents default dragging behavior within a block to allow for multi-
  * selection to take effect unhampered.
@@ -157,12 +104,6 @@ function BlockListBlock( {
 	isNavigationMode,
 	enableNavigationMode,
 } ) {
-	[ attributes, setAttributes ] = useMetaAttributeSourceBackwardsCompatibility(
-		name,
-		attributes,
-		setAttributes
-	);
-
 	// Random state used to rerender the component if needed, ideally we don't need this
 	const [ , updateRerenderState ] = useState( {} );
 	const rerender = () => updateRerenderState( {} );

diff --git a/packages/editor/src/hooks/custom-sources-backwards-compatibility.js b/packages/editor/src/hooks/custom-sources-backwards-compatibility.js
@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { useEntityProp } from '@wordpress/core-data';
+import { useMemo, useCallback } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+
+const EMPTY_OBJECT = {};
+function useMetaAttributeSource( name, _attributes, _setAttributes ) {
+	const { attributes: attributeTypes = EMPTY_OBJECT } =
+		getBlockType( name ) || EMPTY_OBJECT;
+	let [ attributes, setAttributes ] = [ _attributes, _setAttributes ];
+
+	if ( Object.values( attributeTypes ).some( ( type ) => type.source === 'meta' ) ) {
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const [ meta, setMeta ] = useEntityProp( 'postType', 'post', 'meta' );
+
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		attributes = useMemo(
+			() => ( {
+				..._attributes,
+				...Object.keys( attributeTypes ).reduce( ( acc, key ) => {
+					if ( attributeTypes[ key ].source === 'meta' ) {
+						acc[ key ] = meta[ attributeTypes[ key ].meta ];
+					}
+					return acc;
+				}, {} ),
+			} ),
+			[ attributeTypes, meta, _attributes ]
+		);
+
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		setAttributes = useCallback(
+			( ...args ) => {
+				Object.keys( args[ 0 ] ).forEach( ( key ) => {
+					if ( attributeTypes[ key ].source === 'meta' ) {
+						setMeta( { [ attributeTypes[ key ].meta ]: args[ 0 ][ key ] } );
+					}
+				} );
+				return _setAttributes( ...args );
+			},
+			[ attributeTypes, setMeta, _setAttributes ]
+		);
+	}
+
+	return [ attributes, setAttributes ];
+}
+const withMetaAttributeSource = createHigherOrderComponent(
+	( BlockListBlock ) => ( { attributes, setAttributes, name, ...props } ) => {
+		[ attributes, setAttributes ] = useMetaAttributeSource(
+			name,
+			attributes,
+			setAttributes
+		);
+		return (
+			<BlockListBlock
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				name={ name }
+				{ ...props }
+			/>
+		);
+	},
+	'withMetaAttributeSource'
+);
+
+addFilter(
+	'editor.BlockListBlock',
+	'core/editor/custom-sources-backwards-compatibility/with-meta-attribute-source',
+	withMetaAttributeSource
+);
diff --git a/packages/editor/src/hooks/index.js b/packages/editor/src/hooks/index.js
@@ -1,4 +1,5 @@
 /**
  * Internal dependencies
  */
+import './custom-sources-backwards-compatibility';
 import './default-autocompleters';