@wordpress/edit-site 3.0.24 → 4.0.0

package/build-style/style.css

@@ -470,9 +470,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .edit-site-visual-editor.is-focus-mode .components-resizable-box__container {
   overflow: visible;
 }
-
-.edit-site-visual-editor__editor-canvas {
-  border-radius: 2px 2px 0 0;
+.edit-site-visual-editor .components-resizable-box__container {
+  margin: 0 auto;
+  overflow: auto;
 }
 
 .edit-site-visual-editor__back-button {
@@ -485,58 +485,144 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #f0f0f0;
 }
 
-.components-resizable-box__container {
-  margin: 0 auto;
-  overflow: auto;
-}
-
 .resizable-editor__drag-handle {
   position: absolute;
   top: 0;
   bottom: 0;
   padding: 0;
   margin: auto 0;
-  width: 8px;
+  width: 4px;
   height: 100px;
   -webkit-appearance: none;
           appearance: none;
-  cursor: grab;
+  cursor: ew-resize;
   outline: none;
-  background: #757575;
-  border-radius: 4px;
+  background: #949494;
+  border-radius: 2px;
   border: 0;
 }
 .resizable-editor__drag-handle.is-left {
-  left: -28px;
+  left: -16px;
 }
 .resizable-editor__drag-handle.is-right {
-  right: -28px;
+  right: -16px;
 }
-.resizable-editor__drag-handle:hover {
-  background: #949494;
-}
-.resizable-editor__drag-handle:active {
-  cursor: grabbing;
-  background: #949494;
+.resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active {
+  background: #ccc;
 }
 .resizable-editor__drag-handle:focus {
   box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
 }
 
+.edit-site-code-editor {
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+  flex-grow: 1;
+}
+.edit-site-code-editor__body {
+  width: 100%;
+  padding: 0 12px 12px 12px;
+  max-width: 1080px;
+  margin-left: auto;
+  margin-right: auto;
+}
+@media (min-width: 960px) {
+  .edit-site-code-editor__body {
+    padding: 16px 24px 96px 24px;
+    padding: 0 24px 24px 24px;
+  }
+}
+.edit-site-code-editor__toolbar {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 4px 12px;
+}
+@media (min-width: 600px) {
+  .edit-site-code-editor__toolbar {
+    padding: 12px;
+  }
+}
+@media (min-width: 960px) {
+  .edit-site-code-editor__toolbar {
+    padding: 12px 24px;
+  }
+}
+.edit-site-code-editor__toolbar h2 {
+  line-height: 36px;
+  margin: 0 auto 0 0;
+  font-size: 13px;
+  color: #1e1e1e;
+}
+.edit-site-code-editor__toolbar .components-button svg {
+  order: 1;
+}
+
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+  border: 1px solid #949494;
+  border-radius: 0;
+  display: block;
+  margin: 0;
+  width: 100%;
+  box-shadow: none;
+  resize: none;
+  overflow: hidden;
+  font-family: Menlo, Consolas, monaco, monospace;
+  line-height: 2.4;
+  min-height: 200px;
+  transition: border 0.1s ease-out, box-shadow 0.1s linear;
+  padding: 16px;
+  /* Fonts smaller than 16px causes mobile safari to zoom. */
+  font-size: 16px !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+@media (min-width: 600px) {
+  textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+    padding: 24px;
+  }
+}
+@media (min-width: 600px) {
+  textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+    font-size: 15px !important;
+  }
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:focus {
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  position: relative;
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-webkit-input-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-moz-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+  opacity: 1;
+}
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-input-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+
 .edit-site-global-styles-preview {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 152px;
   line-height: 1;
+  cursor: pointer;
 }
-.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-styles-preview__iframe {
+  max-width: 100%;
+  display: block;
 }
 
 .edit-site-typography-panel__preview {
@@ -567,13 +653,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin: 16px;
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
-  margin-left: 0;
-  display: block;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  border: 1px solid #ddd;
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
@@ -597,20 +676,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-height: 32px;
 }
 
-h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-heading {
-  text-transform: uppercase;
-  line-height: 24px;
-  font-weight: 500;
-  font-size: 11px;
-  margin-bottom: 8px;
-}
-
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
 .edit-site-screen-background-color__control {
   padding: 16px;
 }
 
+.edit-site-global-styles-variations_item {
+  box-sizing: border-box;
+  padding: 2px;
+  border-radius: 2px;
+  border: #e0e0e0 1px solid;
+}
+.edit-site-global-styles-variations_item.is-active {
+  border: #1e1e1e 1px solid;
+}
+.edit-site-global-styles-variations_item:hover {
+  border: var(--wp-admin-theme-color) 1px solid;
+}
+.edit-site-global-styles-variations_item:focus {
+  border: var(--wp-admin-theme-color) 1px solid;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -639,6 +726,8 @@ body.is-fullscreen-mode .edit-site-header {
   display: flex;
   align-items: center;
   height: 100%;
+  flex-grow: 1;
+  justify-content: center;
   min-width: 0;
 }
 .edit-site-header .edit-site-header_end {
@@ -716,7 +805,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .edit-site-header__actions {
   display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
   padding-right: 4px;
 }
 .edit-site-header__actions .interface-pinned-items {
@@ -771,6 +859,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 0 8px;
   height: 100%;
   min-width: 0;
 }
@@ -797,17 +886,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 120px;
-}
-@media (min-width: 782px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 75px;
-  }
-}
-@media (min-width: 1080px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 180px;
-  }
 }
 .edit-site-document-actions .edit-site-document-actions__secondary-item {
   white-space: nowrap;
@@ -1302,6 +1380,20 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
+.edit-site-global-styles-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.edit-site-global-styles-sidebar__navigator-screen {
+  flex: 1;
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
   margin-left: 0;
 }
@@ -1310,18 +1402,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-left: auto;
 }
 
