Skip to content

Commit

Permalink
Default appender: try editable paragraph instead of text area (#30986)
Browse files Browse the repository at this point in the history 
* Default appender: try editable paragraph instead of text area

* Move wp-block class

* Port over CSS from 30656 that's still useful.

* Update snapshots.

* Remove content editable in favour of tab index

* Fix tests

* Fix e2e test

Co-authored-by: jasmussen <[email protected]>
  • Loading branch information
@ellatrix @jasmussen
ellatrix and jasmussen authored Apr 23, 2021
1 parent c64f996 commit 4ab1a3a
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 91 deletions.
49 changes: 23 additions & 26 deletions packages/block-editor/src/components/default-block-appender/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import TextareaAutosize from 'react-autosize-textarea';

/**
* WordPress dependencies
*/
Expand All @@ -18,6 +13,12 @@ import { withSelect, withDispatch } from '@wordpress/data';
import Inserter from '../inserter';
import { store as blockEditorStore } from '../../store';

/**
* Zero width non-breaking space, used as padding for the paragraph when it is
* empty.
*/
export const ZWNBSP = '\ufeff';

export function DefaultBlockAppender( {
isLocked,
isVisible,
Expand All @@ -33,34 +34,30 @@ export function DefaultBlockAppender( {
const value =
decodeEntities( placeholder ) || __( 'Type / to choose a block' );

// The appender "button" is in-fact a text field so as to support
// transitions by WritingFlow occurring by arrow key press. WritingFlow
// only supports tab transitions into text fields and to the block focus
// boundary.
//
// See: https://github.com/WordPress/gutenberg/issues/4829#issuecomment-374213658
//
// If it were ever to be made to be a proper `button` element, it is
// important to note that `onFocus` alone would not be sufficient to
// capture click events, notably in Firefox.
//
// See: https://gist.github.com/cvrebert/68659d0333a578d75372

// The wp-block className is important for editor styles.

return (
<div
data-root-client-id={ rootClientId || '' }
className="wp-block block-editor-default-block-appender"
className="block-editor-default-block-appender"
>
<TextareaAutosize
<p
tabIndex="0"
// Only necessary for `useCanvasClickRedirect` to consider it
// as a target. Ideally it should consider any tabbable target,
// but the inserter is rendered in place while it should be
// rendered in a popover, just like it does for an empty
// paragraph block.
contentEditable
suppressContentEditableWarning
// We want this element to be styled as a paragraph by themes.
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
role="button"
aria-label={ __( 'Add block' ) }
className="block-editor-default-block-appender__content"
readOnly
// The wp-block className is important for editor styles.
className="wp-block block-editor-default-block-appender__content"
onFocus={ onAppend }
value={ showPrompt ? value : '' }
/>
>
{ showPrompt ? value : ZWNBSP }
</p>
<Inserter
rootClientId={ rootClientId }
position="bottom right"
Expand Down
42 changes: 3 additions & 39 deletions packages/block-editor/src/components/default-block-appender/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,9 @@
outline: 1px solid transparent;
}

textarea.block-editor-default-block-appender__content { // Needs specificity in order to override input field styles from WP-admin styles.
font-family: inherit;
font-size: inherit;
border: none;
background: none;
box-shadow: none;
display: block;
cursor: text;
width: 100%;
outline: $border-width solid transparent;
transition: 0.2s outline;
@include reduce-motion("transition");
margin-top: $default-block-margin;
margin-bottom: $default-block-margin;

// This needs high specificity as it's output as an inline style by the library.
resize: none !important;

// Emulate the dimensions of a paragraph block.
// On mobile and in nested contexts, the plus to add blocks shows up on the right.
// The rightmost padding makes sure it doesn't overlap text.
padding: 0 #{ $block-padding + $button-size } 0 0;

// Use opacity to work in various editor styles.
color: $dark-gray-placeholder;
.is-dark-theme & {
color: $light-gray-placeholder;
}
.block-editor-default-block-appender__content {
// Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block.
opacity: 0.62;
}

// Dropzone.
Expand All @@ -48,11 +23,6 @@
}
}

// Ensure that the height of the first appender, and the one between blocks, is the same as text.
.block-editor-default-block-appender__content {
line-height: $editor-line-height;
}

// Empty / default block side inserter.
.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, // Empty paragraph, needs specificity to override inherited popover styles.
.block-editor-default-block-appender .block-editor-inserter { // Empty appender.
Expand All @@ -79,9 +49,3 @@
display: none;
}
}

.block-editor-default-block-appender .block-editor-inserter {
@include break-small {
align-items: center;
}
}
45 changes: 27 additions & 18 deletions packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@

exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
<div
className="wp-block block-editor-default-block-appender"
className="block-editor-default-block-appender"
data-root-client-id=""
>
<ForwardRef
<p
aria-label="Add block"
className="block-editor-default-block-appender__content"
className="wp-block block-editor-default-block-appender__content"
contentEditable={true}
onFocus={
[MockFunction] {
"calls": Array [
Expand All @@ -21,10 +22,12 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
],
}
}
readOnly={true}
role="button"
value="Type / to choose a block"
/>
suppressContentEditableWarning={true}
tabIndex="0"
>
Type / to choose a block
</p>
<WithSelect(WithDispatch(IfCondition(Inserter)))
__experimentalIsQuick={true}
isAppender={true}
Expand All @@ -35,17 +38,20 @@ exports[`DefaultBlockAppender should append a default block when input focused 1

exports[`DefaultBlockAppender should match snapshot 1`] = `
<div
className="wp-block block-editor-default-block-appender"
className="block-editor-default-block-appender"
data-root-client-id=""
>
<ForwardRef
<p
aria-label="Add block"
className="block-editor-default-block-appender__content"
className="wp-block block-editor-default-block-appender__content"
contentEditable={true}
onFocus={[MockFunction]}
readOnly={true}
role="button"
value="Type / to choose a block"
/>
suppressContentEditableWarning={true}
tabIndex="0"
>
Type / to choose a block
</p>
<WithSelect(WithDispatch(IfCondition(Inserter)))
__experimentalIsQuick={true}
isAppender={true}
Expand All @@ -56,17 +62,20 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `

exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
<div
className="wp-block block-editor-default-block-appender"
className="block-editor-default-block-appender"
data-root-client-id=""
>
<ForwardRef
<p
aria-label="Add block"
className="block-editor-default-block-appender__content"
className="wp-block block-editor-default-block-appender__content"
contentEditable={true}
onFocus={[MockFunction]}
readOnly={true}
role="button"
value=""
/>
suppressContentEditableWarning={true}
tabIndex="0"
>

</p>
<WithSelect(WithDispatch(IfCondition(Inserter)))
__experimentalIsQuick={true}
isAppender={true}
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/default-block-appender/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
/**
* Internal dependencies
*/
import { DefaultBlockAppender } from '../';
import { DefaultBlockAppender, ZWNBSP } from '../';

describe( 'DefaultBlockAppender', () => {
const expectOnAppendCalled = ( onAppend ) => {
Expand Down Expand Up @@ -35,7 +35,7 @@ describe( 'DefaultBlockAppender', () => {
<DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt />
);

wrapper.find( 'ForwardRef' ).simulate( 'focus' );
wrapper.find( 'p' ).simulate( 'focus' );

expect( wrapper ).toMatchSnapshot();

Expand All @@ -51,9 +51,9 @@ describe( 'DefaultBlockAppender', () => {
showPrompt={ false }
/>
);
const input = wrapper.find( 'ForwardRef' );
const input = wrapper.find( 'p' );

expect( input.prop( 'value' ) ).toEqual( '' );
expect( input.prop( 'children' ) ).toEqual( ZWNBSP );

expect( wrapper ).toMatchSnapshot();
} );
Expand Down
7 changes: 3 additions & 4 deletions packages/edit-post/src/components/visual-editor/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,9 @@
margin-left: auto;
margin-right: auto;

// Apply default block margin below the post title.
// This ensures the first block on the page is in a good position.
// This rule can be retired once the title becomes an actual block.
margin-bottom: $default-block-margin;
// Margins between the title and the first block, or appender, do not collapse.
// By explicitly setting this to zero, we avoid "double margin".
margin-bottom: 0;
}
}

Expand Down

0 comments on commit 4ab1a3a

Please sign in to comment.