@wordpress/edit-site 5.6.0 → 5.7.0

package/src/components/global-styles/stories/index.js

@@ -0,0 +1,425 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from '../global-styles-provider';
+import { default as GlobalStylesUIComponent } from '../ui';
+import { unlock } from '../../../private-apis';
+
+const { GlobalStylesContext, ExperimentalBlockEditorProvider } = unlock(
+	blockEditorPrivateApis
+);
+
+export default { title: 'EditSite/GlobalStylesUI' };
+
+const BASE_SETTINGS = {
+	settings: {
+		appearanceTools: false,
+		useRootPaddingAwareAlignments: true,
+		border: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+		color: {
+			background: true,
+			custom: true,
+			customDuotone: true,
+			customGradient: true,
+			defaultDuotone: true,
+			defaultGradients: true,
+			defaultPalette: true,
+			duotone: {
+				default: [
+					{
+						name: 'Dark grayscale',
+						colors: [ '#000000', '#7f7f7f' ],
+						slug: 'dark-grayscale',
+					},
+					{
+						name: 'Grayscale',
+						colors: [ '#000000', '#ffffff' ],
+						slug: 'grayscale',
+					},
+					{
+						name: 'Purple and yellow',
+						colors: [ '#8c00b7', '#fcff41' ],
+						slug: 'purple-yellow',
+					},
+					{
+						name: 'Blue and red',
+						colors: [ '#000097', '#ff4747' ],
+						slug: 'blue-red',
+					},
+					{
+						name: 'Midnight',
+						colors: [ '#000000', '#00a5ff' ],
+						slug: 'midnight',
+					},
+					{
+						name: 'Magenta and yellow',
+						colors: [ '#c7005a', '#fff278' ],
+						slug: 'magenta-yellow',
+					},
+					{
+						name: 'Purple and green',
+						colors: [ '#a60072', '#67ff66' ],
+						slug: 'purple-green',
+					},
+					{
+						name: 'Blue and orange',
+						colors: [ '#1900d8', '#ffa96b' ],
+						slug: 'blue-orange',
+					},
+				],
+			},
+			gradients: {
+				default: [
+					{
+						name: 'Vivid cyan blue to vivid purple',
+						gradient:
+							'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					},
+					{
+						name: 'Light green cyan to vivid green cyan',
+						gradient:
+							'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+						slug: 'light-green-cyan-to-vivid-green-cyan',
+					},
+					{
+						name: 'Luminous vivid amber to luminous vivid orange',
+						gradient:
+							'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
+						slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
+					},
+					{
+						name: 'Luminous vivid orange to vivid red',
+						gradient:
+							'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
+						slug: 'luminous-vivid-orange-to-vivid-red',
+					},
+					{
+						name: 'Very light gray to cyan bluish gray',
+						gradient:
+							'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
+						slug: 'very-light-gray-to-cyan-bluish-gray',
+					},
+					{
+						name: 'Cool to warm spectrum',
+						gradient:
+							'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
+						slug: 'cool-to-warm-spectrum',
+					},
+					{
+						name: 'Blush light purple',
+						gradient:
+							'linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)',
+						slug: 'blush-light-purple',
+					},
+					{
+						name: 'Blush bordeaux',
+						gradient:
+							'linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)',
+						slug: 'blush-bordeaux',
+					},
+					{
+						name: 'Luminous dusk',
+						gradient:
+							'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)',
+						slug: 'luminous-dusk',
+					},
+					{
+						name: 'Pale ocean',
+						gradient:
+							'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+						slug: 'pale-ocean',
+					},
+					{
+						name: 'Electric grass',
+						gradient:
+							'linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)',
+						slug: 'electric-grass',
+					},
+					{
+						name: 'Midnight',
+						gradient:
+							'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
+						slug: 'midnight',
+					},
+				],
+			},
+			link: true,
+			palette: {
+				default: [
+					{
+						name: 'Black',
+						slug: 'black',
+						color: '#000000',
+					},
+					{
+						name: 'Cyan bluish gray',
+						slug: 'cyan-bluish-gray',
+						color: '#abb8c3',
+					},
+					{
+						name: 'White',
+						slug: 'white',
+						color: '#ffffff',
+					},
+					{
+						name: 'Pale pink',
+						slug: 'pale-pink',
+						color: '#f78da7',
+					},
+					{
+						name: 'Vivid red',
+						slug: 'vivid-red',
+						color: '#cf2e2e',
+					},
+					{
+						name: 'Luminous vivid orange',
+						slug: 'luminous-vivid-orange',
+						color: '#ff6900',
+					},
+					{
+						name: 'Luminous vivid amber',
+						slug: 'luminous-vivid-amber',
+						color: '#fcb900',
+					},
+					{
+						name: 'Light green cyan',
+						slug: 'light-green-cyan',
+						color: '#7bdcb5',
+					},
+					{
+						name: 'Vivid green cyan',
+						slug: 'vivid-green-cyan',
+						color: '#00d084',
+					},
+					{
+						name: 'Pale cyan blue',
+						slug: 'pale-cyan-blue',
+						color: '#8ed1fc',
+					},
+					{
+						name: 'Vivid cyan blue',
+						slug: 'vivid-cyan-blue',
+						color: '#0693e3',
+					},
+					{
+						name: 'Vivid purple',
+						slug: 'vivid-purple',
+						color: '#9b51e0',
+					},
+				],
+				theme: [
+					{
+						color: '#ffffff',
+						name: 'Base',
+						slug: 'base',
+					},
+					{
+						color: '#000000',
+						name: 'Contrast',
+						slug: 'contrast',
+					},
+					{
+						color: '#9DFF20',
+						name: 'Primary',
+						slug: 'primary',
+					},
+					{
+						color: '#345C00',
+						name: 'Secondary',
+						slug: 'secondary',
+					},
+					{
+						color: '#F6F6F6',
+						name: 'Tertiary',
+						slug: 'tertiary',
+					},
+				],
+			},
+			text: true,
+		},
+		shadow: {
+			defaultPresets: true,
+			presets: {
+				default: [
+					{
+						name: 'Natural',
+						slug: 'natural',
+						shadow: '6px 6px 9px rgba(0, 0, 0, 0.2)',
+					},
+					{
+						name: 'Deep',
+						slug: 'deep',
+						shadow: '12px 12px 50px rgba(0, 0, 0, 0.4)',
+					},
+					{
+						name: 'Sharp',
+						slug: 'sharp',
+						shadow: '6px 6px 0px rgba(0, 0, 0, 0.2)',
+					},
+					{
+						name: 'Outlined',
+						slug: 'outlined',
+						shadow: '6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)',
+					},
+					{
+						name: 'Crisp',
+						slug: 'crisp',
+						shadow: '6px 6px 0px rgba(0, 0, 0, 1)',
+					},
+				],
+			},
+		},
+		layout: {
+			contentSize: '650px',
+			wideSize: '1200px',
+		},
+		spacing: {
+			blockGap: true,
+			margin: true,
+			padding: true,
+			customSpacingSize: true,
+			units: [ '%', 'px', 'em', 'rem', 'vh', 'vw' ],
+			spacingScale: {
+				operator: '*',
+				increment: 1.5,
+				steps: 0,
+				mediumStep: 1.5,
+				unit: 'rem',
+			},
+			spacingSizes: {
+				theme: [
+					{
+						size: 'clamp(1.5rem, 5vw, 2rem)',
+						slug: '30',
+						name: '1',
+					},
+					{
+						size: 'clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)',
+						slug: '40',
+						name: '2',
+					},
+					{
+						size: 'clamp(2.5rem, 8vw, 4.5rem)',
+						slug: '50',
+						name: '3',
+					},
+					{
+						size: 'clamp(3.75rem, 10vw, 7rem)',
+						slug: '60',
+						name: '4',
+					},
+					{
+						size: 'clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)',
+						slug: '70',
+						name: '5',
+					},
+					{
+						size: 'clamp(7rem, 14vw, 11rem)',
+						slug: '80',
+						name: '6',
+					},
+				],
+			},
+		},
+		typography: {
+			customFontSize: true,
+			dropCap: false,
+			fontSizes: {
+				default: [
+					{
+						name: 'Small',
+						slug: 'small',
+						size: '13px',
+					},
+					{
+						name: 'Medium',
+						slug: 'medium',
+						size: '20px',
+					},
+					{
+						name: 'Large',
+						slug: 'large',
+						size: '36px',
+					},
+					{
+						name: 'Extra Large',
+						slug: 'x-large',
+						size: '42px',
+					},
+				],
+			},
+			fontStyle: true,
+			fontWeight: true,
+			letterSpacing: true,
+			lineHeight: true,
+			textColumns: false,
+			textDecoration: true,
+			textTransform: true,
+			fluid: true,
+			fontFamilies: {
+				theme: [
+					{
+						fontFamily:
+							'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+						name: 'System Font',
+						slug: 'system-font',
+					},
+				],
+			},
+		},
+		dimensions: {
+			minHeight: true,
+		},
+		position: {
+			fixed: true,
+			sticky: true,
+		},
+	},
+	styles: {
+		blocks: {},
+		elements: {},
+	},
+};
+
+export const GlobalStylesUI = () => {
+	const [ userGlobalStyles, setUserStyles ] = useState( {
+		settings: {},
+		styles: {},
+	} );
+	const context = useMemo( () => {
+		return {
+			isReady: true,
+			user: userGlobalStyles,
+			base: BASE_SETTINGS,
+			merged: mergeBaseAndUserConfigs( BASE_SETTINGS, userGlobalStyles ),
+			setUserConfig: setUserStyles,
+		};
+	}, [ userGlobalStyles, setUserStyles ] );
+	const wrapperStyle = {
+		width: 280,
+	};
+	return (
+		<ExperimentalBlockEditorProvider>
+			<GlobalStylesContext.Provider value={ context }>
+				<div style={ wrapperStyle }>
+					<GlobalStylesUIComponent
+						isStyleBookOpened={ false }
+						onCloseStyleBook={ () => {} }
+					/>
+				</div>
+			</GlobalStylesContext.Provider>
+		</ExperimentalBlockEditorProvider>
+	);
+};

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

@@ -27,7 +27,6 @@
 	max-width: 100%;
 }
 
