@wordpress/edit-site 3.0.27 → 4.0.1-next.f435e9e01b.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "3.0.27",
+	"version": "4.0.1-next.f435e9e01b.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.17",
-		"@wordpress/block-library": "^6.0.26",
-		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.2.3",
-		"@wordpress/compose": "^5.0.7",
-		"@wordpress/core-data": "^4.0.10",
-		"@wordpress/data": "^6.1.5",
-		"@wordpress/data-controls": "^2.2.8",
-		"@wordpress/editor": "^12.0.21",
-		"@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.18",
-		"@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.23",
-		"@wordpress/url": "^3.3.1",
-		"@wordpress/viewport": "^4.0.7",
+		"@wordpress/a11y": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/api-fetch": "^6.0.1-next.f435e9e01b.0",
+		"@wordpress/block-editor": "^8.1.2-next.f435e9e01b.0",
+		"@wordpress/block-library": "^7.0.1-next.f435e9e01b.0",
+		"@wordpress/blocks": "^11.2.1-next.f435e9e01b.0",
+		"@wordpress/components": "^19.4.1-next.f435e9e01b.0",
+		"@wordpress/compose": "^5.1.1-next.f435e9e01b.0",
+		"@wordpress/core-data": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/data": "^6.2.2-next.f435e9e01b.0",
+		"@wordpress/data-controls": "^2.3.1-next.f435e9e01b.0",
+		"@wordpress/editor": "^12.2.1-next.f435e9e01b.0",
+		"@wordpress/element": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/hooks": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/html-entities": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/i18n": "^4.3.1-next.f435e9e01b.0",
+		"@wordpress/icons": "^6.3.1-next.f435e9e01b.0",
+		"@wordpress/interface": "^4.2.2-next.f435e9e01b.0",
+		"@wordpress/keyboard-shortcuts": "^3.1.2-next.f435e9e01b.0",
+		"@wordpress/keycodes": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/media-utils": "^3.1.1-next.f435e9e01b.0",
+		"@wordpress/notices": "^3.3.1-next.f435e9e01b.0",
+		"@wordpress/plugins": "^4.1.1-next.f435e9e01b.0",
+		"@wordpress/reusable-blocks": "^3.1.2-next.f435e9e01b.0",
+		"@wordpress/url": "^3.4.1-next.f435e9e01b.0",
+		"@wordpress/viewport": "^4.1.1-next.f435e9e01b.0",
 		"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": "1246a52b9fdfecf592a9fa1d33a2804a6cc2d257"
+	"gitHead": "14b2846015dfb1b440ce93accdd03842ebe5f1cd"
 }

package/src/components/add-new-template/new-template-part.js

@@ -35,17 +35,11 @@ export default function NewTemplatePart( { postType } ) {
 		}
 
 		try {
-			// Currently template parts only allow latin chars.
-			// Fallback slug will receive suffix by default.
-			const cleanSlug =
-				kebabCase( title ).replace( /[^\w-]+/g, '' ) ||
-				'wp-custom-part';
-
 			const templatePart = await saveEntityRecord(
 				'postType',
 				'wp_template_part',
 				{
-					slug: cleanSlug,
+					slug: kebabCase( title ),
 					title,
 					content: '',
 					area,

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
@@ -39,10 +39,6 @@
 	}
 }
 
-.edit-site-visual-editor__editor-canvas {
-	border-radius: 2px 2px 0 0;
-}
-
 .edit-site-visual-editor__back-button {
 	position: absolute;
 	top: $grid-unit-10;
@@ -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>
+	);
+}

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

@@ -0,0 +1,100 @@
+.edit-site-code-editor {
+	position: relative;
+	width: 100%;
+	background-color: $white;
+	flex-grow: 1;
+
+	&__body {
+		width: 100%;
+		padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
+		max-width: $break-xlarge;
+		margin-left: auto;
+		margin-right: auto;
+
+		@include break-large() {
+			padding: $grid-unit-20 $grid-unit-30 #{ $grid-unit-60 * 2 } $grid-unit-30;
+			padding: 0 $grid-unit-30 $grid-unit-30 $grid-unit-30;
+		}
+	}
+
+	// Exit code editor toolbar.
+	&__toolbar {
+		position: sticky;
+		z-index: z-index(".edit-site-code-editor__toolbar");
+		top: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		background: rgba($white, 0.8);
+		padding: $grid-unit-05 $grid-unit-15;
+
+		@include break-small() {
+			padding: $grid-unit-15;
+		}
+
+		@include break-large() {
+			padding: $grid-unit-15 $grid-unit-30;
+		}
+
+		h2 {
+			line-height: $button-size;
+			margin: 0 auto 0 0;
+			font-size: $default-font-size;
+			color: $gray-900;
+		}
+
+		.components-button svg {
+			order: 1;
+		}
+	}
+}
+
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+	border: $border-width solid $gray-600;
+	border-radius: 0;
+	display: block;
+	margin: 0;
+	width: 100%;
+	box-shadow: none;
+	resize: none;
+	overflow: hidden;
+	font-family: $editor-html-font;
+	line-height: 2.4;
+	min-height: 200px;
+	transition: border 0.1s ease-out, box-shadow 0.1s linear;
+	@include reduce-motion("transition");
+
+	// Same padding as title.
+	padding: $grid-unit-20;
+	@include break-small() {
+		padding: $grid-unit-30;
+	}
+
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
+	font-size: $mobile-text-min-font-size !important;
+	@include break-small {
+		font-size: $text-editor-font-size !important;
+	}
+
+	&:focus {
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+		// Elevate the z-index on focus so the focus style is uncropped.
+		position: relative;
+	}
+
+	&::-webkit-input-placeholder {
+		color: $dark-gray-placeholder;
+	}
+
+	&::-moz-placeholder {
+		color: $dark-gray-placeholder;
+		// Override Firefox default.
+		opacity: 1;
+	}
+
+	&:-ms-input-placeholder {
+		color: $dark-gray-placeholder;
+	}
+}