-.edit-site-global-styles-sidebar__border-controls-row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-.edit-site-global-styles-sidebar__border-controls-row > * {
-  width: calc(50% - 8px);
-}
-.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons {
-  margin-bottom: 0;
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
   font-size: 15.6px;
   font-weight: 500;
@@ -1336,6 +1416,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   border: 0;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+  grid-column: span 1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
   padding-top: 24px;
   border-top: 1px solid #e0e0e0;
@@ -1707,11 +1791,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   display: flex;
   justify-content: flex-end;
 }
-@media (min-width: 782px) {
-  .edit-site-editor__inserter-panel-header {
-    display: none;
-  }
-}
 
 .edit-site-editor__inserter-panel-content,
 .edit-site-editor__list-view-panel-content {
@@ -1773,6 +1852,57 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   vertical-align: text-top;
 }
 
+.edit-site-keyboard-shortcut-help-modal__section {
+  margin: 0 0 2rem 0;
+}
+.edit-site-keyboard-shortcut-help-modal__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list {
+  margin-top: -25px;
+}
+.edit-site-keyboard-shortcut-help-modal__section-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut {
+  display: flex;
+  align-items: baseline;
+  padding: 0.6rem 0;
+  border-top: 1px solid #ddd;
+  margin-bottom: 0;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut:last-child {
+  border-bottom: 1px solid #ddd;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut:empty {
+  display: none;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-term {
+  font-weight: 600;
+  margin: 0 0 0 1rem;
+  text-align: right;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-description {
+  flex: 1;
+  margin: 0;
+  flex-basis: auto;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-key-combination {
+  display: block;
+  background: none;
+  margin: 0;
+  padding: 0;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination {
+  margin-top: 10px;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-key {
+  padding: 0.25rem 0.5rem;
+  border-radius: 8%;
+  margin: 0 0.2rem 0 0.2rem;
+}
+.edit-site-keyboard-shortcut-help-modal__shortcut-key:last-child {
+  margin: 0 0 0 0.2rem;
+}
+
 html.wp-toolbar {
   background: #fff;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "3.0.24",
+	"version": "4.0.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,42 +27,40 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/api-fetch": "^5.2.6",
-		"@wordpress/block-editor": "^8.0.15",
-		"@wordpress/block-library": "^6.0.23",
-		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.2.2",
-		"@wordpress/compose": "^5.0.7",
-		"@wordpress/core-data": "^4.0.9",
-		"@wordpress/data": "^6.1.5",
-		"@wordpress/data-controls": "^2.2.8",
-		"@wordpress/editor": "^12.0.18",
-		"@wordpress/element": "^4.0.4",
-		"@wordpress/hooks": "^3.2.2",
-		"@wordpress/html-entities": "^3.2.3",
-		"@wordpress/i18n": "^4.2.4",
-		"@wordpress/icons": "^6.1.1",
-		"@wordpress/interface": "^4.1.17",
-		"@wordpress/keyboard-shortcuts": "^3.0.7",
-		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/media-utils": "^3.0.5",
-		"@wordpress/notices": "^3.2.8",
-		"@wordpress/plugins": "^4.0.7",
-		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.21",
-		"@wordpress/url": "^3.3.1",
-		"@wordpress/viewport": "^4.0.7",
+		"@wordpress/a11y": "^3.3.1",
+		"@wordpress/api-fetch": "^6.0.1",
+		"@wordpress/block-editor": "^8.1.1",
+		"@wordpress/block-library": "^7.0.0",
+		"@wordpress/blocks": "^11.2.1",
+		"@wordpress/components": "^19.4.0",
+		"@wordpress/compose": "^5.1.1",
+		"@wordpress/core-data": "^4.1.1",
+		"@wordpress/data": "^6.2.1",
+		"@wordpress/data-controls": "^2.3.1",
+		"@wordpress/editor": "^12.2.0",
+		"@wordpress/element": "^4.1.1",
+		"@wordpress/hooks": "^3.3.1",
+		"@wordpress/html-entities": "^3.3.1",
+		"@wordpress/i18n": "^4.3.1",
+		"@wordpress/icons": "^6.3.0",
+		"@wordpress/interface": "^4.2.1",
+		"@wordpress/keyboard-shortcuts": "^3.1.1",
+		"@wordpress/keycodes": "^3.3.1",
+		"@wordpress/media-utils": "^3.1.1",
+		"@wordpress/notices": "^3.3.1",
+		"@wordpress/plugins": "^4.1.1",
+		"@wordpress/reusable-blocks": "^3.1.1",
+		"@wordpress/url": "^3.4.1",
+		"@wordpress/viewport": "^4.1.1",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
-		"file-saver": "^2.0.2",
 		"history": "^5.1.0",
-		"jszip": "^3.2.2",
 		"lodash": "^4.17.21",
+		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^3.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0e4085301b13440717334d012c45399949163b4a"
+	"gitHead": "2e4922861e49f5a090f9dc52056165092cfba163"
 }

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

@@ -177,6 +177,7 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 						) }
 					</>
 				}
+				assets={ settings.__unstableResolvedAssets }
 				ref={ ref }
 				name="editor-canvas"
 				className="edit-site-visual-editor__editor-canvas"

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

@@ -19,10 +19,10 @@
 	align-items: center;
 
 	&.is-focus-mode {
-		padding: 48px;
+		padding: $grid-unit-60;
 
 		.edit-site-visual-editor__editor-canvas {
-			border-radius: 2px;
+			border-radius: $radius-block-ui;
 		}
 
 		// To hide the horizontal scrollbar and show the drag handle on the
@@ -31,10 +31,12 @@
 			overflow: visible;
 		}
 	}
-}
 
-.edit-site-visual-editor__editor-canvas {
-	border-radius: 2px 2px 0 0;
+	.components-resizable-box__container {
+		margin: 0 auto;
+		// Removing this will cancel the bottom margins in the iframe.
+		overflow: auto;
+	}
 }
 
 .edit-site-visual-editor__back-button {
@@ -50,12 +52,6 @@
 	}
 }
 
