@wordpress/edit-site 4.19.0 → 5.1.0

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

@@ -0,0 +1,193 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	TabPanel,
+	createSlotFill,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	getCategories,
+	getBlockTypes,
+	getBlockFromExample,
+	createBlock,
+} from '@wordpress/blocks';
+import { BlockPreview } from '@wordpress/block-editor';
+import { closeSmall } from '@wordpress/icons';
+import { useResizeObserver } from '@wordpress/compose';
+import { useMemo, memo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useStyle } from '../global-styles';
+
+const SLOT_FILL_NAME = 'EditSiteStyleBook';
+const { Slot: StyleBookSlot, Fill: StyleBookFill } =
+	createSlotFill( SLOT_FILL_NAME );
+
+function getExamples() {
+	// Use our own example for the Heading block so that we can show multiple
+	// heading levels.
+	const headingsExample = {
+		name: 'core/heading',
+		title: __( 'Headings' ),
+		category: 'text',
+		blocks: [
+			createBlock( 'core/heading', {
+				content: __( 'Code Is Poetry' ),
+				level: 1,
+			} ),
+			createBlock( 'core/heading', {
+				content: __( 'Code Is Poetry' ),
+				level: 2,
+			} ),
+			createBlock( 'core/heading', {
+				content: __( 'Code Is Poetry' ),
+				level: 3,
+			} ),
+			createBlock( 'core/heading', {
+				content: __( 'Code Is Poetry' ),
+				level: 4,
+			} ),
+			createBlock( 'core/heading', {
+				content: __( 'Code Is Poetry' ),
+				level: 5,
+			} ),
+		],
+	};
+
+	const otherExamples = getBlockTypes()
+		.filter(
+			( blockType ) =>
+				blockType.name !== 'core/heading' && !! blockType.example
+		)
+		.map( ( blockType ) => ( {
+			name: blockType.name,
+			title: blockType.title,
+			category: blockType.category,
+			blocks: getBlockFromExample( blockType.name, blockType.example ),
+		} ) );
+
+	return [ headingsExample, ...otherExamples ];
+}
+
+function StyleBook( { isSelected, onSelect, onClose } ) {
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const [ textColor ] = useStyle( 'color.text' );
+	const [ backgroundColor ] = useStyle( 'color.background' );
+	const examples = useMemo( getExamples, [] );
+	const tabs = useMemo(
+		() =>
+			getCategories()
+				.filter( ( category ) =>
+					examples.some(
+						( example ) => example.category === category.slug
+					)
+				)
+				.map( ( category ) => ( {
+					name: category.slug,
+					title: category.title,
+					icon: category.icon,
+				} ) ),
+		[ examples ]
+	);
+	return (
+		<StyleBookFill>
+			<section
+				className={ classnames( 'edit-site-style-book', {
+					'is-wide': sizes.width > 600,
+				} ) }
+				style={ {
+					color: textColor,
+					background: backgroundColor,
+				} }
+				aria-label={ __( 'Style Book' ) }
+			>
+				{ resizeObserver }
+				<Button
+					className="edit-site-style-book__close-button"
+					icon={ closeSmall }
+					label={ __( 'Close Style Book' ) }
+					onClick={ onClose }
+				/>
+				<TabPanel
+					className="edit-site-style-book__tab-panel"
+					tabs={ tabs }
+				>
+					{ ( tab ) => (
+						<Examples
+							examples={ examples }
+							category={ tab.name }
+							isSelected={ isSelected }
+							onSelect={ onSelect }
+						/>
+					) }
+				</TabPanel>
+			</section>
+		</StyleBookFill>
+	);
+}
+
+const Examples = memo( ( { examples, category, isSelected, onSelect } ) => (
+	<div className="edit-site-style-book__examples">
+		{ examples
+			.filter( ( example ) => example.category === category )
+			.map( ( example ) => (
+				<Example
+					key={ example.name }
+					title={ example.title }
+					blocks={ example.blocks }
+					isSelected={ isSelected( example.name ) }
+					onClick={ () => {
+						onSelect( example.name );
+					} }
+				/>
+			) ) }
+	</div>
+) );
+
+const Example = memo( ( { title, blocks, isSelected, onClick } ) => (
+	<button
+		className={ classnames( 'edit-site-style-book__example', {
+			'is-selected': isSelected,
+		} ) }
+		aria-label={ sprintf(
+			// translators: %s: Title of a block, e.g. Heading.
+			__( 'Open %s styles in Styles panel' ),
+			title
+		) }
+		onClick={ onClick }
+	>
+		<span className="edit-site-style-book__example-title">{ title }</span>
+		<div className="edit-site-style-book__example-preview">
+			<BlockPreview
+				blocks={ blocks }
+				viewportWidth={ 0 }
+				__experimentalStyles={ [
+					{
+						css:
+							'.wp-block:first-child { margin-top: 0; }' +
+							'.wp-block:last-child { margin-bottom: 0; }',
+					},
+				] }
+			/>
+		</div>
+	</button>
+) );
+
+function useHasStyleBook() {
+	const fills = useSlotFills( SLOT_FILL_NAME );
+	return !! fills?.length;
+}
+
+StyleBook.Slot = StyleBookSlot;
+export default StyleBook;
+export { useHasStyleBook };

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

