@wordpress/block-editor 15.4.0 → 15.4.1-next.f56bd8138.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.4.0",
+	"version": "15.4.1-next.f56bd8138.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,38 +37,38 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.31.0",
-		"@wordpress/api-fetch": "^7.31.0",
-		"@wordpress/blob": "^4.31.0",
-		"@wordpress/block-serialization-default-parser": "^5.31.0",
-		"@wordpress/blocks": "^15.4.0",
-		"@wordpress/commands": "^1.31.0",
-		"@wordpress/components": "^30.4.0",
-		"@wordpress/compose": "^7.31.0",
-		"@wordpress/data": "^10.31.0",
-		"@wordpress/date": "^5.31.0",
-		"@wordpress/deprecated": "^4.31.0",
-		"@wordpress/dom": "^4.31.0",
-		"@wordpress/element": "^6.31.0",
-		"@wordpress/escape-html": "^3.31.0",
-		"@wordpress/hooks": "^4.31.0",
-		"@wordpress/html-entities": "^4.31.0",
-		"@wordpress/i18n": "^6.4.0",
-		"@wordpress/icons": "^10.31.0",
-		"@wordpress/is-shallow-equal": "^5.31.0",
-		"@wordpress/keyboard-shortcuts": "^5.31.0",
-		"@wordpress/keycodes": "^4.31.0",
-		"@wordpress/notices": "^5.31.0",
-		"@wordpress/preferences": "^4.31.0",
-		"@wordpress/priority-queue": "^3.31.0",
-		"@wordpress/private-apis": "^1.31.0",
-		"@wordpress/rich-text": "^7.31.0",
-		"@wordpress/style-engine": "^2.31.0",
-		"@wordpress/token-list": "^3.31.0",
-		"@wordpress/upload-media": "^0.16.0",
-		"@wordpress/url": "^4.31.0",
-		"@wordpress/warning": "^3.31.0",
-		"@wordpress/wordcount": "^4.31.0",
+		"@wordpress/a11y": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/api-fetch": "^7.31.1-next.f56bd8138.0",
+		"@wordpress/blob": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/block-serialization-default-parser": "^5.31.1-next.f56bd8138.0",
+		"@wordpress/blocks": "^15.4.1-next.f56bd8138.0",
+		"@wordpress/commands": "^1.31.1-next.f56bd8138.0",
+		"@wordpress/components": "^30.5.1-next.f56bd8138.0",
+		"@wordpress/compose": "^7.31.1-next.f56bd8138.0",
+		"@wordpress/data": "^10.31.1-next.f56bd8138.0",
+		"@wordpress/date": "^5.31.1-next.f56bd8138.0",
+		"@wordpress/deprecated": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/dom": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/element": "^6.31.1-next.f56bd8138.0",
+		"@wordpress/escape-html": "^3.31.1-next.f56bd8138.0",
+		"@wordpress/hooks": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/html-entities": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/i18n": "^6.4.1-next.f56bd8138.0",
+		"@wordpress/icons": "^10.31.1-next.f56bd8138.0",
+		"@wordpress/is-shallow-equal": "^5.31.1-next.f56bd8138.0",
+		"@wordpress/keyboard-shortcuts": "^5.31.1-next.f56bd8138.0",
+		"@wordpress/keycodes": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/notices": "^5.31.1-next.f56bd8138.0",
+		"@wordpress/preferences": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/priority-queue": "^3.31.1-next.f56bd8138.0",
+		"@wordpress/private-apis": "^1.31.1-next.f56bd8138.0",
+		"@wordpress/rich-text": "^7.31.1-next.f56bd8138.0",
+		"@wordpress/style-engine": "^2.31.1-next.f56bd8138.0",
+		"@wordpress/token-list": "^3.31.1-next.f56bd8138.0",
+		"@wordpress/upload-media": "^0.16.1-next.f56bd8138.0",
+		"@wordpress/url": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/warning": "^3.31.1-next.f56bd8138.0",
+		"@wordpress/wordcount": "^4.31.1-next.f56bd8138.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d7601d30d49462ea942168e8ab6bf449fb93097e"
+	"gitHead": "ea4a281fd857f48338877590de8c8eb9b9a8cef4"
 }

