Skip to content

Commit 84a627f

Browse files
aaronrobertshawtalldanramonjd
authored
Block Inspector: Add content tab for section blocks (WordPress#71714)
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
1 parent 3d42931 commit 84a627f

File tree

6 files changed

+140
-70
lines changed

6 files changed

+140
-70
lines changed

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

Lines changed: 48 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-c
2727
import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
2828
import PositionControls from '../inspector-controls-tabs/position-controls-panel';
2929
import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
30-
import BlockQuickNavigation from '../block-quick-navigation';
3130
import { useBorderPanelLabel } from '../../hooks/border';
31+
import ContentTab from '../inspector-controls-tabs/content-tab';
3232

3333
import { unlock } from '../../lock-unlock';
3434

@@ -92,6 +92,7 @@ function BlockInspector() {
9292
blockType,
9393
isSectionBlock,
9494
isSectionBlockInSelection,
95+
hasBlockStyles,
9596
} = useSelect( ( select ) => {
9697
const {
9798
getSelectedBlockClientId,
@@ -101,6 +102,7 @@ function BlockInspector() {
101102
getParentSectionBlock,
102103
isSectionBlock: _isSectionBlock,
103104
} = unlock( select( blockEditorStore ) );
105+
const { getBlockStyles } = select( blocksStore );
104106
const _selectedBlockClientId = getSelectedBlockClientId();
105107
const renderedBlockClientId =
106108
getParentSectionBlock( _selectedBlockClientId ) ||
@@ -114,17 +116,52 @@ function BlockInspector() {
114116
( id ) => _isSectionBlock( id )
115117
);
116118

119+
const blockStyles =
120+
_selectedBlockName && getBlockStyles( _selectedBlockName );
121+
const _hasBlockStyles = blockStyles && blockStyles.length > 0;
122+
117123
return {
118124
selectedBlockCount: getSelectedBlockCount(),
119125
selectedBlockClientId: renderedBlockClientId,
120126
selectedBlockName: _selectedBlockName,
121127
blockType: _blockType,
122128
isSectionBlockInSelection: _isSectionBlockInSelection,
123129
isSectionBlock: _isSectionBlock( renderedBlockClientId ),
130+
hasBlockStyles: _hasBlockStyles,
124131
};
125132
}, [] );
126133

127-
const availableTabs = useInspectorControlsTabs( blockType?.name );
134+
// Separate useSelect for contentClientIds with proper dependencies
135+
const contentClientIds = useSelect(
136+
( select ) => {
137+
if ( ! isSectionBlock || ! selectedBlockClientId ) {
138+
return [];
139+
}
140+
141+
const {
142+
getClientIdsOfDescendants,
143+
getBlockName,
144+
getBlockEditingMode,
145+
} = unlock( select( blockEditorStore ) );
146+
147+
const descendants = getClientIdsOfDescendants(
148+
selectedBlockClientId
149+
);
150+
return descendants.filter(
151+
( current ) =>
152+
getBlockName( current ) !== 'core/list-item' &&
153+
getBlockEditingMode( current ) === 'contentOnly'
154+
);
155+
},
156+
[ isSectionBlock, selectedBlockClientId ]
157+
);
158+
159+
const availableTabs = useInspectorControlsTabs(
160+
blockType?.name,
161+
contentClientIds,
162+
isSectionBlock,
163+
hasBlockStyles
164+
);
128165
const hasMultipleTabs = availableTabs?.length > 1;
129166

130167
// The block inspector animation settings will be completely
@@ -201,6 +238,8 @@ function BlockInspector() {
201238
blockName={ blockType.name }
202239
isSectionBlock={ isSectionBlock }
203240
availableTabs={ availableTabs }
241+
contentClientIds={ contentClientIds }
242+
hasBlockStyles={ hasBlockStyles }
204243
/>
205244
</BlockInspectorSingleBlockWrapper>
206245
);
@@ -247,42 +286,16 @@ const BlockInspectorSingleBlock = ( {
247286
blockName,
248287
isSectionBlock,
249288
availableTabs,
289+
contentClientIds,
290+
hasBlockStyles,
250291
} ) => {
251292
const hasMultipleTabs = availableTabs?.length > 1;
252-
const shouldShowTabs = ! isSectionBlock && hasMultipleTabs;
253293

254-
const hasBlockStyles = useSelect(
255-
( select ) => {
256-
const { getBlockStyles } = select( blocksStore );
257-
const blockStyles = getBlockStyles( blockName );
258-
return blockStyles && blockStyles.length > 0;
259-
},
260-
[ blockName ]
261-
);
262294
const blockInformation = useBlockDisplayInformation( clientId );
263-
const contentClientIds = useSelect(
264-
( select ) => {
265-
// Avoid unnecessary subscription.
266-
if ( ! isSectionBlock ) {
267-
return;
268-
}
269-
270-
const {
271-
getClientIdsOfDescendants,
272-
getBlockName,
273-
getBlockEditingMode,
274-
} = select( blockEditorStore );
275-
return getClientIdsOfDescendants( clientId ).filter(
276-
( current ) =>
277-
getBlockName( current ) !== 'core/list-item' &&
278-
getBlockEditingMode( current ) === 'contentOnly'
279-
);
280-
},
281-
[ isSectionBlock, clientId ]
282-
);
283-
284295
const isBlockSynced = blockInformation.isSynced;
285296

297+
const shouldShowTabs = ! isBlockSynced && hasMultipleTabs;
298+
286299
return (
287300
<div className="block-editor-block-inspector">
288301
<BlockCard
@@ -300,22 +313,16 @@ const BlockInspectorSingleBlock = ( {
300313
clientId={ clientId }
301314
blockName={ blockName }
302315
tabs={ availableTabs }
316+
isSectionBlock={ isSectionBlock }
317+
contentClientIds={ contentClientIds }
303318
/>
304319
) }
305320
{ ! shouldShowTabs && (
306321
<>
307322
{ hasBlockStyles && (
308323
<BlockStylesPanel clientId={ clientId } />
309324
) }
310-
311-
{ contentClientIds && contentClientIds.length > 0 && (
312-
<PanelBody title={ __( 'Content' ) }>
313-
<BlockQuickNavigation
314-
clientIds={ contentClientIds }
315-
/>
316-
</PanelBody>
317-
) }
318-
325+
<ContentTab contentClientIds={ contentClientIds } />
319326
{ ! isSectionBlock && (
320327
<StyleInspectorSlots
321328
blockName={ blockName }

‎packages/block-editor/src/components/inspector-controls-tabs/content-tab.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { PanelBody } from '@wordpress/components';
5+
import { __ } from '@wordpress/i18n';
6+
7+
/**
8+
* Internal dependencies
9+
*/
10+
import BlockQuickNavigation from '../block-quick-navigation';
11+
12+
const ContentTab = ( { contentClientIds } ) => {
13+
if ( ! contentClientIds || contentClientIds.length === 0 ) {
14+
return null;
15+
}
16+
17+
return (
18+
<PanelBody title={ __( 'Content' ) }>
19+
<BlockQuickNavigation clientIds={ contentClientIds } />
20+
</PanelBody>
21+
);
22+
};
23+
24+
export default ContentTab;

‎packages/block-editor/src/components/inspector-controls-tabs/index.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ import { useSelect } from '@wordpress/data';
1212
/**
1313
* Internal dependencies
1414
*/
15-
import { TAB_SETTINGS, TAB_STYLES, TAB_LIST_VIEW } from './utils';
15+
import { TAB_SETTINGS, TAB_STYLES, TAB_LIST_VIEW, TAB_CONTENT } from './utils';
1616
import SettingsTab from './settings-tab';
1717
import StylesTab from './styles-tab';
18+
import ContentTab from './content-tab';
1819
import InspectorControls from '../inspector-controls';
1920
import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
2021
import { unlock } from '../../lock-unlock';
@@ -26,6 +27,8 @@ export default function InspectorControlsTabs( {
2627
clientId,
2728
hasBlockStyles,
2829
tabs,
30+
isSectionBlock,
31+
contentClientIds,
2932
} ) {
3033
const showIconLabels = useSelect( ( select ) => {
3134
return select( preferencesStore ).get( 'core', 'showIconLabels' );
@@ -69,8 +72,12 @@ export default function InspectorControlsTabs( {
6972
blockName={ blockName }
7073
clientId={ clientId }
7174
hasBlockStyles={ hasBlockStyles }
75+
isSectionBlock={ isSectionBlock }
7276
/>
7377
</Tabs.TabPanel>
78+
<Tabs.TabPanel tabId={ TAB_CONTENT.name } focusable={ false }>
79+
<ContentTab contentClientIds={ contentClientIds } />
80+
</Tabs.TabPanel>
7481
<Tabs.TabPanel tabId={ TAB_LIST_VIEW.name } focusable={ false }>
7582
<InspectorControls.Slot group="list" />
7683
</Tabs.TabPanel>

‎packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@ import BlockStyles from '../block-styles';
1111
import InspectorControls from '../inspector-controls';
1212
import { useBorderPanelLabel } from '../../hooks/border';
1313

14-
const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
14+
const StylesTab = ( {
15+
blockName,
16+
clientId,
17+
hasBlockStyles,
18+
isSectionBlock,
19+
} ) => {
1520
const borderPanelLabel = useBorderPanelLabel( { blockName } );
1621

1722
return (
@@ -23,26 +28,33 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
2328
</PanelBody>
2429
</div>
2530
) }
26-
<InspectorControls.Slot
27-
group="color"
28-
label={ __( 'Color' ) }
29-
className="color-block-support-panel__inner-wrapper"
30-
/>
31-
<InspectorControls.Slot
32-
group="background"
33-
label={ __( 'Background image' ) }
34-
/>
35-
<InspectorControls.Slot group="filter" />
36-
<InspectorControls.Slot
37-
group="typography"
38-
label={ __( 'Typography' ) }
39-
/>
40-
<InspectorControls.Slot
41-
group="dimensions"
42-
label={ __( 'Dimensions' ) }
43-
/>
44-
<InspectorControls.Slot group="border" label={ borderPanelLabel } />
45-
<InspectorControls.Slot group="styles" />
31+
{ ! isSectionBlock && (
32+
<>
33+
<InspectorControls.Slot
34+
group="color"
35+
label={ __( 'Color' ) }
36+
className="color-block-support-panel__inner-wrapper"
37+
/>
38+
<InspectorControls.Slot
39+
group="background"
40+
label={ __( 'Background image' ) }
41+
/>
42+
<InspectorControls.Slot group="filter" />
43+
<InspectorControls.Slot
44+
group="typography"
45+
label={ __( 'Typography' ) }
46+
/>
47+
<InspectorControls.Slot
48+
group="dimensions"
49+
label={ __( 'Dimensions' ) }
50+
/>
51+
<InspectorControls.Slot
52+
group="border"
53+
label={ borderPanelLabel }
54+
/>
55+
<InspectorControls.Slot group="styles" />
56+
</>
57+
) }
4658
</>
4759
);
4860
};

‎packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
1010
import InspectorControlsGroups from '../inspector-controls/groups';
1111
import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
1212
import { InspectorAdvancedControls } from '../inspector-controls';
13-
import { TAB_LIST_VIEW, TAB_SETTINGS, TAB_STYLES } from './utils';
13+
import { TAB_LIST_VIEW, TAB_SETTINGS, TAB_STYLES, TAB_CONTENT } from './utils';
1414
import { store as blockEditorStore } from '../../store';
1515

1616
const EMPTY_ARRAY = [];
@@ -29,7 +29,12 @@ function getShowTabs( blockName, tabSettings = {} ) {
2929
return true;
3030
}
3131

32-
export default function useInspectorControlsTabs( blockName ) {
32+
export default function useInspectorControlsTabs(
33+
blockName,
34+
contentClientIds,
35+
isSectionBlock,
36+
hasBlockStyles
37+
) {
3338
const tabs = [];
3439
const {
3540
bindings: bindingsGroup,
@@ -76,17 +81,25 @@ export default function useInspectorControlsTabs( blockName ) {
7681
...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
7782
];
7883

84+
const hasContentTab = !! (
85+
contentClientIds && contentClientIds.length > 0
86+
);
87+
7988
// Add the tabs in the order that they will default to if available.
80-
// List View > Settings > Styles.
81-
if ( hasListFills ) {
89+
// List View > Content > Settings > Styles.
90+
if ( hasListFills && ! isSectionBlock ) {
8291
tabs.push( TAB_LIST_VIEW );
8392
}
8493

85-
if ( settingsFills.length ) {
94+
if ( hasContentTab ) {
95+
tabs.push( TAB_CONTENT );
96+
}
97+
98+
if ( settingsFills.length && ! isSectionBlock ) {
8699
tabs.push( TAB_SETTINGS );
87100
}
88101

89-
if ( hasStyleFills ) {
102+
if ( isSectionBlock ? hasBlockStyles : hasStyleFills ) {
90103
tabs.push( TAB_STYLES );
91104
}
92105

‎packages/block-editor/src/components/inspector-controls-tabs/utils.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { cog, styles, listView } from '@wordpress/icons';
4+
import { cog, styles, listView, page } from '@wordpress/icons';
55
import { __ } from '@wordpress/i18n';
66

77
export const TAB_SETTINGS = {
@@ -18,6 +18,13 @@ export const TAB_STYLES = {
1818
icon: styles,
1919
};
2020

21+
export const TAB_CONTENT = {
22+
name: 'content',
23+
title: __( 'Content' ),
24+
value: 'content',
25+
icon: page,
26+
};
27+
2128
export const TAB_LIST_VIEW = {
2229
name: 'list',
2330
title: __( 'List View' ),

0 commit comments

Comments
 (0)