@@ -0,0 +1,78 @@
+.edit-site-style-book {
+	background: $white; // Fallback color, overriden by JavaScript.
+	border-radius: $radius-block-ui;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+	position: absolute;
+	right: 0;
+	top: 0;
+	transition: all 0.3s; // Match .block-editor-iframe__body transition.
+}
+
+.edit-site-style-book__close-button {
+	position: absolute;
+	right: $grid-unit-10;
+	top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
+}
+
+.edit-site-style-book__tab-panel {
+	.components-tab-panel__tabs {
+		background: $white;
+		color: $gray-900;
+	}
+
+	.components-tab-panel__tab-content {
+		bottom: 0;
+		left: 0;
+		overflow: auto;
+		padding: $grid-unit-40;
+		position: absolute;
+		right: 0;
+		top: $grid-unit-60; // Height of tabs.
+	}
+}
+
+.edit-site-style-book__examples {
+	max-width: 900px;
+	margin: 0 auto;
+}
+
+.edit-site-style-book__example {
+	background: none;
+	border-radius: $radius-block-ui;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	gap: $grid-unit-50;
+	margin-bottom: $grid-unit-50;
+	padding: $grid-unit-20;
+	width: 100%;
+
+	&.is-selected {
+		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+	}
+
+	.edit-site-style-book.is-wide & {
+		flex-direction: row;
+	}
+}
+
+.edit-site-style-book__example-title {
+	font-size: 11px;
+	font-weight: 500;
+	margin: 0;
+	text-align: left;
+	text-transform: uppercase;
+
+	.edit-site-style-book.is-wide & {
+		text-align: right;
+		width: 120px;
+	}
+}
+
+.edit-site-style-book__example-preview {
+	width: 100%;
+}

package/src/components/{url-query-controller/index.js → sync-state-with-url/use-init-edited-entity-from-url.js}

@@ -10,7 +10,7 @@ import { useDispatch } from '@wordpress/data';
 import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
 
