@wordpress/edit-site 6.25.0 → 6.26.1-next.719a03cbe.0

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -16,6 +16,7 @@ import {
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useDebouncedInput } from '@wordpress/compose';
+import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -165,10 +166,27 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 	);
 }
 
-function AddCustomTemplateModalContent( { onSelect, entityForSuggestions } ) {
+function AddCustomTemplateModalContent( {
+	onSelect,
+	entityForSuggestions,
+	onBack,
+	containerRef,
+} ) {
 	const [ showSearchEntities, setShowSearchEntities ] = useState(
 		entityForSuggestions.hasGeneralTemplate
 	);
+
+	// Focus on the first focusable element when the modal opens.
+	// We handle focus management in the parent modal, just need to focus on the first focusable element.
+	useEffect( () => {
+		if ( containerRef.current ) {
+			const [ firstFocusable ] = focus.focusable.find(
+				containerRef.current
+			);
+			firstFocusable?.focus();
+		}
+	}, [ showSearchEntities ] );
+
 	return (
 		<VStack
 			spacing={ 4 }
@@ -247,6 +265,15 @@ function AddCustomTemplateModalContent( { onSelect, entityForSuggestions } ) {
 							</Text>
 						</FlexItem>
 					</Flex>
+					<Flex justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onBack }
+						>
+							{ __( 'Back' ) }
+						</Button>
+					</Flex>
 				</>
 			) }
 			{ showSearchEntities && (
@@ -260,6 +287,23 @@ function AddCustomTemplateModalContent( { onSelect, entityForSuggestions } ) {
 						entityForSuggestions={ entityForSuggestions }
 						onSelect={ onSelect }
 					/>
+					<Flex justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								// If general template exists, go directly back to main screen
+								// instead of showing the choice screen
+								if ( entityForSuggestions.hasGeneralTemplate ) {
+									onBack();
+								} else {
+									setShowSearchEntities( false );
+								}
+							} }
+						>
+							{ __( 'Back' ) }
+						</Button>
+					</Flex>
 				</>
 			) }
 		</VStack>

package/src/components/add-new-template/index.js

