Replace text control to set section index on attributes

WordPress · Nov 16, 2023 · bc6d240 · bc6d240
1 parent 02c98cc
commit bc6d240
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 49 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -121,10 +121,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 				) : (
 					<>
 						<InspectorControls.Slot />
-						<InspectorControls.Slot
-							group="section"
-							label={ __( 'Sections' ) }
-						/>
+						<InspectorControls.Slot group="section" />
 						<InspectorControls.Slot
 							group="color"
 							label={ __( 'Color' ) }
@@ -286,10 +283,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					) }
 					<InspectorControls.Slot />
 					<InspectorControls.Slot group="list" />
-					<InspectorControls.Slot
-						group="section"
-						label={ __( 'Sections' ) }
-					/>
+					<InspectorControls.Slot group="section" />
 					<InspectorControls.Slot
 						group="color"
 						label={ __( 'Color' ) }

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
@@ -27,10 +27,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 					</PanelBody>
 				</div>
 			) }
-			<InspectorControls.Slot
-				group="section"
-				label={ __( 'Sections' ) }
-			/>
+			<InspectorControls.Slot group="section" />
 			<InspectorControls.Slot
 				group="color"
 				label={ __( 'Color' ) }

diff --git a/packages/block-editor/src/hooks/section.js b/packages/block-editor/src/hooks/section.js
@@ -8,11 +8,12 @@ import classnames from 'classnames';
  */
 import { getBlockSupport } from '@wordpress/blocks';
 import {
-	TextControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
+	Button,
+	PanelBody,
+	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 
@@ -21,6 +22,7 @@ import { __ } from '@wordpress/i18n';
  */
 import InspectorControls from '../components/inspector-controls';
 import useDisplayBlockControls from '../components/use-display-block-controls';
+import { store as blockEditorStore } from '../store';
 import { useBlockEditingMode } from '..';
 
 export const SECTION_SUPPORT_KEY = 'section';
@@ -91,52 +93,52 @@ function addEditProps( settings ) {
 	return settings;
 }
 
-function SectionPanelItem( props ) {
-	const { attributes, clientId, setAttributes } = props;
-
-	const resetAllFilter = useCallback( ( previousValue ) => {
-		return {
-			...previousValue,
-			section: undefined,
-		};
-	}, [] );
-
+function SectionsSelector( { attributes, sections, setAttributes } ) {
 	return (
-		<ToolsPanelItem
-			hasValue={ () => !! attributes.section }
-			label={ __( 'Section' ) }
-			onDeselect={ () => setAttributes( { section: undefined } ) }
-			isShownByDefault={ true }
-			resetAllFilter={ resetAllFilter }
-			panelId={ clientId }
-		>
-			<TextControl
-				__nextHasNoMarginBottom
-				label={ __( 'Index' ) }
-				value={ attributes.section ?? '' }
-				onChange={ ( nextValue ) => {
-					setAttributes( {
-						section:
-							nextValue !== ''
-								? parseInt( nextValue, 10 )
-								: undefined,
-					} );
-				} }
-			/>
-		</ToolsPanelItem>
+		<div className="block-editor-sections">
+			{ sections.map( ( section, index ) => (
+				<Button
+					__next40pxDefaultSize
+					className={ classnames( 'block-editor-sections__item', {
+						'is-active': attributes.section === index,
+					} ) }
+					key={ `section-${ index }` }
+					variant="secondary"
+					label={ section.title } // TODO: Make sure this is translatable in theme.json
+					onClick={ () => setAttributes( { section: index } ) }
+					aria-current={ attributes.section === index }
+				>
+					<Truncate
+						numberOfLines={ 1 }
+						className="block-editor-sections__item-text"
+					>
+						{ section.title }
+					</Truncate>
+				</Button>
+			) ) }
+		</div>
 	);
 }
 
 function SectionPanel( props ) {
+	const sections = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings().__experimentalStyles
+			?.sections;
+	} );
+
 	// TODO: Add theme.json setting to disable section styling.
 
-	if ( ! hasSectionSupport( props.name ) ) {
+	if ( ! sections || ! hasSectionSupport( props.name ) ) {
 		return null;
 	}
 
 	return (
 		<InspectorControls group="section">
-			<SectionPanelItem { ...props } />
+			<div>
+				<PanelBody title={ __( 'Sections' ) }>
+					<SectionsSelector { ...props } sections={ sections } />
+				</PanelBody>
+			</div>
 		</InspectorControls>
 	);
 }

diff --git a/packages/block-editor/src/hooks/section.scss b/packages/block-editor/src/hooks/section.scss
@@ -0,0 +1,44 @@
+.block-editor-sections {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: $grid-unit-10;
+
+	button.components-button.block-editor-sections__item {
+		color: $gray-900;
+		box-shadow: inset 0 0 0 $border-width $gray-300;
+		display: inline-block;
+		width: calc(50% - #{$grid-unit-05});
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 $border-width $gray-300;
+		}
+
+		&.is-active,
+		&.is-active:hover {
+			background-color: $gray-900;
+			box-shadow: none;
+		}
+
+		&.is-active .block-editor-sections__item-text,
+		&.is-active:hover .block-editor-sections__item-text {
+			color: $white;
+		}
+
+		&:focus,
+		&.is-active:focus {
+			@include block-toolbar-button-style__focus();
+		}
+	}
+
+	.block-editor-sections__item-text {
+		word-break: break-all;
+		// The Button component is white-space: nowrap, and that won't work with line-clamp.
+		white-space: normal;
+
+		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+		text-align: start;
+		text-align-last: center;
+	}
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -55,6 +55,7 @@
 @import "./hooks/layout.scss";
 @import "./hooks/padding.scss";
 @import "./hooks/position.scss";
+@import "./hooks/section.scss";
 @import "./hooks/typography.scss";
 @import "./hooks/block-rename-ui.scss";