Add pagination block #1467

swissspidy · 2017-06-26T19:55:43Z

#1440 and #1460 inspired me to add a new block to support  in Gutenberg.

This PR does:

add a new core/nextpage block
update special-comment-converter.js to turn  into that new block
add tests

Screenshots:

chrisgrabinski · 2017-06-26T20:22:19Z

It might be useful to add page numbers to the block output. This would improve navigation inside the editor for long articles with multiple pages.

dmsnell · 2017-06-26T21:17:41Z

@swissspidy this looks fine to me, but yeah we may want to revisit. Open questions include:

how many of these exceptions are there where we have a magical HTML comment?
should we create a new top-level rule in the parser for the magic comments? (I started this way in Parser: Parse  tag and  #1460 but took it out as a "when we get there" kind of thing)
where should we attempt to track the stateful information, such as which page number we're breaking? we can do it in the parser, though that's really something we want to avoid since it breaks the parsing algorithm. we can do it in the parser.js file, but we have to make sure we don't start proliferating hacks in there.

so far though this PR looks good to me. thanks!

youknowriad

Code looks good but for some reason the serializer is not working as expected (Try switching to the text mode you'll notice the  comments instead of 

swissspidy · 2017-06-27T09:08:31Z

Thanks @youknowriad, I fixed the serializer now and added a test to verify that. Needed to move some declarations in order to not get warnings b/c of missing attributes.

how many of these exceptions are there where we have a magical HTML comment?

To my knowledge, there are only ,  and .

should we create a new top-level rule in the parser for the magic comments? (I started this way in #1460 but took it out as a "when we get there" kind of thing)

Since there are only 3 special HTML comments, it might make sense to have 1 specific top-level rule for them in the parser.

It might be useful to add page numbers to the block output. This would improve navigation inside the editor for long articles with multiple pages.

Good idea. I thought I saw some code in Gutenberg for such stuff the other day, but I can't find it right now.

youknowriad · 2017-06-27T09:11:26Z

Looks like there's also an issue with the parser, try saving a post with this block and reloading the page.

swissspidy · 2017-06-27T09:37:07Z

Ugh, indeed.

I just added a failing test in 35ef9f12a595168b14062a9377d064c163306803 to demonstrate this.

The test results in only 3 blocks, where the third block gets a raw content of \nBroccoli\nRomanesco instead of just Broccoli and the rest being split into more blocks.

swissspidy · 2017-07-02T09:59:20Z

@youknowriad Do you perhaps have an idea regarding the parser and how I could fix it?

youknowriad · 2017-07-03T12:44:54Z

@swissspidy I think we'd need to exclude the WP_Block_NextPage block from the WP_Block_HTML (line 51 of the pegjs file) (same as void block for example)

swissspidy · 2017-07-03T13:12:33Z

Interesting, I haven't seen that before. I did that in 8ee3f50a575077bafbe1d8126e245cc9bca19025 but it doesn't seem to work. See https://travis-ci.org/WordPress/gutenberg/jobs/249624708#L2010-L2016

swissspidy · 2017-07-04T14:40:21Z

Ugh, so the tests partly just failed because of #1460. I needed to add a save() method when registering the blocks in the test.

dmsnell · 2017-07-04T15:39:23Z

blocks/api/post.pegjs

@@ -95,7 +112,7 @@ WP_Block_Balanced
  }

 WP_Block_Html
-  = ts:(!WP_Block_Balanced !WP_Block_Void c:Any {
+  = ts:(!WP_Block_Balanced !WP_Block_Void !WP_Block_NextPage c:Any {


Should probably also put in !WP_Tag_More here until we fix up the root cause of this trouble

Should I also rename WP_Block_NextPage to WP_Tag_NextPage?

It's up to you. It would be nice if they were both the same. I chose Tag because of the exceptional nature of the tag, not knowing originally it would turn into a block. I think that difference is legitimate here since it's clearly not a block in the text.

Either way, could we normalize them both to match each other?

dmsnell · 2017-07-04T15:40:30Z

blocks/api/serializer.js

+	if ( 'core/nextpage' === blockName ) {
+		return '<!--nextpage-->';
+	}
+


would probably be nice to keep this next to the more tag. if it's up here to save on computation I would suggest that there's not much to save on this one special tag over the cost of serializing the document.

I know it would be nice, but it's up there to not cause errors when calling getSaveContent() or getCommentAttributes() because this block doesn't have any of that.

is that problematic then that the block doesn't do it. maybe we've surfaced an oddity or bug?

it seems like other blocks might also have no attributes and if they break here we will want to make sure that doesn't happen.

Hmm, I had another look and it seems like the problem just was the missing save() method in the test, no other warnings. So I guess that resolved itself.

nylen · 2017-07-05T08:41:22Z

blocks/api/test/parser.js

+			expect( parsed[ 0 ].attributes.content ).to.eql( '<p>Cauliflower</p>' );
+			expect( parsed[ 2 ].attributes.content ).to.eql( '<p>Broccoli</p>' );
+			expect( parsed[ 4 ].attributes.content ).to.eql( '<p>Romanesco</p>' );
+		} );


This last test case in particular is probably a better fit for a new file in blocks/test/fixtures/, for example misc__multi-blocks-and-nextpage.html. This way it will be both easier to set up and more thoroughly tested.

Sounds reasonable. Is there precedent for this or shall I just go on to create the first such misc__… file?

This would be the first such fixture, yes. There need to be many more before we are ready to release.

aduth · 2017-08-03T13:33:30Z

blocks/library/nextpage/index.js

+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';


Note with #2172, these need to be updated to prefix the dependencies with @wordpress/. You will need to perform a rebase against the latest version of master and apply your changes:

git fetch origin git rebase origin/master

gziolo · 2018-01-27T11:16:42Z

@swissspidy, do you plan to continue the work started in this PR. From the comments looks like it was in pretty good shape a few months back. It might require some extra work to make it up to date.

mcsf · 2018-02-13T17:46:33Z

@swissspidy, I'm interested in this per #5031. Let me know what the status is, or if you'd like to collaborate on it or reassign it. :)

swissspidy · 2018-02-14T08:34:10Z

@mcsf Interesting! Would be happy to collaborate. I'll try to resolve conflicts this week and then we can iterate from there.

mcsf · 2018-02-20T10:19:44Z

Hi, @swissspidy, how're things here? :)

swissspidy · 2018-02-20T12:43:44Z

Works like a charm again. Demo:

Adding page numbers to the block was previously mentioned, but I think that could be added in a new PR if considered useful.

@mcsf Feel free to check it out now :)

mcsf · 2018-03-01T12:07:08Z

@swissspidy, apologies for the delay.

Thanks for refreshing this branch. I wanted to have a couple of other PRs merged before getting back to you. The crux is #5061, which reworks the More block so as to not impact the parser. I'd like for the pagination block to follow the same pattern. In other words, it shouldn't add anything to the PEG parser, thus optimizing for low parser complexity, meaning better robustness, performance and separation of concerns.

A couple of comments to have in mind from that PR:

If this change is course is frustrating, I understand. If you'd still like to take this on, I'd be quite grateful!

swissspidy · 2018-03-01T16:35:10Z

As mentioned in that other PR, special-comment-converter might need to undergo some changes. Apart from that this should be fine for the moment.

@mcsf Mind having another look now?

mcsf

Thanks for the super quick response! This is looking good. I've left some comments.

mcsf · 2018-03-01T16:46:59Z

blocks/api/raw-handling/special-comment-converter.js

+		return;
+	}
+
+	if ( node.nodeValue.indexOf( 'nextpage' ) === 0 ) {


I don't believe nextpage accepts any "arguments" within the comment, so, in order to match core, this should be a full string eq check: node.nodeValue === 'nextpage'.

mcsf · 2018-03-01T16:56:34Z

blocks/api/raw-handling/special-comment-converter.js

+		parent.appendChild( nextPage );
+		node.parentNode.removeChild( node );
+
+		return;


Instead of repeating the parent finding and the node operations for both comment types, we could refactor this. The simplest way I can think of may be:

let newNode; if ( foundNextpage ) { newNode = createNextpage(); } else if ( foundMore ) { newNode = createMore( ...args ); } if ( newNode ) { let parent = …; while ( … ) parent = parent.Node; parent.appendChild( … ); node.parentNode.removeChild( … ); return; }

or, actually better:

if ( foundNextpage ) { appendToBody( node, createNextpage() ); remove( node ); return; } if ( foundMore ) { appendToBody( node, createMore( … ) ); remove( node ); } function appendToBody( processedNode, newNode ) { // Append it to the top level for later conversion to blocks let parent = node.parentNode; while ( parent.nodeName !== 'BODY' ) { parent = parent.parentNode; } parent.appendChild( nextPage ); } function remove( node ) { node.parentNode.removeChild( node ); }

mcsf · 2018-03-01T17:00:22Z

blocks/library/nextpage/index.js

+	title: __( 'Page break' ),
+
+	description: __( 'This block allows you to set break points on your post. Visitors of your blog are then presented with content split into multiple pages.' ),
+


A keyword property here would be useful to include things like next page, helping with discovery in the block inserters.

mcsf · 2018-03-01T17:02:06Z

blocks/library/nextpage/index.js

+	save() {
+		return (
+			<RawHTML>
+				{ [ '<!--nextpage-->' ].join( '\n' ) }


No need for the array + join operation :)

<RawHTML> { '' } </RawHTML>

swissspidy · 2018-03-02T13:53:11Z

@mcsf I've incorporated your feedback now.

At the same time I realised that appending these elements to the body totally breaks the posts. This worked way better before #5061 and is now really frustrating for users. Put simply, I'd say this is not acceptable. Especially when it can be done better. Replacing the existing nodes makes much more sense, although still doesn't catch things like FooBar.

Here are some examples:

Page breaks before conversion:

Page breaks after conversion:

More tag before conversion:

More tag after conversion:

swissspidy · 2018-03-03T12:34:00Z

Here's more or less what I had in mind for improving the node replacement:

diff --git blocks/api/raw-handling/special-comment-converter.js blocks/api/raw-handling/special-comment-converter.js
index ac2e1bc7..85fa5aad 100644
--- blocks/api/raw-handling/special-comment-converter.js
+++ blocks/api/raw-handling/special-comment-converter.js
@@ -24,8 +24,7 @@ export default function( node ) {
 	}
 
 	if ( node.nodeValue === 'nextpage' ) {
-		appendToBody( node, createNextpage() );
-		remove( node );
+		replace( node, createNextpage() );
 		return;
 	}
 
@@ -51,8 +50,7 @@ export default function( node ) {
 			}
 		}
 
-		appendToBody( node, createMore( customText, noTeaser ) );
-		remove( node );
+		replace( node, createMore( customText, noTeaser ) );
 	}
 }
 
@@ -76,14 +74,13 @@ function createNextpage() {
 	return node;
 }
 
-function appendToBody( processedNode, newNode ) {
-	// Append it to the top level for later conversion to blocks
-	let parent = processedNode.parentNode;
-	while ( parent.nodeName !== 'BODY' ) {
-		parent = parent.parentNode;
-	}
+function replace( processedNode, newNode ) {
+	insertAfter( newNode, processedNode.parentNode );
+	remove( processedNode );
+}
 
-	parent.appendChild( newNode );
+function insertAfter( newNode, referenceNode ) {
+	referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
 }
 
 function remove( node ) {

mcsf · 2018-03-09T16:05:34Z

Hey, @swissspidy, apologies for the delay, and great work here.

At the same time I realised that appending these elements to the body totally breaks the posts. This worked way better before #5061 and is now really frustrating for users. Put simply, I'd say this is not acceptable. Especially when it can be done better. […]

Totally agree. I've tested your patch and it works great. I also wrote some tests for it. If you don't mind, I'll push a PR — so that we can fix More quickly — and give you props for it. I'll circle back for a review of Next Page.

swissspidy · 2018-03-27T10:26:56Z

Rebased against master after #5538.

@mcsf Mind having another look?

mcsf · 2018-03-27T16:56:53Z

Hey, I’ll have a look after we release the next version, so tomorrow or Thursday. :-)

mcsf

This looks great, thanks for stewarding and for your patience! Left some notes.

mcsf · 2018-03-30T08:50:26Z

blocks/api/raw-handling/special-comment-converter.js

@@ -9,7 +9,7 @@ import { remove, replace } from '@wordpress/utils';
 const { COMMENT_NODE } = window.Node;

 /**
- * Looks for `<!--more-->` comments, as well as the `<!--more Some text-->`
+ * Looks for `<!--nextpage-->` and `<!--more-->` comments, as well as the `<!--more Some text-->`


Minor, but this is better with reformatting for line length:

* Looks for `` and `` comments, as well as the * `` variant and its `` companion, and * replaces them with a custom element representing a future block.

mcsf · 2018-03-30T08:54:41Z

blocks/library/nextpage/index.js

+
+	description: __( 'This block allows you to set break points on your post. Visitors of your blog are then presented with content split into multiple pages.' ),
+
+	icon: 'admin-page',


admin-page seems alright to me, but if @jasmussen has some other suggestion, 🙇

Yep, that icon is solid.

mcsf · 2018-03-30T08:59:17Z

blocks/test/fixtures/core__nextpage.parsed.json

+    {
+        "blockName": "core/nextpage",
+        "attrs": null,
+	  	"innerBlocks": [],


Indentation needs fixing here

mcsf · 2018-03-30T09:58:43Z

blocks/library/nextpage/editor.scss

+.wp-block-nextpage > span:after {
+	left: 100%;
+	margin-left: 20px;
+}


This file is a lot different from blocks/library/more/editor.scss. I prefer the final result for Next Page, and we'd probably want to converge a bit on the two stylesheets. Any advice from @jasmussen is much appreciated, as always.

I agree it would be nice to refine the styles of both of these blocks. However this PR has gone on for a while. I think perhaps it'd be good to merge this in as is, and then look at refining/unifying the styles separately. I can take that on as a quick smallish PR.

mcsf · 2018-04-09T10:07:08Z

I think perhaps it'd be good to merge this in as is, and then look at refining/unifying the styles separately. I can take that on as a quick smallish PR.

@jasmussen, that'd be awesome!

@swissspidy, seems like we're good to go, then. One last thing: can you rebase this entire branch into one-to-three neat commits against the latest master? Once you've got it, I'll merge it. 🙇

swissspidy · 2018-04-09T11:00:40Z

@mcsf Should look better now with just one commit.

mcsf · 2018-04-09T11:04:29Z

This is great! Thanks for your perseverance, @swissspidy. :)

@swissspidy

This adds a white background, and some things, to the Pagination block. This will only be visible if a user loads a stylesheet into the editor. Fixes #1467 (comment), cc @swissspidy.

@noisysocks

* Polish link dialog. This uses variables for colors and shadows, and also fixes a regression with the link dialog when linking an image. However there's still a bug here, where as soon as you start typing in the image link dialog, the entire thing disappears and you can't type. This is possibly due to isEditing mode being invoked there. Can you take a look, @noisysocks @karmatosed? * Unify markup between More block and Pagination block This adds a white background, and some things, to the Pagination block. This will only be visible if a user loads a stylesheet into the editor. Fixes #1467 (comment), cc @swissspidy. * Unify button sizes, and slim down "Media Library". This makes the placeholders fit better in small breakpoints. * Change left arrow on breadcrumbs. This makes the left arrow consistent with the one used when creating links on images.

youknowriad reviewed Jun 27, 2017

View reviewed changes

swissspidy added the [Feature] Blocks Overall functionality of blocks label Jun 27, 2017

This was referenced Jun 27, 2017

Add descriptive text to post settings #1513

Closed

Add block description component #1555

Merged

swissspidy mentioned this pull request Jul 3, 2017

Parser: Parse  tag and  #1460

Merged

swissspidy requested review from youknowriad and dmsnell July 4, 2017 14:56

dmsnell reviewed Jul 4, 2017

View reviewed changes

nylen reviewed Jul 5, 2017

View reviewed changes

aduth reviewed Aug 3, 2017

View reviewed changes

gziolo added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Jan 27, 2018

gziolo mentioned this pull request Feb 7, 2018

Introduce a Next Page Block to allow post pagination #4930

Closed

gziolo added [Status] In Progress Tracking issues with work in progress and removed [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. labels Feb 7, 2018

mcsf mentioned this pull request Feb 13, 2018

Add hook to validate useOnce blocks #5031

Merged

3 tasks

mcsf reviewed Mar 1, 2018

View reviewed changes

mcsf mentioned this pull request Mar 9, 2018

Block conversion: Preserve "More" order #5538

Merged

3 tasks

swissspidy requested a review from mcsf March 27, 2018 10:26

mcsf reviewed Mar 30, 2018

View reviewed changes

swissspidy requested a review from jasmussen April 9, 2018 08:48

Add new pagination block

9c9a905

mcsf merged commit 909d38d into WordPress:master Apr 9, 2018

mcsf added this to the 2.7 milestone Apr 10, 2018

swissspidy mentioned this pull request Nov 22, 2018

Paginated content #12218

Closed

This was referenced Sep 16, 2021

[Snyk] Security upgrade yargs from 14.2.3 to 15.0.1 Verdinjoshua26/gutenberg#23

Open

[Snyk] Security upgrade yargs from 14.2.3 to 15.0.1 MaxMood96/gutenberg#50

Open

		title: __( 'Page break' ),

		description: __( 'This block allows you to set break points on your post. Visitors of your blog are then presented with content split into multiple pages.' ),


		description: __( 'This block allows you to set break points on your post. Visitors of your blog are then presented with content split into multiple pages.' ),

		icon: 'admin-page',

Add pagination block #1467

Add pagination block #1467

Conversation

swissspidy commented Jun 26, 2017 • edited Loading

chrisgrabinski commented Jun 26, 2017

dmsnell commented Jun 26, 2017

youknowriad left a comment

Choose a reason for hiding this comment

swissspidy commented Jun 27, 2017

youknowriad commented Jun 27, 2017

swissspidy commented Jun 27, 2017

swissspidy commented Jul 2, 2017

youknowriad commented Jul 3, 2017

swissspidy commented Jul 3, 2017

swissspidy commented Jul 4, 2017

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

gziolo commented Jan 27, 2018

mcsf commented Feb 13, 2018

swissspidy commented Feb 14, 2018

mcsf commented Feb 20, 2018

swissspidy commented Feb 20, 2018

mcsf commented Mar 1, 2018

swissspidy commented Mar 1, 2018

mcsf 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

swissspidy commented Mar 2, 2018

swissspidy commented Mar 3, 2018

mcsf commented Mar 9, 2018

swissspidy commented Mar 27, 2018

mcsf commented Mar 27, 2018 via email

mcsf 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

mcsf commented Apr 9, 2018

swissspidy commented Apr 9, 2018

mcsf commented Apr 9, 2018

swissspidy commented Jun 26, 2017 •

edited

Loading