package/src/components/block-inspector/index.js

@@ -27,8 +27,8 @@ import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-c
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
-import BlockQuickNavigation from '../block-quick-navigation';
 import { useBorderPanelLabel } from '../../hooks/border';
+import ContentTab from '../inspector-controls-tabs/content-tab';
 
 import { unlock } from '../../lock-unlock';
 
@@ -40,41 +40,129 @@ function BlockStylesPanel( { clientId } ) {
 	);
 }
 
+function StyleInspectorSlots( {
+	blockName,
+	showAdvancedControls = true,
+	showPositionControls = true,
+	showListControls = false,
+	showBindingsControls = true,
+} ) {
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
+	return (
+		<>
+			<InspectorControls.Slot />
+			{ showListControls && <InspectorControls.Slot group="list" /> }
+			<InspectorControls.Slot
+				group="color"
+				label={ __( 'Color' ) }
+				className="color-block-support-panel__inner-wrapper"
+			/>
+			<InspectorControls.Slot
+				group="background"
+				label={ __( 'Background image' ) }
+			/>
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
+			<InspectorControls.Slot
+				group="dimensions"
+				label={ __( 'Dimensions' ) }
+			/>
+			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
+			<InspectorControls.Slot group="styles" />
+			{ showPositionControls && <PositionControls /> }
+			{ showBindingsControls && (
+				<InspectorControls.Slot group="bindings" />
+			) }
+			{ showAdvancedControls && (
+				<div>
+					<AdvancedControls />
+				</div>
+			) }
+		</>
+	);
+}
+
 function BlockInspector() {
 	const {
-		count,
+		selectedBlockCount,
 		selectedBlockName,
 		selectedBlockClientId,
 		blockType,
 		isSectionBlock,
+		isSectionBlockInSelection,
+		hasBlockStyles,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
+			getSelectedBlockClientIds,
 			getSelectedBlockCount,
 			getBlockName,
 			getParentSectionBlock,
 			isSectionBlock: _isSectionBlock,
 		} = unlock( select( blockEditorStore ) );
+		const { getBlockStyles } = select( blocksStore );
 		const _selectedBlockClientId = getSelectedBlockClientId();
 		const renderedBlockClientId =
 			getParentSectionBlock( _selectedBlockClientId ) ||
-			getSelectedBlockClientId();
+			_selectedBlockClientId;
 		const _selectedBlockName =
 			renderedBlockClientId && getBlockName( renderedBlockClientId );
 		const _blockType =
 			_selectedBlockName && getBlockType( _selectedBlockName );
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const _isSectionBlockInSelection = selectedBlockClientIds.some(
+			( id ) => _isSectionBlock( id )
+		);
+
+		const blockStyles =
+			_selectedBlockName && getBlockStyles( _selectedBlockName );
+		const _hasBlockStyles = blockStyles && blockStyles.length > 0;
 
 		return {
-			count: getSelectedBlockCount(),
+			selectedBlockCount: getSelectedBlockCount(),
 			selectedBlockClientId: renderedBlockClientId,
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
+			isSectionBlockInSelection: _isSectionBlockInSelection,
 			isSectionBlock: _isSectionBlock( renderedBlockClientId ),
+			hasBlockStyles: _hasBlockStyles,
 		};
 	}, [] );
 