-export default function URLQueryController() {
+export default function useInitEditedEntityFromURL() {
 	const { setTemplate, setTemplatePart, setPage } =
 		useDispatch( editSiteStore );
 	const {
@@ -19,6 +19,8 @@ export default function URLQueryController() {
 
 	// Set correct entity on page navigation.
 	useEffect( () => {
+		// This URL scheme mean we can't open a template part with the context of a given post.
+		// Potentially posts and pages could be moved to a "context" query string instead.
 		if ( 'page' === postType || 'post' === postType ) {
 			setPage( { context: { postType, postId } } ); // Resolves correct template based on ID.
 		} else if ( 'wp_template' === postType ) {
@@ -27,6 +29,4 @@ export default function URLQueryController() {
 			setTemplatePart( postId );
 		}
 	}, [ postId, postType ] );
-
-	return null;
 }

package/src/components/sync-state-with-url/use-sync-sidebar-path-with-url.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useLocation, useHistory } from '../routes';
+
+export default function useSyncSidebarPathWithURL() {
+	const history = useHistory();
+	const { params } = useLocation();
+	const { sidebar = '/' } = params;
+	const { location, goTo } = useNavigator();
+	const currentSidebar = useRef( sidebar );
+	const currentNavigatorLocation = useRef( location.path );
+	useEffect( () => {
+		currentSidebar.current = sidebar;
+		if ( sidebar !== currentNavigatorLocation.current ) {
+			goTo( sidebar );
+		}
+	}, [ sidebar ] );
+	useEffect( () => {
+		currentNavigatorLocation.current = location.path;
+		if ( location.path !== currentSidebar.current ) {
+			history.push( {
+				...params,
+				sidebar: location.path,
+			} );
+		}
+	}, [ location.path, history ] );
+
+	return sidebar;
+}

package/src/components/template-details/style.scss

@@ -20,6 +20,10 @@
 	.edit-site-template-details__template-areas-item {
 		position: relative;
 
+		.components-menu-items__item-icon {
+			color: var(--wp-block-synced-color);
+		}
+
 		.edit-site-template-details__template-areas-item-more {
 			position: absolute;
 			right: 0;

package/src/components/use-edited-entity-record/index.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function useEditedEntityRecord() {
+	const { record, title, 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 {
+			record: _record,
+			title: getTemplateInfo( _record ).title,
+			isLoaded: _isLoaded,
+		};
+	}, [] );
+
+	return {
+		isLoaded,
+		record,
+		getTitle: () => ( title ? decodeEntities( title ) : null ),
+	};
+}

package/src/hooks/index.js

@@ -2,4 +2,5 @@
  * Internal dependencies
  */
 import './components';
+import './push-changes-to-global-styles';
 import './template-part-edit';

package/src/hooks/push-changes-to-global-styles/index.js

@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import { get, set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import {
+	InspectorAdvancedControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { BaseControl, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
+	getBlockType,
+} from '@wordpress/blocks';
+import { useContext, useMemo, useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { getSupportedGlobalStylesPanels } from '../../components/global-styles/hooks';
+import { GlobalStylesContext } from '../../components/global-styles/context';
+import {
+	STYLE_PATH_TO_CSS_VAR_INFIX,
+	STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
+} from '../../components/global-styles/utils';
+
+function getChangesToPush( name, attributes ) {
+	return getSupportedGlobalStylesPanels( name ).flatMap( ( key ) => {
+		if ( ! STYLE_PROPERTY[ key ] ) {
+			return [];
+		}
+		const { value: path } = STYLE_PROPERTY[ key ];
+		const presetAttributeKey = path.join( '.' );
+		const presetAttributeValue =
+			attributes[
+				STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE[ presetAttributeKey ]
+			];
+		const value = presetAttributeValue
+			? `var:preset|${ STYLE_PATH_TO_CSS_VAR_INFIX[ presetAttributeKey ] }|${ presetAttributeValue }`
+			: get( attributes.style, path );
+		return value ? [ { path, value } ] : [];
+	} );
+}
+
+function cloneDeep( object ) {
+	return ! object ? {} : JSON.parse( JSON.stringify( object ) );
+}
+
+function PushChangesToGlobalStylesControl( {
+	name,
+	attributes,
+	setAttributes,
+} ) {
+	const changes = useMemo(
+		() => getChangesToPush( name, attributes ),
+		[ name, attributes ]
+	);
+
+	const { user: userConfig, setUserConfig } =
+		useContext( GlobalStylesContext );
+
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const pushChanges = useCallback( () => {
+		if ( changes.length === 0 ) {
+			return;
+		}
+
+		const { style: blockStyles } = attributes;
+
+		const newBlockStyles = cloneDeep( blockStyles );
+		const newUserConfig = cloneDeep( userConfig );
+
+		for ( const { path, value } of changes ) {
+			set( newBlockStyles, path, undefined );
+			set( newUserConfig, [ 'styles', 'blocks', name, ...path ], value );
+		}
+
+		// @wordpress/core-data doesn't support editing multiple entity types in
+		// a single undo level. So for now, we disable @wordpress/core-data undo
+		// tracking and implement our own Undo button in the snackbar
+		// notification.
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( { style: newBlockStyles } );
+		setUserConfig( () => newUserConfig, { undoIgnore: true } );
+
+		createSuccessNotice(
+			sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__( 'Pushed styles to all %s blocks.' ),
+				getBlockType( name ).title
+			),
+			{
+				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'Undo' ),
+						onClick() {
+							__unstableMarkNextChangeAsNotPersistent();
+							setAttributes( { style: blockStyles } );
+							setUserConfig( () => userConfig, {
+								undoIgnore: true,
+							} );
+						},
+					},
+				],
+			}
+		);
+	}, [ changes, attributes, userConfig, name ] );
+
+	return (
+		<BaseControl
+			className="edit-site-push-changes-to-global-styles-control"
+			help={ sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__(
+					'Move this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
+				),
+				getBlockType( name ).title
+			) }
+		>
+			<BaseControl.VisualLabel>
+				{ __( 'Styles' ) }
+			</BaseControl.VisualLabel>
+			<Button
+				variant="primary"
+				disabled={ changes.length === 0 }
+				onClick={ pushChanges }
+			>
+				{ __( 'Push changes to Global Styles' ) }
+			</Button>
+		</BaseControl>
+	);
+}
+
+const withPushChangesToGlobalStyles = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) =>
+		(
+			<>
+				<BlockEdit { ...props } />
+				<InspectorAdvancedControls>
+					<PushChangesToGlobalStylesControl { ...props } />
+				</InspectorAdvancedControls>
+			</>
+		)
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/edit-site/push-changes-to-global-styles',
+	withPushChangesToGlobalStyles
+);

