@wordpress/edit-site 4.19.0 → 5.1.0

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

@@ -1,3 +1,6 @@
+// Variables
+$block-preview-height: 150px;
+
 .edit-site-global-styles-preview {
 	display: flex;
 	align-items: center;
@@ -28,7 +31,8 @@
 }
 
 .edit-site-global-styles-screen-heading-color,
-.edit-site-global-styles-screen-typography {
+.edit-site-global-styles-screen-typography,
+.edit-site-global-styles-screen-css {
 	margin: $grid-unit-20;
 }
 
@@ -52,8 +56,12 @@
 	}
 }
 
-.edit-site-global-styles-header__description,
+.edit-site-global-styles-header__description {
+	padding: 0 $grid-unit-20;
+}
+
 .edit-site-block-types-search {
+	margin-bottom: $grid-unit-10;
 	padding: 0 $grid-unit-20;
 }
 
@@ -117,3 +125,24 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+
+.edit-site-global-styles__block-preview-panel {
+	position: relative;
+	width: 100%;
+	height: $block-preview-height + 2 * $border-width;
+	overflow: auto;
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-block-ui;
+}
+
+.edit-site-global-styles__custom-css-input textarea {
+	font-family: $editor_html_font;
+}
+
+.edit-site-global-styles__custom-css-theme-css {
+	width: 100%;
+	line-break: anywhere;
+	white-space: break-spaces;
+	max-height: 200px;
+	overflow-y: scroll;
+}

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/ui.js

@@ -4,6 +4,7 @@
 import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
 import { getBlockTypes } from '@wordpress/blocks';
 