package/src/components/editor/index.js

@@ -16,12 +16,13 @@ import {
 	EditorSnackbars,
 	EntitiesSavedStates,
 } from '@wordpress/editor';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
 import {
 	ShortcutProvider,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -30,6 +31,7 @@ import Header from '../header';
 import { SidebarComplementaryAreaFills } from '../sidebar';
 import NavigationSidebar from '../navigation-sidebar';
 import BlockEditor from '../block-editor';
+import CodeEditor from '../code-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import URLQueryController from '../url-query-controller';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
@@ -60,6 +62,7 @@ function Editor( { onError } ) {
 		isNavigationOpen,
 		previousShortcut,
 		nextShortcut,
+		editorMode,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -69,6 +72,7 @@ function Editor( { onError } ) {
 			getEditedPostId,
 			getPage,
 			isNavigationOpened,
+			getEditorMode,
 		} = select( editSiteStore );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const postType = getEditedPostType();
@@ -102,10 +106,12 @@ function Editor( { onError } ) {
 			nextShortcut: select(
 				keyboardShortcutsStore
 			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
+			editorMode: getEditorMode(),
 		};
 	}, [] );
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const [
 		isEntitiesSavedStatesOpen,
@@ -177,6 +183,18 @@ function Editor( { onError } ) {
 		return null;
 	};
 
+	function onPluginAreaError( name ) {
+		createErrorNotice(
+			sprintf(
+				/* translators: %s: plugin name */
+				__(
+					'The "%s" plugin has encountered an error and cannot be rendered.'
+				),
+				name
+			)
+		);
+	}
+
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URlQueryController> from double-announcing.
 	useTitle( isReady && __( 'Editor (beta)' ) );
@@ -220,13 +238,18 @@ function Editor( { onError } ) {
 											content={
 												<>
 													<EditorNotices />
-													{ template && (
-														<BlockEditor
-															setIsInserterOpen={
-																setIsInserterOpened
-															}
-														/>
-													) }
+													{ editorMode === 'visual' &&
+														template && (
+															<BlockEditor
+																setIsInserterOpen={
+																	setIsInserterOpened
+																}
+															/>
+														) }
+													{ editorMode === 'text' &&
+														template && (
+															<CodeEditor />
+														) }
 													{ templateResolved &&
 														! template &&
 														settings?.siteUrl &&
@@ -277,7 +300,13 @@ function Editor( { onError } ) {
 													) }
 												</>
 											}
-											footer={ <BlockBreadcrumb /> }
+											footer={
+												<BlockBreadcrumb
+													rootLabelText={ __(
+														'Template'
+													) }
+												/>
+											}
 											shortcuts={ {
 												previous: previousShortcut,
 												next: nextShortcut,
@@ -285,7 +314,9 @@ function Editor( { onError } ) {
 										/>
 										<WelcomeGuide />
 										<Popover.Slot />
-										<PluginArea />
+										<PluginArea
+											onError={ onPluginAreaError }
+										/>
 									</ErrorBoundary>
 								</BlockContextProvider>
 							</GlobalStylesProvider>

package/src/components/error-boundary/index.js

@@ -3,11 +3,18 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { Warning } from '@wordpress/block-editor';
+import { useCopyToClipboard } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import ErrorBoundaryWarning from './warning';
+function CopyButton( { text, children } ) {
+	const ref = useCopyToClipboard( text );
+	return (
+		<Button variant="secondary" ref={ ref }>
+			{ children }
+		</Button>
+	);
+}
 
 export default class ErrorBoundary extends Component {
 	constructor() {
@@ -35,13 +42,23 @@ export default class ErrorBoundary extends Component {
 		}
 
 		return (
-			<ErrorBoundaryWarning
-				message={ __(
-					'The editor has encountered an unexpected error.'
-				) }
-				error={ error }
-				reboot={ this.reboot }
-			/>
+			<Warning
+				className="editor-error-boundary"
+				actions={ [
+					<Button
+						key="recovery"
+						onClick={ this.reboot }
+						variant="secondary"
+					>
+						{ __( 'Attempt Recovery' ) }
+					</Button>,
+					<CopyButton key="copy-error" text={ error.stack }>
+						{ __( 'Copy Error' ) }
+					</CopyButton>,
+				] }
+			>
+				{ __( 'The editor has encountered an unexpected error.' ) }
+			</Warning>
 		);
 	}
 }