-.edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography,
 .edit-site-global-styles-screen-css {
 	margin: $grid-unit-20;
@@ -46,10 +45,10 @@
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 
-	.component-color-indicator {
-		// Show a diagonal line (crossed out) for empty swatches.
-		background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
-		flex-shrink: 0;
+	.color-block-support-panel {
+		padding-left: 0;
+		padding-right: 0;
+		border-top: none;
 	}
 }
 
@@ -84,13 +83,6 @@
 	margin: 0;
 }
 
-.edit-site-screen-text-color__control,
-.edit-site-screen-link-color__control,
-.edit-site-screen-button-color__control,
-.edit-site-screen-background-color__control.has-no-tabs {
-	padding: $grid-unit-20;
-}
-
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
 
@@ -123,12 +115,6 @@
 	flex-shrink: 0;
 }
 
-.edit-site-global-styles__color-label {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
 .edit-site-global-styles__block-preview-panel {
 	position: relative;
 	width: 100%;

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

@@ -27,11 +27,6 @@ import ScreenTypographyElement from './screen-typography-element';
 import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
-import ScreenBackgroundColor from './screen-background-color';
-import ScreenTextColor from './screen-text-color';
-import ScreenLinkColor from './screen-link-color';
-import ScreenHeadingColor from './screen-heading-color';
-import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 import { ScreenVariation } from './screen-variations';
@@ -184,6 +179,12 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenTypographyElement name={ name } element="heading" />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/caption' }
+			>
+				<ScreenTypographyElement name={ name } element="caption" />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/typography/button' }
 			>
@@ -200,36 +201,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenColorPalette name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/background' }
-			>
-				<ScreenBackgroundColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
 				<ScreenFilters name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
-				<ScreenTextColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
-				<ScreenLinkColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/heading' }
-			>
-				<ScreenHeadingColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/button' }
-			>
-				<ScreenButtonColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
 				<ScreenBorder name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>

package/src/components/global-styles-renderer/index.js

@@ -14,7 +14,7 @@ import { unlock } from '../../private-apis';
 const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
 
 function useGlobalStylesRenderer() {
-	const [ styles, settings, svgFilters ] = useGlobalStylesOutput();
+	const [ styles, settings ] = useGlobalStylesOutput();
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 
@@ -30,7 +30,6 @@ function useGlobalStylesRenderer() {
 		updateSettings( {
 			...currentStoreSettings,
 			styles: [ ...nonGlobalStyles, ...styles ],
-			svgFilters,
 			__experimentalFeatures: settings,
 		} );
 	}, [ styles, settings ] );

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalListView as ListView } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
@@ -18,6 +18,7 @@ import { ESCAPE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../private-apis';
 
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
@@ -33,7 +34,7 @@ export default function ListViewSidebar() {
 
 	const instanceId = useInstanceId( ListViewSidebar );
 	const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`;
-
+	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -59,7 +60,7 @@ export default function ListViewSidebar() {
 					focusOnMountRef,
 				] ) }
 			>
-				<ListView />
+				<PrivateListView />
 			</div>
 		</div>
 	);

package/src/components/start-template-options/index.js

@@ -4,7 +4,10 @@
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useMemo } from '@wordpress/element';
-import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import {
+	__experimentalBlockPatternsList as BlockPatternsList,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -35,15 +38,40 @@ function useFallbackTemplateContent( slug, isCustom = false ) {
 
 const START_BLANK_TITLE = __( 'Start blank' );
 
-function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
-	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
-	const blockPatterns = useMemo(
-		() => [
+function useStartPatterns( fallbackContent ) {
+	const { slug, patterns } = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		const { getEntityRecord } = select( coreStore );
+		const postId = getEditedPostId();
+		const postType = getEditedPostType();
+		const record = getEntityRecord( 'postType', postType, postId );
+		const { getSettings } = select( blockEditorStore );
+		return {
+			slug: record.slug,
+			patterns: getSettings().__experimentalBlockPatterns,
+		};
+	}, [] );
+
+	return useMemo( () => {
+		// filter patterns that are supposed to be used in the current template being edited.
+		return [
 			{
 				name: 'fallback',
 				blocks: parse( fallbackContent ),
 				title: __( 'Fallback content' ),
 			},
+			...patterns
+				.filter( ( pattern ) => {
+					return (
+						Array.isArray( pattern.templateTypes ) &&
+						pattern.templateTypes.some( ( templateType ) =>
+							slug.startsWith( templateType )
+						)
+					);
+				} )
+				.map( ( pattern ) => {
+					return { ...pattern, blocks: parse( pattern.content ) };
+				} ),
 			{
 				name: 'start-blank',
 				blocks: parse(
@@ -51,9 +79,13 @@ function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
 				),
 				title: START_BLANK_TITLE,
 			},
-		],
-		[ fallbackContent ]
-	);
+		];
+	}, [ fallbackContent, slug, patterns ] );
+}
+
+function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
+	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
+	const blockPatterns = useStartPatterns( fallbackContent );
 	const shownBlockPatterns = useAsyncList( blockPatterns );
 
 	return (

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

@@ -247,25 +247,19 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					{ ( tab ) => (
 						<Iframe
 							className="edit-site-style-book__iframe"
-							head={
-								<>
-									<EditorStyles styles={ settings.styles } />
-									<style>
-										{
-											// Forming a "block formatting context" to prevent margin collapsing.
-											// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-											`.is-root-container { display: flow-root; }
-											body { position: relative; padding: 32px !important; }` +
-												STYLE_BOOK_IFRAME_STYLES
-										}
-									</style>
-								</>
-							}
 							name="style-book-canvas"
 							tabIndex={ 0 }
 						>
-							{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
-							{ settings.svgFilters }
+							<EditorStyles styles={ settings.styles } />
+							<style>
+								{
+									// Forming a "block formatting context" to prevent margin collapsing.
+									// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+									`.is-root-container { display: flow-root; }
+											body { position: relative; padding: 32px !important; }` +
+										STYLE_BOOK_IFRAME_STYLES
+								}
+							</style>
 							<Examples
 								className={ classnames(
 									'edit-site-style-book__examples',

package/src/components/style-book/style.scss

@@ -1,5 +1,5 @@
 .edit-site-style-book {
-	background: $white; // Fallback color, overriden by JavaScript.
+	background: $white; // Fallback color, overridden by JavaScript.
 	border-radius: $radius-block-ui;
 	bottom: 0;
 	left: 0;