package/src/hooks/push-changes-to-global-styles/style.scss

@@ -0,0 +1,4 @@
+.edit-site-push-changes-to-global-styles-control .components-button {
+	justify-content: center;
+	width: 100%;
+}

package/src/index.js

@@ -6,7 +6,7 @@ import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
-import { dispatch, select } from '@wordpress/data';
+import { dispatch } from '@wordpress/data';
 import { render, unmountComponentAtNode } from '@wordpress/element';
 import {
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
@@ -15,19 +15,15 @@ import {
 import { store as editorStore } from '@wordpress/editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { __ } from '@wordpress/i18n';
-import { store as viewportStore } from '@wordpress/viewport';
-import { getQueryArgs } from '@wordpress/url';
 import { addFilter } from '@wordpress/hooks';
+import { registerLegacyWidgetBlock } from '@wordpress/widgets';
 
 /**
  * Internal dependencies
  */
 import './hooks';
 import { store as editSiteStore } from './store';
-import EditSiteApp from './components/app';
-import getIsListPage from './utils/get-is-list-page';
-import ErrorBoundaryWarning from './components/error-boundary/warning';
+import App from './components/app';
 
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
@@ -38,22 +34,6 @@ import ErrorBoundaryWarning from './components/error-boundary/warning';
  * @param {?Object} settings Editor settings object.
  */
 export function reinitializeEditor( target, settings ) {
-	// Display warning if editor wasn't able to resolve homepage template.
-	if ( ! settings.__unstableHomeTemplate ) {
-		render(
-			<ErrorBoundaryWarning
-				message={ __(
-					'The editor is unable to find a block template for the homepage.'
-				) }
-				dashboardLink={
-					settings.__experimentalDashboardLink ?? 'index.php'
-				}
-			/>,
-			target
-		);
-		return;
-	}
-
 	/*
 	 * Prevent adding the Clasic block in the site editor.
 	 * Only add the filter when the site editor is initialized, not imported.
@@ -91,16 +71,6 @@ export function reinitializeEditor( target, settings ) {
 			showListViewByDefault: false,
 		} );
 
-		// Check if the block list view should be open by default.
-		if (
-			select( preferencesStore ).get(
-				'core/edit-site',
-				'showListViewByDefault'
-			)
-		) {
-			dispatch( editSiteStore ).setIsListViewOpened( true );
-		}
-
 		dispatch( interfaceStore ).setDefaultComplementaryArea(
 			'core/edit-site',
 			'edit-site/template'
@@ -116,31 +86,13 @@ export function reinitializeEditor( target, settings ) {
 			defaultTemplateTypes: settings.defaultTemplateTypes,
 			defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
 		} );
-
-		const isLandingOnListPage = getIsListPage(
-			getQueryArgs( window.location.href )
-		);
-
-		if ( isLandingOnListPage ) {
-			// Default the navigation panel to be opened when we're in a bigger
-			// screen and land in the list screen.
-			dispatch( editSiteStore ).setIsNavigationPanelOpened(
-				select( viewportStore ).isViewportMatch( 'medium' )
-			);
-		}
 	}
 
 	// Prevent the default browser action for files dropped outside of dropzones.
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	render(
-		<EditSiteApp
-			reboot={ reboot }
-			homeTemplate={ settings.__unstableHomeTemplate }
-		/>,
-		target
-	);
+	render( <App reboot={ reboot } />, target );
 }
 
 /**
@@ -158,6 +110,7 @@ export function initializeEditor( id, settings ) {
 
 	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
 	registerCoreBlocks();
+	registerLegacyWidgetBlock( { inserter: false } );
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: true,
@@ -167,7 +120,6 @@ export function initializeEditor( id, settings ) {
 	reinitializeEditor( target, settings );
 }
 
-export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';
 export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar';
 export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item';
 export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item';