From 9b3aa18bf05c504afc192e1ffc93adbc123d39c6 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Thu, 9 May 2024 14:36:35 +0200 Subject: [PATCH 01/18] Add initial pass at bindings panel in Block Inspector --- .../src/components/block-inspector/index.js | 13 +++++- .../inspector-controls/bindings-panel.js | 41 +++++++++++++++++++ 2 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 packages/block-editor/src/components/inspector-controls/bindings-panel.js diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 6da035a883ffb..541a5eb8a4b28 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -31,6 +31,7 @@ import BlockQuickNavigation from '../block-quick-navigation'; import { useBorderPanelLabel } from '../../hooks/border'; import { unlock } from '../../lock-unlock'; +import { BindingsPanel } from '../inspector-controls/bindings-panel'; function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) { const contentClientIds = useSelect( @@ -73,6 +74,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { selectedBlockClientId, blockType, topLevelLockedBlock, + block, } = useSelect( ( select ) => { const { getSelectedBlockClientId, @@ -80,6 +82,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { getBlockName, getContentLockingParent, getTemplateLock, + getBlock, } = unlock( select( blockEditorStore ) ); const _selectedBlockClientId = getSelectedBlockClientId(); @@ -99,6 +102,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { _selectedBlockName === 'core/block' ? _selectedBlockClientId : undefined ), + block: getBlock( _selectedBlockClientId ), }; }, [] ); @@ -199,6 +203,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { ); @@ -240,10 +245,12 @@ const AnimatedContainer = ( { ); }; -const BlockInspectorSingleBlock = ( { clientId, blockName } ) => { +const BlockInspectorSingleBlock = ( { clientId, blockName, block } ) => { const availableTabs = useInspectorControlsTabs( blockName ); const showTabs = availableTabs?.length > 1; - + const hasBindings = block?.attributes?.metadata?.bindings + ? Object.keys( block.attributes.metadata.bindings ).length > 0 + : false; const hasBlockStyles = useSelect( ( select ) => { const { getBlockStyles } = select( blocksStore ); @@ -269,6 +276,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => { clientId={ clientId } blockName={ blockName } tabs={ availableTabs } + block={ block } /> ) } { ! showTabs && ( @@ -282,6 +290,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => { ) } + { hasBindings && } { + const bindings = block?.attributes?.metadata?.bindings; + + const sources = useSelect( ( select ) => + unlock( select( blocksStore ) ).getAllBlockBindingsSources() + ); + + return ( + + + { Object.keys( bindings ).map( ( key, index ) => { + return ( + +
+ { key } :{ ' ' } + { sources[ bindings[ key ].source ].label } +
+ + ); + } ) } + + + ); +}; From 5551f32fc8b8e649ca8ed90d4ac28f33ba1da32a Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Thu, 9 May 2024 14:46:50 +0200 Subject: [PATCH 02/18] Add bindings panel to inspector controls with tabs --- .../inspector-controls-tabs/index.js | 6 +++- .../inspector-controls-tabs/settings-tab.js | 32 ++++++++++++------- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js index 76252bae975ae..ef128cf0a9464 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/index.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js @@ -23,6 +23,7 @@ export default function InspectorControlsTabs( { clientId, hasBlockStyles, tabs, + block, } ) { // The tabs panel will mount before fills are rendered to the list view // slot. This means the list view tab isn't initially included in the @@ -52,7 +53,10 @@ export default function InspectorControlsTabs( { ) ) } - + ( - <> - - - { showAdvancedControls && ( -
- -
- ) } - - -); +function SettingsTab( { showAdvancedControls = false, block } ) { + const hasBindings = block?.attributes?.metadata?.bindings + ? Object.keys( block.attributes.metadata.bindings ).length > 0 + : false; + + return ( + <> + { hasBindings && } + + + { showAdvancedControls && ( +
+ +
+ ) } + + + ); +} export default SettingsTab; From 14271739f9825f95867efa9cb6b089a7e6f1d265 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Thu, 9 May 2024 18:28:42 +0200 Subject: [PATCH 03/18] Revise classnames and structure, add styles --- .../index.js} | 11 +++++++---- .../src/components/block-bindings-panel/style.scss | 12 ++++++++++++ .../src/components/block-inspector/index.js | 2 +- .../inspector-controls-tabs/settings-tab.js | 2 +- packages/block-editor/src/style.scss | 1 + 5 files changed, 22 insertions(+), 6 deletions(-) rename packages/block-editor/src/components/{inspector-controls/bindings-panel.js => block-bindings-panel/index.js} (80%) create mode 100644 packages/block-editor/src/components/block-bindings-panel/style.scss diff --git a/packages/block-editor/src/components/inspector-controls/bindings-panel.js b/packages/block-editor/src/components/block-bindings-panel/index.js similarity index 80% rename from packages/block-editor/src/components/inspector-controls/bindings-panel.js rename to packages/block-editor/src/components/block-bindings-panel/index.js index 789307939c4ea..d9e446153d00a 100644 --- a/packages/block-editor/src/components/inspector-controls/bindings-panel.js +++ b/packages/block-editor/src/components/block-bindings-panel/index.js @@ -23,15 +23,18 @@ export const BindingsPanel = ( { block } ) => { ); return ( - + { Object.keys( bindings ).map( ( key, index ) => { return ( -
- { key } :{ ' ' } + { key } + { sources[ bindings[ key ].source ].label } -
+ ); } ) } diff --git a/packages/block-editor/src/components/block-bindings-panel/style.scss b/packages/block-editor/src/components/block-bindings-panel/style.scss new file mode 100644 index 0000000000000..0adaf2c20f9ab --- /dev/null +++ b/packages/block-editor/src/components/block-bindings-panel/style.scss @@ -0,0 +1,12 @@ +.components-panel__block-bindings-panel { + + .components-item { + display: flex; + justify-content: space-between; + + .components-item__block-bindings-source { + color: $gray-700; + } + } + +} diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 541a5eb8a4b28..cc49be6108fab 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -31,7 +31,7 @@ import BlockQuickNavigation from '../block-quick-navigation'; import { useBorderPanelLabel } from '../../hooks/border'; import { unlock } from '../../lock-unlock'; -import { BindingsPanel } from '../inspector-controls/bindings-panel'; +import { BindingsPanel } from '../block-bindings-panel'; function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) { const contentClientIds = useSelect( diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js index 9fb56ecbebc4b..1303edfb6bb13 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js @@ -5,7 +5,7 @@ import AdvancedControls from './advanced-controls-panel'; import PositionControls from './position-controls-panel'; import { default as InspectorControls } from '../inspector-controls'; import SettingsTabHint from './settings-tab-hint'; -import { BindingsPanel } from '../inspector-controls/bindings-panel'; +import { BindingsPanel } from '../block-bindings-panel'; function SettingsTab( { showAdvancedControls = false, block } ) { const hasBindings = block?.attributes?.metadata?.bindings diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 5080aa05718bb..b372bde64dea2 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -1,5 +1,6 @@ @import "./autocompleters/style.scss"; @import "./components/block-alignment-control/style.scss"; +@import "./components/block-bindings-panel/style.scss"; @import "./components/block-bindings-toolbar-indicator/style.scss"; @import "./components/block-canvas/style.scss"; @import "./components/block-icon/style.scss"; From ebc8e2666c4b2caaba85790ba2b864748ac26f97 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Thu, 9 May 2024 18:30:22 +0200 Subject: [PATCH 04/18] Rename BindingsPanel to BlockBindingsPanel --- .../block-editor/src/components/block-bindings-panel/index.js | 2 +- packages/block-editor/src/components/block-inspector/index.js | 4 ++-- .../src/components/inspector-controls-tabs/settings-tab.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-bindings-panel/index.js b/packages/block-editor/src/components/block-bindings-panel/index.js index d9e446153d00a..36b3799474d68 100644 --- a/packages/block-editor/src/components/block-bindings-panel/index.js +++ b/packages/block-editor/src/components/block-bindings-panel/index.js @@ -15,7 +15,7 @@ import { useSelect } from '@wordpress/data'; */ import { unlock } from '../../lock-unlock'; -export const BindingsPanel = ( { block } ) => { +export const BlockBindingsPanel = ( { block } ) => { const bindings = block?.attributes?.metadata?.bindings; const sources = useSelect( ( select ) => diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index cc49be6108fab..02a9a8cbcd235 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -31,7 +31,7 @@ import BlockQuickNavigation from '../block-quick-navigation'; import { useBorderPanelLabel } from '../../hooks/border'; import { unlock } from '../../lock-unlock'; -import { BindingsPanel } from '../block-bindings-panel'; +import { BlockBindingsPanel } from '../block-bindings-panel'; function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) { const contentClientIds = useSelect( @@ -290,7 +290,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName, block } ) => { ) } - { hasBindings && } + { hasBindings && } - { hasBindings && } + { hasBindings && } { showAdvancedControls && ( From 443c1b6b4fdb3fc82277aafc60dc3a77f1bfc1fd Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 14 May 2024 12:30:12 +0200 Subject: [PATCH 05/18] Include Bindings Panel with hooks instead --- .../components/block-bindings-panel/index.js | 44 ----------- .../src/components/block-inspector/index.js | 5 -- .../inspector-controls-tabs/settings-tab.js | 8 +- .../src/hooks/block-bindings-panel.js | 77 +++++++++++++++++++ .../block-bindings-panel.scss} | 0 packages/block-editor/src/hooks/index.js | 2 + packages/block-editor/src/style.scss | 2 +- 7 files changed, 81 insertions(+), 57 deletions(-) delete mode 100644 packages/block-editor/src/components/block-bindings-panel/index.js create mode 100644 packages/block-editor/src/hooks/block-bindings-panel.js rename packages/block-editor/src/{components/block-bindings-panel/style.scss => hooks/block-bindings-panel.scss} (100%) diff --git a/packages/block-editor/src/components/block-bindings-panel/index.js b/packages/block-editor/src/components/block-bindings-panel/index.js deleted file mode 100644 index 36b3799474d68..0000000000000 --- a/packages/block-editor/src/components/block-bindings-panel/index.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { store as blocksStore } from '@wordpress/blocks'; -import { - PanelBody, - __experimentalItemGroup as ItemGroup, - __experimentalItem as Item, -} from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; - -export const BlockBindingsPanel = ( { block } ) => { - const bindings = block?.attributes?.metadata?.bindings; - - const sources = useSelect( ( select ) => - unlock( select( blocksStore ) ).getAllBlockBindingsSources() - ); - - return ( - - - { Object.keys( bindings ).map( ( key, index ) => { - return ( - - { key } - - { sources[ bindings[ key ].source ].label } - - - ); - } ) } - - - ); -}; diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 02a9a8cbcd235..dc2a5e31c1bd9 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -31,7 +31,6 @@ import BlockQuickNavigation from '../block-quick-navigation'; import { useBorderPanelLabel } from '../../hooks/border'; import { unlock } from '../../lock-unlock'; -import { BlockBindingsPanel } from '../block-bindings-panel'; function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) { const contentClientIds = useSelect( @@ -248,9 +247,6 @@ const AnimatedContainer = ( { const BlockInspectorSingleBlock = ( { clientId, blockName, block } ) => { const availableTabs = useInspectorControlsTabs( blockName ); const showTabs = availableTabs?.length > 1; - const hasBindings = block?.attributes?.metadata?.bindings - ? Object.keys( block.attributes.metadata.bindings ).length > 0 - : false; const hasBlockStyles = useSelect( ( select ) => { const { getBlockStyles } = select( blocksStore ); @@ -290,7 +286,6 @@ const BlockInspectorSingleBlock = ( { clientId, blockName, block } ) => { ) } - { hasBindings && } 0 - : false; +function SettingsTab( { showAdvancedControls = false } ) { return ( <> - { hasBindings && } { showAdvancedControls && ( diff --git a/packages/block-editor/src/hooks/block-bindings-panel.js b/packages/block-editor/src/hooks/block-bindings-panel.js new file mode 100644 index 0000000000000..f7d5e4cb30702 --- /dev/null +++ b/packages/block-editor/src/hooks/block-bindings-panel.js @@ -0,0 +1,77 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { store as blocksStore } from '@wordpress/blocks'; +import { + PanelBody, + __experimentalItemGroup as ItemGroup, + __experimentalItem as Item, +} from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../store'; +import { unlock } from '../lock-unlock'; +import InspectorControls from '../components/inspector-controls'; + +export const BlockBindingsPanel = () => { + const { block } = useSelect( ( select ) => { + const { getSelectedBlockClientId, getBlock } = unlock( + select( blockEditorStore ) + ); + + const _selectedBlockClientId = getSelectedBlockClientId(); + + return { + selectedBlockClientId: _selectedBlockClientId, + block: getBlock( _selectedBlockClientId ), + }; + }, [] ); + + const bindings = block?.attributes?.metadata?.bindings; + + const sources = useSelect( ( select ) => + unlock( select( blocksStore ) ).getAllBlockBindingsSources() + ); + + const hasBindings = block?.attributes?.metadata?.bindings + ? Object.keys( block.attributes.metadata.bindings ).length > 0 + : false; + + if ( ! hasBindings ) { + return null; + } + + return ( + + + + { Object.keys( bindings ).map( ( key, index ) => { + return ( + + { key } + + { sources[ bindings[ key ].source ].label } + + + ); + } ) } + + + + ); +}; + +export default { + edit: BlockBindingsPanel, + attributeKeys: [ 'metadata' ], + hasSupport() { + return true; + }, +}; diff --git a/packages/block-editor/src/components/block-bindings-panel/style.scss b/packages/block-editor/src/hooks/block-bindings-panel.scss similarity index 100% rename from packages/block-editor/src/components/block-bindings-panel/style.scss rename to packages/block-editor/src/hooks/block-bindings-panel.scss diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index ec5cf29b49c5a..f92883c79a37f 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -29,11 +29,13 @@ import childLayout from './layout-child'; import contentLockUI from './content-lock-ui'; import './metadata'; import blockHooks from './block-hooks'; +import blockBindingsPanel from './block-bindings-panel'; import './block-renaming'; import './use-bindings-attributes'; createBlockEditFilter( [ + blockBindingsPanel, align, textAlign, anchor, diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index b372bde64dea2..0d48e09fe1ad5 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -1,6 +1,5 @@ @import "./autocompleters/style.scss"; @import "./components/block-alignment-control/style.scss"; -@import "./components/block-bindings-panel/style.scss"; @import "./components/block-bindings-toolbar-indicator/style.scss"; @import "./components/block-canvas/style.scss"; @import "./components/block-icon/style.scss"; @@ -47,6 +46,7 @@ @import "./components/tool-selector/style.scss"; @import "./components/url-input/style.scss"; @import "./components/url-popover/style.scss"; +@import "./hooks/block-bindings-panel.scss"; @import "./hooks/block-hooks.scss"; @import "./hooks/border.scss"; @import "./hooks/color.scss"; From 0485eebdbea9de331102c3f55618cd551bfc6d1e Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 14 May 2024 12:45:26 +0200 Subject: [PATCH 06/18] Revert extraneous changes --- .../src/components/block-inspector/index.js | 7 +---- .../inspector-controls-tabs/index.js | 6 +---- .../inspector-controls-tabs/settings-tab.js | 26 +++++++++---------- 3 files changed, 14 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index dc2a5e31c1bd9..b3fccf280ab10 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -73,7 +73,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { selectedBlockClientId, blockType, topLevelLockedBlock, - block, } = useSelect( ( select ) => { const { getSelectedBlockClientId, @@ -81,7 +80,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { getBlockName, getContentLockingParent, getTemplateLock, - getBlock, } = unlock( select( blockEditorStore ) ); const _selectedBlockClientId = getSelectedBlockClientId(); @@ -101,7 +99,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { _selectedBlockName === 'core/block' ? _selectedBlockClientId : undefined ), - block: getBlock( _selectedBlockClientId ), }; }, [] ); @@ -202,7 +199,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { ); @@ -244,7 +240,7 @@ const AnimatedContainer = ( { ); }; -const BlockInspectorSingleBlock = ( { clientId, blockName, block } ) => { +const BlockInspectorSingleBlock = ( { clientId, blockName } ) => { const availableTabs = useInspectorControlsTabs( blockName ); const showTabs = availableTabs?.length > 1; const hasBlockStyles = useSelect( @@ -272,7 +268,6 @@ const BlockInspectorSingleBlock = ( { clientId, blockName, block } ) => { clientId={ clientId } blockName={ blockName } tabs={ availableTabs } - block={ block } /> ) } { ! showTabs && ( diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js index ef128cf0a9464..76252bae975ae 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/index.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js @@ -23,7 +23,6 @@ export default function InspectorControlsTabs( { clientId, hasBlockStyles, tabs, - block, } ) { // The tabs panel will mount before fills are rendered to the list view // slot. This means the list view tab isn't initially included in the @@ -53,10 +52,7 @@ export default function InspectorControlsTabs( { ) ) } - + - - - { showAdvancedControls && ( -
- -
- ) } - - - ); -} +const SettingsTab = ( { showAdvancedControls = false } ) => ( + <> + + + { showAdvancedControls && ( +
+ +
+ ) } + + +); export default SettingsTab; From cc01bb7aa4e34dfd90b5a13b359e75a418921b8d Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 14 May 2024 12:47:12 +0200 Subject: [PATCH 07/18] Revert deletion of space --- packages/block-editor/src/components/block-inspector/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index b3fccf280ab10..6da035a883ffb 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -243,6 +243,7 @@ const AnimatedContainer = ( { const BlockInspectorSingleBlock = ( { clientId, blockName } ) => { const availableTabs = useInspectorControlsTabs( blockName ); const showTabs = availableTabs?.length > 1; + const hasBlockStyles = useSelect( ( select ) => { const { getBlockStyles } = select( blocksStore ); From 140d6bd8231e979468a28f17739cefb61e65192d Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 14 May 2024 21:05:00 +0200 Subject: [PATCH 08/18] Remove unnecessary unlock --- packages/block-editor/src/hooks/block-bindings-panel.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings-panel.js b/packages/block-editor/src/hooks/block-bindings-panel.js index f7d5e4cb30702..d626eb107d1b7 100644 --- a/packages/block-editor/src/hooks/block-bindings-panel.js +++ b/packages/block-editor/src/hooks/block-bindings-panel.js @@ -19,10 +19,8 @@ import InspectorControls from '../components/inspector-controls'; export const BlockBindingsPanel = () => { const { block } = useSelect( ( select ) => { - const { getSelectedBlockClientId, getBlock } = unlock( - select( blockEditorStore ) - ); - + const { getSelectedBlockClientId, getBlock } = + select( blockEditorStore ); const _selectedBlockClientId = getSelectedBlockClientId(); return { From b8bbfff2c39a9d9bbd59f0b12cc219dcbaa50978 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 14 May 2024 21:06:23 +0200 Subject: [PATCH 09/18] Remove unused declaration --- packages/block-editor/src/hooks/block-bindings-panel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/hooks/block-bindings-panel.js b/packages/block-editor/src/hooks/block-bindings-panel.js index d626eb107d1b7..cb4c690a49302 100644 --- a/packages/block-editor/src/hooks/block-bindings-panel.js +++ b/packages/block-editor/src/hooks/block-bindings-panel.js @@ -24,7 +24,6 @@ export const BlockBindingsPanel = () => { const _selectedBlockClientId = getSelectedBlockClientId(); return { - selectedBlockClientId: _selectedBlockClientId, block: getBlock( _selectedBlockClientId ), }; }, [] ); From 61e7b7435d7d60f81e7184ff3939b5ded72ee379 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 14 May 2024 21:13:06 +0200 Subject: [PATCH 10/18] Simplify check for bindings --- .../block-editor/src/hooks/block-bindings-panel.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings-panel.js b/packages/block-editor/src/hooks/block-bindings-panel.js index cb4c690a49302..9f301426f0581 100644 --- a/packages/block-editor/src/hooks/block-bindings-panel.js +++ b/packages/block-editor/src/hooks/block-bindings-panel.js @@ -18,27 +18,22 @@ import { unlock } from '../lock-unlock'; import InspectorControls from '../components/inspector-controls'; export const BlockBindingsPanel = () => { - const { block } = useSelect( ( select ) => { + const { bindings } = useSelect( ( select ) => { const { getSelectedBlockClientId, getBlock } = select( blockEditorStore ); const _selectedBlockClientId = getSelectedBlockClientId(); return { - block: getBlock( _selectedBlockClientId ), + bindings: getBlock( _selectedBlockClientId ).attributes?.metadata + ?.bindings, }; }, [] ); - const bindings = block?.attributes?.metadata?.bindings; - const sources = useSelect( ( select ) => unlock( select( blocksStore ) ).getAllBlockBindingsSources() ); - const hasBindings = block?.attributes?.metadata?.bindings - ? Object.keys( block.attributes.metadata.bindings ).length > 0 - : false; - - if ( ! hasBindings ) { + if ( ! bindings ) { return null; } From 39c43f593fe4f8366528e3038a85a90d39845bc0 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 14 May 2024 21:25:06 +0200 Subject: [PATCH 11/18] Rename file; update imports --- .../src/hooks/{block-bindings-panel.js => block-bindings.js} | 0 .../hooks/{block-bindings-panel.scss => block-bindings.scss} | 0 packages/block-editor/src/hooks/index.js | 2 +- packages/block-editor/src/style.scss | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) rename packages/block-editor/src/hooks/{block-bindings-panel.js => block-bindings.js} (100%) rename packages/block-editor/src/hooks/{block-bindings-panel.scss => block-bindings.scss} (100%) diff --git a/packages/block-editor/src/hooks/block-bindings-panel.js b/packages/block-editor/src/hooks/block-bindings.js similarity index 100% rename from packages/block-editor/src/hooks/block-bindings-panel.js rename to packages/block-editor/src/hooks/block-bindings.js diff --git a/packages/block-editor/src/hooks/block-bindings-panel.scss b/packages/block-editor/src/hooks/block-bindings.scss similarity index 100% rename from packages/block-editor/src/hooks/block-bindings-panel.scss rename to packages/block-editor/src/hooks/block-bindings.scss diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index f92883c79a37f..4a59c2faa0073 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -29,7 +29,7 @@ import childLayout from './layout-child'; import contentLockUI from './content-lock-ui'; import './metadata'; import blockHooks from './block-hooks'; -import blockBindingsPanel from './block-bindings-panel'; +import blockBindingsPanel from './block-bindings'; import './block-renaming'; import './use-bindings-attributes'; diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 0d48e09fe1ad5..484d79e8db9fa 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -46,7 +46,7 @@ @import "./components/tool-selector/style.scss"; @import "./components/url-input/style.scss"; @import "./components/url-popover/style.scss"; -@import "./hooks/block-bindings-panel.scss"; +@import "./hooks/block-bindings.scss"; @import "./hooks/block-hooks.scss"; @import "./hooks/border.scss"; @import "./hooks/color.scss"; From 3771101bc6ad647e9d32eb33b6d6d00a6007abc4 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 15 May 2024 22:45:55 +0200 Subject: [PATCH 12/18] Merge useSelect calls --- packages/block-editor/src/hooks/block-bindings.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index 9f301426f0581..d5604ad2f9070 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -18,21 +18,21 @@ import { unlock } from '../lock-unlock'; import InspectorControls from '../components/inspector-controls'; export const BlockBindingsPanel = () => { - const { bindings } = useSelect( ( select ) => { + const { bindings, sources } = useSelect( ( select ) => { const { getSelectedBlockClientId, getBlock } = select( blockEditorStore ); const _selectedBlockClientId = getSelectedBlockClientId(); + const _sources = unlock( + select( blocksStore ) + ).getAllBlockBindingsSources(); return { bindings: getBlock( _selectedBlockClientId ).attributes?.metadata ?.bindings, + sources: _sources, }; }, [] ); - const sources = useSelect( ( select ) => - unlock( select( blocksStore ) ).getAllBlockBindingsSources() - ); - if ( ! bindings ) { return null; } From f341e605d7e6e4d652ac9c939a2696fc50ae4ca7 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Thu, 16 May 2024 02:22:54 +0200 Subject: [PATCH 13/18] Use block context to look up bindings --- packages/block-editor/src/hooks/block-bindings.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index d5604ad2f9070..aa027d8792580 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -13,22 +13,23 @@ import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import { store as blockEditorStore } from '../store'; import { unlock } from '../lock-unlock'; import InspectorControls from '../components/inspector-controls'; +import { + blockBindingsKey, + useBlockEditContext, +} from '../components/block-edit/context'; export const BlockBindingsPanel = () => { - const { bindings, sources } = useSelect( ( select ) => { - const { getSelectedBlockClientId, getBlock } = - select( blockEditorStore ); - const _selectedBlockClientId = getSelectedBlockClientId(); + const blockEditContext = useBlockEditContext(); + const bindings = blockEditContext[ blockBindingsKey ]; + + const { sources } = useSelect( ( select ) => { const _sources = unlock( select( blocksStore ) ).getAllBlockBindingsSources(); return { - bindings: getBlock( _selectedBlockClientId ).attributes?.metadata - ?.bindings, sources: _sources, }; }, [] ); From 7aee321b4fd27d6b0b58ba9009430696be587ec2 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 17 May 2024 04:30:12 +0200 Subject: [PATCH 14/18] Add handling for unknown sources --- packages/block-editor/src/hooks/block-bindings.js | 8 +++++++- packages/block-editor/src/hooks/block-bindings.scss | 4 ++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index aa027d8792580..113b86bb4a30f 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -50,7 +50,13 @@ export const BlockBindingsPanel = () => { { key } - { sources[ bindings[ key ].source ].label } + { sources[ bindings[ key ].source ] ? ( + sources[ bindings[ key ].source ].label + ) : ( + + Error: Unknown Source + + ) } ); diff --git a/packages/block-editor/src/hooks/block-bindings.scss b/packages/block-editor/src/hooks/block-bindings.scss index 0adaf2c20f9ab..2dabe7597b621 100644 --- a/packages/block-editor/src/hooks/block-bindings.scss +++ b/packages/block-editor/src/hooks/block-bindings.scss @@ -6,6 +6,10 @@ .components-item__block-bindings-source { color: $gray-700; + + .error { + color: $alert-red; + } } } From 6492787aa3d0f47b69c3088493a29e015bba8c4c Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 17 May 2024 04:39:15 +0200 Subject: [PATCH 15/18] Remove unnecessary use of index --- packages/block-editor/src/hooks/block-bindings.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index 113b86bb4a30f..eabfa458be169 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -45,9 +45,9 @@ export const BlockBindingsPanel = () => { className="components-panel__block-bindings-panel" > - { Object.keys( bindings ).map( ( key, index ) => { + { Object.keys( bindings ).map( ( key ) => { return ( - + { key } { sources[ bindings[ key ].source ] ? ( From 22086a5aa4f388656fd11867933c40a85bfef522 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 17 May 2024 04:50:41 +0200 Subject: [PATCH 16/18] Simplify access of bindings --- packages/block-editor/src/hooks/block-bindings.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index eabfa458be169..df26babdc0d2d 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -15,15 +15,9 @@ import { useSelect } from '@wordpress/data'; */ import { unlock } from '../lock-unlock'; import InspectorControls from '../components/inspector-controls'; -import { - blockBindingsKey, - useBlockEditContext, -} from '../components/block-edit/context'; - -export const BlockBindingsPanel = () => { - const blockEditContext = useBlockEditContext(); - const bindings = blockEditContext[ blockBindingsKey ]; +export const BlockBindingsPanel = ( { metadata } ) => { + const { bindings } = metadata || {}; const { sources } = useSelect( ( select ) => { const _sources = unlock( select( blocksStore ) From c664535ee10365e1704251dabaf32db06de86c8a Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 17 May 2024 05:42:00 +0200 Subject: [PATCH 17/18] Use existing HStack instead of CSS --- .../block-editor/src/hooks/block-bindings.js | 24 +++++++++++-------- .../src/hooks/block-bindings.scss | 16 ++++--------- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index df26babdc0d2d..65b2d5835ea37 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n'; import { store as blocksStore } from '@wordpress/blocks'; import { PanelBody, + __experimentalHStack as HStack, __experimentalItemGroup as ItemGroup, __experimentalItem as Item, } from '@wordpress/components'; @@ -42,16 +43,19 @@ export const BlockBindingsPanel = ( { metadata } ) => { { Object.keys( bindings ).map( ( key ) => { return ( - { key } - - { sources[ bindings[ key ].source ] ? ( - sources[ bindings[ key ].source ].label - ) : ( - - Error: Unknown Source - - ) } - + + { key } + + { sources[ bindings[ key ].source ] ? ( + sources[ bindings[ key ].source ] + .label + ) : ( + + Error: Unknown Source + + ) } + + ); } ) } diff --git a/packages/block-editor/src/hooks/block-bindings.scss b/packages/block-editor/src/hooks/block-bindings.scss index 2dabe7597b621..d48402bf48236 100644 --- a/packages/block-editor/src/hooks/block-bindings.scss +++ b/packages/block-editor/src/hooks/block-bindings.scss @@ -1,16 +1,8 @@ -.components-panel__block-bindings-panel { +.components-panel__block-bindings-panel .components-item__block-bindings-source { - .components-item { - display: flex; - justify-content: space-between; + color: $gray-700; - .components-item__block-bindings-source { - color: $gray-700; - - .error { - color: $alert-red; - } - } + .error { + color: $alert-red; } - } From 1c74ddc5f411b7749cc8ee38ec592b3f38b60666 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 17 May 2024 14:29:56 +0200 Subject: [PATCH 18/18] Remove error state; show source name if label is undefined --- packages/block-editor/src/hooks/block-bindings.js | 12 ++++-------- packages/block-editor/src/hooks/block-bindings.scss | 5 ----- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index 65b2d5835ea37..72ac01a099e6d 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -46,14 +46,10 @@ export const BlockBindingsPanel = ( { metadata } ) => { { key } - { sources[ bindings[ key ].source ] ? ( - sources[ bindings[ key ].source ] - .label - ) : ( - - Error: Unknown Source - - ) } + { sources[ bindings[ key ].source ] + ? sources[ bindings[ key ].source ] + .label + : bindings[ key ].source } diff --git a/packages/block-editor/src/hooks/block-bindings.scss b/packages/block-editor/src/hooks/block-bindings.scss index d48402bf48236..fd46674ad1142 100644 --- a/packages/block-editor/src/hooks/block-bindings.scss +++ b/packages/block-editor/src/hooks/block-bindings.scss @@ -1,8 +1,3 @@ .components-panel__block-bindings-panel .components-item__block-bindings-source { - color: $gray-700; - - .error { - color: $alert-red; - } }