@wordpress/edit-site 3.0.1-next.253d9b6e21.0 → 3.0.3

package/build-style/style.css

@@ -122,6 +122,12 @@
   }
 }
 
+@media (min-width: 782px) {
+  .components-panel__header + .interface-complementary-area-header {
+    margin-top: 0;
+  }
+}
+
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
@@ -383,6 +389,39 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
 }
 
+.interface-more-menu-dropdown {
+  margin-left: -4px;
+}
+.interface-more-menu-dropdown .components-button {
+  width: auto;
+  padding: 0 2px;
+}
+@media (min-width: 600px) {
+  .interface-more-menu-dropdown {
+    margin-left: 0;
+  }
+  .interface-more-menu-dropdown .components-button {
+    padding: 0 4px;
+  }
+}
+
+.interface-more-menu-dropdown__content .components-popover__content {
+  min-width: 280px;
+}
+@media (min-width: 480px) {
+  .interface-more-menu-dropdown__content .components-popover__content {
+    width: auto;
+    max-width: 480px;
+  }
+}
+.interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu {
+  padding: 0;
+}
+
+.components-popover.interface-more-menu-dropdown__content {
+  z-index: 99998;
+}
+
 .interface-pinned-items {
   display: flex;
 }
@@ -411,6 +450,62 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding: 6px;
 }
 
+.edit-site-visual-editor {
+  position: relative;
+  background-color: #2f2f2f;
+}
+.edit-site-visual-editor.is-focus-mode {
+  padding: 48px 48px 0;
+}
+
+.edit-site-visual-editor__editor-canvas {
+  border-radius: 2px 2px 0 0;
+}
+
+.edit-site-visual-editor__back-button {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  color: #fff;
+}
+.edit-site-visual-editor__back-button:active:not([aria-disabled=true]), .edit-site-visual-editor__back-button:focus:not([aria-disabled=true]), .edit-site-visual-editor__back-button:hover {
+  color: #f0f0f0;
+}
+
+.edit-site-global-styles-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 152px;
+  margin: 16px;
+  line-height: 1;
+}
+.edit-site-global-styles-preview .component-color-indicator {
+  border-radius: 50%;
+  border: 0;
+  height: 36px;
+  width: 36px;
+  margin-left: 0;
+  padding: 0;
+}
+
+.edit-site-global-style-palette {
+  margin: 16px;
+}
+.edit-site-global-style-palette .component-color-indicator {
+  display: block;
+  border-radius: 50%;
+  border: 0;
+  height: 24px;
+  width: 24px;
+  margin-left: 0;
+  padding: 0;
+}
+
+.edit-site-global-styles-header__description {
+  padding: 0 16px;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -681,9 +776,10 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   background: #1e1e1e;
   border-radius: 0;
   color: #fff;
-  height: 60px;
+  height: 61px;
   width: 60px;
   z-index: 1;
+  margin-bottom: -1px;
 }
 .edit-site-navigation-toggle__button.has-icon {
   min-width: 60px;
@@ -704,7 +800,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   bottom: 9px;
   left: 9px;
   border-radius: 4px;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #23282e;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e;
 }
 @media (prefers-reduced-motion: reduce) {
   .edit-site-navigation-toggle__button.has-icon::before {
@@ -730,6 +826,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   width: 0;
   overflow: hidden;
   background: #1e1e1e;
+  color: #fff;
   transition: width 100ms linear;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -913,6 +1010,46 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   margin-bottom: 0;
 }
 
+.edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
+  font-size: 15.6px;
+  font-weight: 500;
+}
+
+.edit-site-global-styles-sidebar .components-navigation__item > button span {
+  font-weight: 500;
+}
+
+.edit-site-typography-panel,
+.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
+  border: 0;
+}
+
+.edit-site-global-styles-sidebar__blocks-group {
+  padding-top: 24px;
+  border-top: 1px solid #e0e0e0;
+}
+
+.edit-site-global-styles-sidebar__blocks-group-help {
+  padding: 0 16px;
+}
+
+.edit-site-global-styles-color-palette-panel {
+  padding: 16px;
+}
+
+.edit-site-global-styles-sidebar__beta {
+  display: inline-flex;
+  margin-left: 8px;
+  padding: 0 8px;
+  height: 24px;
+  border-radius: 2px;
+  background-color: #000;
+  color: #fff;
+  align-items: center;
+  font-size: 12px;
+  line-height: 1;
+}
+
 .components-panel__header.edit-site-sidebar__panel-tabs {
   justify-content: flex-start;
   padding-left: 0;
@@ -1091,30 +1228,32 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   left: 0 !important;
 }
 
