RichText: stabilize onSplit #14765

ellatrix · 2019-04-02T10:45:22Z

Description

Stablizes the RichText onSplit prop.

Fixes RichText: revise onSplit prop #10761, see the issue for more information.
Fixes Using Enter to split a paragraph block requires two Ctrl-Z's to undo #8882: Using Enter to split a paragraph block requires two Ctrl-Z's to undo.
Fixes Pressing enter at the start of a heading block should push it down and create a paragraph above. #10326. Pressing enter at the start of a heading block should push it down and create a paragraph above.
Fixes Clicking "Enter" at the beginning of text bumps it down, but loses the block styling #13740. Keep paragraph styling on split at the start.
Fixes pasting a list inside a list.
It also fixes an issue with lists instances where pasted content would split the block. Since these two are now separate handlers, pasted content can now appear as list items inside lists.

Additionally it fixes issues where core blocks (heading and list) do not take into account any null values passed to unstableOnSplit.

How has this been tested?

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

youknowriad

Left some few comments, but I'm going to take this for a spin now.

youknowriad · 2019-05-08T11:12:49Z

packages/block-editor/src/components/rich-text/index.js

-	 */
-	splitContent( blocks = [], context = {} ) {
-		if ( ! this.onSplit ) {
+	onSplit( record, pastedBlocks = [] ) {


I think it would be good to clarify the different use cases this function is called (sorry If it's somewhere else and I missed it), something like:

putting the caret in the middle of a RichText and pasting

click "Enter" in the middle of the text

other use-cases I'm not aware of?

Done in 199a1e9.

youknowriad · 2019-05-08T11:13:34Z

packages/block-editor/src/components/rich-text/index.js

-		this.onSplit( before, after, ...blocks );
+		// If there are pasted blocks, set the selection to the last one.
+		// Otherwise, set the selection to the second block.
+		const indexToSelect = hasPastedBlocks ? blocks.length - 1 : 1;


It's not immediately clear to me why should we put the caret int the first block if there's no pasted blocks?

1 means the second block. :) After pressing enter, the caret goes in the second block (there are only two)?

Alternatively this could be written as blocks.length I guess.

Does this mean the index is always blocks.length - 1 (the last block)

youknowriad · 2019-05-08T11:15:21Z

packages/block-editor/src/components/rich-text/index.js

-	splitContent( blocks = [], context = {} ) {
-		if ( ! this.onSplit ) {
+	onSplit( record, pastedBlocks = [] ) {
+		const { onReplace, onSplit, onSplitMiddle } = this.props;


onSplitMiddle is not clear to me and I think it's not documented right?

Is this something to be marked unstable?

Seems good to mark as unstable for now. Will adjust.

Done in 199a1e9.

youknowriad · 2019-05-08T11:24:35Z

Did some tests:

Splitting and pasting in heading and paragraph blocks are looking good with this.
Splitting in the list block is still "buggy" (See screenshot)
Pasting in the list block seems to work well

ellatrix · 2019-05-14T11:09:59Z

@youknowriad I can't reproduce that issue. What browser are you using?

youknowriad · 2019-05-14T11:15:53Z

@ellatrix I'm using Firefox

ellatrix · 2019-05-14T11:31:06Z

@youknowriad It looks like it's a visual glitch that happens in master as well.

youknowriad · 2019-05-14T11:36:20Z

@ellatrix I confirm, let's fix this bug separately.

packages/block-editor/src/components/rich-text/index.js

ellatrix · 2019-05-14T12:07:15Z

@youknowriad Addressed your feedback. Additionally, #14846 seems to fix the issue you're having in Firefox.

Co-Authored-By: Riad Benguella <[email protected]>

youknowriad

Great work

ellatrix · 2019-05-18T17:02:58Z

Thanks @youknowriad!

ellatrix added [Status] In Progress Tracking issues with work in progress [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable labels Apr 2, 2019

ellatrix requested review from aduth, ajitbohra, gziolo, jorgefilipecosta, noisysocks, notnownikki, Soean, talldan and youknowriad as code owners April 2, 2019 10:45

ellatrix mentioned this pull request Apr 2, 2019

RichText: Revise onSplit prop #11005

Closed

4 tasks

ellatrix force-pushed the try/block-editor-selection-state branch from cbf86be to 0a85d5c Compare April 4, 2019 08:01

koke mentioned this pull request Apr 4, 2019

RichText: mark onSplit prop as unstable wordpress-mobile/gutenberg-mobile#394

Closed

ellatrix mentioned this pull request Apr 5, 2019

Overview: RichText, APIs, & Formatting Library #13778

Closed

17 tasks

ellatrix force-pushed the try/block-editor-selection-state branch from 0a85d5c to ddc3533 Compare April 10, 2019 13:31

ellatrix force-pushed the try/block-editor-selection-state branch from ddc3533 to e1e6b68 Compare April 17, 2019 14:04

ellatrix mentioned this pull request Apr 19, 2019

Keep styling after spliting a block #14464

Closed

9 tasks

ellatrix force-pushed the try/block-editor-selection-state branch 2 times, most recently from d936b26 to 0008d0e Compare April 19, 2019 14:34

ellatrix changed the base branch from try/block-editor-selection-state to master April 19, 2019 14:56

ellatrix changed the base branch from master to try/block-editor-selection-state April 19, 2019 14:57

ellatrix force-pushed the try/rich-text-on-split branch from 3b721c7 to 7eca736 Compare April 19, 2019 15:09

ellatrix requested review from chrisvanpatten, mkaz, nerrad, oandregal and ntwb as code owners April 19, 2019 15:09

ellatrix changed the base branch from try/block-editor-selection-state to master April 19, 2019 15:09

ellatrix mentioned this pull request Apr 19, 2019

Update heading block on ENTER key to create empty paragraph instead of heading #10382

Closed

4 tasks

gziolo removed this from the 5.6 (Gutenberg) milestone May 6, 2019

youknowriad reviewed May 8, 2019

View reviewed changes

miina mentioned this pull request May 10, 2019

Fix background opacity. ampproject/amp-wp#2278

Merged

swissspidy changed the title ~~RichText: stablize onSplit~~ RichText: stabilize onSplit May 10, 2019

ellatrix added 6 commits May 14, 2019 13:00

RichText: stablize onSplit

0003241

Select the correct block

a38e416

Add e2e tests

6745325

Fix e2e test

8cd03fc

Fix styled paragraph split

110a13f

Remove paragraph special onReplace

7af898f

ellatrix force-pushed the try/rich-text-on-split branch from b68e141 to 7af898f Compare May 14, 2019 11:06

Address comments

199a1e9

ellatrix mentioned this pull request May 14, 2019

RichText/Input Interaction: use ZWNBSP as padding #14846

Merged

5 tasks

youknowriad reviewed May 14, 2019

View reviewed changes

packages/block-editor/src/components/rich-text/index.js Outdated Show resolved Hide resolved

Update packages/block-editor/src/components/rich-text/index.js

331e054

Co-Authored-By: Riad Benguella <[email protected]>

koke mentioned this pull request May 16, 2019

Undoing a list split removes the content wordpress-mobile/gutenberg-mobile#956

Closed

youknowriad approved these changes May 18, 2019

View reviewed changes

ellatrix merged commit eddd4fc into master May 18, 2019

ellatrix deleted the try/rich-text-on-split branch May 18, 2019 17:02

hypest mentioned this pull request May 23, 2019

Follow web side's lead to add indexToSelect to onReplace wordpress-mobile/gutenberg-mobile#1024

Merged

1 task

youknowriad added this to the 5.8 (Gutenberg) milestone May 24, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RichText: stabilize onSplit #14765

RichText: stabilize onSplit #14765

ellatrix commented Apr 2, 2019 •

edited

Loading

youknowriad left a comment

youknowriad May 8, 2019

ellatrix May 14, 2019

youknowriad May 8, 2019

ellatrix May 14, 2019

ellatrix May 14, 2019

youknowriad May 14, 2019

youknowriad May 8, 2019

youknowriad May 8, 2019

ellatrix May 14, 2019

ellatrix May 14, 2019

youknowriad commented May 8, 2019

ellatrix commented May 14, 2019

youknowriad commented May 14, 2019

ellatrix commented May 14, 2019

youknowriad commented May 14, 2019

ellatrix commented May 14, 2019

youknowriad left a comment

ellatrix commented May 18, 2019

RichText: stabilize onSplit #14765

RichText: stabilize onSplit #14765

Conversation

ellatrix commented Apr 2, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

youknowriad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented May 8, 2019

ellatrix commented May 14, 2019

youknowriad commented May 14, 2019

ellatrix commented May 14, 2019

youknowriad commented May 14, 2019

ellatrix commented May 14, 2019

youknowriad left a comment

Choose a reason for hiding this comment

ellatrix commented May 18, 2019

ellatrix commented Apr 2, 2019 •

edited

Loading