Skip to content

Commit

Permalink
Revert additions to the interface package.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed Jan 23, 2022
1 parent 4afcad8 commit 8c78433
Show file tree
Hide file tree
Showing 17 changed files with 313 additions and 174 deletions.
3 changes: 2 additions & 1 deletion packages/base-styles/_z-index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
65 changes: 38 additions & 27 deletions packages/edit-post/src/components/text-editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
80 changes: 66 additions & 14 deletions packages/edit-post/src/components/text-editor/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
1 change: 1 addition & 0 deletions packages/edit-site/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
13 changes: 8 additions & 5 deletions ...rface/src/components/code-editor/index.js → ...ents/code-editor/code-editor-text-area.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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>
Expand All @@ -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' ) }
/>
</>
Expand Down
42 changes: 26 additions & 16 deletions packages/edit-site/src/components/code-editor/index.js
View file
Original file line number Diff line number Diff line change
@@ -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 ) => {
Expand All @@ -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>
);
}
100 changes: 100 additions & 0 deletions packages/edit-site/src/components/code-editor/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit 8c78433

Please sign in to comment.