Skip to content

Commit 1b51b08

Browse files
kevin940726kevin940726
committed
Unify the experience
1 parent 5ebaab8 commit 1b51b08

File tree

5 files changed

+55
-51
lines changed

5 files changed

+55
-51
lines changed

‎packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js

+12-33
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* WordPress dependencies
33
*/
44
import { useId } from '@wordpress/element';
5-
import { __, sprintf, _x } from '@wordpress/i18n';
5+
import { __, sprintf } from '@wordpress/i18n';
66
import {
77
DropdownMenu,
88
ToolbarGroup,
@@ -22,13 +22,10 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
2222

2323
export default function BlockBindingsToolbarIndicator( { clientIds } ) {
2424
const isSingleBlockSelected = clientIds.length === 1;
25-
const { icon, firstBlockName, isConnectedToPatternOverrides } = useSelect(
25+
const { icon, firstBlockName } = useSelect(
2626
( select ) => {
27-
const {
28-
getBlockAttributes,
29-
getBlockNamesByClientId,
30-
getBlocksByClientId,
31-
} = select( blockEditorStore );
27+
const { getBlockAttributes, getBlockNamesByClientId } =
28+
select( blockEditorStore );
3229
const { getBlockType, getActiveBlockVariation } =
3330
select( blocksStore );
3431
const blockTypeNames = getBlockNamesByClientId( clientIds );
@@ -54,14 +51,6 @@ export default function BlockBindingsToolbarIndicator( { clientIds } ) {
5451
icon: _icon,
5552
firstBlockName: getBlockAttributes( clientIds[ 0 ] ).metadata
5653
.name,
57-
isConnectedToPatternOverrides: getBlocksByClientId(
58-
clientIds
59-
).some( ( block ) =>
60-
Object.values( block?.attributes.metadata?.bindings ).some(
61-
( binding ) =>
62-
binding.source === 'core/pattern-overrides'
63-
)
64-
),
6554
};
6655
},
6756
[ clientIds, isSingleBlockSelected ]
@@ -71,25 +60,15 @@ export default function BlockBindingsToolbarIndicator( { clientIds } ) {
7160
maximumLength: 35,
7261
} );
7362

74-
let blockDescription = isSingleBlockSelected
75-
? _x(
76-
'This block is connected.',
77-
'block toolbar button label and description'
63+
const blockDescription = isSingleBlockSelected
64+
? sprintf(
65+
/* translators: %1s: The block type's name; %2s: The block's user-provided name (the same as the override name). */
66+
__( 'This %1$s is editable using the "%2$s" override.' ),
67+
firstBlockTitle.toLowerCase(),
68+
firstBlockName
7869
)
79-
: _x(
80-
'These blocks are connected.',
81-
'block toolbar button label and description'
82-
);
83-
if ( isConnectedToPatternOverrides && firstBlockName ) {
84-
blockDescription = isSingleBlockSelected
85-
? sprintf(
86-
/* translators: %1s: The block type's name; %2s: The block's user-provided name (the same as the override name). */
87-
__( 'This %1$s is editable using the "%2$s" override.' ),
88-
firstBlockTitle.toLowerCase(),
89-
firstBlockName
90-
)
91-
: __( 'These blocks are editable using overrides.' );
92-
}
70+
: __( 'These blocks are editable using overrides.' );
71+
9372
const descriptionId = useId();
9473

9574
return (

‎packages/block-editor/src/components/block-switcher/index.js

+24-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { __, _n, sprintf } from '@wordpress/i18n';
4+
import { __, _n, sprintf, _x } from '@wordpress/i18n';
55
import {
66
DropdownMenu,
77
ToolbarButton,
88
ToolbarGroup,
99
ToolbarItem,
10+
__experimentalText as Text,
11+
MenuGroup,
1012
} from '@wordpress/components';
1113
import {
1214
switchToBlockType,
@@ -33,6 +35,7 @@ function BlockSwitcherDropdownMenuContents( {
3335
clientIds,
3436
hasBlockStyles,
3537
canRemove,
38+
isUsingBindings,
3639
} ) {
3740
const { replaceBlocks, multiSelect, updateBlockAttributes } =
3841
useDispatch( blockEditorStore );
@@ -118,6 +121,17 @@ function BlockSwitcherDropdownMenuContents( {
118121
</p>
119122
);
120123
}
124+
125+
const connectedBlockDescription = isSingleBlock
126+
? _x(
127+
'This block is connected.',
128+
'block toolbar button label and description'
129+
)
130+
: _x(
131+
'These blocks are connected.',
132+
'block toolbar button label and description'
133+
);
134+
121135
return (
122136
<div className="block-editor-block-switcher__container">
123137
{ hasPatternTransformation && (
@@ -156,11 +170,18 @@ function BlockSwitcherDropdownMenuContents( {
156170
onSwitch={ onClose }
157171
/>
158172
) }
173+
{ isUsingBindings && (
174+
<MenuGroup>
175+
<Text className="block-editor-block-switcher__binding-indicator">
176+
{ connectedBlockDescription }
177+
</Text>
178+
</MenuGroup>
179+
) }
159180
</div>
160181
);
161182
}
162183

163-
export const BlockSwitcher = ( { clientIds, disabled } ) => {
184+
export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
164185
const {
165186
canRemove,
166187
hasBlockStyles,
@@ -303,6 +324,7 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
303324
clientIds={ clientIds }
304325
hasBlockStyles={ hasBlockStyles }
305326
canRemove={ canRemove }
327+
isUsingBindings={ isUsingBindings }
306328
/>
307329
) }
308330
</DropdownMenu>

‎packages/block-editor/src/components/block-switcher/style.scss

+5
Original file line numberDiff line numberDiff line change
@@ -203,3 +203,8 @@
203203
padding: 6px $grid-unit;
204204
margin: 0;
205205
}
206+
207+
.block-editor-block-switcher__binding-indicator {
208+
display: block;
209+
padding: $grid-unit;
210+
}

‎packages/block-editor/src/components/block-toolbar/index.js

+5-10
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export function PrivateBlockToolbar( {
6767
shouldShowVisualToolbar,
6868
showParentSelector,
6969
isUsingBindings,
70-
isNotInPatternOverridesContext,
70+
hasParentPattern,
7171
} = useSelect( ( select ) => {
7272
const {
7373
getBlockName,
@@ -103,12 +103,6 @@ export function PrivateBlockToolbar( {
103103
'core/block',
104104
true
105105
)[ 0 ];
106-
const _isNotInPatternOverridesContext =
107-
!! bindings &&
108-
Object.values( bindings ).some(
109-
( binding ) => binding.source === 'core/pattern-overrides'
110-
) &&
111-
! parentPatternClientId;
112106
return {
113107
blockClientId: selectedBlockClientId,
114108
blockClientIds: selectedBlockClientIds,
@@ -129,7 +123,7 @@ export function PrivateBlockToolbar( {
129123
selectedBlockClientIds.length === 1 &&
130124
_isDefaultEditingMode,
131125
isUsingBindings: !! bindings,
132-
isNotInPatternOverridesContext: _isNotInPatternOverridesContext,
126+
hasParentPattern: !! parentPatternClientId,
133127
};
134128
}, [] );
135129

@@ -160,6 +154,7 @@ export function PrivateBlockToolbar( {
160154

161155
const innerClasses = clsx( 'block-editor-block-toolbar', {
162156
'is-synced': isSynced,
157+
'is-connected': isUsingBindings,
163158
} );
164159

165160
return (
@@ -182,8 +177,7 @@ export function PrivateBlockToolbar( {
182177
isLargeViewport &&
183178
isDefaultEditingMode && <BlockParentSelector /> }
184179
{ isUsingBindings &&
185-
// Don't show the indicator if the block connected to pattern overrides but not inside a pattern instance.
186-
! isNotInPatternOverridesContext &&
180+
hasParentPattern &&
187181
canBindBlock( blockName ) && (
188182
<BlockBindingsIndicator clientIds={ blockClientIds } />
189183
) }
@@ -197,6 +191,7 @@ export function PrivateBlockToolbar( {
197191
<BlockSwitcher
198192
clientIds={ blockClientIds }
199193
disabled={ ! isDefaultEditingMode }
194+
isUsingBindings={ isUsingBindings }
200195
/>
201196
{ isDefaultEditingMode && (
202197
<>

‎packages/block-editor/src/components/block-toolbar/style.scss

+9-6
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,17 @@
3939
border-right: $border-width solid $gray-300;
4040
}
4141

42-
&.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
43-
color: var(--wp-block-synced-color);
44-
}
45-
46-
&.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
47-
&:disabled .block-editor-block-icon.has-colors {
42+
&.is-synced,
43+
&.is-connected {
44+
.block-editor-block-switcher .components-button .block-editor-block-icon {
4845
color: var(--wp-block-synced-color);
4946
}
47+
48+
.components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
49+
&:disabled .block-editor-block-icon.has-colors {
50+
color: var(--wp-block-synced-color);
51+
}
52+
}
5053
}
5154

5255
> :last-child,

0 commit comments

Comments
 (0)