@wordpress/edit-site 4.7.0 → 4.10.0

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

@@ -6,7 +6,6 @@ import {
 	forEach,
 	get,
 	isEmpty,
-	isString,
 	kebabCase,
 	pickBy,
 	reduce,
@@ -24,7 +23,10 @@ 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
@@ -185,7 +187,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;
 
@@ -231,6 +233,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 +398,11 @@ 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,
 			} );
 		}
 
@@ -283,7 +416,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,7 +497,12 @@ 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 );
 
@@ -370,31 +515,90 @@ 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;
-		}
+	nodesWithStyles.forEach(
+		( {
+			selector,
+			duotoneSelector,
+			styles,
+			fallbackGapValue,
+			hasLayoutSupport,
+		} ) => {
+			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;
+			// Process duotone styles (they use color.__experimentalDuotone selector).
+			if ( duotoneSelector ) {
+				const duotoneDeclarations =
+					getStylesDeclarations( duotoneStyles );
+				if ( duotoneDeclarations.length === 0 ) {
+					return;
+				}
+				ruleset =
+					ruleset +
+					`${ duotoneSelector }{${ duotoneDeclarations.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;
+			// 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 );
+			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 seperated
+						// 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 +612,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 } ) => {
@@ -447,10 +654,15 @@ 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;
 		result[ name ] = {
+			duotoneSelector,
+			fallbackGapValue,
+			hasLayoutSupport,
 			name,
 			selector,
-			duotoneSelector,
 		};
 	} );
 
@@ -464,6 +676,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 +691,8 @@ export function useGlobalStylesOutput() {
 		const globalStyles = toStyles(
 			mergedConfig,
 			blockSelectors,
-			hasBlockGapSupport
+			hasBlockGapSupport,
+			hasFallbackGapSupport
 		);
 		const filters = toSvgFilters( mergedConfig, blockSelectors );
 		setStylesheets( [
@@ -493,7 +707,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:';

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';
@@ -57,9 +58,8 @@ export default function Header( {
 			getEditorMode,
 		} = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
-			editorStore
-		);
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
 		const postType = getEditedPostType();
@@ -108,47 +108,72 @@ export default function Header( {
 
 	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 }
+						/* translators: button label text should, if possible, be under 16
+				characters. */
 						label={ _x(
 							'Toggle block inserter',
 							'Generic label for block inserter button'
 						) }
+						showTooltip={ ! showIconLabels }
 					>
 						{ showIconLabels &&
 							( ! isInserterOpen ? __( 'Add' ) : __( 'Close' ) ) }
-					</Button>
+					</ToolbarItem>
 					{ 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

package/src/components/header/mode-switcher/index.js

@@ -36,10 +36,10 @@ function ModeSwitcher() {
 			shortcut: select(
 				keyboardShortcutsStore
 			).getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
-			isRichEditingEnabled: select( editSiteStore ).getSettings()
-				.richEditingEnabled,
-			isCodeEditingEnabled: select( editSiteStore ).getSettings()
-				.codeEditingEnabled,
+			isRichEditingEnabled:
+				select( editSiteStore ).getSettings().richEditingEnabled,
+			isCodeEditingEnabled:
+				select( editSiteStore ).getSettings().codeEditingEnabled,
 			mode: select( editSiteStore ).getEditorMode(),
 		} ),
 		[]

package/src/components/header/more-menu/copy-content-menu-item.js

@@ -18,9 +18,8 @@ export default function CopyContentMenuItem() {
 	const { createNotice } = useDispatch( noticesStore );
 	const getText = useSelect( ( select ) => {
 		return () => {
-			const { getEditedPostId, getEditedPostType } = select(
-				editSiteStore
-			);
+			const { getEditedPostId, getEditedPostType } =
+				select( editSiteStore );
 			const { getEditedEntityRecord } = select( coreStore );
 			const record = getEditedEntityRecord(
 				'postType',
@@ -49,5 +48,5 @@ export default function CopyContentMenuItem() {
 
 	const ref = useCopyToClipboard( getText, onSuccess );
 
-	return <MenuItem ref={ ref }>{ __( 'Copy all content' ) }</MenuItem>;
+	return <MenuItem ref={ ref }>{ __( 'Copy all blocks' ) }</MenuItem>;
 }

package/src/components/header/more-menu/site-export.js

@@ -21,14 +21,16 @@ export default function SiteExport() {
 			const response = await apiFetch( {
 				path: '/wp-block-editor/v1/export',
 				parse: false,
+				headers: {
+					Accept: 'application/zip',
+				},
 			} );
 			const blob = await response.blob();
 			const contentDisposition = response.headers.get(
 				'content-disposition'
 			);
-			const contentDispositionMatches = contentDisposition.match(
-				/=(.+)\.zip/
-			);
+			const contentDispositionMatches =
+				contentDisposition.match( /=(.+)\.zip/ );
 			const fileName = contentDispositionMatches[ 1 ]
 				? contentDispositionMatches[ 1 ]
 				: 'edit-site-export';

package/src/components/header/style.scss

@@ -16,9 +16,14 @@ $header-toolbar-min-width: 335px;
 		@include reduce-motion("transition");
 	}
 
-	.edit-site-header_start,
+	.edit-site-header_start {
+		display: flex;
+		border: none;
+	}
+
 	.edit-site-header_end {
 		display: flex;
+		justify-content: flex-end;
 	}
 
 	.edit-site-header_center {
@@ -33,10 +38,6 @@ $header-toolbar-min-width: 335px;
 		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
 		min-width: 0;
 	}
-
-	.edit-site-header_end {
-		justify-content: flex-end;
-	}
 }
 
 // Keeps the document title centered when the sidebar is open
@@ -152,6 +153,49 @@ body.is-navigation-sidebar-open {
 	}
 }
 
+.edit-site-header_start {
+	display: flex;
+	border: none;
+
+	// The Toolbar component adds different styles to buttons, so we reset them
+	// here to the original button styles
+	.edit-site-header__toolbar > .components-button.has-icon,
+	.edit-site-header__toolbar > .components-dropdown > .components-button.has-icon {
+		height: $button-size;
+		min-width: $button-size;
+		padding: 6px;
+
+		&.is-pressed {
+			background: $gray-900;
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
+			outline: 1px solid transparent;
+		}
+
+		&::before {
+			display: none;
+		}
+	}
+
+	.edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon {
+		margin-right: $grid-unit-10;
+		// Special dimensions for this button.
+		min-width: 32px;
+		width: 32px;
+		height: 32px;
+		padding: 0;
+	}
+
+	.edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon {
+		width: auto;
+		padding: 0 $grid-unit-10;
+	}
+
+
+}
+
 // Button text label styles
 
 .show-icon-labels .edit-site-header {
@@ -192,4 +236,8 @@ body.is-navigation-sidebar-open {
 		height: 36px;
 		padding: 0 6px;
 	}
+
+	.edit-site-header_start .edit-site-header__toolbar > * + * {
+		margin-left: $grid-unit-10;
+	}
 }

package/src/components/header/undo-redo/redo.js

@@ -7,8 +7,9 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
-export default function RedoButton() {
+function RedoButton( props, ref ) {
 	const hasRedo = useSelect(
 		( select ) => select( coreStore ).hasRedo(),
 		[]
@@ -16,6 +17,8 @@ export default function RedoButton() {
 	const { redo } = useDispatch( coreStore );
 	return (
 		<Button
+			{ ...props }
+			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
 			shortcut={ displayShortcut.primaryShift( 'z' ) }
@@ -27,3 +30,5 @@ export default function RedoButton() {
 		/>
 	);
 }
+
+export default forwardRef( RedoButton );