@@ -16,7 +16,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useState, memo } from '@wordpress/element';
+import { useState, memo, useRef, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useViewportMatch } from '@wordpress/compose';
@@ -41,6 +41,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -162,7 +163,7 @@ function NewTemplateModal( { onClose } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-
+	const containerRef = useRef( null );
 	const isMobile = useViewportMatch( 'medium', '<' );
 
 	const homeUrl = useSelect( ( select ) => {
@@ -180,6 +181,20 @@ function NewTemplateModal( { onClose } ) {
 		),
 	};
 
+	useEffect( () => {
+		// Focus the first focusable element when component mounts or UI changes
+		// We don't want to focus on the other modals because they have their own focus management.
+		if (
+			containerRef.current &&
+			modalContent === modalContentMap.templatesList
+		) {
+			const [ firstFocusable ] = focus.focusable.find(
+				containerRef.current
+			);
+			firstFocusable?.focus();
+		}
+	}, [ modalContent ] );
+
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isSubmitting ) {
 			return;
@@ -261,6 +276,7 @@ function NewTemplateModal( { onClose } ) {
 					? 'edit-site-custom-generic-template__modal'
 					: undefined
 			}
+			ref={ containerRef }
 		>
 			{ modalContent === modalContentMap.templatesList && (
 				<Grid
@@ -320,12 +336,18 @@ function NewTemplateModal( { onClose } ) {
 				<AddCustomTemplateModalContent
 					onSelect={ createTemplate }
 					entityForSuggestions={ entityForSuggestions }
+					onBack={ () =>
+						setModalContent( modalContentMap.templatesList )
+					}
+					containerRef={ containerRef }
 				/>
 			) }
 			{ modalContent === modalContentMap.customGenericTemplate && (
 				<AddCustomGenericTemplateModalContent
-					onClose={ onModalClose }
 					createTemplate={ createTemplate }
+					onBack={ () =>
+						setModalContent( modalContentMap.templatesList )
+					}
 				/>
 			) }
 		</Modal>

package/src/components/add-new-template/utils.js

@@ -412,7 +412,7 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 			if ( _needsUniqueIdentifier ) {
 				menuItemTitle = labels.template_name
 					? sprintf(
-							// translators: 1: Name of the template e.g: "Products by Category". 2s: Slug of the taxonomy e.g: "product_cat".
+							// translators: 1: Name of the template e.g: "Products by Category". 2: Slug of the taxonomy e.g: "product_cat".
 							_x( '%1$s (%2$s)', 'taxonomy template menu label' ),
 							labels.template_name,
 							slug

package/src/components/global-styles/font-sizes/font-sizes.js

@@ -69,9 +69,9 @@ function FontSizeGroup( {
 				/>
 			) }
 			<VStack spacing={ 4 }>
-				<HStack justify="space-between" align="center">
+				<HStack>
 					<Subtitle level={ 3 }>{ label }</Subtitle>
-					<FlexItem>
+					<FlexItem className="edit-site-global-styles__typography-panel__options-container">
 						{ origin === 'custom' && (
 							<Button
 								label={ __( 'Add font size' ) }

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

@@ -327,12 +327,7 @@ function ShadowEditor( { shadow, onChange } ) {
 		<>
 			<VStack spacing={ 2 }>
 				<HStack justify="space-between">
-					<Flex
-						align="center"
-						className="edit-site-global-styles__shadows-panel__title"
-					>
-						<Subtitle level={ 3 }>{ __( 'Shadows' ) }</Subtitle>
-					</Flex>
+					<Subtitle level={ 3 }>{ __( 'Shadows' ) }</Subtitle>
 					<FlexItem className="edit-site-global-styles__shadows-panel__options-container">
 						<Button
 							size="small"

package/src/components/global-styles/style.scss

@@ -104,7 +104,8 @@
 	flex-shrink: 0;
 }
 
-.edit-site-global-styles__shadows-panel__options-container {
+.edit-site-global-styles__shadows-panel__options-container,
+.edit-site-global-styles__typography-panel__options-container {
 	height: $grid-unit * 3;
 }
 

package/src/components/style-book/index.js

@@ -51,6 +51,7 @@ import { getExamples } from './examples';
 import { store as siteEditorStore } from '../../store';
 import { useSection } from '../sidebar-global-styles-wrapper';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
+import { getVariationClassName } from '../global-styles/utils';
 import {
 	STYLE_BOOK_COLOR_GROUPS,
 	STYLE_BOOK_PREVIEW_CATEGORIES,
@@ -215,6 +216,32 @@ export function getExamplesForSinglePageUse( examples ) {
 	return examplesForSinglePageUse;
 }
 
+/**
+ * Applies a block variation to each example by updating its attributes.
+ *
+ * @param {Array}  examples  Array of examples
+ * @param {string} variation Block variation name.
+ * @return {Array} Updated examples with variation applied.
+ */
+function applyBlockVariationsToExamples( examples, variation ) {
+	if ( ! variation ) {
+		return examples;
+	}
+
+	return examples.map( ( example ) => ( {
+		...example,
+		variation,
+		blocks: {
+			...example.blocks,
+			attributes: {
+				...example.blocks.attributes,
+				style: undefined,
+				className: getVariationClassName( variation ),
+			},
+		},
+	} ) );
+}
+
 function StyleBook( {
 	enableResizing = true,
 	isSelected,
@@ -394,7 +421,7 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 		);
 	};
 
-	const onSelect = ( blockName ) => {
+	const onSelect = ( blockName, isBlockVariation = false ) => {
 		if (
 			STYLE_BOOK_COLOR_GROUPS.find(
 				( group ) => group.slug === blockName
@@ -410,6 +437,10 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 			return;
 		}
 
+		if ( isBlockVariation ) {
+			return;
+		}
+
 		// Now go to the selected block.
 		onChangeSection( `/blocks/${ encodeURIComponent( blockName ) }` );
 	};
@@ -419,14 +450,20 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
 
 	let previewCategory = null;
+	let blockVariation = null;
 	if ( section.includes( '/colors' ) ) {
 		previewCategory = 'colors';
 	} else if ( section.includes( '/typography' ) ) {
 		previewCategory = 'text';
 	} else if ( section.includes( '/blocks' ) ) {
 		previewCategory = 'blocks';
-		const blockName =
-			decodeURIComponent( section ).split( '/blocks/' )[ 1 ];
+		let blockName = decodeURIComponent( section ).split( '/blocks/' )[ 1 ];
+
+		// The blockName can contain variations, if so, extract the variation.
+		if ( blockName?.includes( '/variations' ) ) {
+			[ blockName, blockVariation ] = blockName.split( '/variations/' );
+		}
+
 		if (
 			blockName &&
 			examples.find( ( example ) => example.name === blockName )
@@ -440,21 +477,43 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 		( category ) => category.slug === previewCategory
 	);
 
-	// If there's no category definition there may be a single block.
-	const filteredExamples = categoryDefinition
-		? getExamplesByCategory( categoryDefinition, examples )
-		: {
+	const filteredExamples = useMemo( () => {
+		// If there's no category definition there may be a single block.
+		if ( ! categoryDefinition ) {
+			return {
 				examples: [
 					examples.find(
 						( example ) => example.name === previewCategory
 					),
 				],
-		  };
+			};
+		}
+
+		return getExamplesByCategory( categoryDefinition, examples );
+	}, [ categoryDefinition, examples, previewCategory ] );
 
-	// If there's no preview category, show all examples.
-	const displayedExamples = previewCategory
-		? filteredExamples
-		: { examples: examplesForSinglePageUse };
+	const displayedExamples = useMemo( () => {
+		// If there's no preview category, show all examples.
+		if ( ! previewCategory ) {
+			return { examples: examplesForSinglePageUse };
+		}
+
+		if ( blockVariation ) {
+			return {
+				examples: applyBlockVariationsToExamples(
+					filteredExamples.examples,
+					blockVariation
+				),
+			};
+		}
+
+		return filteredExamples;
+	}, [
+		previewCategory,
+		examplesForSinglePageUse,
+		blockVariation,
+		filteredExamples,
+	] );
 
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 	const goTo = getStyleBookNavigationFromPath( section );
@@ -603,7 +662,11 @@ const Examples = memo(
 							isSelected={ isSelected?.( example.name ) }
 							onClick={
 								!! onSelect
-									? () => onSelect( example.name )
+									? () =>
+											onSelect(
+												example.name,
+												!! example.variation
+											)
 									: null
 							}
 						/>