@wordpress/edit-site 4.19.0 → 5.0.0

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/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/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,9 +15,6 @@ 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';
 
 /**
@@ -25,9 +22,7 @@ import { addFilter } from '@wordpress/hooks';
  */
 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 +33,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 +70,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 +85,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 );
 }
 
 /**
@@ -167,7 +118,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';