@@ -24,6 +25,9 @@ import ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
+import ScreenBorder from './screen-border';
+import StyleBook from '../style-book';
+import ScreenCSS from './screen-css';
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
@@ -40,7 +44,8 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
 }
 
 function ContextScreens( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+	const parentMenu =
+		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
 
 	return (
 		<>
@@ -108,6 +113,10 @@ function ContextScreens( { name } ) {
 				<ScreenButtonColor name={ name } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
+				<ScreenBorder name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
 			</GlobalStylesNavigationScreen>
@@ -115,9 +124,36 @@ function ContextScreens( { name } ) {
 	);
 }
 
-function GlobalStylesUI() {
-	const blocks = getBlockTypes();
+function GlobalStylesStyleBook( { onClose } ) {
+	const navigator = useNavigator();
+	const { path } = navigator.location;
+	return (
+		<StyleBook
+			isSelected={ ( blockName ) =>
+				// Match '/blocks/core%2Fbutton' and
+				// '/blocks/core%2Fbutton/typography', but not
+				// '/blocks/core%2Fbuttons'.
+				path === `/blocks/${ encodeURIComponent( blockName ) }` ||
+				path.startsWith(
+					`/blocks/${ encodeURIComponent( blockName ) }/`
+				)
+			}
+			onSelect={ ( blockName ) => {
+				// Clear navigator history by going back to the root.
+				const depth = path.match( /\//g ).length;
+				for ( let i = 0; i < depth; i++ ) {
+					navigator.goBack();
+				}
+				// Now go to the selected block.
+				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
+			} }
+			onClose={ onClose }
+		/>
+	);
+}
 
+function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
+	const blocks = getBlockTypes();
 	return (
 		<NavigatorProvider
 			className="edit-site-global-styles-sidebar__navigator-provider"
@@ -138,7 +174,7 @@ function GlobalStylesUI() {
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
-					path={ '/blocks/' + block.name }
+					path={ '/blocks/' + encodeURIComponent( block.name ) }
 				>
 					<ScreenBlock name={ block.name } />
 				</GlobalStylesNavigationScreen>
@@ -152,6 +188,13 @@ function GlobalStylesUI() {
 					name={ block.name }
 				/>
 			) ) }
+
+			{ isStyleBookOpened && (
+				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
+			) }
+			<GlobalStylesNavigationScreen path="/css">
+				<ScreenCSS />
+			</GlobalStylesNavigationScreen>
 		</NavigatorProvider>
 	);
 }

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

@@ -919,6 +919,11 @@ export function useGlobalStylesOutput() {
 				css: globalStyles,
 				isGlobalStyles: true,
 			},
+			// Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor.
+			{
+				css: mergedConfig.styles.css ?? '',
+				isGlobalStyles: true,
+			},
 		];
 
 		return [ stylesheets, mergedConfig.settings, filters ];

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, find } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -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,
@@ -120,8 +129,7 @@ function findInPresetsBy(
 			for ( const origin of origins ) {
 				const presets = presetByOrigin[ origin ];
 				if ( presets ) {
-					const presetObject = find(
-						presets,
+					const presetObject = presets.find(
 						( preset ) =>
 							preset[ presetProperty ] === presetValueValue
 					);
@@ -164,7 +172,9 @@ export function getPresetVariableFromValue(
 
 	const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];
 
-	const metadata = find( PRESET_METADATA, [ 'cssVarInfix', cssVarInfix ] );
+	const metadata = PRESET_METADATA.find(
+		( data ) => data.cssVarInfix === cssVarInfix
+	);
 
 	if ( ! metadata ) {
 		// The property doesn't have preset data
@@ -196,7 +206,9 @@ function getValueFromPresetVariable(
 	variable,
 	[ presetType, slug ]
 ) {
-	const metadata = find( PRESET_METADATA, [ 'cssVarInfix', presetType ] );
+	const metadata = PRESET_METADATA.find(
+		( data ) => data.cssVarInfix === presetType
+	);
 	if ( ! metadata ) {
 		return variable;
 	}

package/src/components/{editor/global-styles-renderer.js → global-styles-renderer/index.js}

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -30,10 +25,9 @@ function useGlobalStylesRenderer() {
 		}
 
 		const currentStoreSettings = getSettings();
-		const nonGlobalStyles = filter(
-			currentStoreSettings.styles,
-			( style ) => ! style.isGlobalStyles
-		);
+		const nonGlobalStyles = Object.values(
+			currentStoreSettings.styles ?? []
+		).filter( ( style ) => ! style.isGlobalStyles );
 		updateSettings( {
 			...currentStoreSettings,
 			styles: [ ...nonGlobalStyles, ...styles ],

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

@@ -20,17 +20,18 @@ import {
 } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as blockEditorStore,
+	useBlockDisplayInformation,
+	BlockIcon,
+} from '@wordpress/block-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 ) {
@@ -52,10 +53,13 @@ function useSecondaryText() {
 		[]
 	);
 
+	const blockInformation = useBlockDisplayInformation( activeEntityBlockId );
+
 	if ( activeEntityBlockId ) {
 		return {
 			label: getBlockDisplayText( getBlock( activeEntityBlockId ) ),
 			isActive: true,
+			icon: blockInformation?.icon,
 		};
 	}
 
@@ -63,36 +67,16 @@ 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 { label } = useSecondaryText();
+	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
 	// re-renders when the popover's anchor updates.
@@ -118,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' ) }
@@ -126,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', {
@@ -148,15 +137,12 @@ export default function DocumentActions() {
 							entityLabel
 						) }
 					</VisuallyHidden>
-					{ decodeEntities( entityTitle ) }
-				</Text>
-
-				<Text
-					size="body"
-					className="edit-site-document-actions__secondary-item"
-				>
-					{ label ?? '' }
+					{ getTitle() }
 				</Text>
+				<div className="edit-site-document-actions__secondary-item">
+					<BlockIcon icon={ icon } showColors />
+					<Text size="body">{ label ?? '' }</Text>
+				</div>
 
 				<Dropdown
 					popoverProps={ popoverProps }
@@ -181,7 +167,7 @@ export default function DocumentActions() {
 					contentClassName="edit-site-document-actions__info-dropdown"
 					renderContent={ ( { onClose } ) => (
 						<TemplateDetails
-							template={ template }
+							template={ record }
 							onClose={ onClose }
 						/>
 					) }