From c48487453978609a3b488c65b4b346a9ad260183 Mon Sep 17 00:00:00 2001 From: epiqueras Date: Fri, 23 Aug 2019 10:32:47 -0700 Subject: [PATCH] Block Editor: Replace dependency on Core Data with an Editor filter. --- package-lock.json | 1 - packages/block-editor/package.json | 1 - .../src/components/block-list/block.js | 61 +--------------- .../custom-sources-backwards-compatibility.js | 73 +++++++++++++++++++ packages/editor/src/hooks/index.js | 1 + 5 files changed, 75 insertions(+), 62 deletions(-) create mode 100644 packages/editor/src/hooks/custom-sources-backwards-compatibility.js diff --git a/package-lock.json b/package-lock.json index ab48f3cac906c3..63d5e0ce68e6e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4735,7 +4735,6 @@ "@wordpress/blocks": "file:packages/blocks", "@wordpress/components": "file:packages/components", "@wordpress/compose": "file:packages/compose", - "@wordpress/core-data": "file:packages/core-data", "@wordpress/data": "file:packages/data", "@wordpress/deprecated": "file:packages/deprecated", "@wordpress/dom": "file:packages/dom", diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index e6d9f9e978ab58..ac30512879d26d 100644 --- 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 index c967fda8a29b55..076fe6d9bc9904 100644 --- 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, @@ -60,51 +52,6 @@ import Inserter from '../inserter'; 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. @@ -155,12 +102,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 new file mode 100644 index 00000000000000..0e6173b99382d6 --- /dev/null +++ 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 ( + + ); + }, + '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 index 2c8a61d9802521..6e0934d63c0cfa 100644 --- 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';