@wordpress/edit-site 4.18.0 → 5.0.0

package/src/components/sidebar-navigation-screen-templates/index.js

@@ -0,0 +1,181 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { useLink } from '../routes/link';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useLocation } from '../routes';
+import { store as editSiteStore } from '../../store';
+import getIsListPage from '../../utils/get-is-list-page';
+import AddNewTemplate from '../add-new-template';
+
+function omit( object, keys ) {
+	return Object.fromEntries(
+		Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )
+	);
+}
+
+const Item = ( { item } ) => {
+	const linkInfo = useLink( item.params );
+	const props = item.params
+		? { ...omit( item, 'params' ), ...linkInfo }
+		: item;
+	return <SidebarNavigationItem { ...props } />;
+};
+
+const config = {
+	wp_template: {
+		path: '/templates',
+		labels: {
+			title: __( 'Templates' ),
+			loading: __( 'Loading templates' ),
+			notFound: __( 'No templates found' ),
+			manage: __( 'Manage all templates' ),
+		},
+	},
+	wp_template_part: {
+		path: '/template-parts',
+		labels: {
+			title: __( 'Template parts' ),
+			loading: __( 'Loading template parts' ),
+			notFound: __( 'No template parts found' ),
+			manage: __( 'Manage all template parts' ),
+		},
+	},
+};
+
+export default function SidebarNavigationScreenTemplates( {
+	postType = 'wp_template',
+} ) {
+	const { params } = useLocation();
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isListPage = getIsListPage( params );
+	const isEditorPage = ! isListPage;
+
+	// Ideally the URL params would be enough.
+	// Loading the editor should ideally redirect to the home page
+	// instead of fetching the edited entity here.
+	const { editedPostId, editedPostType } = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		return {
+			editedPostId: getEditedPostId(),
+			editedPostType: getEditedPostType(),
+		};
+	}, [] );
+
+	const { records: templates, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		postType,
+		{
+			per_page: -1,
+		}
+	);
+
+	let items = [];
+	if ( isLoading ) {
+		items = [
+			{
+				children: config[ postType ].labels.loading,
+			},
+		];
+	} else if ( ! templates && ! isLoading ) {
+		items = [
+			{
+				children: config[ postType ].labels.notFound,
+			},
+		];
+	} else {
+		items = templates?.map( ( template ) => ( {
+			params: {
+				postType,
+				postId: template.id,
+			},
+			children: decodeEntities(
+				template.title?.rendered || template.slug
+			),
+			'aria-current':
+				( params.postType === postType &&
+					params.postId === template.id ) ||
+				// This is a special case for the home page.
+				( editedPostId === template.id &&
+					editedPostType === postType &&
+					!! params.postId )
+					? 'page'
+					: undefined,
+		} ) );
+	}
+
+	return (
+		<SidebarNavigationScreen
+			path={ config[ postType ].path }
+			parentTitle={ __( 'Design' ) }
+			title={
+				<HStack style={ { minHeight: 36 } } justify="space-between">
+					<div style={ { flexShrink: 0 } }>
+						{ config[ postType ].labels.title }
+					</div>
+					{ ! isMobileViewport && (
+						<HStack spacing={ 2 } justify="right">
+							<AddNewTemplate
+								templateType={ postType }
+								toggleProps={ {
+									className:
+										'edit-site-sidebar-navigation-screen-templates__add-button',
+								} }
+							/>
+							{ isEditorPage && (
+								<Button
+									className="edit-site-layout__edit-button"
+									label={ __( 'Open the editor' ) }
+									onClick={ () => {
+										__unstableSetCanvasMode( 'edit' );
+									} }
+								>
+									{ __( 'Edit' ) }
+								</Button>
+							) }
+						</HStack>
+					) }
+				</HStack>
+			}
+			content={
+				<>
+					<ItemGroup>
+						{ items.map( ( item, index ) => (
+							<Item item={ item } key={ index } />
+						) ) }
+
+						<SidebarNavigationItem
+							className="edit-site-sidebar-navigation-screen-templates__see-all"
+							{ ...useLink( {
+								postType,
+								postId: undefined,
+							} ) }
+							aria-current={
+								params.postType === postType && ! params.postId
+									? 'page'
+									: undefined
+							}
+							children={ config[ postType ].labels.manage }
+						/>
+					</ItemGroup>
+				</>
+			}
+		/>
+	);
+}

package/src/components/sidebar-navigation-screen-templates/style.scss

@@ -0,0 +1,9 @@
+.edit-site-sidebar-navigation-screen-templates__see-all {
+	/* Overrides the margin that comes from the Item component */
+	margin-top: $grid-unit-20 !important;
+}
+
+.edit-site-sidebar-navigation-screen-templates__add-button {
+	/* Overrides the color for all states of the button */
+	color: inherit !important;
+}

package/src/components/site-icon/index.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { wordpress } from '@wordpress/icons';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+function SiteIcon( { className } ) {
+	const { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {
+		const { getEntityRecord, isResolving } = select( coreDataStore );
+		const siteData =
+			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+
+		return {
+			isRequestingSite: isResolving( 'core', 'getEntityRecord', [
+				'root',
+				'__unstableBase',
+				undefined,
+			] ),
+			siteIconUrl: siteData.site_icon_url,
+		};
+	}, [] );
+
+	if ( isRequestingSite && ! siteIconUrl ) {
+		return null;
+	}
+
+	const icon = siteIconUrl ? (
+		<img
+			className="edit-site-site-icon__image"
+			alt={ __( 'Site Icon' ) }
+			src={ siteIconUrl }
+		/>
+	) : (
+		<Icon
+			className="edit-site-site-icon__icon"
+			size="36px"
+			icon={ wordpress }
+		/>
+	);
+
+	return (
+		<div className={ classnames( className, 'edit-site-site-icon' ) }>
+			{ icon }
+		</div>
+	);
+}
+
+export default SiteIcon;

package/src/components/site-icon/style.scss

@@ -0,0 +1,10 @@
+.edit-site-site-icon__icon {
+	fill: currentColor;
+}
+
+.edit-site-site-icon__image {
+	width: $button-size;
+	height: $button-size;
+	border-radius: $radius-block-ui;
+	object-fit: cover;
+}

package/src/components/site-title/index.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+function SiteTitle( { className } ) {
+	const { isRequestingSite, siteTitle } = useSelect( ( select ) => {
+		const { getEntityRecord, isResolving } = select( coreDataStore );
+		const siteData =
+			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+
+		return {
+			isRequestingSite: isResolving( 'core', 'getEntityRecord', [
+				'root',
+				'__unstableBase',
+				undefined,
+			] ),
+			siteTitle: siteData.name,
+		};
+	}, [] );
+
+	if ( isRequestingSite && ! siteTitle ) {
+		return null;
+	}
+
+	return (
+		<div className={ classnames( className, 'edit-site-site-title' ) }>
+			{ siteTitle }
+		</div>
+	);
+}
+
+export default SiteTitle;

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

@@ -11,6 +11,7 @@ import {
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -65,7 +66,7 @@ export default function TemplateDetails( { template, onClose } ) {
 						className="edit-site-template-details__title"
 						as="p"
 					>
-						{ title }
+						{ decodeEntities( title ) }
 					</Text>
 				) }
 
@@ -75,7 +76,7 @@ export default function TemplateDetails( { template, onClose } ) {
 						className="edit-site-template-details__description"
 						as="p"
 					>
-						{ description }
+						{ decodeEntities( description ) }
 					</Text>
 				) }
 			</VStack>

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;