Revert additions to the interface package.

WordPress · Jan 24, 2022 · b9a4c6c · b9a4c6c
1 parent 96f318f
commit b9a4c6c
Show file tree

Hide file tree

Showing 19 changed files with 325 additions and 179 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -10,7 +10,8 @@ $z-layers: (
 	".block-editor-block-list__layout .reusable-block-indicator": 1,
 	".block-editor-block-list__block-selection-button": 22,
 	".components-form-toggle__input": 1,
-	".interface-code-editor-screen__toolbar": 1,
+	".edit-post-text-editor__toolbar": 1,
+	".edit-site-code-editor__toolbar": 1,
 	".edit-post-sidebar__panel-tab.is-active": 1,
 
 	// These next three share a stacking context

diff --git a/packages/edit-post/src/components/text-editor/index.js b/packages/edit-post/src/components/text-editor/index.js
@@ -4,43 +4,54 @@
 import {
 	PostTextEditor,
 	PostTitle,
-	store as editorStore,
 	TextEditorGlobalKeyboardShortcuts,
+	store as editorStore,
 } from '@wordpress/editor';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { CodeEditorScreen } from '@wordpress/interface';
-import { useCallback } from '@wordpress/element';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { Button } from '@wordpress/components';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { displayShortcut } from '@wordpress/keycodes';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
 
-export default function TextEditor() {
-	const { isRichEditingEnabled, shortcut } = useSelect( ( select ) => {
-		const { getEditorSettings } = select( editorStore );
-		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		return {
-			isRichEditingEnabled: getEditorSettings().richEditingEnabled,
-			shortcut: getShortcutRepresentation( 'core/edit-post/toggle-mode' ),
-		};
-	}, [] );
-	const { switchEditorMode } = useDispatch( editPostStore );
-	const onExit = useCallback( () => switchEditorMode( 'visual' ), [
-		switchEditorMode,
-	] );
+function TextEditor( { onExit, isRichEditingEnabled } ) {
 	return (
-		<>
-			<TextEditorGlobalKeyboardShortcuts />
-			<CodeEditorScreen
-				className="edit-post-text-editor"
-				onExit={ isRichEditingEnabled ? onExit : undefined }
-				exitShortcut={ shortcut }
-			>
+		<div className="edit-post-text-editor">
+			{ isRichEditingEnabled && (
+				<div className="edit-post-text-editor__toolbar">
+					<h2>{ __( 'Editing code' ) }</h2>
+					<Button
+						variant="tertiary"
+						onClick={ onExit }
+						shortcut={ displayShortcut.secondary( 'm' ) }
+					>
+						{ __( 'Exit code editor' ) }
+					</Button>
+					<TextEditorGlobalKeyboardShortcuts />
+				</div>
+			) }
+			<div className="edit-post-text-editor__body">
 				<PostTitle />
 				<PostTextEditor />
-			</CodeEditorScreen>
-		</>
+			</div>
+		</div>
 	);
 }
+
+export default compose(
+	withSelect( ( select ) => ( {
+		isRichEditingEnabled: select( editorStore ).getEditorSettings()
+			.richEditingEnabled,
+	} ) ),
+	withDispatch( ( dispatch ) => {
+		return {
+			onExit() {
+				dispatch( editPostStore ).switchEditorMode( 'visual' );
+			},
+		};
+	} )
+)( TextEditor );
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
@@ -1,23 +1,75 @@
-// Post title.
-.edit-post-text-editor .editor-post-title {
-	max-width: none;
-	line-height: $default-line-height;
+.edit-post-text-editor {
+	position: relative;
+	width: 100%;
+	background-color: $white;
+	flex-grow: 1;
 
-	font-family: $editor-html-font;
-	font-size: 2.5em;
-	font-weight: normal;
+	// Post title.
+	.editor-post-title {
+		max-width: none;
+		line-height: $default-line-height;
 
-	border: $border-width solid $gray-600;
+		font-family: $editor-html-font;
+		font-size: 2.5em;
+		font-weight: normal;
 
-	// Same padding as body.
-	padding: $grid-unit-20;
+		border: $border-width solid $gray-600;
+
+		// Same padding as body.
+		padding: $grid-unit-20;
+
+		@include break-small() {
+			padding: $grid-unit-30;
+		}
+
+		&:focus {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.edit-post-text-editor__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.
+.edit-post-text-editor__toolbar {
+	position: sticky;
+	z-index: z-index(".edit-post-text-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-30;
+		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;
 	}
 
-	&:focus {
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	.components-button svg {
+		order: 1;
 	}
 }
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
@@ -59,6 +59,7 @@
 		"history": "^5.1.0",
 		"jszip": "^3.2.2",
 		"lodash": "^4.17.21",
+		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^3.0.0"
 	},
 	"publishConfig": {

diff --git a/...rface/src/components/code-editor/index.js → ...ents/code-editor/code-editor-text-area.js b/...rface/src/components/code-editor/index.js → ...ents/code-editor/code-editor-text-area.js
@@ -9,15 +9,18 @@ import Textarea from 'react-autosize-textarea';
 /**
  * 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 CodeEditor( { value, onChange, onInput } ) {
+export default function CodeEditorTextArea( { value, onChange, onInput } ) {
 	const [ stateValue, setStateValue ] = useState( value );
 	const [ isDirty, setIsDirty ] = useState( false );
-	const instanceId = useInstanceId( CodeEditor );
+	const instanceId = useInstanceId( CodeEditorTextArea );
 
 	if ( ! isDirty && stateValue !== value ) {
 		setStateValue( value );
@@ -57,7 +60,7 @@ export default function CodeEditor( { value, onChange, onInput } ) {
 		<>
 			<VisuallyHidden
 				as="label"
-				htmlFor={ `post-content-${ instanceId }` }
+				htmlFor={ `code-editor-text-area-${ instanceId }` }
 			>
 				{ __( 'Type text or HTML' ) }
 			</VisuallyHidden>
@@ -67,8 +70,8 @@ export default function CodeEditor( { value, onChange, onInput } ) {
 				value={ stateValue }
 				onChange={ onChangeHandler }
 				onBlur={ stopEditing }
-				className="interface-code-editor"
-				id={ `post-content-${ instanceId }` }
+				className="edit-site-code-editor-text-area"
+				id={ `code-editor-text-area-${ instanceId }` }
 				placeholder={ __( 'Start writing with text or HTML' ) }
 			/>
 		</>

diff --git a/packages/edit-site/src/components/code-editor/index.js b/packages/edit-site/src/components/code-editor/index.js
@@ -1,19 +1,18 @@
 /**
  * WordPress dependencies
  */
-import {
-	CodeEditorScreen,
-	CodeEditor as InterfaceCodeEditor,
-} from '@wordpress/interface';
 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 ) => {
@@ -39,17 +38,28 @@ export default function CodeEditor() {
 			: contentStructure;
 	const { switchEditorMode } = useDispatch( editSiteStore );
 	return (
-		<CodeEditorScreen
-			onExit={ () => switchEditorMode( 'visual' ) }
-			exitShortcut={ shortcut }
-		>
-			<InterfaceCodeEditor
-				value={ content }
-				onChange={ ( newContent ) => {
-					onChange( parse( newContent ), { selection: undefined } );
-				} }
-				onInput={ setContent }
-			/>
-		</CodeEditorScreen>
+		<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>
 	);
 }