@wordpress/edit-site 4.19.0 → 5.0.0

package/src/components/global-styles/block-preview-panel.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockPreview } from '@wordpress/block-editor';
+import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
+import { useResizeObserver } from '@wordpress/compose';
+
+const BlockPreviewPanel = ( { name } ) => {
+	const blockExample = getBlockType( name )?.example;
+	const [
+		containerResizeListener,
+		{ width: containerWidth, height: containerHeight },
+	] = useResizeObserver();
+	const viewportWidth = blockExample?.viewportWidth || containerWidth;
+
+	return ! blockExample ? null : (
+		<div className="edit-site-global-styles__block-preview-panel">
+			{ containerResizeListener }
+
+			<BlockPreview
+				viewportWidth={ viewportWidth }
+				__experimentalMinHeight={ containerHeight }
+				blocks={ getBlockFromExample( name, blockExample ) }
+			/>
+		</div>
+	);
+};
+
+export default BlockPreviewPanel;

package/src/components/global-styles/context-menu.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout } from '@wordpress/icons';
+import { typography, border, color, layout } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -19,7 +19,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const hasColorPanel = useHasColorPanel( name );
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
-	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+	const hasLayoutPanel = hasDimensionsPanel;
 
 	return (
 		<ItemGroup>
@@ -41,6 +41,15 @@ function ContextMenu( { name, parentMenu = '' } ) {
 					{ __( 'Colors' ) }
 				</NavigationButtonAsItem>
 			) }
+			{ hasBorderPanel && (
+				<NavigationButtonAsItem
+					icon={ border }
+					path={ parentMenu + '/border' }
+					aria-label={ __( 'Border styles' ) }
+				>
+					{ __( 'Border' ) }
+				</NavigationButtonAsItem>
+			) }
 			{ hasLayoutPanel && (
 				<NavigationButtonAsItem
 					icon={ layout }

package/src/components/global-styles/custom-css.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { TextareaControl, Panel, PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useStyle } from './hooks';
+
+function CustomCSSControl() {
+	const [ customCSS, setCustomCSS ] = useStyle( 'css' );
+	const [ themeCSS ] = useStyle( 'css', null, 'base' );
+	const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';
+
+	// If there is custom css from theme.json show it in the edit box
+	// so the user can selectively overwrite it, rather than have the user CSS
+	// completely overwrite the theme CSS by default.
+	const themeCustomCSS =
+		! customCSS && themeCSS
+			? `/* ${ __(
+					'Theme Custom CSS start'
+			  ) } */\n${ themeCSS }\n/* ${ __( 'Theme Custom CSS end' ) } */`
+			: undefined;
+
+	function handleOnChange( value ) {
+		// If there is theme custom CSS, but the user clears the input box then save the
+		// ignoreThemeCustomCSS string so that the theme custom CSS is not re-applied.
+		if ( themeCSS && value === '' ) {
+			setCustomCSS( ignoreThemeCustomCSS );
+			return;
+		}
+		setCustomCSS( value );
+	}
+
+	const originalThemeCustomCSS =
+		themeCSS && customCSS && themeCustomCSS !== customCSS
+			? themeCSS
+			: undefined;
+
+	return (
+		<>
+			<TextareaControl
+				value={
+					customCSS?.replace( ignoreThemeCustomCSS, '' ) ||
+					themeCustomCSS
+				}
+				onChange={ ( value ) => handleOnChange( value ) }
+				rows={ 15 }
+				className="edit-site-global-styles__custom-css-input"
+				spellCheck={ false }
+				help={ __(
+					"Enter your custom CSS in the textarea and preview in the editor. Changes won't take effect until you've saved the template."
+				) }
+			/>
+			{ originalThemeCustomCSS && (
+				<Panel>
+					<PanelBody
+						title={ __( 'Original Theme Custom CSS' ) }
+						initialOpen={ false }
+					>
+						<pre className="edit-site-global-styles__custom-css-theme-css">
+							{ originalThemeCustomCSS }
+						</pre>
+					</PanelBody>
+				</Panel>
+			) }
+		</>
+	);
+}
+
+export default CustomCSSControl;

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

@@ -18,6 +18,7 @@ import {
 } from '@wordpress/components';
 import {
 	__experimentalUseCustomSides as useCustomSides,
+	__experimentalHeightControl as HeightControl,
 	__experimentalSpacingSizesControl as SpacingSizesControl,
 } from '@wordpress/block-editor';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
@@ -556,19 +557,15 @@ export default function DimensionsPanel( { name } ) {
 			) }
 			{ showMinHeightControl && (
 				<ToolsPanelItem
-					className="single-column"
 					hasValue={ hasMinHeightValue }
 					label={ __( 'Min. height' ) }
 					onDeselect={ resetMinHeightValue }
 					isShownByDefault={ true }
 				>
-					<UnitControl
+					<HeightControl
 						label={ __( 'Min. height' ) }
 						value={ minHeightValue }
 						onChange={ setMinHeightValue }
-						units={ units }
-						min={ 0 }
-						size={ '__unstable-large' }
 					/>
 				</ToolsPanelItem>
 			) }

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

@@ -45,22 +45,44 @@ const cleanEmptyObject = ( object ) => {
 };
 
 function useGlobalStylesUserConfig() {
-	const { globalStylesId, settings, styles } = useSelect( ( select ) => {
-		const _globalStylesId =
-			select( coreStore ).__experimentalGetCurrentGlobalStylesId();
-		const record = _globalStylesId
-			? select( coreStore ).getEditedEntityRecord(
-					'root',
-					'globalStyles',
-					_globalStylesId
-			  )
-			: undefined;
-		return {
-			globalStylesId: _globalStylesId,
-			settings: record?.settings,
-			styles: record?.styles,
-		};
-	}, [] );
+	const { globalStylesId, isReady, settings, styles } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const _globalStylesId =
+				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
+			const record = _globalStylesId
+				? getEditedEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId
+				  )
+				: undefined;
+
+			let hasResolved = false;
+			if (
+				hasFinishedResolution(
+					'__experimentalGetCurrentGlobalStylesId'
+				)
+			) {
+				hasResolved = _globalStylesId
+					? hasFinishedResolution( 'getEditedEntityRecord', [
+							'root',
+							'globalStyles',
+							_globalStylesId,
+					  ] )
+					: true;
+			}
+
+			return {
+				globalStylesId: _globalStylesId,
+				isReady: hasResolved,
+				settings: record?.settings,
+				styles: record?.styles,
+			};
+		},
+		[]
+	);
 
 	const { getEditedEntityRecord } = useSelect( coreStore );
 	const { editEntityRecord } = useDispatch( coreStore );
