From da68075221dd6a5f6d813ac1d3197187b64ad4f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 11 May 2023 20:59:32 +0300 Subject: [PATCH] Lock apis --- packages/block-editor/README.md | 4 - packages/block-editor/src/components/index.js | 1 - .../src/components/rich-text/index.js | 4 +- packages/block-editor/src/private-apis.js | 4 + packages/block-editor/src/store/reducer.js | 16 +-- packages/block-library/src/footnotes/edit.js | 109 +++++++++--------- 6 files changed, 68 insertions(+), 70 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 4571b7e48ca29..91aa34572648d 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -520,10 +520,6 @@ _Returns_ - `string`: returns the cssUnit value in a simple px format. -### getRichTextValues - -Undocumented declaration. - ### getSpacingPresetCssVar Converts a spacing preset into a custom value. diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 255a01ab14639..f113ad3b05f63 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -83,7 +83,6 @@ export { RichTextShortcut, RichTextToolbarButton, __unstableRichTextInputEvent, - getRichTextValues, } from './rich-text'; export { default as ToolSelector } from './tool-selector'; export { default as __experimentalUnitControl } from './unit-control'; diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 817696d28ff46..65e44c4eaad0a 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -465,14 +465,14 @@ function findContent( blocks, richTextValues = [] ) { for ( const block of blocks ) { if ( - block.type?.__unstableIsRichTextContent === + block?.type?.__unstableIsRichTextContent === ForwardedRichTextContainer.Content.__unstableIsRichTextContent ) { richTextValues.push( block.props.value ); continue; } - if ( block.props?.children ) { + if ( block?.props?.children ) { findContent( block.props.children, richTextValues ); } } diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index a7357311eedbe..6dbe369e8b6d9 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -4,6 +4,8 @@ import * as globalStyles from './components/global-styles'; import { ExperimentalBlockEditorProvider } from './components/provider'; import { lock } from './lock-unlock'; +import { horKey } from './store/reducer'; +import { getRichTextValues } from './components/rich-text'; import OffCanvasEditor from './components/off-canvas-editor'; import ResizableBoxPopover from './components/resizable-box-popover'; import { ComposedPrivateInserter as PrivateInserter } from './components/inserter'; @@ -19,6 +21,8 @@ export const privateApis = {}; lock( privateApis, { ...globalStyles, ExperimentalBlockEditorProvider, + horKey, + getRichTextValues, OffCanvasEditor, PrivateInserter, PrivateListView, diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 09b8a42556b4a..0f9a0bc7a00b8 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -745,16 +745,12 @@ const withResetControlledBlocks = ( reducer ) => ( state, action ) => { return reducer( state, action ); }; -const withBlockFilters = ( reducer ) => ( state, action ) => { - const newState = reducer( state, action ); - const filteredState = applyFilters( - 'blockEditor.higherOrderReducer', - newState, - reducer - ); +// The random number is used so it can't be used without the unlocker. +// eslint-disable-next-line no-restricted-syntax +export const horKey = 'blockEditor.higherOrderReducer' + Math.random(); - return filteredState; -}; +const withHorFilters = ( reducer ) => ( state, action ) => + applyFilters( horKey, reducer( state, action ), reducer ); /** * Reducer returning the blocks state. @@ -774,7 +770,7 @@ export const blocks = pipe( withPersistentBlockChange, withIgnoredBlockChange, withResetControlledBlocks, - withBlockFilters + withHorFilters )( { // The state is using a Map instead of a plain object for performance reasons. // You can run the "./test/performance.js" unit test to check the impact diff --git a/packages/block-library/src/footnotes/edit.js b/packages/block-library/src/footnotes/edit.js index c95336c7a06ea..1f8677011038c 100644 --- a/packages/block-library/src/footnotes/edit.js +++ b/packages/block-library/src/footnotes/edit.js @@ -4,76 +4,79 @@ import { RichText, useBlockProps, - getRichTextValues, + privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { addFilter } from '@wordpress/hooks'; import { createBlock } from '@wordpress/blocks'; import { useRefEffect } from '@wordpress/compose'; -addFilter( - 'blockEditor.higherOrderReducer', - 'core/footnotes', - ( state, reducer ) => { - const blocks = state.tree.get( '' )?.innerBlocks; +/** + * Internal dependencies + */ +import { unlock } from '../private-apis'; - if ( ! blocks ) return state; +const { horKey, getRichTextValues } = unlock( blockEditorPrivateApis ); - const content = getRichTextValues( blocks ).join( '' ); +addFilter( horKey, 'core/footnotes', ( state, reducer ) => { + const blocks = state.tree.get( '' )?.innerBlocks; - if ( ! content ) return state; - if ( content.indexOf( 'data-fn' ) === -1 ) return state; + if ( ! blocks ) return state; - // This can be avoided when - // https://github.com/WordPress/gutenberg/pull/43204 lands. We can then - // get the order directly from the rich text values. - const regex = /data-fn="([^"]+)"/g; - const newOrder = []; - let match; - while ( ( match = regex.exec( content ) ) !== null ) { - newOrder.push( match[ 1 ] ); - } + const content = getRichTextValues( blocks ).join( '' ); - const fnBlock = Array.from( state.byClientId.values() ).find( - ( block ) => block.name === 'core/footnotes' - ); + if ( ! content ) return state; + if ( content.indexOf( 'data-fn' ) === -1 ) return state; + + // This can be avoided when + // https://github.com/WordPress/gutenberg/pull/43204 lands. We can then + // get the order directly from the rich text values. + const regex = /data-fn="([^"]+)"/g; + const newOrder = []; + let match; + while ( ( match = regex.exec( content ) ) !== null ) { + newOrder.push( match[ 1 ] ); + } - const currentOrder = fnBlock - ? state.attributes - .get( fnBlock.clientId ) - .footnotes.map( ( fn ) => fn.id ) - : []; + const fnBlock = Array.from( state.byClientId.values() ).find( + ( block ) => block.name === 'core/footnotes' + ); - if ( currentOrder.join( '' ) === newOrder.join( '' ) ) return state; + const currentOrder = fnBlock + ? state.attributes + .get( fnBlock.clientId ) + .footnotes.map( ( fn ) => fn.id ) + : []; - if ( ! fnBlock ) { - const rootBlock = Array.from( state.byClientId.values() ).find( - ( block ) => block.name === 'core/post-content' - ); - return reducer( state, { - type: 'INSERT_BLOCKS', - blocks: [ createBlock( 'core/footnotes', { footnotes: [] } ) ], - rootClientId: rootBlock?.clientId, - } ); - } + if ( currentOrder.join( '' ) === newOrder.join( '' ) ) return state; + if ( ! fnBlock ) { + const rootBlock = Array.from( state.byClientId.values() ).find( + ( block ) => block.name === 'core/post-content' + ); return reducer( state, { - type: 'UPDATE_BLOCK_ATTRIBUTES', - clientIds: [ fnBlock.clientId ], - attributes: { - footnotes: newOrder.map( ( id ) => { - return ( - state.attributes - .get( fnBlock.clientId ) - .footnotes.find( ( fn ) => fn.id === id ) || { - id, - content: '', - } - ); - } ), - }, + type: 'INSERT_BLOCKS', + blocks: [ createBlock( 'core/footnotes', { footnotes: [] } ) ], + rootClientId: rootBlock?.clientId, } ); } -); + + return reducer( state, { + type: 'UPDATE_BLOCK_ATTRIBUTES', + clientIds: [ fnBlock.clientId ], + attributes: { + footnotes: newOrder.map( ( id ) => { + return ( + state.attributes + .get( fnBlock.clientId ) + .footnotes.find( ( fn ) => fn.id === id ) || { + id, + content: '', + } + ); + } ), + }, + } ); +} ); export default function FootnotesEdit( { attributes, setAttributes } ) { const ref = useRefEffect( ( node ) => {