-.components-resizable-box__container {
-	margin: 0 auto;
-	// Removing this will cancel the bottom margins in the iframe.
-	overflow: auto;
-}
-
 .resizable-editor__drag-handle {
 	$height: 100px;
 	position: absolute;
@@ -63,30 +59,26 @@
 	bottom: 0;
 	padding: 0;
 	margin: auto 0;
-	width: $grid-unit-10;
+	width: $grid-unit-05;
 	height: $height;
 	appearance: none;
-	cursor: grab;
+	cursor: ew-resize;
 	outline: none;
-	background: $gray-700;
-	border-radius: 4px;
+	background: $gray-600;
+	border-radius: 2px;
 	border: 0;
 
 	&.is-left {
-		left: #{-$grid-unit-30 - $grid-unit-05};
+		left: -$grid-unit-20;
 	}
 
 	&.is-right {
-		right: #{-$grid-unit-30 - $grid-unit-05};
-	}
-
-	&:hover {
-		background: $gray-600;
+		right: -$grid-unit-20;
 	}
 
+	&:hover,
 	&:active {
-		cursor: grabbing;
-		background: $gray-600;
+		background: $gray-400;
 	}
 
 	&:focus {

package/src/components/code-editor/code-editor-text-area.js

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import Textarea from 'react-autosize-textarea';
+
+/**
+ * WordPress dependencies
+ */
+/**
+ * WordPress dependencies
+ */
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { VisuallyHidden } from '@wordpress/components';
+
+export default function CodeEditorTextArea( { value, onChange, onInput } ) {
+	const [ stateValue, setStateValue ] = useState( value );
+	const [ isDirty, setIsDirty ] = useState( false );
+	const instanceId = useInstanceId( CodeEditorTextArea );
+
+	if ( ! isDirty && stateValue !== value ) {
+		setStateValue( value );
+	}
+
+	/**
+	 * Handles a textarea change event to notify the onChange prop callback and
+	 * reflect the new value in the component's own state. This marks the start
+	 * of the user's edits, if not already changed, preventing future props
+	 * changes to value from replacing the rendered value. This is expected to
+	 * be followed by a reset to dirty state via `stopEditing`.
+	 *
+	 * @see stopEditing
+	 *
+	 * @param {Event} event Change event.
+	 */
+	const onChangeHandler = ( event ) => {
+		const newValue = event.target.value;
+		onInput( newValue );
+		setStateValue( newValue );
+		setIsDirty( true );
+	};
+
+	/**
+	 * Function called when the user has completed their edits, responsible for
+	 * ensuring that changes, if made, are surfaced to the onPersist prop
+	 * callback and resetting dirty state.
+	 */
+	const stopEditing = () => {
+		if ( isDirty ) {
+			onChange( stateValue );
+			setIsDirty( false );
+		}
+	};
+
+	return (
+		<>
+			<VisuallyHidden
+				as="label"
+				htmlFor={ `code-editor-text-area-${ instanceId }` }
+			>
+				{ __( 'Type text or HTML' ) }
+			</VisuallyHidden>
+			<Textarea
+				autoComplete="off"
+				dir="auto"
+				value={ stateValue }
+				onChange={ onChangeHandler }
+				onBlur={ stopEditing }
+				className="edit-site-code-editor-text-area"
+				id={ `code-editor-text-area-${ instanceId }` }
+				placeholder={ __( 'Start writing with text or HTML' ) }
+			/>
+		</>
+	);
+}

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

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+import { useEntityBlockEditor, useEntityProp } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import CodeEditorTextArea from './code-editor-text-area';
+
+export default function CodeEditor() {
+	const { templateType, shortcut } = useSelect( ( select ) => {
+		const { getEditedPostType } = select( editSiteStore );
+		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+		return {
+			templateType: getEditedPostType(),
+			shortcut: getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
+		};
+	}, [] );
+	const [ contentStructure, setContent ] = useEntityProp(
+		'postType',
+		templateType,
+		'content'
+	);
+	const [ blocks, , onChange ] = useEntityBlockEditor(
+		'postType',
+		templateType
+	);
+	const content =
+		contentStructure instanceof Function
+			? contentStructure( { blocks } )
+			: contentStructure;
+	const { switchEditorMode } = useDispatch( editSiteStore );
+	return (
+		<div className="edit-site-code-editor">
+			<div className="edit-site-code-editor__toolbar">
+				<h2>{ __( 'Editing code' ) }</h2>
+				<Button
+					variant="tertiary"
+					onClick={ () => switchEditorMode( 'visual' ) }
+					shortcut={ shortcut }
+				>
+					{ __( 'Exit code editor' ) }
+				</Button>
+			</div>
+			<div className="edit-site-code-editor__body">
+				<CodeEditorTextArea
+					value={ content }
+					onChange={ ( newContent ) => {
+						onChange( parse( newContent ), {
+							selection: undefined,
+						} );
+					} }
+					onInput={ setContent }
+				/>
+			</div>
+		</div>
+	);
+}