-.edit-site-template-details {
-  margin: 8px 16px;
+.edit-site-template-details .edit-site-template-details__group {
+  margin: 0;
+  padding: 16px;
+}
+.edit-site-template-details .edit-site-template-details__group + .edit-site-template-details__group {
+  border-top: 1px solid #ccc;
 }
-.edit-site-template-details p {
-  padding: 8px 0;
+.edit-site-template-details .edit-site-template-details__title {
+  margin: 0 0 12px;
 }
-
-.edit-site-template-details__description {
+.edit-site-template-details .edit-site-template-details__description {
+  margin: 0 0 12px;
   color: #757575;
 }
-
-.edit-site-template-details__revert {
-  border-top: 1px solid #ccc;
+.edit-site-template-details .edit-site-template-details__group.edit-site-template-details__template-areas {
+  padding: 8px;
 }
-.edit-site-template-details__revert .components-menu-item__button {
+.edit-site-template-details .edit-site-template-details__revert-button {
   height: auto;
-  padding: 16px;
+  padding: 0;
   text-align: left;
 }
-.edit-site-template-details__revert .components-menu-item__button:focus:not(:disabled) {
+.edit-site-template-details .edit-site-template-details__revert-button:focus:not(:disabled) {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
 }
-
-.edit-site-template-details__show-all-button.components-button {
+.edit-site-template-details .edit-site-template-details__show-all-button.components-button {
   display: block;
   background: #1e1e1e;
   color: #fff;
@@ -1122,13 +1261,13 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   height: 44px;
   border-radius: 0;
 }
-.edit-site-template-details__show-all-button.components-button:hover {
+.edit-site-template-details .edit-site-template-details__show-all-button.components-button:hover {
   color: #fff;
 }
-.edit-site-template-details__show-all-button.components-button:active {
+.edit-site-template-details .edit-site-template-details__show-all-button.components-button:active {
   color: #ccc;
 }
-.edit-site-template-details__show-all-button.components-button:focus:not(:disabled) {
+.edit-site-template-details .edit-site-template-details__show-all-button.components-button:focus:not(:disabled) {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "3.0.1-next.253d9b6e21.0",
+	"version": "3.0.3",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,30 +27,30 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@wordpress/a11y": "^3.2.2-next.253d9b6e21.0",
-		"@wordpress/api-fetch": "^5.2.2-next.253d9b6e21.0",
-		"@wordpress/block-editor": "^7.0.1-next.253d9b6e21.0",
-		"@wordpress/block-library": "^6.0.1-next.253d9b6e21.0",
-		"@wordpress/blocks": "^11.0.1-next.253d9b6e21.0",
-		"@wordpress/components": "^16.0.1-next.253d9b6e21.0",
-		"@wordpress/compose": "^5.0.1-next.253d9b6e21.0",
-		"@wordpress/core-data": "^4.0.1-next.253d9b6e21.0",
-		"@wordpress/data": "^6.0.1-next.253d9b6e21.0",
-		"@wordpress/data-controls": "^2.2.2-next.253d9b6e21.0",
-		"@wordpress/editor": "^11.0.1-next.253d9b6e21.0",
-		"@wordpress/element": "^4.0.1-next.253d9b6e21.0",
-		"@wordpress/hooks": "^3.2.1-next.253d9b6e21.0",
-		"@wordpress/html-entities": "^3.2.2-next.253d9b6e21.0",
-		"@wordpress/i18n": "^4.2.2-next.253d9b6e21.0",
-		"@wordpress/icons": "^5.0.1-next.253d9b6e21.0",
-		"@wordpress/interface": "^4.0.1-next.253d9b6e21.0",
-		"@wordpress/keyboard-shortcuts": "^3.0.1-next.253d9b6e21.0",
-		"@wordpress/keycodes": "^3.2.2-next.253d9b6e21.0",
-		"@wordpress/media-utils": "^3.0.1-next.253d9b6e21.0",
-		"@wordpress/notices": "^3.2.2-next.253d9b6e21.0",
-		"@wordpress/plugins": "^4.0.1-next.253d9b6e21.0",
-		"@wordpress/primitives": "^3.0.1-next.253d9b6e21.0",
-		"@wordpress/url": "^3.2.2-next.253d9b6e21.0",
+		"@wordpress/a11y": "^3.2.3",
+		"@wordpress/api-fetch": "^5.2.3",
+		"@wordpress/block-editor": "^7.0.3",
+		"@wordpress/block-library": "^6.0.1",
+		"@wordpress/blocks": "^11.1.1",
+		"@wordpress/components": "^18.0.0",
+		"@wordpress/compose": "^5.0.3",
+		"@wordpress/core-data": "^4.0.3",
+		"@wordpress/data": "^6.1.1",
+		"@wordpress/data-controls": "^2.2.4",
+		"@wordpress/editor": "^12.0.0",
+		"@wordpress/element": "^4.0.2",
+		"@wordpress/hooks": "^3.2.1",
+		"@wordpress/html-entities": "^3.2.2",
+		"@wordpress/i18n": "^4.2.3",
+		"@wordpress/icons": "^6.0.0",
+		"@wordpress/interface": "^4.1.1",
+		"@wordpress/keyboard-shortcuts": "^3.0.3",
+		"@wordpress/keycodes": "^3.2.3",
+		"@wordpress/media-utils": "^3.0.2",
+		"@wordpress/notices": "^3.2.4",
+		"@wordpress/plugins": "^4.0.3",
+		"@wordpress/primitives": "^3.0.2",
+		"@wordpress/url": "^3.2.3",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"file-saver": "^2.0.2",
@@ -61,5 +61,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c4b9acee18dfcc1767c35631f90725c7d604c5e9"
+	"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
 }

package/src/components/block-editor/back-button.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { arrowLeft } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+function BackButton() {
+	const { isTemplatePart, previousTemplateId } = useSelect( ( select ) => {
+		const { getEditedPostType, getPreviousEditedPostId } = select(
+			editSiteStore
+		);
+
+		return {
+			isTemplatePart: getEditedPostType() === 'wp_template_part',
+			previousTemplateId: getPreviousEditedPostId(),
+		};
+	}, [] );
+	const { goBack } = useDispatch( editSiteStore );
+
+	if ( ! isTemplatePart || ! previousTemplateId ) {
+		return null;
+	}
+
+	return (
+		<Button
+			className="edit-site-visual-editor__back-button"
+			icon={ arrowLeft }
+			onClick={ () => {
+				goBack();
+			} }
+		>
+			{ __( 'Back' ) }
+		</Button>
+	);
+}
+
+export default BackButton;

package/src/components/block-editor/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -27,6 +32,8 @@ import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar';
 import { store as editSiteStore } from '../../store';
 import BlockInspectorButton from './block-inspector-button';
+import EditTemplatePartMenuButton from '../edit-template-part-menu-button';
+import BackButton from './back-button';
 
 const LAYOUT = {
 	type: 'default',
@@ -43,6 +50,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				getPage,
 				__experimentalGetPreviewDeviceType,
 			} = select( editSiteStore );
+
 			return {
 				settings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
@@ -62,6 +70,8 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 
+	const isTemplatePart = templateType === 'wp_template_part';
+
 	return (
 		<BlockEditorProvider
 			settings={ settings }
@@ -70,6 +80,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			onChange={ onChange }
 			useSubRegistry={ false }
 		>
+			<EditTemplatePartMenuButton />
 			<TemplatePartConverter />
 			<__experimentalLinkControl.ViewerFill>
 				{ useCallback(
@@ -87,17 +98,22 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				<BlockInspector />
 			</SidebarInspectorFill>
 			<BlockTools
-				className="edit-site-visual-editor"
+				className={ classnames( 'edit-site-visual-editor', {
+					'is-focus-mode': isTemplatePart,
+				} ) }
 				__unstableContentRef={ contentRef }
 			>
+				<BackButton />
 				<Iframe
 					style={ resizedCanvasStyles }
 					head={ <EditorStyles styles={ settings.styles } /> }
 					ref={ ref }
 					contentRef={ mergedRefs }
+					name="editor-canvas"
+					className="edit-site-visual-editor__editor-canvas"
 				>
 					<BlockList
-						className="edit-site-block-editor__block-list"
+						className="edit-site-block-editor__block-list wp-site-blocks"
 						__experimentalLayout={ LAYOUT }
 					/>
 				</Iframe>

package/src/components/block-editor/style.scss

@@ -11,3 +11,29 @@
 		padding: 6px;
 	}
 }
+
+.edit-site-visual-editor {
+	position: relative;
+	background-color: $gray-800;
+
+	&.is-focus-mode {
+		padding: 48px 48px 0;
+	}
+}
+
+.edit-site-visual-editor__editor-canvas {
+	border-radius: 2px 2px 0 0;
+}
+
+.edit-site-visual-editor__back-button {
+	position: absolute;
+	top: $grid-unit-10;
+	left: $grid-unit-10;
+	color: $white;
+
+	&:active:not([aria-disabled="true"]),
+	&:focus:not([aria-disabled="true"]),
+	&:hover {
+		color: $gray-100;
+	}
+}

package/src/components/edit-template-part-menu-button/index.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	BlockSettingsMenuControls,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { MenuItem } from '@wordpress/components';
+import { isTemplatePart } from '@wordpress/blocks';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function EditTemplatePartMenuButton() {
+	const selectedTemplatePart = useSelect( ( select ) => {
+		const block = select( blockEditorStore ).getSelectedBlock();
+
+		if ( block && isTemplatePart( block ) ) {
+			const { theme, slug } = block.attributes;
+
+			return select( coreStore ).getEntityRecord(
+				'postType',
+				'wp_template_part',
+				// Ideally this should be an official public API.
+				`${ theme }//${ slug }`
+			);
+		}
+	}, [] );
+	const { pushTemplatePart } = useDispatch( editSiteStore );
+
+	if ( ! selectedTemplatePart ) {
+		return null;
+	}
+
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { onClose } ) => (
+				<MenuItem
+					onClick={ () => {
+						pushTemplatePart( selectedTemplatePart.id );
+						onClose();
+					} }
+				>
+					{
+						/* translators: %s: template part title */
+						sprintf( __( 'Edit %s' ), selectedTemplatePart.slug )
+					}
+				</MenuItem>
+			) }
+		</BlockSettingsMenuControls>
+	);
+}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { set, get, mergeWith, mapValues, setWith, clone } from 'lodash';
+import { set, get, has, mergeWith, mapValues, setWith, clone } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -75,8 +75,24 @@ export const useGlobalStylesReset = () => {
 const extractSupportKeys = ( supports ) => {
 	const supportKeys = [];
 	Object.keys( STYLE_PROPERTY ).forEach( ( name ) => {
+		if ( ! STYLE_PROPERTY[ name ].support ) {
+			return;
+		}
+
+		// Opting out means that, for certain support keys like background color,
+		// blocks have to explicitly set the support value false. If the key is
+		// unset, we still enable it.
+		if ( STYLE_PROPERTY[ name ].requiresOptOut ) {
+			if (
+				has( supports, STYLE_PROPERTY[ name ].support[ 0 ] ) &&
+				get( supports, STYLE_PROPERTY[ name ].support ) !== false
+			) {
+				return supportKeys.push( name );
+			}
+		}
+
 		if ( get( supports, STYLE_PROPERTY[ name ].support, false ) ) {
-			supportKeys.push( name );
+			return supportKeys.push( name );
 		}
 	} );
 	return supportKeys;
@@ -123,7 +139,7 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
 			blockTypes: select( blocksStore ).getBlockTypes(),
 			settings: select( editSiteStore ).getSettings(),
 		};
-	} );
+	}, [] );
 	const { updateSettings } = useDispatch( editSiteStore );
 
 	const blocks = useMemo( () => getBlockMetadata( blockTypes ), [

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

@@ -259,10 +259,11 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 
 	// Top-level.
 	const presets = pickPresets( tree.settings );
-	if ( ! isEmpty( presets ) ) {
+	const custom = tree.settings?.custom;
+	if ( ! isEmpty( presets ) || !! custom ) {
 		nodes.push( {
 			presets,
-			custom: tree.settings?.custom,
+			custom,
 			selector: ROOT_BLOCK_SELECTOR,
 		} );
 	}
@@ -270,10 +271,11 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 	// Blocks.
 	forEach( tree.settings?.blocks, ( node, blockName ) => {
 		const blockPresets = pickPresets( node );
-		if ( ! isEmpty( blockPresets ) ) {
+		const blockCustom = node.custom;
+		if ( ! isEmpty( blockPresets ) || !! blockCustom ) {
 			nodes.push( {
 				presets: blockPresets,
-				custom: node.custom,
+				custom: blockCustom,
 				selector: blockSelectors[ blockName ].selector,
 			} );
 		}
@@ -305,7 +307,8 @@ export const toStyles = ( tree, blockSelectors ) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
 
-	let ruleset = '';
+	let ruleset =
+		'.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }';
 	nodesWithStyles.forEach( ( { selector, styles } ) => {
 		const declarations = getStylesDeclarations( styles );
 

package/src/components/editor/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
-import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	SlotFillProvider,
 	Popover,
@@ -26,6 +26,7 @@ import {
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
+import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -168,17 +169,13 @@ function Editor( { initialSettings, onError } ) {
 			return <InserterSidebar />;
 		}
 		if ( isListViewOpen ) {
-			return (
-				<AsyncModeProvider value="true">
-					<ListViewSidebar />
-				</AsyncModeProvider>
-			);
+			return <ListViewSidebar />;
 		}
 		return null;
 	};
 
 	return (
-		<>
+		<ShortcutProvider>
 			<URLQueryController />
 			<SlotFillProvider>
 				<EntityProvider kind="root" type="site">
@@ -289,7 +286,7 @@ function Editor( { initialSettings, onError } ) {
 					</EntityProvider>
 				</EntityProvider>
 			</SlotFillProvider>
-		</>
+		</ShortcutProvider>
 	);
 }
 export default Editor;