-	const availableTabs = useInspectorControlsTabs( blockType?.name );
-	const showTabs = availableTabs?.length > 1;
+	// Separate useSelect for contentClientIds with proper dependencies
+	const contentClientIds = useSelect(
+		( select ) => {
+			if ( ! isSectionBlock || ! selectedBlockClientId ) {
+				return [];
+			}
+
+			const {
+				getClientIdsOfDescendants,
+				getBlockName,
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
+
+			const descendants = getClientIdsOfDescendants(
+				selectedBlockClientId
+			);
+			return descendants.filter(
+				( current ) =>
+					getBlockName( current ) !== 'core/list-item' &&
+					getBlockEditingMode( current ) === 'contentOnly'
+			);
+		},
+		[ isSectionBlock, selectedBlockClientId ]
+	);
+
+	const availableTabs = useInspectorControlsTabs(
+		blockType?.name,
+		contentClientIds,
+		isSectionBlock,
+		hasBlockStyles
+	);
+	const hasMultipleTabs = availableTabs?.length > 1;
 
 	// The block inspector animation settings will be completely
 	// removed in the future to create an API which allows the block
@@ -85,47 +173,34 @@ function BlockInspector() {
 	const blockInspectorAnimationSettings =
 		useBlockInspectorAnimationSettings( blockType );
 
-	const borderPanelLabel = useBorderPanelLabel( {
-		blockName: selectedBlockName,
-	} );
+	const hasSelectedBlocks = selectedBlockCount > 1;
 
-	if ( count > 1 && ! isSectionBlock ) {
+	if ( hasSelectedBlocks && ! isSectionBlockInSelection ) {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
-				{ showTabs ? (
+				{ hasMultipleTabs ? (
 					<InspectorControlsTabs tabs={ availableTabs } />
 				) : (
-					<>
-						<InspectorControls.Slot />
-						<InspectorControls.Slot
-							group="color"
-							label={ __( 'Color' ) }
-							className="color-block-support-panel__inner-wrapper"
-						/>
-						<InspectorControls.Slot
-							group="background"
-							label={ __( 'Background image' ) }
-						/>
-						<InspectorControls.Slot
-							group="typography"
-							label={ __( 'Typography' ) }
-						/>
-						<InspectorControls.Slot
-							group="dimensions"
-							label={ __( 'Dimensions' ) }
-						/>
-						<InspectorControls.Slot
-							group="border"
-							label={ borderPanelLabel }
-						/>
-						<InspectorControls.Slot group="styles" />
-					</>
+					<StyleInspectorSlots
+						blockName={ selectedBlockName }
+						showAdvancedControls={ false }
+						showPositionControls={ false }
+						showBindingsControls={ false }
+					/>
 				) }
 			</div>
 		);
 	}
 
+	if ( hasSelectedBlocks && isSectionBlockInSelection ) {
+		return (
+			<div className="block-editor-block-inspector">
+				<MultiSelectionInspector />
+			</div>
+		);
+	}
+
 	const isSelectedBlockUnregistered =
 		selectedBlockName === getUnregisteredTypeHandlerName();
 
@@ -133,11 +208,10 @@ function BlockInspector() {
 	 * If the selected block is of an unregistered type, avoid showing it as an actual selection
 	 * because we want the user to focus on the unregistered block warning, not block settings.
 	 */
-	if (
-		! blockType ||
-		! selectedBlockClientId ||
-		isSelectedBlockUnregistered
-	) {
+	const shouldShowWarning =
+		! blockType || ! selectedBlockClientId || isSelectedBlockUnregistered;
+
+	if ( shouldShowWarning ) {
 		return (
 			<span className="block-editor-block-inspector__no-blocks">
 				{ __( 'No block selected.' ) }
@@ -163,6 +237,9 @@ function BlockInspector() {
 				clientId={ selectedBlockClientId }
 				blockName={ blockType.name }
 				isSectionBlock={ isSectionBlock }
+				availableTabs={ availableTabs }
+				contentClientIds={ contentClientIds }
+				hasBlockStyles={ hasBlockStyles }
 			/>
 		</BlockInspectorSingleBlockWrapper>
 	);
@@ -208,106 +285,49 @@ const BlockInspectorSingleBlock = ( {
 	clientId,
 	blockName,
 	isSectionBlock,
+	availableTabs,
+	contentClientIds,
+	hasBlockStyles,
 } ) => {
-	const availableTabs = useInspectorControlsTabs( blockName );
-	const showTabs = ! isSectionBlock && availableTabs?.length > 1;
+	const hasMultipleTabs = availableTabs?.length > 1;
 
-	const hasBlockStyles = useSelect(
-		( select ) => {
-			const { getBlockStyles } = select( blocksStore );
-			const blockStyles = getBlockStyles( blockName );
-			return blockStyles && blockStyles.length > 0;
-		},
-		[ blockName ]
-	);
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const borderPanelLabel = useBorderPanelLabel( { blockName } );
-	const contentClientIds = useSelect(
-		( select ) => {
-			// Avoid unnecessary subscription.
-			if ( ! isSectionBlock ) {
-				return;
-			}
+	const isBlockSynced = blockInformation.isSynced;
 
-			const {
-				getClientIdsOfDescendants,
-				getBlockName,
-				getBlockEditingMode,
-			} = select( blockEditorStore );
-			return getClientIdsOfDescendants( clientId ).filter(
-				( current ) =>
-					getBlockName( current ) !== 'core/list-item' &&
-					getBlockEditingMode( current ) === 'contentOnly'
-			);
-		},
-		[ isSectionBlock, clientId ]
-	);
+	const shouldShowTabs = ! isBlockSynced && hasMultipleTabs;
 
 	return (
 		<div className="block-editor-block-inspector">
 			<BlockCard
 				{ ...blockInformation }
-				className={ blockInformation.isSynced && 'is-synced' }
+				className={ isBlockSynced && 'is-synced' }
 			>
 				{ window?.__experimentalContentOnlyPatternInsertion && (
 					<EditContentsButton clientId={ clientId } />
 				) }
 			</BlockCard>
 			<BlockVariationTransforms blockClientId={ clientId } />
-			{ showTabs && (
+			{ shouldShowTabs && (
 				<InspectorControlsTabs
 					hasBlockStyles={ hasBlockStyles }
 					clientId={ clientId }
 					blockName={ blockName }
 					tabs={ availableTabs }
+					isSectionBlock={ isSectionBlock }
+					contentClientIds={ contentClientIds }
 				/>
 			) }
-			{ ! showTabs && (
+			{ ! shouldShowTabs && (
 				<>
 					{ hasBlockStyles && (
 						<BlockStylesPanel clientId={ clientId } />
 					) }
-
-					{ contentClientIds && contentClientIds?.length > 0 && (
-						<PanelBody title={ __( 'Content' ) }>
-							<BlockQuickNavigation
-								clientIds={ contentClientIds }
-							/>
-						</PanelBody>
-					) }
-
+					<ContentTab contentClientIds={ contentClientIds } />
 					{ ! isSectionBlock && (
-						<>
-							<InspectorControls.Slot />
-							<InspectorControls.Slot group="list" />
-							<InspectorControls.Slot
-								group="color"
-								label={ __( 'Color' ) }
-								className="color-block-support-panel__inner-wrapper"
-							/>
-							<InspectorControls.Slot
-								group="background"
-								label={ __( 'Background image' ) }
-							/>
-							<InspectorControls.Slot
-								group="typography"
-								label={ __( 'Typography' ) }
-							/>
-							<InspectorControls.Slot
-								group="dimensions"
-								label={ __( 'Dimensions' ) }
-							/>
-							<InspectorControls.Slot
-								group="border"
-								label={ borderPanelLabel }
-							/>
-							<InspectorControls.Slot group="styles" />
-							<PositionControls />
-							<InspectorControls.Slot group="bindings" />
-							<div>
-								<AdvancedControls />
-							</div>
-						</>
+						<StyleInspectorSlots
+							blockName={ blockName }
+							showListControls
+						/>
 					) }
 				</>
 			) }

package/src/components/block-switcher/index.js

@@ -199,7 +199,7 @@ export const BlockSwitcher = ( { clientIds } ) => {
 		isReusable,
 		isTemplate,
 		isDisabled,
-		isSection,
+		isSectionInSelection,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -243,6 +243,10 @@ export const BlockSwitcher = ( { clientIds } ) => {
 				_icon = isSelectionOfSameType ? blockType.icon : copy;
 			}
 
+			const _isSectionInSelection = clientIds.some( ( id ) =>
+				isSectionBlock( id )
+			);
+
 			return {
 				canRemove: canRemoveBlocks( clientIds ),
 				hasBlockStyles:
@@ -255,7 +259,7 @@ export const BlockSwitcher = ( { clientIds } ) => {
 					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
 				hasContentOnlyLocking: _hasTemplateLock,
 				isDisabled: editingMode !== 'default',
-				isSection: isSectionBlock( clientIds[ 0 ] ),
+				isSectionInSelection: _isSectionInSelection,
 			};
 		},
 		[ clientIds ]
@@ -285,7 +289,8 @@ export const BlockSwitcher = ( { clientIds } ) => {
 			: undefined;
 
 	const hideTransformsForSections =
-		window?.__experimentalContentOnlyPatternInsertion && isSection;
+		window?.__experimentalContentOnlyPatternInsertion &&
+		isSectionInSelection;
 	const hideDropdown =
 		hideTransformsForSections ||
 		isDisabled ||

package/src/components/inspector-controls-tabs/content-tab.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockQuickNavigation from '../block-quick-navigation';
+
+const ContentTab = ( { contentClientIds } ) => {
+	if ( ! contentClientIds || contentClientIds.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<PanelBody title={ __( 'Content' ) }>
+			<BlockQuickNavigation clientIds={ contentClientIds } />
+		</PanelBody>
+	);
+};
+
+export default ContentTab;

package/src/components/inspector-controls-tabs/index.js

@@ -12,9 +12,10 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { TAB_SETTINGS, TAB_STYLES, TAB_LIST_VIEW } from './utils';
+import { TAB_SETTINGS, TAB_STYLES, TAB_LIST_VIEW, TAB_CONTENT } from './utils';
 import SettingsTab from './settings-tab';
 import StylesTab from './styles-tab';
+import ContentTab from './content-tab';
 import InspectorControls from '../inspector-controls';
 import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
 import { unlock } from '../../lock-unlock';
@@ -26,6 +27,8 @@ export default function InspectorControlsTabs( {
 	clientId,
 	hasBlockStyles,
 	tabs,
+	isSectionBlock,
+	contentClientIds,
 } ) {
 	const showIconLabels = useSelect( ( select ) => {
 		return select( preferencesStore ).get( 'core', 'showIconLabels' );
@@ -69,8 +72,12 @@ export default function InspectorControlsTabs( {
 						blockName={ blockName }
 						clientId={ clientId }
 						hasBlockStyles={ hasBlockStyles }
+						isSectionBlock={ isSectionBlock }
 					/>
 				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ TAB_CONTENT.name } focusable={ false }>
+					<ContentTab contentClientIds={ contentClientIds } />
+				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ TAB_LIST_VIEW.name } focusable={ false }>
 					<InspectorControls.Slot group="list" />
 				</Tabs.TabPanel>

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -11,7 +11,12 @@ import BlockStyles from '../block-styles';
 import InspectorControls from '../inspector-controls';
 import { useBorderPanelLabel } from '../../hooks/border';
 
-const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
+const StylesTab = ( {
+	blockName,
+	clientId,
+	hasBlockStyles,
+	isSectionBlock,
+} ) => {
 	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 
 	return (
@@ -23,26 +28,33 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 					</PanelBody>
 				</div>
 			) }
-			<InspectorControls.Slot
-				group="color"
-				label={ __( 'Color' ) }
-				className="color-block-support-panel__inner-wrapper"
-			/>
-			<InspectorControls.Slot
-				group="background"
-				label={ __( 'Background image' ) }
-			/>
-			<InspectorControls.Slot group="filter" />
-			<InspectorControls.Slot
-				group="typography"
-				label={ __( 'Typography' ) }
-			/>
-			<InspectorControls.Slot
-				group="dimensions"
-				label={ __( 'Dimensions' ) }
-			/>
-			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
-			<InspectorControls.Slot group="styles" />
+			{ ! isSectionBlock && (
+				<>
+					<InspectorControls.Slot
+						group="color"
+						label={ __( 'Color' ) }
+						className="color-block-support-panel__inner-wrapper"
+					/>
+					<InspectorControls.Slot
+						group="background"
+						label={ __( 'Background image' ) }
+					/>
+					<InspectorControls.Slot group="filter" />
+					<InspectorControls.Slot
+						group="typography"
+						label={ __( 'Typography' ) }
+					/>
+					<InspectorControls.Slot
+						group="dimensions"
+						label={ __( 'Dimensions' ) }
+					/>
+					<InspectorControls.Slot
+						group="border"
+						label={ borderPanelLabel }
+					/>
+					<InspectorControls.Slot group="styles" />
+				</>
+			) }
 		</>
 	);
 };

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
 import InspectorControlsGroups from '../inspector-controls/groups';
 import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
 import { InspectorAdvancedControls } from '../inspector-controls';
-import { TAB_LIST_VIEW, TAB_SETTINGS, TAB_STYLES } from './utils';
+import { TAB_LIST_VIEW, TAB_SETTINGS, TAB_STYLES, TAB_CONTENT } from './utils';
 import { store as blockEditorStore } from '../../store';
 
 const EMPTY_ARRAY = [];
@@ -29,7 +29,12 @@ function getShowTabs( blockName, tabSettings = {} ) {
 	return true;
 }
 
-export default function useInspectorControlsTabs( blockName ) {
+export default function useInspectorControlsTabs(
+	blockName,
+	contentClientIds,
+	isSectionBlock,
+	hasBlockStyles
+) {
 	const tabs = [];
 	const {
 		bindings: bindingsGroup,
@@ -76,17 +81,25 @@ export default function useInspectorControlsTabs( blockName ) {
 		...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
 	];
 
+	const hasContentTab = !! (
+		contentClientIds && contentClientIds.length > 0
+	);
+
 	// Add the tabs in the order that they will default to if available.
-	// List View > Settings > Styles.
-	if ( hasListFills ) {
+	// List View > Content > Settings > Styles.
+	if ( hasListFills && ! isSectionBlock ) {
 		tabs.push( TAB_LIST_VIEW );
 	}
 
-	if ( settingsFills.length ) {
+	if ( hasContentTab ) {
+		tabs.push( TAB_CONTENT );
+	}
+
+	if ( settingsFills.length && ! isSectionBlock ) {
 		tabs.push( TAB_SETTINGS );
 	}
 
-	if ( hasStyleFills ) {
+	if ( isSectionBlock ? hasBlockStyles : hasStyleFills ) {
 		tabs.push( TAB_STYLES );
 	}
 

package/src/components/inspector-controls-tabs/utils.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { cog, styles, listView } from '@wordpress/icons';
+import { cog, styles, listView, page } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 export const TAB_SETTINGS = {
@@ -18,6 +18,13 @@ export const TAB_STYLES = {
 	icon: styles,
 };
 
+export const TAB_CONTENT = {
+	name: 'content',
+	title: __( 'Content' ),
+	value: 'content',
+	icon: page,
+};
+
 export const TAB_LIST_VIEW = {
 	name: 'list',
 	title: __( 'List View' ),