@wordpress/edit-site 4.11.0 → 4.12.0

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

@@ -0,0 +1,228 @@
+/**
+ * The fluid utilities must match the backend equivalent.
+ * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php
+ * ---------------------------------------------------------------
+ */
+
+/**
+ * Returns a font-size value based on a given font-size preset.
+ * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
+ *
+ * @param {Object}           preset
+ * @param {string}           preset.size              A default font size.
+ * @param {string}           preset.name              A font size name, displayed in the UI.
+ * @param {string}           preset.slug              A font size slug.
+ * @param {Object}           preset.fluid
+ * @param {string|undefined} preset.fluid.max         A maximum font size value.
+ * @param {string|undefined} preset.fluid.min         A minimum font size value.
+ * @param {Object}           typographySettings
+ * @param {boolean}          typographySettings.fluid Whether fluid typography is enabled.
+ *
+ * @return {string} An font-size value
+ */
+export function getTypographyFontSizeValue( preset, typographySettings ) {
+	const { size: defaultSize } = preset;
+
+	if ( true !== typographySettings?.fluid ) {
+		return defaultSize;
+	}
+
+	// Defaults.
+	const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
+	const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
+	const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
+	const DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;
+	const DEFAULT_SCALE_FACTOR = 1;
+
+	// Font sizes.
+	// A font size has explicitly bypassed fluid calculations.
+	if ( false === preset?.fluid ) {
+		return defaultSize;
+	}
+
+	const fluidFontSizeSettings = preset?.fluid || {};
+
+	// Try to grab explicit min and max fluid font sizes.
+	let minimumFontSizeRaw = fluidFontSizeSettings?.min;
+	let maximumFontSizeRaw = fluidFontSizeSettings?.max;
+	const preferredSize = getTypographyValueAndUnit( defaultSize );
+
+	// Protect against unsupported units.
+	if ( ! preferredSize?.unit ) {
+		return defaultSize;
+	}
+
+	// If no fluid min or max font sizes are available, create some using min/max font size factors.
+	if ( ! minimumFontSizeRaw ) {
+		minimumFontSizeRaw =
+			preferredSize.value * DEFAULT_MINIMUM_FONT_SIZE_FACTOR +
+			preferredSize.unit;
+	}
+
+	if ( ! maximumFontSizeRaw ) {
+		maximumFontSizeRaw =
+			preferredSize.value * DEFAULT_MAXIMUM_FONT_SIZE_FACTOR +
+			preferredSize.unit;
+	}
+
+	const fluidFontSizeValue = getComputedFluidTypographyValue( {
+		maximumViewPortWidth: DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
+		minimumViewPortWidth: DEFAULT_MINIMUM_VIEWPORT_WIDTH,
+		maximumFontSize: maximumFontSizeRaw,
+		minimumFontSize: minimumFontSizeRaw,
+		scaleFactor: DEFAULT_SCALE_FACTOR,
+	} );
+
+	if ( !! fluidFontSizeValue ) {
+		return fluidFontSizeValue;
+	}
+
+	return defaultSize;
+}
+
+/**
+ * Internal implementation of clamp() based on available min/max viewport width, and min/max font sizes.
+ *
+ * @param {Object} args
+ * @param {string} args.maximumViewPortWidth Maximum size up to which type will have fluidity.
+ * @param {string} args.minimumViewPortWidth Minimum viewport size from which type will have fluidity.
+ * @param {string} args.maximumFontSize      Maximum font size for any clamp() calculation.
+ * @param {string} args.minimumFontSize      Minimum font size for any clamp() calculation.
+ * @param {number} args.scaleFactor          A scale factor to determine how fast a font scales within boundaries.
+ *
+ * @return {string|null} A font-size value using clamp().
+ */
+export function getComputedFluidTypographyValue( {
+	maximumViewPortWidth,
+	minimumViewPortWidth,
+	maximumFontSize,
+	minimumFontSize,
+	scaleFactor,
+} ) {
+	// Grab the minimum font size and normalize it in order to use the value for calculations.
+	const minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );
+
+	// We get a 'preferred' unit to keep units consistent when calculating,
+	// otherwise the result will not be accurate.
+	const fontSizeUnit = minimumFontSizeParsed?.unit || 'rem';
+
+	// Grab the maximum font size and normalize it in order to use the value for calculations.
+	const maximumFontSizeParsed = getTypographyValueAndUnit( maximumFontSize, {
+		coerceTo: fontSizeUnit,
+	} );
+
+	// Protect against unsupported units.
+	if ( ! minimumFontSizeParsed || ! maximumFontSizeParsed ) {
+		return null;
+	}
+
+	// Use rem for accessible fluid target font scaling.
+	const minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {
+		coerceTo: 'rem',
+	} );
+
+	// Viewport widths defined for fluid typography. Normalize units
+	const maximumViewPortWidthParsed = getTypographyValueAndUnit(
+		maximumViewPortWidth,
+		{ coerceTo: fontSizeUnit }
+	);
+	const minumumViewPortWidthParsed = getTypographyValueAndUnit(
+		minimumViewPortWidth,
+		{ coerceTo: fontSizeUnit }
+	);
+
+	// Protect against unsupported units.
+	if (
+		! maximumViewPortWidthParsed ||
+		! minumumViewPortWidthParsed ||
+		! minimumFontSizeRem
+	) {
+		return null;
+	}
+
+	// Build CSS rule.
+	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
+	const minViewPortWidthOffsetValue = roundToPrecision(
+		minumumViewPortWidthParsed.value / 100,
+		3
+	);
+
+	const viewPortWidthOffset = minViewPortWidthOffsetValue + fontSizeUnit;
+	let linearFactor =
+		100 *
+		( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /
+			( maximumViewPortWidthParsed.value -
+				minumumViewPortWidthParsed.value ) );
+	linearFactor = roundToPrecision( linearFactor, 3 ) || 1;
+	const linearFactorScaled = linearFactor * scaleFactor;
+	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;
+
+	return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
+}
+
+/**
+ *
+ * @param {string}           rawValue Raw size value from theme.json.
+ * @param {Object|undefined} options  Calculation options.
+ *
+ * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.
+ */
+export function getTypographyValueAndUnit( rawValue, options = {} ) {
+	if ( ! rawValue ) {
+		return null;
+	}
+
+	const { coerceTo, rootSizeValue, acceptableUnits } = {
+		coerceTo: '',
+		// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
+		rootSizeValue: 16,
+		acceptableUnits: [ 'rem', 'px', 'em' ],
+		...options,
+	};
+
+	const acceptableUnitsGroup = acceptableUnits?.join( '|' );
+	const regexUnits = new RegExp(
+		`^(\\d*\\.?\\d+)(${ acceptableUnitsGroup }){1,1}$`
+	);
+
+	const matches = rawValue.match( regexUnits );
+
+	// We need a number value and a unit.
+	if ( ! matches || matches.length < 3 ) {
+		return null;
+	}
+
+	let [ , value, unit ] = matches;
+
+	let returnValue = parseFloat( value );
+
+	if ( 'px' === coerceTo && ( 'em' === unit || 'rem' === unit ) ) {
+		returnValue = returnValue * rootSizeValue;
+		unit = coerceTo;
+	}
+
+	if ( 'px' === unit && ( 'em' === coerceTo || 'rem' === coerceTo ) ) {
+		returnValue = returnValue / rootSizeValue;
+		unit = coerceTo;
+	}
+
+	return {
+		value: returnValue,
+		unit,
+	};
+}
+
+/**
+ * Returns a value rounded to defined precision.
+ * Returns `undefined` if the value is not a valid finite number.
+ *
+ * @param {number} value  Raw value.
+ * @param {number} digits The number of digits to appear after the decimal point
+ *
+ * @return {number|undefined} Value rounded to standard precision.
+ */
+export function roundToPrecision( value, digits = 3 ) {
+	return Number.isFinite( value )
+		? parseFloat( value.toFixed( digits ) )
+		: undefined;
+}

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

