From cc989c14311d85561401982445442ddafcfc3b1e Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 5 Jul 2024 17:05:04 +0400 Subject: [PATCH] Pattern Overrides: Memoize controls component --- .../editor/src/hooks/pattern-overrides.js | 134 ++++++++++-------- .../components/pattern-overrides-controls.js | 24 ++-- .../src/components/reset-overrides-control.js | 2 +- 3 files changed, 85 insertions(+), 75 deletions(-) diff --git a/packages/editor/src/hooks/pattern-overrides.js b/packages/editor/src/hooks/pattern-overrides.js index 426bc4d357f0bd..07310123c53dd4 100644 --- a/packages/editor/src/hooks/pattern-overrides.js +++ b/packages/editor/src/hooks/pattern-overrides.js @@ -6,6 +6,7 @@ import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; import { createHigherOrderComponent } from '@wordpress/compose'; import { useBlockEditingMode } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; +import { memo } from '@wordpress/element'; import { store as blocksStore } from '@wordpress/blocks'; /** @@ -25,6 +26,68 @@ const { PATTERN_SYNC_TYPES, } = unlock( patternsPrivateApis ); +// Split into a separate component to avoid a store subscription +// on every block. +const MemoizedControlsWithStoreSubscription = memo( + function ControlsWithStoreSubscription( props ) { + const blockEditingMode = useBlockEditingMode(); + const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect( + ( select ) => { + const { getBlockBindingsSource } = unlock( + select( blocksStore ) + ); + const { getCurrentPostType, getEditedPostAttribute } = + select( editorStore ); + + return { + // For editing link to the site editor if the theme and user permissions support it. + hasPatternOverridesSource: !! getBlockBindingsSource( + 'core/pattern-overrides' + ), + isEditingSyncedPattern: + getCurrentPostType() === PATTERN_TYPES.user && + getEditedPostAttribute( 'meta' ) + ?.wp_pattern_sync_status !== + PATTERN_SYNC_TYPES.unsynced && + getEditedPostAttribute( 'wp_pattern_sync_status' ) !== + PATTERN_SYNC_TYPES.unsynced, + }; + }, + [] + ); + + const bindings = props.metadata?.bindings; + const hasPatternBindings = + !! bindings && + Object.values( bindings ).some( + ( binding ) => binding.source === 'core/pattern-overrides' + ); + + const shouldShowPatternOverridesControls = + isEditingSyncedPattern && blockEditingMode === 'default'; + const shouldShowResetOverridesControl = + ! isEditingSyncedPattern && + !! props.metadata?.name && + blockEditingMode !== 'disabled' && + hasPatternBindings; + + if ( ! hasPatternOverridesSource ) { + return null; + } + + return ( + <> + { shouldShowPatternOverridesControls && ( + + ) } + { shouldShowResetOverridesControl && ( + + ) } + + ); + } +); + /** * Override the default edit UI to include a new block inspector control for * assigning a partial syncing controls to supported blocks in the pattern editor. @@ -41,9 +104,19 @@ const withPatternOverrideControls = createHigherOrderComponent( return ( <> - + { props.isSelected && isSupportedBlock && ( - + ) } { isSupportedBlock && } @@ -52,63 +125,6 @@ const withPatternOverrideControls = createHigherOrderComponent( 'withPatternOverrideControls' ); -// Split into a separate component to avoid a store subscription -// on every block. -function ControlsWithStoreSubscription( props ) { - const blockEditingMode = useBlockEditingMode(); - const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect( - ( select ) => { - const { getBlockBindingsSource } = unlock( select( blocksStore ) ); - const { getCurrentPostType, getEditedPostAttribute } = - select( editorStore ); - - return { - // For editing link to the site editor if the theme and user permissions support it. - hasPatternOverridesSource: !! getBlockBindingsSource( - 'core/pattern-overrides' - ), - isEditingSyncedPattern: - getCurrentPostType() === PATTERN_TYPES.user && - getEditedPostAttribute( 'meta' )?.wp_pattern_sync_status !== - PATTERN_SYNC_TYPES.unsynced && - getEditedPostAttribute( 'wp_pattern_sync_status' ) !== - PATTERN_SYNC_TYPES.unsynced, - }; - }, - [] - ); - - const bindings = props.attributes.metadata?.bindings; - const hasPatternBindings = - !! bindings && - Object.values( bindings ).some( - ( binding ) => binding.source === 'core/pattern-overrides' - ); - - const shouldShowPatternOverridesControls = - isEditingSyncedPattern && blockEditingMode === 'default'; - const shouldShowResetOverridesControl = - ! isEditingSyncedPattern && - !! props.attributes.metadata?.name && - blockEditingMode !== 'disabled' && - hasPatternBindings; - - if ( ! hasPatternOverridesSource ) { - return null; - } - - return ( - <> - { shouldShowPatternOverridesControls && ( - - ) } - { shouldShowResetOverridesControl && ( - - ) } - - ); -} - addFilter( 'editor.BlockEdit', 'core/editor/with-pattern-override-controls', diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js index 3a5ff3e0674a6e..1513acf49e178c 100644 --- a/packages/patterns/src/components/pattern-overrides-controls.js +++ b/packages/patterns/src/components/pattern-overrides-controls.js @@ -32,9 +32,9 @@ function addBindings( bindings ) { } function PatternOverridesControls( { - attributes, + metadata, setAttributes, - name: blockName, + hasUnsupportedAttributes, } ) { const controlId = useId(); const [ showAllowOverridesModal, setShowAllowOverridesModal ] = @@ -42,8 +42,8 @@ function PatternOverridesControls( { const [ showDisallowOverridesModal, setShowDisallowOverridesModal ] = useState( false ); - const hasName = !! attributes.metadata?.name; - const defaultBindings = attributes.metadata?.bindings?.__default; + const hasName = !! metadata?.name; + const defaultBindings = metadata?.bindings?.__default; const hasOverrides = hasName && defaultBindings?.source === PATTERN_OVERRIDES_BINDING_SOURCE; const isConnectedToOtherSources = @@ -51,13 +51,13 @@ function PatternOverridesControls( { defaultBindings.source !== PATTERN_OVERRIDES_BINDING_SOURCE; function updateBindings( isChecked, customName ) { - const prevBindings = attributes?.metadata?.bindings; + const prevBindings = metadata?.bindings; const updatedBindings = isChecked ? addBindings( prevBindings ) : removeBindings( prevBindings ); const updatedMetadata = { - ...attributes.metadata, + ...metadata, bindings: updatedBindings, }; @@ -75,12 +75,8 @@ function PatternOverridesControls( { return null; } - const hasUnsupportedImageAttributes = - blockName === 'core/image' && - ( !! attributes.caption?.length || !! attributes.href?.length ); - const helpText = - ! hasOverrides && hasUnsupportedImageAttributes + ! hasOverrides && hasUnsupportedAttributes ? __( `Overrides currently don't support image captions or links. Remove the caption or link first before enabling overrides.` ) @@ -108,9 +104,7 @@ function PatternOverridesControls( { setShowAllowOverridesModal( true ); } } } - disabled={ - ! hasOverrides && hasUnsupportedImageAttributes - } + disabled={ ! hasOverrides && hasUnsupportedAttributes } accessibleWhenDisabled > { hasOverrides @@ -122,7 +116,7 @@ function PatternOverridesControls( { { showAllowOverridesModal && ( setShowAllowOverridesModal( false ) } onSave={ ( newName ) => { updateBindings( true, newName ); diff --git a/packages/patterns/src/components/reset-overrides-control.js b/packages/patterns/src/components/reset-overrides-control.js index 41d47cd7d81642..0e199d34f8a865 100644 --- a/packages/patterns/src/components/reset-overrides-control.js +++ b/packages/patterns/src/components/reset-overrides-control.js @@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n'; const CONTENT = 'content'; export default function ResetOverridesControl( props ) { - const name = props.attributes.metadata?.name; + const name = props.metadata?.name; const registry = useRegistry(); const isOverriden = useSelect( ( select ) => {