@wordpress/block-editor 14.7.1-next.082ed6819.0 → 14.8.1-next.a9f418477.0

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -5,12 +5,15 @@ import { isTextField } from '@wordpress/dom';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
+import { createRoot } from '@wordpress/element';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
+import BlockDraggableChip from '../../../components/block-draggable/draggable-chip';
 
 /**
  * Adds block behaviour:
@@ -21,12 +24,16 @@ import { unlock } from '../../../lock-unlock';
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const { getBlockRootClientId, getBlockIndex, isZoomOut } = unlock(
-		useSelect( blockEditorStore )
-	);
-	const { insertAfterBlock, removeBlock, resetZoomLevel } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { getBlockType } = useSelect( blocksStore );
+	const { getBlockRootClientId, isZoomOut, hasMultiSelection, getBlockName } =
+		unlock( useSelect( blockEditorStore ) );
+	const {
+		insertAfterBlock,
+		removeBlock,
+		resetZoomLevel,
+		startDraggingBlocks,
+		stopDraggingBlocks,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	return useRefEffect(
 		( node ) => {
@@ -76,7 +83,102 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			 * @param {DragEvent} event Drag event.
 			 */
 			function onDragStart( event ) {
-				event.preventDefault();
+				if (
+					node !== event.target ||
+					node.isContentEditable ||
+					node.ownerDocument.activeElement !== node ||
+					hasMultiSelection()
+				) {
+					event.preventDefault();
+					return;
+				}
+				const data = JSON.stringify( {
+					type: 'block',
+					srcClientIds: [ clientId ],
+					srcRootClientId: getBlockRootClientId( clientId ),
+				} );
+				event.dataTransfer.effectAllowed = 'move'; // remove "+" cursor
+				event.dataTransfer.clearData();
+				event.dataTransfer.setData( 'wp-blocks', data );
+				const { ownerDocument } = node;
+				const { defaultView } = ownerDocument;
+				const selection = defaultView.getSelection();
+				selection.removeAllRanges();
+
+				const domNode = document.createElement( 'div' );
+				const root = createRoot( domNode );
+				root.render(
+					<BlockDraggableChip
+						icon={ getBlockType( getBlockName( clientId ) ).icon }
+					/>
+				);
+				document.body.appendChild( domNode );
+				domNode.style.position = 'absolute';
+				domNode.style.top = '0';
+				domNode.style.left = '0';
+				domNode.style.zIndex = '1000';
+				domNode.style.pointerEvents = 'none';
+
+				// Setting the drag chip as the drag image actually works, but
+				// the behaviour is slightly different in every browser. In
+				// Safari, it animates, in Firefox it's slightly transparent...
+				// So we set a fake drag image and have to reposition it
+				// ourselves.
+				const dragElement = ownerDocument.createElement( 'div' );
+				// Chrome will show a globe icon if the drag element does not
+				// have dimensions.
+				dragElement.style.width = '1px';
+				dragElement.style.height = '1px';
+				dragElement.style.position = 'fixed';
+				dragElement.style.visibility = 'hidden';
+				ownerDocument.body.appendChild( dragElement );
+				event.dataTransfer.setDragImage( dragElement, 0, 0 );
+
+				let offset = { x: 0, y: 0 };
+
+				if ( document !== ownerDocument ) {
+					const frame = defaultView.frameElement;
+					if ( frame ) {
+						const rect = frame.getBoundingClientRect();
+						offset = { x: rect.left, y: rect.top };
+					}
+				}
+
+				// chip handle offset
+				offset.x -= 58;
+
+				function over( e ) {
+					domNode.style.transform = `translate( ${
+						e.clientX + offset.x
+					}px, ${ e.clientY + offset.y }px )`;
+				}
+
+				over( event );
+
+				function end() {
+					ownerDocument.removeEventListener( 'dragover', over );
+					ownerDocument.removeEventListener( 'dragend', end );
+					domNode.remove();
+					dragElement.remove();
+					stopDraggingBlocks();
+					document.body.classList.remove(
+						'is-dragging-components-draggable'
+					);
+					ownerDocument.documentElement.classList.remove(
+						'is-dragging'
+					);
+				}
+
+				ownerDocument.addEventListener( 'dragover', over );
+				ownerDocument.addEventListener( 'dragend', end );
+				ownerDocument.addEventListener( 'drop', end );
+
+				startDraggingBlocks( [ clientId ] );
+				// Important because it hides the block toolbar.
+				document.body.classList.add(
+					'is-dragging-components-draggable'
+				);
+				ownerDocument.documentElement.classList.add( 'is-dragging' );
 			}
 
 			node.addEventListener( 'keydown', onKeyDown );
