@wordpress/edit-site 5.0.0 → 5.1.0

package/src/components/global-styles/screen-button-color.js

@@ -70,7 +70,6 @@ function ScreenButtonColor( { name } ) {
 				className="edit-site-screen-button-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
@@ -87,7 +86,6 @@ function ScreenButtonColor( { name } ) {
 				className="edit-site-screen-button-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar

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

@@ -20,6 +20,7 @@ import { NavigationButtonAsItem } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
+import BlockPreviewPanel from './block-preview-panel';
 
 function BackgroundColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -186,6 +187,8 @@ function ScreenColors( { name } ) {
 				) }
 			/>
 
+			<BlockPreviewPanel name={ name } />
+
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
 					<Palette name={ name } />

package/src/components/global-styles/screen-heading-color.js

@@ -132,7 +132,7 @@ function ScreenHeadingColor( { name } ) {
 				>
 					<ToggleGroupControlOption
 						value="heading"
-						/* translators: 'All' refers to selecting all heading levels 
+						/* translators: 'All' refers to selecting all heading levels
 						and applying the same style to h1-h6. */
 						label={ __( 'All' ) }
 					/>
@@ -159,7 +159,6 @@ function ScreenHeadingColor( { name } ) {
 						className="edit-site-screen-heading-text-color__control"
 						colors={ colorsPerOrigin }
 						disableCustomColors={ ! areCustomSolidsEnabled }
-						__experimentalHasMultipleOrigins
 						showTitle={ false }
 						enableAlpha
 						__experimentalIsRenderedInSidebar
@@ -186,7 +185,6 @@ function ScreenHeadingColor( { name } ) {
 						gradients={ gradientsPerOrigin }
 						disableCustomColors={ ! areCustomSolidsEnabled }
 						disableCustomGradients={ ! areCustomGradientsEnabled }
-						__experimentalHasMultipleOrigins
 						showTitle={ false }
 						enableAlpha
 						__experimentalIsRenderedInSidebar

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

@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenLayout( { name } ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
@@ -15,6 +16,7 @@ function ScreenLayout( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
+			<BlockPreviewPanel name={ name } />
 			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
 		</>
 	);

package/src/components/global-styles/screen-link-color.js

@@ -90,7 +90,6 @@ function ScreenLinkColor( { name } ) {
 								className="edit-site-screen-link-color__control"
 								colors={ colorsPerOrigin }
 								disableCustomColors={ ! areCustomSolidsEnabled }
-								__experimentalHasMultipleOrigins
 								showTitle={ false }
 								enableAlpha
 								__experimentalIsRenderedInSidebar

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

@@ -35,6 +35,8 @@ function ScreenRoot() {
 		};
 	}, [] );
 
+	const __experimentalGlobalStylesCustomCSS =
+		window?.__experimentalEnableGlobalStylesCustomCSS;
 	return (
 		<Card size="small">
 			<CardBody>
@@ -100,33 +102,38 @@ function ScreenRoot() {
 				</ItemGroup>
 			</CardBody>
 
-			<CardDivider />
-
-			<CardBody>
-				<Spacer
-					as="p"
-					paddingTop={ 2 }
-					paddingX="13px"
-					marginBottom={ 4 }
-				>
-					{ __(
-						'Add your own CSS to customize the appearance and layout of your site.'
-					) }
-				</Spacer>
-				<ItemGroup>
-					<NavigationButtonAsItem
-						path="/css"
-						aria-label={ __( 'Additional CSS' ) }
-					>
-						<HStack justify="space-between">
-							<FlexItem>{ __( 'Custom' ) }</FlexItem>
-							<IconWithCurrentColor
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
-					</NavigationButtonAsItem>
-				</ItemGroup>
-			</CardBody>
+			{ __experimentalGlobalStylesCustomCSS && (
+				<>
+					<CardDivider />
+					<CardBody>
+						<Spacer
+							as="p"
+							paddingTop={ 2 }
+							paddingX="13px"
+							marginBottom={ 4 }
+						>
+							{ __(
+								'Add your own CSS to customize the appearance and layout of your site.'
+							) }
+						</Spacer>
+						<ItemGroup>
+							<NavigationButtonAsItem
+								path="/css"
+								aria-label={ __( 'Additional CSS' ) }
+							>
+								<HStack justify="space-between">
+									<FlexItem>{ __( 'Custom' ) }</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
+					</CardBody>
+				</>
+			) }
 		</Card>
 	);
 }

package/src/components/global-styles/screen-text-color.js

@@ -47,7 +47,6 @@ function ScreenTextColor( { name } ) {
 				className="edit-site-screen-text-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar

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

@@ -17,6 +17,7 @@ import { NavigationButtonAsItem } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
+import BlockPreviewPanel from './block-preview-panel';
 
 function Item( { name, parentMenu, element, label } ) {
 	const hasSupport = ! name;
@@ -87,6 +88,8 @@ function ScreenTypography( { name } ) {
 				) }
 			/>
 
+			<BlockPreviewPanel name={ name } />
+
 			{ ! name && (
 				<div className="edit-site-global-styles-screen-typography">
 					<VStack spacing={ 3 }>

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

@@ -7,7 +7,8 @@ describe( 'typography utils', () => {
 	describe( 'getTypographyFontSizeValue', () => {
 		[
 			{
-				message: 'returns value when fluid typography is deactivated',
+				message:
+					'should return value when fluid typography is not active',
 				preset: {
 					size: '28px',
 				},
@@ -16,7 +17,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value where font size is 0',
+				message: 'should return value where font size is 0',
 				preset: {
 					size: 0,
 				},
@@ -25,7 +26,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: "returns value where font size is '0'",
+				message: "should return value where font size is '0'",
 				preset: {
 					size: '0',
 				},
@@ -34,7 +35,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value where `size` is `null`.',
+				message: 'should return value where `size` is `null`.',
 				preset: {
 					size: null,
 				},
@@ -43,7 +44,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value when fluid is `false`',
+				message: 'should return value when fluid is `false`',
 				preset: {
 					size: '28px',
 					fluid: false,
@@ -55,7 +56,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns already clamped value',
+				message: 'should return already clamped value',
 				preset: {
 					size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
 					fluid: false,
@@ -68,7 +69,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value with unsupported unit',
+				message: 'should return value with unsupported unit',
 				preset: {
 					size: '1000%',
 					fluid: false,
@@ -80,7 +81,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value with rem min and max units',
+				message: 'should return clamp value with rem min and max units',
 				preset: {
 					size: '1.75rem',
 				},
@@ -92,7 +93,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value with eem min and max units',
+				message: 'should return clamp value with eem min and max units',
 				preset: {
 					size: '1.75em',
 				},
@@ -104,7 +105,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value for floats',
+				message: 'should return clamp value for floats',
 				preset: {
 					size: '100.175px',
 				},
@@ -116,7 +117,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'coerces integer to `px` and returns clamp value',
+				message:
+					'should coerce integer to `px` and returns clamp value',
 				preset: {
 					size: 33,
 					fluid: true,
@@ -129,7 +131,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'coerces float to `px` and returns clamp value',
+				message: 'should coerce float to `px` and returns clamp value',
 				preset: {
 					size: 100.23,
 					fluid: true,
@@ -142,7 +144,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value when `fluid` is empty array',
+				message:
+					'should return clamp value when `fluid` is empty array',
 				preset: {
 					size: '28px',
 					fluid: [],
@@ -155,7 +158,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value when `fluid` is `null`',
+				message: 'should return clamp value when `fluid` is `null`',
 				preset: {
 					size: '28px',
 					fluid: null,
@@ -169,7 +172,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns clamp value if min font size is greater than max',
+					'should return clamp value if min font size is greater than max',
 				preset: {
 					size: '3rem',
 					fluid: {
@@ -185,7 +188,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value with invalid min/max fluid units',
+				message: 'should return value with invalid min/max fluid units',
 				preset: {
 					size: '10em',
 					fluid: {
@@ -201,7 +204,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns value when size is < lower bounds and no fluid min/max set',
+					'should return value when size is < lower bounds and no fluid min/max set',
 				preset: {
 					size: '3px',
 				},
@@ -213,7 +216,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns value when size is equal to lower bounds and no fluid min/max set',
+					'should return value when size is equal to lower bounds and no fluid min/max set',
 				preset: {
 					size: '14px',
 				},
@@ -224,7 +227,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value with different min max units',
+				message:
+					'should return clamp value with different min max units',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -240,7 +244,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value where no fluid max size is set',
+				message:
+					'should return clamp value where no fluid max size is set',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -255,7 +260,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value where no fluid min size is set',
+				message:
+					'should return clamp value where no fluid min size is set',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -320,7 +326,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns clamp value when min and max font sizes are equal',
+					'should return clamp value when min and max font sizes are equal',
 				preset: {
 					size: '4rem',
 					fluid: {
@@ -333,8 +339,51 @@ describe( 'typography utils', () => {
 				},
 				expected: 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)',
 			},
+
+			{
+				message:
+					'should use default min font size value where min font size unit in fluid config is not supported',
+				preset: {
+					size: '15px',
+				},
+				typographySettings: {
+					fluid: {
+						minFontSize: '16%',
+					},
+				},
+				expected:
+					'clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)',
+			},
+
+			// Equivalent custom config PHP unit tests in `test_should_covert_font_sizes_to_fluid_values()`.
+			{
+				message: 'should return clamp value using custom fluid config',
+				preset: {
+					size: '17px',
+				},
+				typographySettings: {
+					fluid: {
+						minFontSize: '16px',
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px)',
+			},
+
+			{
+				message:
+					'should return value when font size <= custom min font size bound',
+				preset: {
+					size: '15px',
+				},
+				typographySettings: {
+					fluid: {
+						minFontSize: '16px',
+					},
+				},
+				expected: '15px',
+			},
 		].forEach( ( { message, preset, typographySettings, expected } ) => {
-			it( `should ${ message }`, () => {
+			it( `${ message }`, () => {
 				expect(
 					getTypographyFontSizeValue( preset, typographySettings )
 				).toBe( expected );

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

@@ -23,13 +23,23 @@ import { getComputedFluidTypographyValue } from '@wordpress/block-editor';
  * @property {boolean|FluidPreset|undefined} fluid A font size slug
  */
 
+/**
+ * @typedef {Object} TypographySettings
+ * @property {?string|?number} size              A default font size.
+ * @property {?string}         minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
+ * @property {?string}         maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
+ * @property {?number}         scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @property {?number}         minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @property {?string}         minFontSize       The smallest a calculated font size may be. Optional.
+ */
+
 /**
  * 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 {Preset}  preset
- * @param {Object}  typographySettings
- * @param {boolean} typographySettings.fluid Whether fluid typography is enabled.
+ * @param {Preset}                     preset
+ * @param {Object}                     typographySettings
+ * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
  *
  * @return {string|*} A font-size value or the value of preset.size.
  */
@@ -44,7 +54,11 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 		return defaultSize;
 	}
 
-	if ( true !== typographySettings?.fluid ) {
+	if (
+		! typographySettings?.fluid ||
+		( typeof typographySettings?.fluid === 'object' &&
+			Object.keys( typographySettings.fluid ).length === 0 )
+	) {
 		return defaultSize;
 	}
 
@@ -53,10 +67,16 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 		return defaultSize;
 	}
 
+	const fluidTypographySettings =
+		typeof typographySettings?.fluid === 'object'
+			? typographySettings?.fluid
+			: {};
+
 	const fluidFontSizeValue = getComputedFluidTypographyValue( {
 		minimumFontSize: preset?.fluid?.min,
 		maximumFontSize: preset?.fluid?.max,
 		fontSize: defaultSize,
+		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
 	} );
 
 	if ( !! fluidFontSizeValue ) {

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

@@ -86,7 +86,7 @@ export const PRESET_METADATA = [
 	},
 ];
 
-const STYLE_PATH_TO_CSS_VAR_INFIX = {
+export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
 	'elements.link.color.text': 'color',
@@ -100,6 +100,15 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'typography.fontFamily': 'font-family',
 };
 
+// A static list of block attributes that store global style preset slugs.
+export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
+	'color.background': 'backgroundColor',
+	'color.text': 'textColor',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'fontSize',
+	'typography.fontFamily': 'fontFamily',
+};
+
 function findInPresetsBy(
 	features,
 	blockName,

package/src/components/header-edit-mode/document-actions/index.js

@@ -25,16 +25,13 @@ import {
 	useBlockDisplayInformation,
 	BlockIcon,
 } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
 import TemplateDetails from '../../template-details';
-import { store as editSiteStore } from '../../../store';
+import useEditedEntityRecord from '../../use-edited-entity-record';
 
 function getBlockDisplayText( block ) {
 	if ( block ) {
@@ -70,36 +67,15 @@ function useSecondaryText() {
 }
 
 export default function DocumentActions() {
-	const { showIconLabels, entityTitle, template, templateType, isLoaded } =
-		useSelect( ( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const { __experimentalGetTemplateInfo: getTemplateInfo } =
-				select( editorStore );
-			const postType = getEditedPostType();
-			const postId = getEditedPostId();
-			const record = getEditedEntityRecord(
-				'postType',
-				postType,
-				postId
-			);
-			const _isLoaded = !! postId;
-
-			return {
-				showIconLabels: select( preferencesStore ).get(
-					'core/edit-site',
-					'showIconLabels'
-				),
-				entityTitle: getTemplateInfo( record ).title,
-				isLoaded: _isLoaded,
-				template: record,
-				templateType: postType,
-			};
-		}, [] );
-
-	const entityLabel =
-		templateType === 'wp_template_part' ? 'template part' : 'template';
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
+		[]
+	);
+	const { isLoaded, record, getTitle } = useEditedEntityRecord();
 	const { label, icon } = useSecondaryText();
 
 	// Use internal state instead of a ref to make sure that the component
@@ -126,7 +102,7 @@ export default function DocumentActions() {
 	}
 
 	// Return feedback that the template does not seem to exist.
-	if ( ! entityTitle ) {
+	if ( ! record ) {
 		return (
 			<div className="edit-site-document-actions">
 				{ __( 'Template not found' ) }
@@ -134,6 +110,11 @@ export default function DocumentActions() {
 		);
 	}
 
+	const entityLabel =
+		record.type === 'wp_template_part'
+			? __( 'template part' )
+			: __( 'template' );
+
 	return (
 		<div
 			className={ classnames( 'edit-site-document-actions', {
@@ -156,7 +137,7 @@ export default function DocumentActions() {
 							entityLabel
 						) }
 					</VisuallyHidden>
-					{ decodeEntities( entityTitle ) }
+					{ getTitle() }
 				</Text>
 				<div className="edit-site-document-actions__secondary-item">
 					<BlockIcon icon={ icon } showColors />
@@ -186,7 +167,7 @@ export default function DocumentActions() {
 					contentClassName="edit-site-document-actions__info-dropdown"
 					renderContent={ ( { onClose } ) => (
 						<TemplateDetails
-							template={ template }
+							template={ record }
 							onClose={ onClose }
 						/>
 					) }

package/src/components/header-edit-mode/style.scss

@@ -10,6 +10,7 @@ $header-toolbar-min-width: 335px;
 	width: 100%;
 	justify-content: space-between;
 	border-bottom: $border-width solid $gray-200;
+	padding-left: $header-height;
 
 	.edit-site-header-edit-mode__start {
 		display: flex;