Add a contentOnly inspector slot and show image block controls within it

WordPress · Apr 3, 2024 · e08be19 · e08be19
1 parent ba0b2c4
commit e08be19
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 89 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -15,7 +15,9 @@ import { useSelect } from '@wordpress/data';
  */
 import SkipToSelectedBlock from '../skip-to-selected-block';
 import BlockCard from '../block-card';
-import MultiSelectionInspector from '../multi-selection-inspector';
+import MultiSelectionInspector, {
+	MultiSelectionControls,
+} from '../multi-selection-inspector';
 import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
@@ -74,6 +76,7 @@ function BlockInspectorContentLockedChild( { clientId } ) {
 			/>
 			<BlockVariationTransforms blockClientId={ clientId } />
 			<BlockInfo.Slot />
+			<InspectorControls.Slot group="contentOnly" />
 		</div>
 	);
 }
@@ -88,14 +91,14 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		isContentLockedChild,
 	} = useSelect( ( select ) => {
 		const {
-			getSelectedBlockClientId,
+			getSelectedBlockClientIds,
 			getSelectedBlockCount,
 			getBlockName,
 			getTemplateLock,
 			__unstableGetContentLockingParent,
 		} = select( blockEditorStore );
 
-		const _selectedBlockClientId = getSelectedBlockClientId();
+		const _selectedBlockClientId = getSelectedBlockClientIds()?.[ 0 ];
 		const _selectedBlockName =
 			_selectedBlockClientId && getBlockName( _selectedBlockClientId );
 		const _blockType =
@@ -115,9 +118,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		};
 	}, [] );
 
-	const availableTabs = useInspectorControlsTabs( blockType?.name );
-	const showTabs = availableTabs?.length > 1;
-
 	// The block inspector animation settings will be completely
 	// removed in the future to create an API which allows the block
 	// inspector to transition between what it
@@ -129,38 +129,15 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		selectedBlockClientId
 	);
 
