@wordpress/edit-site 4.8.0 → 4.11.0

package/src/components/global-styles/use-global-styles-output.js

@@ -6,7 +6,6 @@ import {
 	forEach,
 	get,
 	isEmpty,
-	isString,
 	kebabCase,
 	pickBy,
 	reduce,
@@ -24,15 +23,27 @@ import {
 } from '@wordpress/blocks';
 import { useEffect, useState, useContext } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
-import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '@wordpress/block-editor';
+import {
+	__unstablePresetDuotoneFilter as PresetDuotoneFilter,
+	__experimentalGetGapCSSValue as getGapCSSValue,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { PRESET_METADATA, ROOT_BLOCK_SELECTOR } from './utils';
+import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
 import { GlobalStylesContext } from './context';
 import { useSetting } from './hooks';
 
+// List of block support features that can have their related styles
+// generated under their own feature level selector rather than the block's.
+const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
+	__experimentalBorder: 'border',
+	color: 'color',
+	spacing: 'spacing',
+	typography: 'typography',
+};
+
 function compileStyleValue( uncompiledValue ) {
 	const VARIABLE_REFERENCE_PREFIX = 'var:';
 	const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
@@ -170,14 +181,26 @@ function flattenTree( input = {}, prefix, token ) {
 /**
  * Transform given style tree into a set of style declarations.
  *
- * @param {Object} blockStyles Block styles.
+ * @param {Object}  blockStyles         Block styles.
+ *
+ * @param {string}  selector            The selector these declarations should attach to.
+ *
+ * @param {boolean} useRootPaddingAlign Whether to use CSS custom properties in root selector.
  *
  * @return {Array} An array of style declarations.
  */
-function getStylesDeclarations( blockStyles = {} ) {
+function getStylesDeclarations(
+	blockStyles = {},
+	selector = '',
+	useRootPaddingAlign
+) {
+	const isRoot = ROOT_BLOCK_SELECTOR === selector;
 	const output = reduce(
 		STYLE_PROPERTY,
-		( declarations, { value, properties, useEngine }, key ) => {
+		( declarations, { value, properties, useEngine, rootOnly }, key ) => {
+			if ( rootOnly && ! isRoot ) {
+				return declarations;
+			}
 			const pathToValue = value;
 			if ( first( pathToValue ) === 'elements' || useEngine ) {
 				return declarations;
@@ -185,7 +208,7 @@ function getStylesDeclarations( blockStyles = {} ) {
 
 			const styleValue = get( blockStyles, pathToValue );
 
-			if ( !! properties && ! isString( styleValue ) ) {
+			if ( !! properties && typeof styleValue !== 'string' ) {
 				Object.entries( properties ).forEach( ( entry ) => {
 					const [ name, prop ] = entry;
 
@@ -195,13 +218,22 @@ function getStylesDeclarations( blockStyles = {} ) {
 						return;
 					}
 
-					const cssProperty = kebabCase( name );
+					const cssProperty = name.startsWith( '--' )
+						? name
+						: kebabCase( name );
 					declarations.push(
 						`${ cssProperty }: ${ compileStyleValue(
 							get( styleValue, [ prop ] )
 						) }`
 					);
 				} );
+			} else if (
+				key === '--wp--style--root--padding' &&
+				typeof styleValue === 'string'
+			) {
+				// Root-level padding styles don't currently support strings with CSS shorthand values.
+				// This may change: https://github.com/WordPress/gutenberg/issues/40132.
+				return declarations;
 			} else if ( get( blockStyles, pathToValue, false ) ) {
 				const cssProperty = key.startsWith( '--' )
 					? key
@@ -218,6 +250,10 @@ function getStylesDeclarations( blockStyles = {} ) {
 		[]
 	);
 
+	if ( isRoot && useRootPaddingAlign ) {
+		return output;
+	}
+
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
 	const extraRules = getCSSRules( blockStyles );
@@ -231,6 +267,135 @@ function getStylesDeclarations( blockStyles = {} ) {
 	return output;
 }
 
+/**
+ * Get generated CSS for layout styles by looking up layout definitions provided
+ * in theme.json, and outputting common layout styles, and specific blockGap values.
+ *
+ * @param {Object}  props
+ * @param {Object}  props.tree                  A theme.json tree containing layout definitions.
+ * @param {Object}  props.style                 A style object containing spacing values.
+ * @param {string}  props.selector              Selector used to group together layout styling rules.
+ * @param {boolean} props.hasBlockGapSupport    Whether or not the theme opts-in to blockGap support.
+ * @param {boolean} props.hasFallbackGapSupport Whether or not the theme allows fallback gap styles.
+ * @param {?string} props.fallbackGapValue      An optional fallback gap value if no real gap value is available.
+ * @return {string} Generated CSS rules for the layout styles.
+ */
+export function getLayoutStyles( {
+	tree,
+	style,
+	selector,
+	hasBlockGapSupport,
+	hasFallbackGapSupport,
+	fallbackGapValue,
+} ) {
+	let ruleset = '';
+	let gapValue = hasBlockGapSupport
+		? getGapCSSValue( style?.spacing?.blockGap )
+		: '';
+
+	// Ensure a fallback gap value for the root layout definitions,
+	// and use a fallback value if one is provided for the current block.
+	if ( hasFallbackGapSupport ) {
+		if ( selector === ROOT_BLOCK_SELECTOR ) {
+			gapValue = ! gapValue ? '0.5em' : gapValue;
+		} else if ( ! hasBlockGapSupport && fallbackGapValue ) {
+			gapValue = fallbackGapValue;
+		}
+	}
+
+	if ( gapValue && tree?.settings?.layout?.definitions ) {
+		Object.values( tree.settings.layout.definitions ).forEach(
+			( { className, name, spacingStyles } ) => {
+				// Allow skipping default layout for themes that opt-in to block styles, but opt-out of blockGap.
+				if ( ! hasBlockGapSupport && 'default' === name ) {
+					return;
+				}
+
+				if ( spacingStyles?.length ) {
+					spacingStyles.forEach( ( spacingStyle ) => {
+						const declarations = [];
+
+						if ( spacingStyle.rules ) {
+							Object.entries( spacingStyle.rules ).forEach(
+								( [ cssProperty, cssValue ] ) => {
+									declarations.push(
+										`${ cssProperty }: ${
+											cssValue ? cssValue : gapValue
+										}`
+									);
+								}
+							);
+						}
+
+						if ( declarations.length ) {
+							const combinedSelector =
+								selector === ROOT_BLOCK_SELECTOR
+									? `${ selector } .${ className }${
+											spacingStyle?.selector || ''
+									  }`
+									: `${ selector }.${ className }${
+											spacingStyle?.selector || ''
+									  }`;
+							ruleset += `${ combinedSelector } { ${ declarations.join(
+								'; '
+							) }; }`;
+						}
+					} );
+				}
+			}
+		);
+		// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+		if ( selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport ) {
+			ruleset += `${ selector } { --wp--style--block-gap: ${ gapValue }; }`;
+		}
+	}
+
+	// Output base styles
+	if (
+		selector === ROOT_BLOCK_SELECTOR &&
+		tree?.settings?.layout?.definitions
+	) {
+		const validDisplayModes = [ 'block', 'flex', 'grid' ];
+		Object.values( tree.settings.layout.definitions ).forEach(
+			( { className, displayMode, baseStyles } ) => {
+				if (
+					displayMode &&
+					validDisplayModes.includes( displayMode )
+				) {
+					ruleset += `${ selector } .${ className } { display:${ displayMode }; }`;
+				}
+
+				if ( baseStyles?.length ) {
+					baseStyles.forEach( ( baseStyle ) => {
+						const declarations = [];
+
+						if ( baseStyle.rules ) {
+							Object.entries( baseStyle.rules ).forEach(
+								( [ cssProperty, cssValue ] ) => {
+									declarations.push(
+										`${ cssProperty }: ${ cssValue }`
+									);
+								}
+							);
+						}
+
+						if ( declarations.length ) {
+							const combinedSelector = `${ selector } .${ className }${
+								baseStyle?.selector || ''
+							}`;
+							ruleset += `${ combinedSelector } { ${ declarations.join(
+								'; '
+							) }; }`;
+						}
+					} );
+				}
+			}
+		);
+	}
+
+	return ruleset;
+}
+
 export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	const nodes = [];
 
@@ -267,9 +432,12 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 		const blockStyles = pickStyleKeys( node );
 		if ( !! blockStyles && !! blockSelectors?.[ blockName ]?.selector ) {
 			nodes.push( {
-				styles: blockStyles,
-				selector: blockSelectors[ blockName ].selector,
 				duotoneSelector: blockSelectors[ blockName ].duotoneSelector,
+				fallbackGapValue: blockSelectors[ blockName ].fallbackGapValue,
+				hasLayoutSupport: blockSelectors[ blockName ].hasLayoutSupport,
+				selector: blockSelectors[ blockName ].selector,
+				styles: blockStyles,
+				featureSelectors: blockSelectors[ blockName ].featureSelectors,
 			} );
 		}
 
@@ -283,7 +451,14 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 					styles: value,
 					selector: blockSelectors[ blockName ].selector
 						.split( ',' )
-						.map( ( sel ) => sel + ' ' + ELEMENTS[ elementName ] )
+						.map( ( sel ) => {
+							const elementSelectors =
+								ELEMENTS[ elementName ].split( ',' );
+							return elementSelectors.map(
+								( elementSelector ) =>
+									sel + ' ' + elementSelector
+							);
+						} )
 						.join( ',' ),
 				} );
 			}
@@ -357,9 +532,15 @@ export const toCustomProperties = ( tree, blockSelectors ) => {
 	return ruleset;
 };
 
-export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
+export const toStyles = (
+	tree,
+	blockSelectors,
+	hasBlockGapSupport,
+	hasFallbackGapSupport
+) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
+	const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
 
 	/*
 	 * Reset default browser margin on the root body element.
@@ -370,31 +551,126 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 	 * @link https://github.com/WordPress/gutenberg/issues/36147.
 	 */
 	let ruleset = 'body {margin: 0;}';
-	nodesWithStyles.forEach( ( { selector, duotoneSelector, styles } ) => {
-		const duotoneStyles = {};
-		if ( styles?.filter ) {
-			duotoneStyles.filter = styles.filter;
-			delete styles.filter;
-		}
 
-		// Process duotone styles (they use color.__experimentalDuotone selector).
-		if ( duotoneSelector ) {
-			const duotoneDeclarations = getStylesDeclarations( duotoneStyles );
-			if ( duotoneDeclarations.length === 0 ) {
-				return;
+	if ( useRootPaddingAlign ) {
+		ruleset =
+			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+	}
+
+	nodesWithStyles.forEach(
+		( {
+			selector,
+			duotoneSelector,
+			styles,
+			fallbackGapValue,
+			hasLayoutSupport,
+			featureSelectors,
+		} ) => {
+			// Process styles for block support features with custom feature level
+			// CSS selectors set.
+			if ( featureSelectors ) {
+				Object.entries( featureSelectors ).forEach(
+					( [ featureName, featureSelector ] ) => {
+						if ( styles?.[ featureName ] ) {
+							const featureStyles = {
+								[ featureName ]: styles[ featureName ],
+							};
+							const featureDeclarations =
+								getStylesDeclarations( featureStyles );
+							delete styles[ featureName ];
+
+							if ( !! featureDeclarations.length ) {
+								ruleset =
+									ruleset +
+									`${ featureSelector }{${ featureDeclarations.join(
+										';'
+									) } }`;
+							}
+						}
+					}
+				);
 			}
-			ruleset =
-				ruleset +
-				`${ duotoneSelector }{${ duotoneDeclarations.join( ';' ) };}`;
-		}
 
-		// Process the remaning block styles (they use either normal block class or __experimentalSelector).
-		const declarations = getStylesDeclarations( styles );
-		if ( declarations.length === 0 ) {
-			return;
+			const duotoneStyles = {};
+			if ( styles?.filter ) {
+				duotoneStyles.filter = styles.filter;
+				delete styles.filter;
+			}
+
+			// Process duotone styles (they use color.__experimentalDuotone selector).
+			if ( duotoneSelector ) {
+				const duotoneDeclarations =
+					getStylesDeclarations( duotoneStyles );
+				if ( duotoneDeclarations.length === 0 ) {
+					return;
+				}
+				ruleset =
+					ruleset +
+					`${ duotoneSelector }{${ duotoneDeclarations.join(
+						';'
+					) };}`;
+			}
+
+			// Process blockGap and layout styles.
+			if ( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport ) {
+				ruleset += getLayoutStyles( {
+					tree,
+					style: styles,
+					selector,
+					hasBlockGapSupport,
+					hasFallbackGapSupport,
+					fallbackGapValue,
+				} );
+			}
+
+			// Process the remaining block styles (they use either normal block class or __experimentalSelector).
+			const declarations = getStylesDeclarations(
+				styles,
+				selector,
+				useRootPaddingAlign
+			);
+			if ( declarations?.length ) {
+				ruleset =
+					ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
+			}
+
+			// Check for pseudo selector in `styles` and handle separately.
+			const pseudoSelectorStyles = Object.entries( styles ).filter(
+				( [ key ] ) => key.startsWith( ':' )
+			);
+
+			if ( pseudoSelectorStyles?.length ) {
+				pseudoSelectorStyles.forEach(
+					( [ pseudoKey, pseudoStyle ] ) => {
+						const pseudoDeclarations =
+							getStylesDeclarations( pseudoStyle );
+
+						if ( ! pseudoDeclarations?.length ) {
+							return;
+						}
+
+						// `selector` maybe provided in a form
+						// where block level selectors have sub element
+						// selectors appended to them as a comma separated
+						// string.
+						// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
+						// Split and append pseudo selector to create
+						// the proper rules to target the elements.
+						const _selector = selector
+							.split( ',' )
+							.map( ( sel ) => sel + pseudoKey )
+							.join( ',' );
+
+						const pseudoRule = `${ _selector }{${ pseudoDeclarations.join(
+							';'
+						) };}`;
+
+						ruleset = ruleset + pseudoRule;
+					}
+				);
+			}
 		}
-		ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
-	} );
+	);
 
 	/* Add alignment / layout styles */
 	ruleset =
@@ -408,12 +684,15 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 		'.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
 
 	if ( hasBlockGapSupport ) {
+		// Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
+		const gapValue =
+			getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
 		ruleset =
 			ruleset +
 			'.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
 		ruleset =
 			ruleset +
-			'.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
+			`.wp-site-blocks > * + * { margin-block-start: ${ gapValue }; }`;
 	}
 
 	nodesWithSettings.forEach( ( { selector, presets } ) => {
@@ -438,7 +717,7 @@ export function toSvgFilters( tree, blockSelectors ) {
 	} );
 }
 
-const getBlockSelectors = ( blockTypes ) => {
+export const getBlockSelectors = ( blockTypes ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
@@ -447,10 +726,35 @@ const getBlockSelectors = ( blockTypes ) => {
 			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
 		const duotoneSelector =
 			blockType?.supports?.color?.__experimentalDuotone ?? null;
+		const hasLayoutSupport = !! blockType?.supports?.__experimentalLayout;
+		const fallbackGapValue =
+			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
+
+		// For each block support feature add any custom selectors.
+		const featureSelectors = {};
+		Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
+			( [ featureKey, featureName ] ) => {
+				const featureSelector =
+					blockType?.supports?.[ featureKey ]?.__experimentalSelector;
+
+				if ( featureSelector ) {
+					featureSelectors[ featureName ] = scopeSelector(
+						selector,
+						featureSelector
+					);
+				}
+			}
+		);
+
 		result[ name ] = {
+			duotoneSelector,
+			fallbackGapValue,
+			featureSelectors: Object.keys( featureSelectors ).length
+				? featureSelectors
+				: undefined,
+			hasLayoutSupport,
 			name,
 			selector,
-			duotoneSelector,
 		};
 	} );
 
@@ -464,6 +768,7 @@ export function useGlobalStylesOutput() {
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
 	const [ blockGap ] = useSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGap !== null;
+	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
 
 	useEffect( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
@@ -478,7 +783,8 @@ export function useGlobalStylesOutput() {
 		const globalStyles = toStyles(
 			mergedConfig,
 			blockSelectors,
-			hasBlockGapSupport
+			hasBlockGapSupport,
+			hasFallbackGapSupport
 		);
 		const filters = toSvgFilters( mergedConfig, blockSelectors );
 		setStylesheets( [
@@ -493,7 +799,7 @@ export function useGlobalStylesOutput() {
 		] );
 		setSettings( mergedConfig.settings );
 		setSvgFilters( filters );
-	}, [ mergedConfig ] );
+	}, [ hasBlockGapSupport, hasFallbackGapSupport, mergedConfig ] );
 
 	return [ stylesheets, settings, svgFilters, hasBlockGapSupport ];
 }

package/src/components/global-styles/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, find, isString } from 'lodash';
+import { get, find } from 'lodash';
 
 /* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
@@ -11,6 +11,7 @@ export const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'buttonColor',
 	'fontFamily',
 	'fontSize',
 	'fontStyle',
@@ -75,6 +76,8 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
 	'elements.link.color.text': 'color',
+	'elements.button.color.text': 'color',
+	'elements.button.backgroundColor': 'background-color',
 	'color.gradient': 'gradient',
 	'typography.fontSize': 'font-size',
 	'typography.fontFamily': 'font-family',
@@ -210,7 +213,7 @@ function getValueFromCustomVariable( features, blockName, variable, path ) {
 }
 
 export function getValueFromVariable( features, blockName, variable ) {
-	if ( ! variable || ! isString( variable ) ) {
+	if ( ! variable || typeof variable !== 'string' ) {
 		return variable;
 	}
 	const USER_VALUE_PREFIX = 'var:';
@@ -252,3 +255,34 @@ export function getValueFromVariable( features, blockName, variable ) {
 	}
 	return variable;
 }
+
+/**
+ * Function that scopes a selector with another one. This works a bit like
+ * SCSS nesting except the `&` operator isn't supported.
+ *
+ * @example
+ * ```js
+ * const scope = '.a, .b .c';
+ * const selector = '> .x, .y';
+ * const merged = scopeSelector( scope, selector );
+ * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
+ * ```
+ *
+ * @param {string} scope    Selector to scope to.
+ * @param {string} selector Original selector.
+ *
+ * @return {string} Scoped selector.
+ */
+export function scopeSelector( scope, selector ) {
+	const scopes = scope.split( ',' );
+	const selectors = selector.split( ',' );
+
+	const selectorsScoped = [];
+	scopes.forEach( ( outer ) => {
+		selectors.forEach( ( inner ) => {
+			selectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );
+		} );
+	} );
+
+	return selectorsScoped.join( ', ' );
+}

package/src/components/header/index.js

@@ -6,6 +6,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import {
 	ToolSelector,
 	__experimentalPreviewOptions as PreviewOptions,
+	NavigableToolbar,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
@@ -105,49 +106,73 @@ export default function Header( {
 
 	const isFocusMode = templateType === 'wp_template_part';
 
+	/* translators: button label text should, if possible, be under 16 characters. */
+	const longLabel = _x(
+		'Toggle block inserter',
+		'Generic label for block inserter button'
+	);
+	const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' );
+
 	return (
 		<div className="edit-site-header">
-			<div className="edit-site-header_start">
+			<NavigableToolbar
+				className="edit-site-header_start"
+				aria-label={ __( 'Document tools' ) }
+			>
 				<div className="edit-site-header__toolbar">
-					<Button
+					<ToolbarItem
 						ref={ inserterButton }
+						as={ Button }
+						className="edit-site-header-toolbar__inserter-toggle"
 						variant="primary"
 						isPressed={ isInserterOpen }
-						className="edit-site-header-toolbar__inserter-toggle"
-						disabled={ ! isVisualMode }
 						onMouseDown={ preventDefault }
 						onClick={ openInserter }
+						disabled={ ! isVisualMode }
 						icon={ plus }
-						label={ _x(
-							'Toggle block inserter',
-							'Generic label for block inserter button'
-						) }
-					>
-						{ showIconLabels &&
-							( ! isInserterOpen ? __( 'Add' ) : __( 'Close' ) ) }
-					</Button>
+						label={ showIconLabels ? shortLabel : longLabel }
+						showTooltip={ ! showIconLabels }
+					/>
 					{ isLargeViewport && (
 						<>
 							<ToolbarItem
 								as={ ToolSelector }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
 								disabled={ ! isVisualMode }
 							/>
-							<UndoButton />
-							<RedoButton />
-							<Button
+							<ToolbarItem
+								as={ UndoButton }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+							/>
+							<ToolbarItem
+								as={ RedoButton }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+							/>
+							<ToolbarItem
+								as={ Button }
 								className="edit-site-header-toolbar__list-view-toggle"
-								disabled={ ! isVisualMode }
 								icon={ listView }
+								disabled={ ! isVisualMode }
 								isPressed={ isListViewOpen }
 								/* translators: button label text should, if possible, be under 16 characters. */
 								label={ __( 'List View' ) }
 								onClick={ toggleListView }
 								shortcut={ listViewShortcut }
+								showTooltip={ ! showIconLabels }
 							/>
 						</>
 					) }
 				</div>
-			</div>
+			</NavigableToolbar>
 
 			<div className="edit-site-header_center">
 				<DocumentActions