@wordpress/edit-site 6.2.0 → 6.3.0

package/src/components/block-editor/use-site-editor-settings.js

@@ -114,35 +114,40 @@ function useNavigateToPreviousEntityRecord() {
 
 export function useSpecificEditorSettings() {
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
-	const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect(
-		( select ) => {
-			const {
-				getEditedPostType,
-				getEditedPostId,
-				getEditedPostContext,
-				getCanvasMode,
-				getSettings,
-			} = unlock( select( editSiteStore ) );
-			const { getEditedEntityRecord } = select( coreStore );
-			const usedPostType = getEditedPostType();
-			const usedPostId = getEditedPostId();
-			const _record = getEditedEntityRecord(
-				'postType',
-				usedPostType,
-				usedPostId
-			);
-			const _context = getEditedPostContext();
-			return {
-				templateSlug: _record.slug,
-				canvasMode: getCanvasMode(),
-				settings: getSettings(),
-				postWithTemplate: _context?.postId,
-			};
-		},
-		[]
-	);
+	const {
+		templateSlug,
+		canvasMode,
+		settings,
+		shouldUseTemplateAsDefaultRenderingMode,
+	} = useSelect( ( select ) => {
+		const {
+			getEditedPostType,
+			getEditedPostId,
+			getEditedPostContext,
+			getCanvasMode,
+			getSettings,
+		} = unlock( select( editSiteStore ) );
+		const { getEditedEntityRecord } = select( coreStore );
+		const usedPostType = getEditedPostType();
+		const usedPostId = getEditedPostId();
+		const _record = getEditedEntityRecord(
+			'postType',
+			usedPostType,
+			usedPostId
+		);
+		const _context = getEditedPostContext();
+		return {
+			templateSlug: _record.slug,
+			canvasMode: getCanvasMode(),
+			settings: getSettings(),
+			// TODO: The `postType` check should be removed when the default rendering mode per post type is merged.
+			// @see https://github.com/WordPress/gutenberg/pull/62304/
+			shouldUseTemplateAsDefaultRenderingMode:
+				_context?.postId && _context?.postType !== 'post',
+		};
+	}, [] );
 	const archiveLabels = useArchiveLabel( templateSlug );
-	const defaultRenderingMode = postWithTemplate
+	const defaultRenderingMode = shouldUseTemplateAsDefaultRenderingMode
 		? 'template-locked'
 		: 'post-only';
 	const onNavigateToPreviousEntityRecord =

package/src/components/editor/index.js

@@ -40,16 +40,20 @@ import {
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
+import SavePanel from '../save-panel';
 import SiteEditorMoreMenu from '../more-menu';
 import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import useEditorTitle from './use-editor-title';
+import { useIsSiteEditorLoading } from '../layout/hooks';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
-export default function EditSiteEditor( { isLoading } ) {
+export default function EditSiteEditor( { isPostsList = false } ) {
+	const { params } = useLocation();
+	const isLoading = useIsSiteEditorLoading();
 	const {
 		editedPostType,
 		editedPostId,
@@ -199,6 +203,7 @@ export default function EditSiteEditor( { isLoading } ) {
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}
+					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
 					title={ title }
 					icon={ icon }
@@ -215,9 +220,20 @@ export default function EditSiteEditor( { isLoading } ) {
 									<Button
 										label={ __( 'Open Navigation' ) }
 										className="edit-site-layout__view-mode-toggle"
-										onClick={ () =>
-											setCanvasMode( 'view' )
-										}
+										onClick={ () => {
+											setCanvasMode( 'view' );
+											// TODO: this is a temporary solution to navigate to the posts list if we are
+											// come here through `posts list` and are in focus mode editing a template, template part etc..
+											if (
+												isPostsList &&
+												params?.focusMode
+											) {
+												history.push( {
+													page: 'gutenberg-posts-dashboard',
+													postType: 'post',
+												} );
+											}
+										} }
 									>
 										<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 									</Button>

package/src/components/global-styles/background-panel.js

@@ -45,13 +45,6 @@ export default function BackgroundPanel() {
 	const _links = useGlobalStyleLinks();
 	const [ settings ] = useGlobalSetting( '' );
 
-	const defaultControls = {
-		backgroundImage: true,
-		backgroundSize:
-			hasBackgroundImageValue( style ) ||
-			hasBackgroundImageValue( inheritedStyle ),
-	};
-
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedStyle }
@@ -59,7 +52,6 @@ export default function BackgroundPanel() {
 			onChange={ setStyle }
 			settings={ settings }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
-			defaultControls={ defaultControls }
 			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -28,7 +28,7 @@ import {
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import { moreVertical, chevronLeft } from '@wordpress/icons';
+import { moreVertical, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -429,7 +429,7 @@ function FontCollection( { slug } ) {
 					{ selectedFont && (
 						<Flex
 							justify="flex-end"
-							className="font-library-modal__tabpanel-layout__footer"
+							className="font-library-modal__footer"
 						>
 							<Button
 								variant="primary"
@@ -438,7 +438,7 @@ function FontCollection( { slug } ) {
 								disabled={
 									fontsToInstall.length === 0 || isInstalling
 								}
-								__experimentalIsFocusable
+								accessibleWhenDisabled
 							>
 								{ __( 'Install' ) }
 							</Button>
@@ -446,32 +446,26 @@ function FontCollection( { slug } ) {
 					) }
 
 					{ ! selectedFont && (
-						<Flex
+						<HStack
+							spacing={ 4 }
 							justify="center"
-							className="font-library-modal__tabpanel-layout__footer"
+							className="font-library-modal__footer"
 						>
-							<Button
-								label={ __( 'First page' ) }
-								size="compact"
-								onClick={ () => setPage( 1 ) }
-								disabled={ page === 1 }
-								__experimentalIsFocusable
-							>
-								<span>«</span>
-							</Button>
 							<Button
 								label={ __( 'Previous page' ) }
 								size="compact"
 								onClick={ () => setPage( page - 1 ) }
 								disabled={ page === 1 }
-								__experimentalIsFocusable
-							>
-								<span>‹</span>
-							</Button>
+								showTooltip
+								accessibleWhenDisabled
+								icon={ chevronLeft }
+								tooltipPosition="top"
+							/>
 							<HStack
 								justify="flex-start"
 								expanded={ false }
 								spacing={ 2 }
+								className="font-library-modal__page-selection"
 							>
 								{ createInterpolateElement(
 									sprintf(
@@ -514,20 +508,11 @@ function FontCollection( { slug } ) {
 								size="compact"
 								onClick={ () => setPage( page + 1 ) }
 								disabled={ page === totalPages }
-								__experimentalIsFocusable
-							>
-								<span>›</span>
-							</Button>
-							<Button
-								label={ __( 'Last page' ) }
-								size="compact"
-								onClick={ () => setPage( totalPages ) }
-								disabled={ page === totalPages }
-								__experimentalIsFocusable
-							>
-								<span>»</span>
-							</Button>
-						</Flex>
+								accessibleWhenDisabled
+								icon={ chevronRight }
+								tooltipPosition="top"
+							/>
+						</HStack>
 					) }
 				</>
 			) }

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -311,7 +311,7 @@ function InstalledFonts() {
 
 					<HStack
 						justify="flex-end"
-						className="font-library-modal__tabpanel-layout__footer"
+						className="font-library-modal__footer"
 					>
 						{ isInstalling && <ProgressBar /> }
 						{ shouldDisplayDeleteButton && (
@@ -329,7 +329,7 @@ function InstalledFonts() {
 								saveFontFamilies( fontFamilies );
 							} }
 							disabled={ ! fontFamiliesHasChanges }
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 						>
 							{ __( 'Update' ) }
 						</Button>

package/src/components/global-styles/font-library-modal/style.scss

@@ -49,17 +49,24 @@ $footer-height: 70px;
 		// It should be 120px (72px modal header height + 48px tab height)
 		padding-top: $header-height + $grid-unit-15 + $grid-unit-60;
 	}
+}
 
-	.font-library-modal__tabpanel-layout__footer {
-		border-top: 1px solid $gray-300;
-		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
-		padding: $grid-unit-20 $grid-unit-40;
-		position: absolute;
-		bottom: $grid-unit-40;
-		width: 100%;
-		height: $footer-height;
-		background-color: $white;
-	}
+.font-library-modal__footer {
+	border-top: 1px solid $gray-300;
+	margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
+	padding: $grid-unit-20 $grid-unit-40;
+	position: absolute;
+	bottom: $grid-unit-40;
+	width: 100%;
+	height: $footer-height;
+	background-color: $white;
+}
+
+.font-library-modal__page-selection {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
 }
 
 .font-library-modal__tabpanel-layout .components-base-control__field {

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

@@ -9,12 +9,10 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
@@ -111,42 +109,3 @@ export function useSupportedStyles( name, element ) {
 
 	return supportedPanels;
 }
-
-export function useColorVariations() {
-	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
-		property: 'color',
-	} );
-	/*
-	 * Filter out variations with no settings or styles.
-	 */
-	return colorVariations?.length
-		? colorVariations.filter( ( variation ) => {
-				const { settings, styles, title } = variation;
-				return (
-					title === __( 'Default' ) || // Always preseve the default variation.
-					Object.keys( settings ).length > 0 ||
-					Object.keys( styles ).length > 0
-				);
-		  } )
-		: [];
-}
-
-export function useTypographyVariations() {
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( {
-			property: 'typography',
-		} );
-	/*
-	 * Filter out variations with no settings or styles.
-	 */
-	return typographyVariations?.length
-		? typographyVariations.filter( ( variation ) => {
-				const { settings, styles, title } = variation;
-				return (
-					title === __( 'Default' ) || // Always preseve the default variation.
-					Object.keys( settings ).length > 0 ||
-					Object.keys( styles ).length > 0
-				);
-		  } )
-		: [];
-}

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TypographyExample from './typography-example';
+import PreviewIframe from './preview-iframe';
+
+const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
+	return (
+		<PreviewIframe
+			label={ variation.title }
+			isFocused={ isFocused }
+			withHoverView={ withHoverView }
+		>
+			{ ( { ratio, key } ) => (
+				<HStack
+					key={ key }
+					spacing={ 10 * ratio }
+					justify="center"
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<TypographyExample
+						variation={ variation }
+						fontSize={ 85 * ratio }
+					/>
+				</HStack>
+			) }
+		</PreviewIframe>
+	);
+};
+
+export default StylesPreviewTypography;

package/src/components/global-styles/screen-block.js

@@ -25,6 +25,11 @@ import {
 	VariationsPanel,
 } from './variations/variations-panel';
 
+// Initial control values where no block style is set.
+const BACKGROUND_BLOCK_DEFAULT_VALUES = {
+	backgroundSize: 'cover',
+};
+
 function applyFallbackStyle( border ) {
 	if ( ! border ) {
 		return border;
@@ -70,6 +75,8 @@ const {
 	useHasFiltersPanel,
 	useHasImageSettingsPanel,
 	useGlobalStyle,
+	useHasBackgroundPanel,
+	BackgroundPanel: StylesBackgroundPanel,
 	BorderPanel: StylesBorderPanel,
 	ColorPanel: StylesColorPanel,
 	TypographyPanel: StylesTypographyPanel,
@@ -121,6 +128,7 @@ function ScreenBlock( { name, variation } ) {
 	}
 
 	const blockVariations = useBlockVariations( name );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
@@ -296,6 +304,20 @@ function ScreenBlock( { name, variation } ) {
 				/>
 			) }
 
+			{ hasBackgroundPanel && (
+				<StylesBackgroundPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
+					defaultControls={
+						blockType?.supports?.background
+							?.__experimentalDefaultControls
+					}
+				/>
+			) }
+
 			{ canEditCSS && (
 				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>
 					<p>

package/src/components/global-styles/screen-layout.js

@@ -23,7 +23,11 @@ function ScreenLayout() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	/*
+	 * Use the raw settings to determine if the background panel should be displayed,
+	 * as the background panel is not dependent on the block element settings.
+	 */
+	const hasBackgroundPanel = useHasBackgroundPanel( rawSettings );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -163,7 +163,7 @@ function RevisionsButtons( {
 					>
 						<Button
 							className="edit-site-global-styles-screen-revisions__revision-button"
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 							disabled={ isSelected }
 							onClick={ () => {
 								onChange( revision );

package/src/components/global-styles/shadows-edit-panel.js

@@ -371,8 +371,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 						'edit-site-global-styles__shadow-editor__remove-button',
 						{ 'is-open': isOpen }
 					),
-					ariaLabel: __( 'Remove shadow' ),
-					tooltip: __( 'Remove shadow' ),
+					label: __( 'Remove shadow' ),
 				};
 
 				return (

package/src/components/global-styles/style-variations-container.js

@@ -13,7 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
-import { isVariationWithSingleProperty } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { isVariationWithProperties } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
@@ -33,11 +33,14 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 		).__experimentalGetCurrentThemeGlobalStylesVariations();
 	}, [] );
 
-	// Filter out variations that are of single property type, i.e. color or typography variations.
-	const multiplePropertyVariations = variations?.filter( ( variation ) => {
+	// Filter out variations that are color or typography variations.
+	const fullStyleVariations = variations?.filter( ( variation ) => {
 		return (
-			! isVariationWithSingleProperty( variation, 'color' ) &&
-			! isVariationWithSingleProperty( variation, 'typography' )
+			! isVariationWithProperties( variation, [ 'color' ] ) &&
+			! isVariationWithProperties( variation, [
+				'typography',
+				'spacing',
+			] )
 		);
 	} );
 
@@ -48,7 +51,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				settings: {},
 				styles: {},
 			},
-			...( multiplePropertyVariations ?? [] ),
+			...( fullStyleVariations ?? [] ),
 		];
 		return [
 			...withEmptyVariation.map( ( variation ) => {
@@ -105,7 +108,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				};
 			} ),
 		];
-	}, [ multiplePropertyVariations, userStyles?.blocks, userStyles?.css ] );
+	}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );
 
 	return (
 		<Grid

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

@@ -31,9 +31,6 @@ function ElementItem( { parentMenu, element, label } ) {
 	const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );
 	const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );
 	const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );
-	const [ letterSpacing ] = useGlobalStyle(
-		prefix + 'typography.letterSpacing'
-	);
 	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
 	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
@@ -62,7 +59,6 @@ function ElementItem( { parentMenu, element, label } ) {
 						color,
 						fontStyle,
 						fontWeight,
-						letterSpacing,
 						...extraStyles,
 					} }
 				>

package/src/components/global-styles/variations/variation.js

@@ -16,7 +16,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import { filterObjectByProperty } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { filterObjectByProperties } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../../lock-unlock';
 
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
@@ -28,7 +28,7 @@ export default function Variation( {
 	variation,
 	children,
 	isPill,
-	property,
+	properties,
 	showTooltip,
 } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
@@ -36,8 +36,8 @@ export default function Variation( {
 
 	const context = useMemo( () => {
 		let merged = mergeBaseAndUserConfigs( base, variation );
-		if ( property ) {
-			merged = filterObjectByProperty( merged, property );
+		if ( properties ) {
+			merged = filterObjectByProperties( merged, properties );
 		}
 		return {
 			user: variation,
@@ -45,7 +45,7 @@ export default function Variation( {
 			merged,
 			setUserConfig: () => {},
 		};
-	}, [ variation, base, property ] );
+	}, [ variation, base, properties ] );
 
 	const selectVariation = () => setUserConfig( variation );
 

package/src/components/global-styles/variations/variations-color.js

@@ -10,12 +10,14 @@ import {
  * Internal dependencies
  */
 import StylesPreviewColors from '../preview-colors';
-import { useColorVariations } from '../hooks';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import Subtitle from '../subtitle';
 import Variation from './variation';
 
 export default function ColorVariations( { title, gap = 2 } ) {
-	const colorVariations = useColorVariations();
+	const propertiesToFilter = [ 'color' ];
+	const colorVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
 
 	// Return null if there is only one variation (the default).
 	if ( colorVariations?.length <= 1 ) {
@@ -31,7 +33,7 @@ export default function ColorVariations( { title, gap = 2 } ) {
 						key={ index }
 						variation={ variation }
 						isPill
-						property="color"
+						properties={ propertiesToFilter }
 						showTooltip
 					>
 						{ () => <StylesPreviewColors /> }