-	const borderPanelLabel = useBorderPanelLabel( {
-		blockName: selectedBlockName,
-	} );
-
 	if ( count > 1 ) {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
-				{ showTabs ? (
-					<InspectorControlsTabs tabs={ availableTabs } />
-				) : (
-					<>
-						<InspectorControls.Slot />
-						<InspectorControls.Slot
-							group="color"
-							label={ __( 'Color' ) }
-							className="color-block-support-panel__inner-wrapper"
-						/>
-						<InspectorControls.Slot
-							group="typography"
-							label={ __( 'Typography' ) }
-						/>
-						<InspectorControls.Slot
-							group="dimensions"
-							label={ __( 'Dimensions' ) }
-						/>
-						<InspectorControls.Slot
-							group="border"
-							label={ borderPanelLabel }
-						/>
-						<InspectorControls.Slot group="styles" />
-					</>
+				{ ! isContentLockedChild && (
+					<MultiSelectionControls
+						blockType={ blockType }
+						blockName={ selectedBlockName }
+					/>
 				) }
 			</div>
 		);

diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -21,6 +21,9 @@ const InspectorControlsTypography = createSlotFill(
 const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
 const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
 const InspectorControlsEffects = createSlotFill( 'InspectorControlsEffects' );
+const InspectorControlsContentOnly = createSlotFill(
+	'InspectorControlsContentOnly'
+);
 
 const groups = {
 	default: InspectorControlsDefault,
@@ -36,6 +39,7 @@ const groups = {
 	settings: InspectorControlsDefault, // Alias for default.
 	styles: InspectorControlsStyles,
 	typography: InspectorControlsTypography,
+	contentOnly: InspectorControlsContentOnly,
 };
 
 export default groups;
diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js
@@ -1,11 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { sprintf, _n } from '@wordpress/i18n';
+import { sprintf, _n, __ } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
 import { serialize } from '@wordpress/blocks';
 import { count as wordCount } from '@wordpress/wordcount';
 import { copy } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import { useBorderPanelLabel } from '../../hooks/border';
+import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
+import { default as InspectorControls } from '../inspector-controls';
+import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 
 /**
  * Internal dependencies
@@ -45,3 +52,34 @@ export default withSelect( ( select ) => {
 		blocks: getMultiSelectedBlocks(),
 	};
 } )( MultiSelectionInspector );
+
+export function MultiSelectionControls( { blockType, blockName } ) {
+	const availableTabs = useInspectorControlsTabs( blockType?.name );
+	const showTabs = availableTabs?.length > 1;
+	const borderPanelLabel = useBorderPanelLabel( {
+		blockName,
+	} );
+
+	return showTabs ? (
+		<InspectorControlsTabs tabs={ availableTabs } />
+	) : (
+		<>
+			<InspectorControls.Slot />
+			<InspectorControls.Slot
+				group="color"
+				label={ __( 'Color' ) }
+				className="color-block-support-panel__inner-wrapper"
+			/>
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
+			<InspectorControls.Slot
+				group="dimensions"
+				label={ __( 'Dimensions' ) }
+			/>
+			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
+			<InspectorControls.Slot group="styles" />
+		</>
+	);
+}
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -10,7 +10,6 @@ import {
 	TextControl,
 	ToolbarButton,
 	ToolbarGroup,
-	Dropdown,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -31,7 +30,6 @@ import {
 } from '@wordpress/block-editor';
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
-import { DOWN } from '@wordpress/keycodes';
 import { getFilename } from '@wordpress/url';
 import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { crop, overlayText, upload } from '@wordpress/icons';
@@ -559,38 +557,27 @@ export default function Image( {
 					</ToolbarGroup>
 				</BlockControls>
 			) }
-			{ isContentOnlyMode && (
+			{ isContentOnlyMode && isSingleSelected && (
 				// Add some extra controls for content attributes when content only mode is active.
-				// With content only mode active, the inspector is hidden, so users need another way
-				// to edit these attributes.
-				<BlockControls group="other">
-					<Dropdown
-						popoverProps={ { position: 'bottom right' } }
-						renderToggle={ ( { isOpen, onToggle } ) => (
-							<ToolbarButton
-								onClick={ onToggle }
-								aria-haspopup="true"
-								aria-expanded={ isOpen }
-								onKeyDown={ ( event ) => {
-									if ( ! isOpen && event.keyCode === DOWN ) {
-										event.preventDefault();
-										onToggle();
-									}
-								} }
-							>
-								{ _x(
-									'Alt',
-									'Alternative text for an image. Block toolbar label, a low character count is preferred.'
-								) }
-							</ToolbarButton>
-						) }
-						renderContent={ () => (
+				<InspectorControls group="contentOnly">
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ resetAll }
+						dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+					>
+						<ToolsPanelItem
+							label={ __( 'Alternative text' ) }
+							isShownByDefault
+							hasValue={ () => !! alt }
+							onDeselect={ () =>
+								setAttributes( { alt: undefined } )
+							}
+						>
 							<TextareaControl
-								className="wp-block-image__toolbar_content_textarea"
 								label={ __( 'Alternative text' ) }
 								value={ alt || '' }
 								onChange={ updateAlt }
-								disabled={ lockAltControls }
+								readOnly={ lockAltControls }
 								help={
 									lockAltControls ? (
 										<>{ lockAltControlsMessage }</>
@@ -610,33 +597,21 @@ export default function Image( {
 								}
 								__nextHasNoMarginBottom
 							/>
-						) }
-					/>
-					<Dropdown
-						popoverProps={ { position: 'bottom right' } }
-						renderToggle={ ( { isOpen, onToggle } ) => (
-							<ToolbarButton
-								onClick={ onToggle }
-								aria-haspopup="true"
-								aria-expanded={ isOpen }
-								onKeyDown={ ( event ) => {
-									if ( ! isOpen && event.keyCode === DOWN ) {
-										event.preventDefault();
-										onToggle();
-									}
-								} }
-							>
-								{ __( 'Title' ) }
-							</ToolbarButton>
-						) }
-						renderContent={ () => (
+						</ToolsPanelItem>
+						<ToolsPanelItem
+							label={ __( 'Title attribute' ) }
+							hasValue={ () => !! title }
+							onDeselect={ () =>
+								setAttributes( { title: undefined } )
+							}
+						>
 							<TextControl
-								className="wp-block-image__toolbar_content_textarea"
 								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Title attribute' ) }
 								value={ title || '' }
 								onChange={ onSetTitle }
-								disabled={ lockTitleControls }
+								readOnly={ lockTitleControls }
 								help={
 									lockTitleControls ? (
 										<>{ lockTitleControlsMessage }</>
@@ -654,9 +629,9 @@ export default function Image( {
 									)
 								}
 							/>
-						) }
-					/>
-				</BlockControls>
+						</ToolsPanelItem>
+					</ToolsPanel>
+				</InspectorControls>
 			) }
 			<InspectorControls>
 				<ToolsPanel