@@ -20,6 +20,7 @@ import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
+import ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
@@ -59,6 +60,12 @@ function ContextScreens( { name } ) {
 				<ScreenTypographyElement name={ name } element="link" />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/heading' }
+			>
+				<ScreenTypographyElement name={ name } element="heading" />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/typography/button' }
 			>
@@ -89,6 +96,12 @@ function ContextScreens( { name } ) {
 				<ScreenLinkColor name={ name } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/heading' }
+			>
+				<ScreenHeadingColor name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/button' }
 			>

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

@@ -10,7 +10,6 @@ import {
 	pickBy,
 	reduce,
 	set,
-	startsWith,
 } from 'lodash';
 
 /**
@@ -21,11 +20,13 @@ import {
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 	getBlockTypes,
 } from '@wordpress/blocks';
-import { useEffect, useState, useContext } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
 import {
 	__unstablePresetDuotoneFilter as PresetDuotoneFilter,
 	__experimentalGetGapCSSValue as getGapCSSValue,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 
 /**
@@ -48,7 +49,7 @@ function compileStyleValue( uncompiledValue ) {
 	const VARIABLE_REFERENCE_PREFIX = 'var:';
 	const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
 	const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
-	if ( startsWith( uncompiledValue, VARIABLE_REFERENCE_PREFIX ) ) {
+	if ( uncompiledValue?.startsWith( VARIABLE_REFERENCE_PREFIX ) ) {
 		const variable = uncompiledValue
 			.slice( VARIABLE_REFERENCE_PREFIX.length )
 			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
@@ -62,10 +63,11 @@ function compileStyleValue( uncompiledValue ) {
  * Transform given preset tree into a set of style declarations.
  *
  * @param {Object} blockPresets
+ * @param {Object} mergedSettings Merged theme.json settings.
  *
- * @return {Array} An array of style declarations.
+ * @return {Array<Object>} An array of style declarations.
  */
-function getPresetsDeclarations( blockPresets = {} ) {
+function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
 	return reduce(
 		PRESET_METADATA,
 		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
@@ -73,7 +75,7 @@ function getPresetsDeclarations( blockPresets = {} ) {
 			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
 				if ( presetByOrigin[ origin ] ) {
 					presetByOrigin[ origin ].forEach( ( value ) => {
-						if ( valueKey ) {
+						if ( valueKey && ! valueFunc ) {
 							declarations.push(
 								`--wp--preset--${ cssVarInfix }--${ kebabCase(
 									value.slug
@@ -86,7 +88,7 @@ function getPresetsDeclarations( blockPresets = {} ) {
 							declarations.push(
 								`--wp--preset--${ cssVarInfix }--${ kebabCase(
 									value.slug
-								) }: ${ valueFunc( value ) }`
+								) }: ${ valueFunc( value, mergedSettings ) }`
 							);
 						}
 					} );
@@ -189,7 +191,7 @@ function flattenTree( input = {}, prefix, token ) {
  *
  * @return {Array} An array of style declarations.
  */
-function getStylesDeclarations(
+export function getStylesDeclarations(
 	blockStyles = {},
 	selector = '',
 	useRootPaddingAlign
@@ -208,6 +210,15 @@ function getStylesDeclarations(
 
 			const styleValue = get( blockStyles, pathToValue );
 
+			// Root-level padding styles don't currently support strings with CSS shorthand values.
+			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
+			if (
+				key === '--wp--style--root--padding' &&
+				( typeof styleValue === 'string' || ! useRootPaddingAlign )
+			) {
+				return declarations;
+			}
+
 			if ( !! properties && typeof styleValue !== 'string' ) {
 				Object.entries( properties ).forEach( ( entry ) => {
 					const [ name, prop ] = entry;
@@ -227,13 +238,6 @@ function getStylesDeclarations(
 						) }`
 					);
 				} );
-			} 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
@@ -250,14 +254,18 @@ function getStylesDeclarations(
 		[]
 	);
 
-	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 );
 	extraRules.forEach( ( rule ) => {
+		// Don't output padding properties if padding variables are set.
+		if (
+			isRoot &&
+			useRootPaddingAlign &&
+			rule.key.startsWith( 'padding' )
+		) {
+			return;
+		}
 		const cssProperty = rule.key.startsWith( '--' )
 			? rule.key
 			: kebabCase( rule.key );
@@ -328,14 +336,28 @@ export function getLayoutStyles( {
 						}
 
 						if ( declarations.length ) {
-							const combinedSelector =
-								selector === ROOT_BLOCK_SELECTOR
-									? `${ selector } .${ className }${
-											spacingStyle?.selector || ''
-									  }`
-									: `${ selector }.${ className }${
-											spacingStyle?.selector || ''
-									  }`;
+							let combinedSelector = '';
+
+							if ( ! hasBlockGapSupport ) {
+								// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
+								combinedSelector =
+									selector === ROOT_BLOCK_SELECTOR
+										? `:where(.${ className }${
+												spacingStyle?.selector || ''
+										  })`
+										: `:where(${ selector }.${ className }${
+												spacingStyle?.selector || ''
+										  })`;
+							} else {
+								combinedSelector =
+									selector === ROOT_BLOCK_SELECTOR
+										? `${ selector } .${ className }${
+												spacingStyle?.selector || ''
+										  }`
+										: `${ selector }.${ className }${
+												spacingStyle?.selector || ''
+										  }`;
+							}
 							ruleset += `${ combinedSelector } { ${ declarations.join(
 								'; '
 							) }; }`;
@@ -418,11 +440,12 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			selector: ROOT_BLOCK_SELECTOR,
 		} );
 	}
-	forEach( tree.styles?.elements, ( value, key ) => {
-		if ( !! value && !! ELEMENTS[ key ] ) {
+
+	forEach( ELEMENTS, ( selector, name ) => {
+		if ( !! tree.styles?.elements[ name ] ) {
 			nodes.push( {
-				styles: value,
-				selector: ELEMENTS[ key ],
+				styles: tree.styles?.elements[ name ],
+				selector,
 			} );
 		}
 	} );
@@ -515,10 +538,9 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 
 export const toCustomProperties = ( tree, blockSelectors ) => {
 	const settings = getNodesWithSettings( tree, blockSelectors );
-
 	let ruleset = '';
 	settings.forEach( ( { presets, custom, selector } ) => {
-		const declarations = getPresetsDeclarations( presets );
+		const declarations = getPresetsDeclarations( presets, tree?.settings );
 		const customProps = flattenTree( custom, '--wp--custom--', '--' );
 		if ( customProps.length > 0 ) {
 			declarations.push( ...customProps );
@@ -536,7 +558,8 @@ export const toStyles = (
 	tree,
 	blockSelectors,
 	hasBlockGapSupport,
-	hasFallbackGapSupport
+	hasFallbackGapSupport,
+	disableLayoutStyles = false
 ) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
@@ -612,7 +635,10 @@ export const toStyles = (
 			}
 
 			// Process blockGap and layout styles.
-			if ( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport ) {
+			if (
+				! disableLayoutStyles &&
+				( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
+			) {
 				ruleset += getLayoutStyles( {
 					tree,
 					style: styles,
@@ -762,17 +788,18 @@ export const getBlockSelectors = ( blockTypes ) => {
 };
 
 export function useGlobalStylesOutput() {
-	const [ stylesheets, setStylesheets ] = useState( [] );
-	const [ settings, setSettings ] = useState( {} );
-	const [ svgFilters, setSvgFilters ] = useState( {} );
 	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.
+	const disableLayoutStyles = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return !! getSettings().disableLayoutStyles;
+	} );
 
-	useEffect( () => {
+	return useMemo( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
-			return;
+			return [];
 		}
 
 		const blockSelectors = getBlockSelectors( getBlockTypes() );
@@ -784,10 +811,11 @@ export function useGlobalStylesOutput() {
 			mergedConfig,
 			blockSelectors,
 			hasBlockGapSupport,
-			hasFallbackGapSupport
+			hasFallbackGapSupport,
+			disableLayoutStyles
 		);
 		const filters = toSvgFilters( mergedConfig, blockSelectors );
-		setStylesheets( [
+		const stylesheets = [
 			{
 				css: customProperties,
 				isGlobalStyles: true,
@@ -796,10 +824,13 @@ export function useGlobalStylesOutput() {
 				css: globalStyles,
 				isGlobalStyles: true,
 			},
-		] );
-		setSettings( mergedConfig.settings );
-		setSvgFilters( filters );
-	}, [ hasBlockGapSupport, hasFallbackGapSupport, mergedConfig ] );
-
-	return [ stylesheets, settings, svgFilters, hasBlockGapSupport ];
+		];
+
+		return [ stylesheets, mergedConfig.settings, filters ];
+	}, [
+		hasBlockGapSupport,
+		hasFallbackGapSupport,
+		mergedConfig,
+		disableLayoutStyles,
+	] );
 }

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

@@ -3,6 +3,11 @@
  */
 import { get, find } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+import { getTypographyFontSizeValue } from './typography-utils';
+
 /* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
 export const ROOT_BLOCK_SELECTOR = 'body';
@@ -58,6 +63,8 @@ export const PRESET_METADATA = [
 	},
 	{
 		path: [ 'typography', 'fontSizes' ],
+		valueFunc: ( preset, { typography: typographySettings } ) =>
+			getTypographyFontSizeValue( preset, typographySettings ),
 		valueKey: 'size',
 		cssVarInfix: 'font-size',
 		classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],
@@ -78,6 +85,9 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'elements.link.color.text': 'color',
 	'elements.button.color.text': 'color',
 	'elements.button.backgroundColor': 'background-color',
+	'elements.heading.color': 'color',
+	'elements.heading.backgroundColor': 'background-color',
+	'elements.heading.gradient': 'gradient',
 	'color.gradient': 'gradient',
 	'typography.fontSize': 'font-size',
 	'typography.fontFamily': 'font-family',

package/src/components/header/index.js

@@ -11,8 +11,14 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { _x, __ } from '@wordpress/i18n';
-import { listView, plus } from '@wordpress/icons';
-import { Button, ToolbarItem } from '@wordpress/components';
+import { listView, plus, external } from '@wordpress/icons';
+import {
+	Button,
+	ToolbarItem,
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -48,6 +54,7 @@ export default function Header( {
 		listViewShortcut,
 		isLoaded,
 		isVisualMode,
+		settings,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -56,6 +63,7 @@ export default function Header( {
 			isInserterOpened,
 			isListViewOpened,
 			getEditorMode,
+			getSettings,
 		} = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } =
@@ -79,6 +87,7 @@ export default function Header( {
 				'core/edit-site/toggle-list-view'
 			),
 			isVisualMode: getEditorMode() === 'visual',
+			settings: getSettings(),
 		};
 	}, [] );
 
@@ -200,7 +209,23 @@ export default function Header( {
 						<PreviewOptions
 							deviceType={ deviceType }
 							setDeviceType={ setPreviewDeviceType }
-						/>
+						>
+							<MenuGroup>
+								<MenuItem
+									href={ settings?.siteUrl }
+									target="_blank"
+									icon={ external }
+								>
+									{ __( 'View site' ) }
+									<VisuallyHidden as="span">
+										{
+											/* translators: accessibility text */
+											__( '(opens in a new tab)' )
+										}
+									</VisuallyHidden>
+								</MenuItem>
+							</MenuGroup>
+						</PreviewOptions>
 					) }
 					<SaveButton
 						openEntitiesSavedStates={ openEntitiesSavedStates }

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

@@ -5,11 +5,15 @@ import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 import { forwardRef } from '@wordpress/element';
 
 function RedoButton( props, ref ) {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( coreStore ).hasRedo(),
 		[]
@@ -21,7 +25,7 @@ function RedoButton( props, ref ) {
 			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no undo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486

package/src/components/list/actions/index.js

@@ -79,7 +79,9 @@ export default function Actions( { template } ) {
 					) }
 					{ isRevertable && (
 						<MenuItem
-							info={ __( 'Restore to default state' ) }
+							info={ __(
+								'Use the template as supplied by the theme.'
+							) }
 							onClick={ () => {
 								revertAndSaveTemplate();
 								onClose();

package/src/components/save-button/index.js

@@ -30,18 +30,15 @@ export default function SaveButton( {
 	const disabled = ! isDirty || isSaving;
 
 	return (
-		<>
-			<Button
-				variant="primary"
-				className="edit-site-save-button__button"
-				aria-disabled={ disabled }
-				aria-expanded={ isEntitiesSavedStatesOpen }
-				disabled={ disabled }
-				isBusy={ isSaving }
-				onClick={ disabled ? undefined : openEntitiesSavedStates }
-			>
-				{ __( 'Save' ) }
-			</Button>
-		</>
+		<Button
+			variant="primary"
+			className="edit-site-save-button__button"
+			aria-disabled={ disabled }
+			aria-expanded={ isEntitiesSavedStatesOpen }
+			isBusy={ isSaving }
+			onClick={ disabled ? undefined : openEntitiesSavedStates }
+		>
+			{ __( 'Save' ) }
+		</Button>
 	);
 }