@@ -91,7 +113,7 @@ function useGlobalStylesUserConfig() {
 		[ globalStylesId ]
 	);
 
-	return [ !! settings || !! styles, config, setConfig ];
+	return [ isReady, config, setConfig ];
 }
 
 function useGlobalStylesBaseConfig() {

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { get, set, isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
+import { get, set } from 'lodash';
 import { colord, extend } from 'colord';
 import a11yPlugin from 'colord/plugins/a11y';
 
@@ -29,7 +30,7 @@ const EMPTY_CONFIG = { settings: {}, styles: {} };
 
 export const useGlobalStylesReset = () => {
 	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
-	const canReset = !! config && ! isEqual( config, EMPTY_CONFIG );
+	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,
 		useCallback(
@@ -137,7 +138,11 @@ export function useStyle( path, blockName, source = 'all' ) {
 			result = getValueFromVariable(
 				mergedConfig,
 				blockName,
-				get( userConfig, finalPath ) ?? get( baseConfig, finalPath )
+				// The stlyes.css path is allowed to be empty, so don't revert to base if undefined.
+				finalPath === 'styles.css'
+					? get( userConfig, finalPath )
+					: get( userConfig, finalPath ) ??
+							get( baseConfig, finalPath )
 			);
 			break;
 		case 'user':

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

@@ -49,7 +49,7 @@ function Palette( { name } ) {
 
 	const screenPath = ! name
 		? '/colors/palette'
-		: '/blocks/' + name + '/colors/palette';
+		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
 	const paletteButtonText =
 		colors.length > 0
 			? sprintf(

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

@@ -68,7 +68,7 @@ function BlockMenuItem( { block } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ '/blocks/' + block.name }
+			path={ '/blocks/' + encodeURIComponent( block.name ) }
 			aria-label={ navigationButtonLabel }
 		>
 			<HStack justify="flex-start">
@@ -129,6 +129,7 @@ function ScreenBlockList() {
 				) }
 			/>
 			<SearchControl
+				__nextHasNoMarginBottom
 				className="edit-site-block-types-search"
 				onChange={ setFilterValue }
 				value={ filterValue }

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

@@ -2,12 +2,14 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
+import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import ContextMenu from './context-menu';
 import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenBlock( { name } ) {
 	const blockType = getBlockType( name );
@@ -15,7 +17,13 @@ function ScreenBlock( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ blockType.title } />
-			<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />
+			<Spacer paddingX={ 4 }>
+				<BlockPreviewPanel name={ name } />
+			</Spacer>
+			<ContextMenu
+				parentMenu={ '/blocks/' + encodeURIComponent( name ) }
+				name={ name }
+			/>
 		</>
 	);
 }

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import BorderPanel, { useHasBorderPanel } from './border-panel';
+
+function ScreenBorder( { name } ) {
+	const hasBorderPanel = useHasBorderPanel( name );
+
+	return (
+		<>
+			<ScreenHeader title={ __( 'Border' ) } />
+			{ hasBorderPanel && <BorderPanel name={ name } /> }
+		</>
+	);
+}
+
+export default ScreenBorder;

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

@@ -174,7 +174,8 @@ function ButtonColorItem( { name, parentMenu } ) {
 }
 
 function ScreenColors( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+	const parentMenu =
+		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
 
 	return (
 		<>

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import Subtitle from './subtitle';
+import CustomCSSControl from './custom-css';
+
+function ScreenCSS() {
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'CSS' ) }
+				description={ __(
+					'Add your own CSS to customize the appearance and layout of your site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen-css">
+				<VStack spacing={ 3 }>
+					<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>
+					<CustomCSSControl />
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+export default ScreenCSS;

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

@@ -6,19 +6,16 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import BorderPanel, { useHasBorderPanel } from './border-panel';
 import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
 
 function ScreenLayout( { name } ) {
-	const hasBorderPanel = useHasBorderPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
-			{ hasBorderPanel && <BorderPanel name={ name } /> }
 		</>
 	);
 }

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

@@ -75,7 +75,8 @@ function ScreenRoot() {
 					paddingTop={ 2 }
 					/*
 					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
-					 * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
+					 * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the
+					 * the nav button inset should be looked at before reusing further.
 					 */
 					paddingX="13px"
 					marginBottom={ 4 }
@@ -98,6 +99,34 @@ function ScreenRoot() {
 					</NavigationButtonAsItem>
 				</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>
 		</Card>
 	);
 }

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

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
 import classnames from 'classnames';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,10 @@ import StylesPreview from './preview';
 import ScreenHeader from './header';
 
 function compareVariations( a, b ) {
-	return isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );
+	return (
+		fastDeepEqual( a.styles, b.styles ) &&
+		fastDeepEqual( a.settings, b.settings )
+	);
 }
 
 function Variation( { variation } ) {

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/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 ];