From df3d1f13fb98749a12430967b356712a723996d4 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Aug 2024 18:16:14 +0200 Subject: [PATCH 01/15] Remove block bindings UI experiment --- lib/experimental/editor-settings.php | 3 --- lib/experiments-page.php | 12 ------------ 2 files changed, 15 deletions(-) diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index c6bd99a18bf4c..cb9fddbb056a1 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -34,9 +34,6 @@ function gutenberg_enable_experiments() { if ( $gutenberg_experiments && array_key_exists( 'gutenberg-quick-edit-dataviews', $gutenberg_experiments ) ) { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalQuickEditDataViews = true', 'before' ); } - if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-bindings-ui', $gutenberg_experiments ) ) { - wp_add_inline_script( 'wp-block-editor', 'window.__experimentalBlockBindingsUI = true', 'before' ); - } if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-processing', $gutenberg_experiments ) ) { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' ); } diff --git a/lib/experiments-page.php b/lib/experiments-page.php index f76dcdca7d18c..cccbab263c44f 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -175,18 +175,6 @@ function gutenberg_initialize_experiments_settings() { ) ); - add_settings_field( - 'gutenberg-block-bindings-ui', - __( 'UI to create block bindings', 'gutenberg' ), - 'gutenberg_display_experiment_field', - 'gutenberg-experiments', - 'gutenberg_experiments_section', - array( - 'label' => __( 'Add UI to create and update block bindings in block inspector controls.', 'gutenberg' ), - 'id' => 'gutenberg-block-bindings-ui', - ) - ); - add_settings_field( 'gutenberg-media-processing', __( 'Client-side media processing', 'gutenberg' ), From bd547c90bc096bf70287ad15d5ecec2a41abae0b Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Aug 2024 18:16:14 +0200 Subject: [PATCH 02/15] Use block settings preferences --- .../block-editor/src/hooks/block-bindings.js | 12 ++++++-- .../src/components/preferences-modal/index.js | 12 ++++++++ .../editor/various/block-bindings.spec.js | 30 +++++++++---------- 3 files changed, 37 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index 961a34f6f858f..e160f06a0037b 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -16,6 +16,7 @@ import { import { useRegistry } from '@wordpress/data'; import { useContext, Fragment } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -201,6 +202,14 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { } } ); + const { showBlockBindingsUI } = useSelect( ( select ) => { + const { get } = select( preferencesStore ); + + return { + showBlockBindingsUI: get( 'core', 'showBlockBindingsUI' ), + }; + }, [] ); + if ( ! bindableAttributes || bindableAttributes.length === 0 ) { return null; } @@ -238,8 +247,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { // Lock the UI when the experiment is not enabled or there are no fields to connect to. const readOnly = - ! window.__experimentalBlockBindingsUI || - ! Object.keys( fieldsList ).length; + ! showBlockBindingsUI || ! Object.keys( fieldsList ).length; if ( readOnly && Object.keys( filteredBindings ).length === 0 ) { return null; diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index f3378d76d994b..b5a69614c1053 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -253,6 +253,18 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { label={ __( 'Show most used blocks' ) } /> + + + { editor, page, } ) => { - // Activate the block bindings UI experiment. - await page.evaluate( () => { - window.__experimentalBlockBindingsUI = true; + // Activate the block bindings UI preference. + await editor.setPreferences( 'core', { + showBlockBindingsUI: true, } ); await editor.insertBlock( { @@ -1417,9 +1417,9 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI experiment. - await page.evaluate( () => { - window.__experimentalBlockBindingsUI = true; + // Activate the block bindings UI preference. + await editor.setPreferences( 'core', { + showBlockBindingsUI: true, } ); await editor.insertBlock( { @@ -1539,9 +1539,9 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI experiment. - await page.evaluate( () => { - window.__experimentalBlockBindingsUI = true; + // Activate the block bindings UI preference. + await editor.setPreferences( 'core', { + showBlockBindingsUI: true, } ); await editor.insertBlock( { @@ -1739,9 +1739,9 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI experiment. - await page.evaluate( () => { - window.__experimentalBlockBindingsUI = true; + // Activate the block bindings UI preference. + await editor.setPreferences( 'core', { + showBlockBindingsUI: true, } ); await editor.insertBlock( { @@ -2074,9 +2074,9 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI experiment. - await page.evaluate( () => { - window.__experimentalBlockBindingsUI = true; + // Activate the block bindings UI preference. + await editor.setPreferences( 'core', { + showBlockBindingsUI: true, } ); await editor.insertBlock( { From ec049f972400f79754e0037aae3ff4d8e58a3980 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Aug 2024 18:16:14 +0200 Subject: [PATCH 03/15] Add "bindings" group --- .../block-editor/src/components/block-inspector/index.js | 1 + .../src/components/inspector-controls-tabs/settings-tab.js | 1 + .../inspector-controls-tabs/use-inspector-controls-tabs.js | 7 +++++-- .../src/components/inspector-controls/groups.js | 2 ++ packages/block-editor/src/hooks/block-bindings.js | 2 +- 5 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 9daf29f8043bb..9c610e9e8c2d4 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -307,6 +307,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => { /> +
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 ec34035b754a9..ea2f45114bf9c 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 @@ -9,6 +9,7 @@ const SettingsTab = ( { showAdvancedControls = false } ) => ( <> + { showAdvancedControls && (
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js index ff68be82a829f..6a80d47f02481 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js @@ -32,6 +32,7 @@ function getShowTabs( blockName, tabSettings = {} ) { export default function useInspectorControlsTabs( blockName ) { const tabs = []; const { + bindings: bindingsGroup, border: borderGroup, color: colorGroup, default: defaultGroup, @@ -64,8 +65,10 @@ export default function useInspectorControlsTabs( blockName ) { // (i.e. both list view and styles), check only the default and position // InspectorControls slots. If we have multiple tabs, we'll need to check // the advanced controls slot as well to ensure they are rendered. - const advancedFills = - useSlotFills( InspectorAdvancedControls.slotName ) || []; + const advancedFills = [ + ...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ), + ...( useSlotFills( bindingsGroup.Slot.__unstableName ) || [] ), + ]; const settingsFills = [ ...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ), diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js index 9ca1a72b9918a..34ec49a5e1cb4 100644 --- a/packages/block-editor/src/components/inspector-controls/groups.js +++ b/packages/block-editor/src/components/inspector-controls/groups.js @@ -5,6 +5,7 @@ import { createSlotFill } from '@wordpress/components'; const InspectorControlsDefault = createSlotFill( 'InspectorControls' ); const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' ); +const InspectorControlsBindings = createSlotFill( 'InspectorControlsBindings' ); const InspectorControlsBackground = createSlotFill( 'InspectorControlsBackground' ); @@ -26,6 +27,7 @@ const groups = { default: InspectorControlsDefault, advanced: InspectorControlsAdvanced, background: InspectorControlsBackground, + bindings: InspectorControlsBindings, border: InspectorControlsBorder, color: InspectorControlsColor, dimensions: InspectorControlsDimensions, diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index e160f06a0037b..9b55145baa57b 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -254,7 +254,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { } return ( - + { From 44105366cc335fb9451d9cb07007e2783c0f7746 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Aug 2024 18:16:14 +0200 Subject: [PATCH 04/15] Make changes to the helper text --- packages/block-editor/src/hooks/block-bindings.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index 9b55145baa57b..31f56bc5c3a01 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -276,9 +276,13 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { /> ) } - - { __( 'Attributes connected to various sources.' ) } - + + + { __( + 'Attributes connected to custom fields or other dynamic data.' + ) } + + ); From 901e9609e96256fb20a51e8472c19e46c8b82e44 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Aug 2024 18:16:14 +0200 Subject: [PATCH 05/15] Fix tests --- .../editor/various/block-bindings.spec.js | 21 +++---------------- 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js index a81546a32455b..45347a6054c27 100644 --- a/test/e2e/specs/editor/various/block-bindings.spec.js +++ b/test/e2e/specs/editor/various/block-bindings.spec.js @@ -1402,12 +1402,7 @@ test.describe( 'Block bindings', () => { await editor.insertBlock( { name: 'core/paragraph', } ); - await page - .getByRole( 'tabpanel', { - name: 'Settings', - } ) - .getByLabel( 'Attributes options' ) - .click(); + await page.getByLabel( 'Attributes options' ).click(); const contentAttribute = page.getByRole( 'menuitemcheckbox', { name: 'Show content', } ); @@ -1436,12 +1431,7 @@ test.describe( 'Block bindings', () => { }, }, } ); - await page - .getByRole( 'tabpanel', { - name: 'Settings', - } ) - .getByRole( 'button', { name: 'content' } ) - .click(); + await page.getByRole( 'button', { name: 'content' } ).click(); await page .getByRole( 'menuitemradio' ) @@ -1547,12 +1537,7 @@ test.describe( 'Block bindings', () => { await editor.insertBlock( { name: 'core/heading', } ); - await page - .getByRole( 'tabpanel', { - name: 'Settings', - } ) - .getByLabel( 'Attributes options' ) - .click(); + await page.getByLabel( 'Attributes options' ).click(); const contentAttribute = page.getByRole( 'menuitemcheckbox', { name: 'Show content', } ); From 640dd945c345af09e4dd4e12745ce09c58d4192c Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Aug 2024 18:16:14 +0200 Subject: [PATCH 06/15] Fix remaining test --- test/e2e/specs/editor/various/block-bindings.spec.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js index 45347a6054c27..92f43e5139b84 100644 --- a/test/e2e/specs/editor/various/block-bindings.spec.js +++ b/test/e2e/specs/editor/various/block-bindings.spec.js @@ -2352,11 +2352,9 @@ test.describe( 'Block bindings', () => { }, } ); - const bindingsPanel = page - .getByRole( 'tabpanel', { - name: 'Settings', - } ) - .locator( '.block-editor-bindings__panel' ); + const bindingsPanel = page.locator( + '.block-editor-bindings__panel' + ); await expect( bindingsPanel ).toContainText( 'Server Source' ); } ); } ); From 679aae7963a07e02334b03e58b93adef481cdecf Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Aug 2024 18:16:14 +0200 Subject: [PATCH 07/15] Import `useSelect` --- packages/block-editor/src/hooks/block-bindings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index 31f56bc5c3a01..ed8e4ab66f205 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -13,7 +13,7 @@ import { __experimentalVStack as VStack, privateApis as componentsPrivateApis, } from '@wordpress/components'; -import { useRegistry } from '@wordpress/data'; +import { useRegistry, useSelect } from '@wordpress/data'; import { useContext, Fragment } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; import { store as preferencesStore } from '@wordpress/preferences'; From b1df7fb66b47d1db286ec478fbdbb1450da85420 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Aug 2024 18:16:14 +0200 Subject: [PATCH 08/15] Change comment --- packages/block-editor/src/hooks/block-bindings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index ed8e4ab66f205..e47e9093d745c 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -245,7 +245,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { } } ); - // Lock the UI when the experiment is not enabled or there are no fields to connect to. + // Lock the UI when the preference to create bindings is not enabled or there are no fields to connect to. const readOnly = ! showBlockBindingsUI || ! Object.keys( fieldsList ).length; From f91f4c4f960dc940f30c64f8ca3ca89f5f8d2db3 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Aug 2024 18:16:14 +0200 Subject: [PATCH 09/15] Hide controls in templates --- .../src/components/preferences-modal/index.js | 33 +++++++++++-------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index b5a69614c1053..b5f2cb17bdec5 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -36,9 +36,10 @@ const { export default function EditorPreferencesModal( { extraSections = {} } ) { const isLargeViewport = useViewportMatch( 'medium' ); - const { isActive, showBlockBreadcrumbsOption } = useSelect( + const { isActive, showBlockBreadcrumbsOption, isTemplate } = useSelect( ( select ) => { - const { getEditorSettings } = select( editorStore ); + const { getEditorSettings, getEditedPostAttribute } = + select( editorStore ); const { get } = select( preferencesStore ); const { isModalActive } = select( interfaceStore ); const isRichEditingEnabled = getEditorSettings().richEditingEnabled; @@ -49,6 +50,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { isLargeViewport && isRichEditingEnabled, isActive: isModalActive( 'editor/preferences' ), + isTemplate: getEditedPostAttribute( 'type' ) === 'wp_template', }; }, [ isLargeViewport ] @@ -253,18 +255,21 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { label={ __( 'Show most used blocks' ) } /> - - - + { /* Don't show preference in templates until connecting attributes there is supported */ } + { ! isTemplate && ( + + + + ) } Date: Tue, 27 Aug 2024 18:16:14 +0200 Subject: [PATCH 10/15] Adapt preference phrasing and capabilities --- .../block-editor/src/hooks/block-bindings.js | 6 ++-- .../src/components/preferences-modal/index.js | 31 +++++++++++++------ 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index e47e9093d745c..c6e8a68faca1b 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -202,11 +202,11 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { } } ); - const { showBlockBindingsUI } = useSelect( ( select ) => { + const { isConnectingEnabled } = useSelect( ( select ) => { const { get } = select( preferencesStore ); return { - showBlockBindingsUI: get( 'core', 'showBlockBindingsUI' ), + isConnectingEnabled: get( 'core', 'connectBlockAttributesUI' ), }; }, [] ); @@ -247,7 +247,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { // Lock the UI when the preference to create bindings is not enabled or there are no fields to connect to. const readOnly = - ! showBlockBindingsUI || ! Object.keys( fieldsList ).length; + ! isConnectingEnabled || ! Object.keys( fieldsList ).length; if ( readOnly && Object.keys( filteredBindings ).length === 0 ) { return null; diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index b5f2cb17bdec5..fb7d106c16244 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -4,6 +4,7 @@ import { __ } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; +import { store as coreStore } from '@wordpress/core-data'; import { useSelect, useDispatch } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { @@ -36,7 +37,12 @@ const { export default function EditorPreferencesModal( { extraSections = {} } ) { const isLargeViewport = useViewportMatch( 'medium' ); - const { isActive, showBlockBreadcrumbsOption, isTemplate } = useSelect( + const { + isActive, + showBlockBreadcrumbsOption, + isTemplate, + canUpdateSettings, + } = useSelect( ( select ) => { const { getEditorSettings, getEditedPostAttribute } = select( editorStore ); @@ -44,6 +50,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { const { isModalActive } = select( interfaceStore ); const isRichEditingEnabled = getEditorSettings().richEditingEnabled; const isDistractionFreeEnabled = get( 'core', 'distractionFree' ); + const { canUser } = select( coreStore ); return { showBlockBreadcrumbsOption: ! isDistractionFreeEnabled && @@ -51,6 +58,10 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { isRichEditingEnabled, isActive: isModalActive( 'editor/preferences' ), isTemplate: getEditedPostAttribute( 'type' ) === 'wp_template', + canUpdateSettings: canUser( 'update', { + kind: 'root', + name: 'site', + } ), }; }, [ isLargeViewport ] @@ -256,17 +267,17 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { /> { /* Don't show preference in templates until connecting attributes there is supported */ } - { ! isTemplate && ( - + { ! isTemplate && canUpdateSettings && ( + ) } From 3b107e710c8e78fce03e0a1fbf6822cedd54a167 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Aug 2024 18:19:58 +0200 Subject: [PATCH 11/15] Change name in tests --- test/e2e/specs/editor/various/block-bindings.spec.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js index 92f43e5139b84..d44cbda94a9b8 100644 --- a/test/e2e/specs/editor/various/block-bindings.spec.js +++ b/test/e2e/specs/editor/various/block-bindings.spec.js @@ -1396,7 +1396,7 @@ test.describe( 'Block bindings', () => { } ) => { // Activate the block bindings UI preference. await editor.setPreferences( 'core', { - showBlockBindingsUI: true, + connectBlockAttributesUI: true, } ); await editor.insertBlock( { @@ -1414,7 +1414,7 @@ test.describe( 'Block bindings', () => { } ) => { // Activate the block bindings UI preference. await editor.setPreferences( 'core', { - showBlockBindingsUI: true, + connectBlockAttributesUI: true, } ); await editor.insertBlock( { @@ -1531,7 +1531,7 @@ test.describe( 'Block bindings', () => { } ) => { // Activate the block bindings UI preference. await editor.setPreferences( 'core', { - showBlockBindingsUI: true, + connectBlockAttributesUI: true, } ); await editor.insertBlock( { @@ -1726,7 +1726,7 @@ test.describe( 'Block bindings', () => { } ) => { // Activate the block bindings UI preference. await editor.setPreferences( 'core', { - showBlockBindingsUI: true, + connectBlockAttributesUI: true, } ); await editor.insertBlock( { @@ -2061,7 +2061,7 @@ test.describe( 'Block bindings', () => { } ) => { // Activate the block bindings UI preference. await editor.setPreferences( 'core', { - showBlockBindingsUI: true, + connectBlockAttributesUI: true, } ); await editor.insertBlock( { From 7222fdd51e88794f665e910ed8a3575e9dee5a8b Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Wed, 28 Aug 2024 12:42:55 +0200 Subject: [PATCH 12/15] Remove preference --- .../src/components/preferences-modal/index.js | 32 ++----------------- 1 file changed, 2 insertions(+), 30 deletions(-) diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index fb7d106c16244..f3378d76d994b 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -4,7 +4,6 @@ import { __ } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; -import { store as coreStore } from '@wordpress/core-data'; import { useSelect, useDispatch } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { @@ -37,31 +36,19 @@ const { export default function EditorPreferencesModal( { extraSections = {} } ) { const isLargeViewport = useViewportMatch( 'medium' ); - const { - isActive, - showBlockBreadcrumbsOption, - isTemplate, - canUpdateSettings, - } = useSelect( + const { isActive, showBlockBreadcrumbsOption } = useSelect( ( select ) => { - const { getEditorSettings, getEditedPostAttribute } = - select( editorStore ); + const { getEditorSettings } = select( editorStore ); const { get } = select( preferencesStore ); const { isModalActive } = select( interfaceStore ); const isRichEditingEnabled = getEditorSettings().richEditingEnabled; const isDistractionFreeEnabled = get( 'core', 'distractionFree' ); - const { canUser } = select( coreStore ); return { showBlockBreadcrumbsOption: ! isDistractionFreeEnabled && isLargeViewport && isRichEditingEnabled, isActive: isModalActive( 'editor/preferences' ), - isTemplate: getEditedPostAttribute( 'type' ) === 'wp_template', - canUpdateSettings: canUser( 'update', { - kind: 'root', - name: 'site', - } ), }; }, [ isLargeViewport ] @@ -266,21 +253,6 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { label={ __( 'Show most used blocks' ) } /> - { /* Don't show preference in templates until connecting attributes there is supported */ } - { ! isTemplate && canUpdateSettings && ( - - - - ) } Date: Wed, 28 Aug 2024 14:00:56 +0200 Subject: [PATCH 13/15] Add `canUpdateBlockBindings` in Gutenberg --- lib/compat/wordpress-6.7/block-bindings.php | 15 +++++++++++ .../block-editor/src/hooks/block-bindings.js | 11 ++++---- .../provider/use-block-editor-settings.js | 1 + .../editor/various/block-bindings.spec.js | 25 ------------------- 4 files changed, 21 insertions(+), 31 deletions(-) diff --git a/lib/compat/wordpress-6.7/block-bindings.php b/lib/compat/wordpress-6.7/block-bindings.php index 398b53b340673..9e82c1843f35a 100644 --- a/lib/compat/wordpress-6.7/block-bindings.php +++ b/lib/compat/wordpress-6.7/block-bindings.php @@ -38,3 +38,18 @@ function gutenberg_add_server_block_bindings_sources_to_editor_settings( $editor } add_filter( 'block_editor_settings_all', 'gutenberg_add_server_block_bindings_sources_to_editor_settings', 10 ); + +/** + * Initialize `canUpdateBlockBindings` editor setting if it doesn't exist. By default, it is `true` only for admin users. + * + * @param array $settings The block editor settings from the `block_editor_settings_all` filter. + * @return array The editor settings including `canUpdateBlockBindings`. + */ +function gutenberg_add_can_update_block_bindings_editor_setting( $editor_settings ) { + if ( empty( $editor_settings['canUpdateBlockBindings'] ) ) { + $editor_settings['canUpdateBlockBindings'] = current_user_can( 'manage_options' ); + } + return $editor_settings; +} + +add_filter( 'block_editor_settings_all', 'gutenberg_add_can_update_block_bindings_editor_setting', 10 ); diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index c6e8a68faca1b..afb3fdae01970 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -16,7 +16,6 @@ import { import { useRegistry, useSelect } from '@wordpress/data'; import { useContext, Fragment } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; -import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -29,6 +28,7 @@ import { unlock } from '../lock-unlock'; import InspectorControls from '../components/inspector-controls'; import BlockContext from '../components/block-context'; import { useBlockBindingsUtils } from '../utils/block-bindings'; +import { store as blockEditorStore } from '../store'; const { DropdownMenuV2 } = unlock( componentsPrivateApis ); @@ -202,11 +202,10 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { } } ); - const { isConnectingEnabled } = useSelect( ( select ) => { - const { get } = select( preferencesStore ); - + const { canUpdateBlockBindings } = useSelect( ( select ) => { return { - isConnectingEnabled: get( 'core', 'connectBlockAttributesUI' ), + canUpdateBlockBindings: + select( blockEditorStore ).getSettings().canUpdateBlockBindings, }; }, [] ); @@ -247,7 +246,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { // Lock the UI when the preference to create bindings is not enabled or there are no fields to connect to. const readOnly = - ! isConnectingEnabled || ! Object.keys( fieldsList ).length; + ! canUpdateBlockBindings || ! Object.keys( fieldsList ).length; if ( readOnly && Object.keys( filteredBindings ).length === 0 ) { return null; diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 6aa2763cf9db0..48290caefc158 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -47,6 +47,7 @@ const BLOCK_EDITOR_SETTINGS = [ 'allowedMimeTypes', 'bodyPlaceholder', 'canLockBlocks', + 'canUpdateBlockBindings', 'capabilities', 'clearBlockSelection', 'codeEditingEnabled', diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js index d44cbda94a9b8..5feda2bdc3334 100644 --- a/test/e2e/specs/editor/various/block-bindings.spec.js +++ b/test/e2e/specs/editor/various/block-bindings.spec.js @@ -1394,11 +1394,6 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI preference. - await editor.setPreferences( 'core', { - connectBlockAttributesUI: true, - } ); - await editor.insertBlock( { name: 'core/paragraph', } ); @@ -1412,11 +1407,6 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI preference. - await editor.setPreferences( 'core', { - connectBlockAttributesUI: true, - } ); - await editor.insertBlock( { name: 'core/paragraph', attributes: { @@ -1529,11 +1519,6 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI preference. - await editor.setPreferences( 'core', { - connectBlockAttributesUI: true, - } ); - await editor.insertBlock( { name: 'core/heading', } ); @@ -1724,11 +1709,6 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI preference. - await editor.setPreferences( 'core', { - connectBlockAttributesUI: true, - } ); - await editor.insertBlock( { name: 'core/buttons', innerBlocks: [ @@ -2059,11 +2039,6 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI preference. - await editor.setPreferences( 'core', { - connectBlockAttributesUI: true, - } ); - await editor.insertBlock( { name: 'core/image', } ); From 861744150a3ef4c4f001c8e56301959efff80f83 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Wed, 28 Aug 2024 14:03:00 +0200 Subject: [PATCH 14/15] Update comment --- packages/block-editor/src/hooks/block-bindings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index afb3fdae01970..d015eca5af992 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -244,7 +244,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { } } ); - // Lock the UI when the preference to create bindings is not enabled or there are no fields to connect to. + // Lock the UI when the user can't update bindings or there are no fields to connect to. const readOnly = ! canUpdateBlockBindings || ! Object.keys( fieldsList ).length; From 08d58182caf34f77efc39c303e59c7352c6fbb78 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Wed, 28 Aug 2024 14:29:36 +0200 Subject: [PATCH 15/15] Add backport changelog --- backport-changelog/6.7/7258.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 backport-changelog/6.7/7258.md diff --git a/backport-changelog/6.7/7258.md b/backport-changelog/6.7/7258.md new file mode 100644 index 0000000000000..6714b13b70b8d --- /dev/null +++ b/backport-changelog/6.7/7258.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7258 + +* https://github.com/WordPress/gutenberg/pull/64570 \ No newline at end of file