From 32289bb97f74e2c8d143301f0b87a67d4e703b4b Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 20 Mar 2023 14:38:31 +1100
Subject: [PATCH 2/6] Remove prop drilling clientId, grab all selected client
ids and use first id for attributes check
---
.../src/components/block-inspector/index.js | 2 +-
.../inspector-controls-tabs/index.js | 5 +--
.../position-controls-panel.js | 42 ++++++++++---------
.../inspector-controls-tabs/settings-tab.js | 4 +-
4 files changed, 27 insertions(+), 26 deletions(-)
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index c373e18ddf198..b2fd086a2a29c 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -371,7 +371,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
label={ __( 'Border' ) }
/>
-
+
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 d4bed4369437e..a02aa7cc208a6 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -37,10 +37,7 @@ export default function InspectorControlsTabs( {
{ ( tab ) => {
if ( tab.name === TAB_SETTINGS.name ) {
return (
-
+
);
}
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
index 1a2be70526e01..0150d4819ae4d 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
@@ -15,27 +15,18 @@ import InspectorControlsGroups from '../inspector-controls/groups';
import { default as InspectorControls } from '../inspector-controls';
import { store as blockEditorStore } from '../../store';
-const PositionControls = ( { clientId } ) => {
- const fills = useSlotFills(
- InspectorControlsGroups.position.Slot.__unstableName
- );
- const hasFills = Boolean( fills && fills.length );
-
- const { blockAttributes } = useSelect(
- ( select ) => {
- const { getBlockAttributes } = select( blockEditorStore );
- return {
- blockAttributes: getBlockAttributes( clientId ),
- };
- },
- [ clientId ]
- );
-
- if ( ! hasFills ) {
- return null;
- }
+const PositionControlsPanel = () => {
+ const { blockAttributes } = useSelect( ( select ) => {
+ const { getBlockAttributes, getSelectedBlockClientIds } =
+ select( blockEditorStore );
+ const clientIds = getSelectedBlockClientIds();
+ return {
+ blockAttributes: getBlockAttributes( clientIds[ 0 ] ),
+ };
+ }, [] );
// If a position type is set, open the panel by default.
+ // In a multi-selection, use the first block's attributes for the check.
const initialOpen = !! blockAttributes?.style?.position?.type;
return (
@@ -49,4 +40,17 @@ const PositionControls = ( { clientId } ) => {
);
};
+const PositionControls = () => {
+ const fills = useSlotFills(
+ InspectorControlsGroups.position.Slot.__unstableName
+ );
+ const hasFills = Boolean( fills && fills.length );
+
+ if ( ! hasFills ) {
+ return null;
+ }
+
+ return
;
+};
+
export default PositionControls;
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 14554e813fc15..bd462837442fe 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
@@ -6,10 +6,10 @@ import PositionControls from './position-controls-panel';
import { default as InspectorControls } from '../inspector-controls';
import SettingsTabHint from './settings-tab-hint';
-const SettingsTab = ( { clientId, showAdvancedControls = false } ) => (
+const SettingsTab = ( { showAdvancedControls = false } ) => (
<>
-
+
{ showAdvancedControls && (
From a56b54f22494b1823915f561409e74e84f619af3 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 21 Mar 2023 10:41:52 +1100
Subject: [PATCH 3/6] Iterate over block selection and open by default if at
least one block has a position type set.
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
---
.../position-controls-panel.js | 18 +++++++++++-------
1 file changed, 11 insertions(+), 7 deletions(-)
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
index 0150d4819ae4d..a743e6c4297a0 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
@@ -16,19 +16,23 @@ import { default as InspectorControls } from '../inspector-controls';
import { store as blockEditorStore } from '../../store';
const PositionControlsPanel = () => {
- const { blockAttributes } = useSelect( ( select ) => {
- const { getBlockAttributes, getSelectedBlockClientIds } =
+ // Determine whether the panel should be expanded.
+ const { initialOpen } = useSelect( ( select ) => {
+ const { getBlocksByClientId, getSelectedBlockClientIds } =
select( blockEditorStore );
+
+ // If any selected block has a position set, open the panel by default.
+ // The first block's value will still be used within the control though.
const clientIds = getSelectedBlockClientIds();
+ const multiSelectedBlocks = getBlocksByClientId( clientIds );
+
return {
- blockAttributes: getBlockAttributes( clientIds[ 0 ] ),
+ initialOpen: multiSelectedBlocks.some(
+ ( { attributes } ) => !! attributes?.style?.position?.type
+ ),
};
}, [] );
- // If a position type is set, open the panel by default.
- // In a multi-selection, use the first block's attributes for the check.
- const initialOpen = !! blockAttributes?.style?.position?.type;
-
return (
Date: Tue, 21 Mar 2023 12:35:50 +1100
Subject: [PATCH 4/6] Add useState and an effect so that we only perform the
calculation once
---
.../position-controls-panel.js | 26 ++++++++++++-------
1 file changed, 17 insertions(+), 9 deletions(-)
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
index a743e6c4297a0..f4b1f554c34ea 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
@@ -6,6 +6,7 @@ import {
__experimentalUseSlotFills as useSlotFills,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
@@ -16,23 +17,30 @@ import { default as InspectorControls } from '../inspector-controls';
import { store as blockEditorStore } from '../../store';
const PositionControlsPanel = () => {
+ const [ initialOpen, setInitialOpen ] = useState();
+
// Determine whether the panel should be expanded.
- const { initialOpen } = useSelect( ( select ) => {
+ const { multiSelectedBlocks } = useSelect( ( select ) => {
const { getBlocksByClientId, getSelectedBlockClientIds } =
select( blockEditorStore );
-
- // If any selected block has a position set, open the panel by default.
- // The first block's value will still be used within the control though.
const clientIds = getSelectedBlockClientIds();
- const multiSelectedBlocks = getBlocksByClientId( clientIds );
-
return {
- initialOpen: multiSelectedBlocks.some(
- ( { attributes } ) => !! attributes?.style?.position?.type
- ),
+ multiSelectedBlocks: getBlocksByClientId( clientIds ),
};
}, [] );
+ useEffect( () => {
+ // If any selected block has a position set, open the panel by default.
+ // The first block's value will still be used within the control though.
+ if ( initialOpen === undefined ) {
+ setInitialOpen(
+ multiSelectedBlocks.some(
+ ( { attributes } ) => !! attributes?.style?.position?.type
+ )
+ );
+ }
+ }, [ initialOpen, multiSelectedBlocks, setInitialOpen ] );
+
return (
Date: Tue, 21 Mar 2023 12:43:35 +1100
Subject: [PATCH 5/6] Try to reduce flicker
---
.../inspector-controls-tabs/position-controls-panel.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
index f4b1f554c34ea..aaf8c99769d5c 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
@@ -45,7 +45,7 @@ const PositionControlsPanel = () => {
From f998b3b05a013e4238f779329822671d0aa59c53 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 21 Mar 2023 14:19:48 +1100
Subject: [PATCH 6/6] Update to useLayoutEffect
---
.../inspector-controls-tabs/position-controls-panel.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
index aaf8c99769d5c..9a3670b5deb28 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
@@ -6,7 +6,7 @@ import {
__experimentalUseSlotFills as useSlotFills,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useLayoutEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
@@ -29,7 +29,7 @@ const PositionControlsPanel = () => {
};
}, [] );
- useEffect( () => {
+ useLayoutEffect( () => {
// If any selected block has a position set, open the panel by default.
// The first block's value will still be used within the control though.
if ( initialOpen === undefined ) {