Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix #22550 and allow enter to insert line breaks even if template is locked #23330

Merged
merged 3 commits into from
Jul 27, 2020
Merged

fix #22550 and allow enter to insert line breaks even if template is locked #23330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a340ca4
fix #22550 and allow enter to insert line breaks in richtext
oxyc Jun 20, 2020
6b23977
add e2e test
oxyc Jun 20, 2020
3d9bc7a
Restore isSelected condition
ellatrix Jul 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/block-editor/src/components/block-list/block-wrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ const BlockComponent = forwardRef(
enableAnimation,
index,
className,
isLocked,
name,
mode,
blockTitle,
Expand Down Expand Up @@ -249,8 +248,8 @@ const BlockComponent = forwardRef(
data-block={ clientId }
data-type={ name }
data-title={ blockTitle }
// Only allow shortcuts when a blocks is selected and not locked.
onKeyDown={ isSelected && ! isLocked ? onKeyDown : undefined }
ellatrix marked this conversation as resolved.
Show resolved Hide resolved
// Only allow shortcuts when a blocks is selected.
onKeyDown={ isSelected ? onKeyDown : undefined }
// Only allow selection to be started from a selected block.
onMouseLeave={ isSelected ? onMouseLeave : undefined }
// No need to have these listeners for hover class in edit mode.
Expand Down
18 changes: 18 additions & 0 deletions packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`cpt locking template_lock all should insert line breaks when using enter and shift-enter 1`] = `
"<!-- wp:image -->
Copy link
Member

@ellatrix ellatrix Jul 27, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally would be best to not have content from the previous test. Not a blocker though. :)

<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
<p>First line<br>Second line<br>Third line</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
<!-- /wp:quote -->

<!-- wp:columns -->
<div class=\\"wp-block-columns\\"></div>
<!-- /wp:columns -->"
`;

exports[`cpt locking template_lock all should not error when deleting the cotents of a paragraph 1`] = `
"<!-- wp:image -->
<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
Expand Down
13 changes: 13 additions & 0 deletions packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
getEditedPostContent,
insertBlock,
pressKeyTimes,
pressKeyWithModifier,
setPostContent,
} from '@wordpress/e2e-test-utils';

Expand Down Expand Up @@ -85,6 +86,18 @@ describe( 'cpt locking', () => {
expect( await getEditedPostContent() ).toMatchSnapshot();
} );

it( 'should insert line breaks when using enter and shift-enter', async () => {
await page.click(
'.block-editor-block-list__block[data-type="core/paragraph"]'
);
await page.keyboard.type( 'First line' );
await pressKeyTimes( 'Enter', 1 );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think that this should work for Enter too. Only Shift+Enter is kind of known for inserting a soft line break.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd disagree lots of my clients are not aware of that and silently treating Enter as a soft line break is a much nicer UX if you have an entire post type locked. This is also how it used to work before the regression.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if this is the right place to post, but I would like to agree with @ocean90 and have this reverted to only apply to Shift+Enter. I'm not sure what pressing Enter did in the past, but what it should do is exit the block, like it does when pushing Enter after any other paragraph block.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just as a use case, I'm setting up a simple block which allows someone to enter one paragraph, and display an icon beside it (using the ACF plugin with InnerBlocks locked to one paragraph, and an image field).

This works fine, but I keep hitting enter after that paragraph so that I can type a normal paragraph, and instead end up with a line break inside the original block.

await page.keyboard.type( 'Second line' );
await pressKeyWithModifier( 'shift', 'Enter' );
await page.keyboard.type( 'Third line' );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );

it( 'should show invalid template notice if the blocks do not match the templte', async () => {
const content = await getEditedPostContent();
const [ , contentWithoutImage ] = content.split(
Expand Down