@wordpress/edit-site 3.0.2 → 3.0.3

package/build-style/style-rtl.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;
@@ -444,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;
+  right: 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-right: 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-right: 0;
+  padding: 0;
+}
+
+.edit-site-global-styles-header__description {
+  padding: 0 16px;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -764,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) {
@@ -947,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-right: 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-right: 0;
@@ -1125,30 +1228,32 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   right: 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 p {
-  padding: 8px 0;
+.edit-site-template-details .edit-site-template-details__group + .edit-site-template-details__group {
+  border-top: 1px solid #ccc;
 }
-
-.edit-site-template-details__description {
+.edit-site-template-details .edit-site-template-details__title {
+  margin: 0 0 12px;
+}
+.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: right;
 }
-.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;
@@ -1156,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/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;
@@ -444,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;
@@ -764,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) {
@@ -947,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;
@@ -1125,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 p {
-  padding: 8px 0;
+.edit-site-template-details .edit-site-template-details__group + .edit-site-template-details__group {
+  border-top: 1px solid #ccc;
 }
-
-.edit-site-template-details__description {
+.edit-site-template-details .edit-site-template-details__title {
+  margin: 0 0 12px;
+}
+.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;
@@ -1156,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.2",
+	"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",
-		"@wordpress/api-fetch": "^5.2.2",
-		"@wordpress/block-editor": "^7.0.2",
-		"@wordpress/block-library": "^6.0.0",
-		"@wordpress/blocks": "^11.1.0",
-		"@wordpress/components": "^17.0.0",
-		"@wordpress/compose": "^5.0.2",
-		"@wordpress/core-data": "^4.0.2",
-		"@wordpress/data": "^6.1.0",
-		"@wordpress/data-controls": "^2.2.3",
-		"@wordpress/editor": "^11.0.2",
-		"@wordpress/element": "^4.0.1",
-		"@wordpress/hooks": "^3.2.0",
-		"@wordpress/html-entities": "^3.2.1",
-		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/icons": "^5.0.2",
-		"@wordpress/interface": "^4.1.0",
-		"@wordpress/keyboard-shortcuts": "^3.0.2",
-		"@wordpress/keycodes": "^3.2.2",
-		"@wordpress/media-utils": "^3.0.1",
-		"@wordpress/notices": "^3.2.3",
-		"@wordpress/plugins": "^4.0.2",
-		"@wordpress/primitives": "^3.0.1",
-		"@wordpress/url": "^3.2.2",
+		"@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": "98c42a7187f788fe3e023f04df7f5dcbdae4e4e7"
+	"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,15 +98,19 @@ 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 wp-site-blocks"

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

@@ -139,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 ), [