@@ -91,11 +193,13 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			clientId,
 			isSelected,
 			getBlockRootClientId,
-			getBlockIndex,
 			insertAfterBlock,
 			removeBlock,
 			isZoomOut,
 			resetZoomLevel,
+			hasMultiSelection,
+			startDraggingBlocks,
+			stopDraggingBlocks,
 		]
 	);
 }

package/src/components/block-lock/modal.js

@@ -99,9 +99,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			>
 				<fieldset className="block-editor-block-lock-modal__options">
 					<legend>
-						{ __(
-							'Choose specific attributes to restrict or lock all available options.'
-						) }
+						{ __( 'Select the features you want to lock' ) }
 					</legend>
 					{ /*
 					 * Disable reason: The `list` ARIA role is redundant but
@@ -137,7 +135,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 									<li className="block-editor-block-lock-modal__checklist-item">
 										<CheckboxControl
 											__nextHasNoMarginBottom
-											label={ __( 'Restrict editing' ) }
+											label={ __( 'Lock editing' ) }
 											checked={ !! lock.edit }
 											onChange={ ( edit ) =>
 												setLock( ( prevLock ) => ( {
@@ -159,7 +157,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								<li className="block-editor-block-lock-modal__checklist-item">
 									<CheckboxControl
 										__nextHasNoMarginBottom
-										label={ __( 'Disable movement' ) }
+										label={ __( 'Lock movement' ) }
 										checked={ lock.move }
 										onChange={ ( move ) =>
 											setLock( ( prevLock ) => ( {
@@ -178,7 +176,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								<li className="block-editor-block-lock-modal__checklist-item">
 									<CheckboxControl
 										__nextHasNoMarginBottom
-										label={ __( 'Prevent removal' ) }
+										label={ __( 'Lock removal' ) }
 										checked={ lock.remove }
 										onChange={ ( remove ) =>
 											setLock( ( prevLock ) => ( {

package/src/components/block-parent-selector/index.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -24,31 +23,18 @@ import { unlock } from '../../lock-unlock';
  */
 export default function BlockParentSelector() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { parentClientId, isVisible } = useSelect( ( select ) => {
+	const { parentClientId } = useSelect( ( select ) => {
 		const {
-			getBlockName,
 			getBlockParents,
 			getSelectedBlockClientId,
-			getBlockEditingMode,
 			getParentSectionBlock,
 		} = unlock( select( blockEditorStore ) );
-		const { hasBlockSupport } = select( blocksStore );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		const parentSection = getParentSectionBlock( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
 		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( _parentClientId );
-		const _parentBlockType = getBlockType( parentBlockName );
 		return {
 			parentClientId: _parentClientId,
-			isVisible:
-				_parentClientId &&
-				getBlockEditingMode( _parentClientId ) !== 'disabled' &&
-				hasBlockSupport(
-					_parentBlockType,
-					'__experimentalParentSelector',
-					true
-				),
 		};
 	}, [] );
 	const blockInformation = useBlockDisplayInformation( parentClientId );
@@ -61,10 +47,6 @@ export default function BlockParentSelector() {
 		highlightParent: true,
 	} );
 
-	if ( ! isVisible ) {
-		return null;
-	}
-
 	return (
 		<div
 			className="block-editor-block-parent-selector"

package/src/components/block-patterns-list/index.js

@@ -41,6 +41,7 @@ function BlockPattern( {
 	onHover,
 	showTitlesAsTooltip,
 	category,
+	isSelected,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
@@ -114,6 +115,7 @@ function BlockPattern( {
 												pattern.type ===
 													INSERTER_PATTERN_TYPES.user &&
 												! pattern.syncStatus,
+											'is-selected': isSelected,
 										}
 									) }
 								/>
@@ -192,6 +194,7 @@ function BlockPatternsList(
 	ref
 ) {
 	const [ activeCompositeId, setActiveCompositeId ] = useState( undefined );
+	const [ activePattern, setActivePattern ] = useState( null ); // State to track active pattern
 
 	useEffect( () => {
 		// Reset the active composite item whenever the available patterns change,
@@ -201,6 +204,11 @@ function BlockPatternsList(
 		setActiveCompositeId( firstCompositeItemId );
 	}, [ blockPatterns ] );
 
+	const handleClickPattern = ( pattern, blocks ) => {
+		setActivePattern( pattern.name );
+		onClickPattern( pattern, blocks );
+	};
+
 	return (
 		<Composite
 			orientation={ orientation }
@@ -216,11 +224,14 @@ function BlockPatternsList(
 					key={ pattern.name }
 					id={ pattern.name }
 					pattern={ pattern }
-					onClick={ onClickPattern }
+					onClick={ handleClickPattern }
 					onHover={ onHover }
 					isDraggable={ isDraggable }
 					showTitlesAsTooltip={ showTitlesAsTooltip }
 					category={ category }
+					isSelected={
+						!! activePattern && activePattern === pattern.name
+					}
 				/>
 			) ) }
 			{ pagingProps && <BlockPatternsPaging { ...pagingProps } /> }

package/src/components/block-patterns-list/stories/fixtures.js

@@ -530,6 +530,7 @@ export default [
 													background: '#000000',
 												},
 											},
+											tagName: 'hr',
 										},
 										innerBlocks: [],
 										originalContent:

package/src/components/block-patterns-list/style.scss

@@ -44,19 +44,29 @@
 			outline: $border-width solid rgba($black, 0.1);
 			outline-offset: -$border-width;
 			border-radius: $radius-medium;
+
+			transition: outline 0.1s linear;
+			@include reduce-motion("transition");
 		}
 	}
 
-	&:hover:not(:focus) .block-editor-block-preview__container::after {
+	// Selected
+	&.is-selected .block-editor-block-preview__container::after {
+		outline-color: $gray-900;
+		outline-width: var(--wp-admin-border-width-focus);
+		outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
+	}
+
+	// Hover state
+	&:hover .block-editor-block-preview__container::after {
 		outline-color: rgba($black, 0.3);
 	}
 
-	&:focus .block-editor-block-preview__container::after {
+	// Focused state
+	&[data-focus-visible] .block-editor-block-preview__container::after {
 		outline-color: var(--wp-admin-theme-color);
 		outline-width: var(--wp-admin-border-width-focus);
-		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
-		transition: outline 0.1s linear;
-		@include reduce-motion("transition");
+		outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
 	}
 
 	.block-editor-patterns__pattern-details:not(:empty) {
@@ -68,6 +78,7 @@
 	.block-editor-patterns__pattern-icon-wrapper {
 		min-width: 24px;
 		height: 24px;
+
 		.block-editor-patterns__pattern-icon {
 			fill: var(--wp-block-synced-color);
 		}

package/src/components/block-popover/inbetween.js

@@ -148,6 +148,10 @@ function BlockPopoverInbetween( {
 								? nextRect.left - previousRect.right
 								: 0;
 					}
+
+					// Avoid a negative width which happens when the next rect
+					// is on the next line.
+					width = Math.max( width, 0 );
 				}
 
 				return new window.DOMRect( left, top, width, height );

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -57,6 +57,7 @@ export function BlockSettingsDropdown( {
 	const currentClientId = block?.clientId;
 	const count = clientIds.length;
 	const firstBlockClientId = clientIds[ 0 ];
+
 	const {
 		firstParentClientId,
 		parentBlockType,
@@ -64,6 +65,7 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
 		isContentOnly,
+		isZoomOut,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -74,6 +76,7 @@ export function BlockSettingsDropdown( {
 				getBlockAttributes,
 				getOpenedBlockSettingsMenu,
 				getBlockEditingMode,
+				isZoomOut: _isZoomOut,
 			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -98,10 +101,12 @@ export function BlockSettingsDropdown( {
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
+				isZoomOut: _isZoomOut(),
 			};
 		},
 		[ firstBlockClientId ]
 	);
+
 	const { getBlockOrder, getSelectedBlockClientIds } =
 		useSelect( blockEditorStore );
 
@@ -248,7 +253,7 @@ export function BlockSettingsDropdown( {
 											clientId={ firstBlockClientId }
 										/>
 									) }
-									{ ! isContentOnly && (
+									{ ( ! isContentOnly || isZoomOut ) && (
 										<CopyMenuItem
 											clientIds={ clientIds }
 											onCopy={ onCopy }

package/src/components/block-settings-menu-controls/index.js

@@ -55,7 +55,8 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 	const convertToGroupButtonProps =
 		useConvertToGroupButtonProps( selectedClientIds );
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
-	const showConvertToGroupButton = isGroupable || isUngroupable;
+	const showConvertToGroupButton =
+		( isGroupable || isUngroupable ) && ! isContentOnly;
 
 	return (
 		<Slot

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

@@ -18,6 +18,7 @@ import {
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { copy } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -185,21 +186,6 @@ function BlockSwitcherDropdownMenuContents( {
 	);
 }
 
-const BlockIndicator = ( { icon, showTitle, blockTitle } ) => (
-	<>
-		<BlockIcon
-			className="block-editor-block-switcher__toggle"
-			icon={ icon }
-			showColors
-		/>
-		{ showTitle && blockTitle && (
-			<span className="block-editor-block-switcher__toggle-text">
-				{ blockTitle }
-			</span>
-		) }
-	</>
-);
-
 export const BlockSwitcher = ( { clientIds } ) => {
 	const {
 		hasContentOnlyLocking,
@@ -272,6 +258,11 @@ export const BlockSwitcher = ( { clientIds } ) => {
 		clientId: clientIds?.[ 0 ],
 		maximumLength: 35,
 	} );
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
 
 	if ( invalidBlocks ) {
 		return null;
@@ -282,6 +273,11 @@ export const BlockSwitcher = ( { clientIds } ) => {
 		? blockTitle
 		: __( 'Multiple blocks selected' );
 
+	const blockIndicatorText =
+		( isReusable || isTemplate ) && ! showIconLabels && blockTitle
+			? blockTitle
+			: undefined;
+
 	const hideDropdown =
 		isDisabled ||
 		( ! hasBlockStyles && ! canRemove ) ||
@@ -295,12 +291,13 @@ export const BlockSwitcher = ( { clientIds } ) => {
 					className="block-editor-block-switcher__no-switcher-icon"
 					title={ blockSwitcherLabel }
 					icon={
-						<BlockIndicator
+						<BlockIcon
+							className="block-editor-block-switcher__toggle"
 							icon={ icon }
-							showTitle={ isReusable || isTemplate }
-							blockTitle={ blockTitle }
+							showColors
 						/>
 					}
+					text={ blockIndicatorText }
 				/>
 			</ToolbarGroup>
 		);
@@ -329,12 +326,13 @@ export const BlockSwitcher = ( { clientIds } ) => {
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={
-							<BlockIndicator
+							<BlockIcon
+								className="block-editor-block-switcher__toggle"
 								icon={ icon }
-								showTitle={ isReusable || isTemplate }
-								blockTitle={ blockTitle }
+								showColors
 							/>
 						}
+						text={ blockIndicatorText }
 						toggleProps={ {
 							description: blockSwitcherDescription,
 							...toggleProps,

package/src/components/block-switcher/style.scss

@@ -26,15 +26,6 @@
 	}
 }
 
-.block-editor-block-switcher__toggle-text {
-	margin-left: $grid-unit-10;
-
-	// Account for double label when show-text-buttons is set.
-	.show-icon-labels & {
-		display: none;
-	}
-}
-
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	display: flex;
 

package/src/components/block-title/test/index.js

@@ -31,7 +31,9 @@ const blockLabelMap = {
 };
 
 jest.mock( '@wordpress/blocks', () => {
+	const actualImplementation = jest.requireActual( '@wordpress/blocks' );
 	return {
+		...actualImplementation,
 		isReusableBlock( { title } ) {
 			return title === 'Reusable Block';
 		},

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

@@ -74,6 +74,8 @@ export function PrivateBlockToolbar( {
 		showGroupButtons,
 		showLockButtons,
 		showSwitchSectionStyleButton,
+		hasFixedToolbar,
+		isNavigationMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -85,8 +87,10 @@ export function PrivateBlockToolbar( {
 			getBlockAttributes,
 			getBlockParentsByBlockName,
 			getTemplateLock,
+			getSettings,
 			getParentSectionBlock,
 			isZoomOut,
+			isNavigationMode: _isNavigationMode,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -119,6 +123,9 @@ export function PrivateBlockToolbar( {
 		const _hasTemplateLock = selectedBlockClientIds.some(
 			( id ) => getTemplateLock( id ) === 'contentOnly'
 		);
+
+		const _isZoomOut = isZoomOut();
+
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
@@ -127,8 +134,9 @@ export function PrivateBlockToolbar( {
 			shouldShowVisualToolbar: isValid && isVisual,
 			toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
 			showParentSelector:
-				! isZoomOut() &&
+				! _isZoomOut &&
 				parentBlockType &&
+				editingMode !== 'contentOnly' &&
 				getBlockEditingMode( parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
 					parentBlockType,
@@ -139,11 +147,13 @@ export function PrivateBlockToolbar( {
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
 			hasContentOnlyLocking: _hasTemplateLock,
-			showShuffleButton: isZoomOut(),
-			showSlots: ! isZoomOut(),
-			showGroupButtons: ! isZoomOut(),
-			showLockButtons: ! isZoomOut(),
-			showSwitchSectionStyleButton: isZoomOut(),
+			showShuffleButton: _isZoomOut,
+			showSlots: ! _isZoomOut,
+			showGroupButtons: ! _isZoomOut,
+			showLockButtons: ! _isZoomOut,
+			showSwitchSectionStyleButton: _isZoomOut,
+			hasFixedToolbar: getSettings().hasFixedToolbar,
+			isNavigationMode: _isNavigationMode(),
 		};
 	}, [] );
 
@@ -170,6 +180,7 @@ export function PrivateBlockToolbar( {
 	// Shifts the toolbar to make room for the parent block selector.
 	const classes = clsx( 'block-editor-block-contextual-toolbar', {
 		'has-parent': showParentSelector,
+		'is-inverted-toolbar': isNavigationMode && ! hasFixedToolbar,
 	} );
 
 	const innerClasses = clsx( 'block-editor-block-toolbar', {

package/src/components/block-tools/style.scss

@@ -139,6 +139,50 @@
 		border-right-color: $gray-900;
 	}
 
+	.is-inverted-toolbar {
+		background-color: $gray-900;
+		color: $gray-100;
+
+		&.block-editor-block-contextual-toolbar {
+			border-color: $gray-800;
+		}
+
+		button {
+			color: $gray-300;
+
+			&:hover {
+				color: $white;
+			}
+
+			&:focus::before {
+				box-shadow: inset 0 0 0 1px $gray-900, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
+
+			&:disabled,
+			&[aria-disabled="true"] {
+				color: $gray-700;
+			}
+		}
+
+		.block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+			border-color: $gray-800;
+			background-color: $gray-900;
+		}
+
+		.block-editor-block-switcher__toggle {
+			color: $gray-100;
+		}
+
+		.components-toolbar-group,
+		.components-toolbar {
+			border-right-color: $gray-800 !important;
+		}
+
+		.is-pressed {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
 	// Hide the block toolbar if the insertion point is shown.
 	&.is-insertion-point-visible {
 		visibility: hidden;

package/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap

@@ -42,7 +42,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       <button
         aria-label="Align top"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -64,7 +64,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       <button
         aria-label="Align middle"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -86,7 +86,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       <button
         aria-label="Align bottom"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >