Parser: Remove support for <!--more-->

blocks/api/post.pegjs

@@ -169,33 +169,9 @@ Block_List
   }
 
 Token
-  = Tag_More
-  / Block_Void
+  = Block_Void
   / Block_Balanced
 
-Tag_More
-  = "<!--" WS* "more" customText:(WS+ text:$((!(WS* "-->") .)+) { /** <?php return $text; ?> **/ return text })? WS* "-->" noTeaser:(WS* "<!--noteaser-->")?
-  { /** <?php
-    $attrs = array( 'noTeaser' => (bool) $noTeaser );
-    if ( ! empty( $customText ) ) {
-      $attrs['customText'] = $customText;
-    }
-    return array(
-       'blockName' => 'core/more',
-       'attrs' => $attrs,
-       'innerHTML' => ''
-    );
-    ?> **/
-    return {
-      blockName: 'core/more',
-      attrs: {
-        customText: customText || undefined,
-        noTeaser: !! noTeaser
-      },
-      innerHTML: ''
-    }
-  }
-
 Block_Void
   = "<!--" WS+ "wp:" blockName:Block_Name WS+ attrs:(a:Block_Attributes WS+ {
     /** <?php return $a; ?> **/

blocks/api/raw-handling/comment-remover.js

@@ -8,5 +8,51 @@ export default function( node ) {
 		return;
 	}
 
+	if ( node.nodeValue.indexOf( 'more' ) === 0 ) {
+		// Grab any custom text in the comment
+		const matches = node.nodeValue.match( /more(.*)/ );
+		const customText = matches.length > 1 ? matches[ 1 ].trim() : '';
+
+		// When a <!--more--> comment is found, we need to look for any
+		// <!--noteaser--> sibling, but it may not be a direct sibling
+		// (whitespace typically lies in between)
+		let sibling = node;
+		let noTeaser = false;
+		while ( ( sibling = sibling.nextSibling ) ) {
+			if (
+				sibling.nodeType === COMMENT_NODE &&
+				sibling.nodeValue === 'noteaser'
+			) {
+				noTeaser = true;
+				sibling.parentNode.removeChild( sibling );
+				break;
+			}
+		}
+
+		// Conjure up a custom More element
+		const more = createMore( customText, noTeaser );
+
+		// Find the first ancestor to which the More element can be appended;
+		// appending to the closer P parents fails
+		let parent = node.parentNode;
+		while ( parent.nodeName.toLowerCase() === 'p' && parent.parentNode ) {
+			parent = parent.parentNode;
+		}
+		parent.appendChild( more );
+	}
+
 	node.parentNode.removeChild( node );
 }
+
+function createMore( customText, noTeaser ) {
+	const node = document.createElement( 'wp-block' );
+	node.dataset.block = 'core/more';
+	if ( customText ) {
+		node.dataset.customText = customText;
+	}
+	if ( noTeaser ) {
+		// "Boolean" data attribute
+		node.dataset.noTeaser = '';
+	}
+	return node;
+}

blocks/api/serializer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, reduce, isObject, castArray, compact, startsWith } from 'lodash';
+import { isEmpty, reduce, isObject, castArray, startsWith } from 'lodash';
 import { html as beautifyHtml } from 'js-beautify';
 import isEqualShallow from 'is-equal-shallow';
 
@@ -239,19 +239,6 @@ export function serializeBlock( block ) {
 	const saveAttributes = getCommentAttributes( block.attributes, blockType );
 
 	switch ( blockName ) {
-		case 'core/more':
-			const { customText, noTeaser } = saveAttributes;
-
-			const moreTag = customText ?
-				`<!--more ${ customText }-->` :
-				'<!--more-->';
-
-			const noTeaserTag = noTeaser ?
-				'<!--noteaser-->' :
-				'';
-
-			return compact( [ moreTag, noTeaserTag ] ).join( '\n' );
-
 		case getUnknownTypeHandlerName():
 			return saveContent;
 

blocks/api/test/serializer.js

@@ -24,6 +24,7 @@ import {
 } from '../registration';
 import { createBlock } from '../';
 import InnerBlocks from '../../inner-blocks';
+import { settings as moreSettings } from '../../library/more';
 
 describe( 'block serializer', () => {
 	beforeAll( () => {
@@ -285,29 +286,18 @@ describe( 'block serializer', () => {
 	describe( 'serializeBlock()', () => {
 		describe( '"more" block', () => {
 			beforeEach( () => {
-				registerBlockType( 'core/more', {
-					category: 'layout',
-					title: 'more',
-					attributes: {
-						customText: {
-							type: 'string',
-						},
-						noTeaser: {
-							type: 'boolean',
-							default: false,
-						},
-					},
-
-					save: () => null,
-				} );
+				registerBlockType( 'core/more', moreSettings );
 			} );
 
+			// FIXME: These tests aren't relevant anymore, but I kept them in
+			// the diff to better illustrate the changes.
+
 			it( 'serializes without text', () => {
 				const block = createBlock( 'core/more', {} );
 
 				const content = serializeBlock( block );
 
-				expect( content ).toBe( '<!--more-->' );
+				expect( content ).toBe( '<!-- wp:more -->\n<!--more-->\n<!-- /wp:more -->' );
 			} );
 
 			it( 'serializes with text', () => {
@@ -317,7 +307,7 @@ describe( 'block serializer', () => {
 
 				const content = serializeBlock( block );
 
-				expect( content ).toBe( '<!--more Read more!-->' );
+				expect( content ).toBe( '<!-- wp:more {"customText":"Read more!"} -->\n<!--more Read more!-->\n<!-- /wp:more -->' );
 			} );
 
 			it( 'serializes with no teaser', () => {
@@ -327,7 +317,7 @@ describe( 'block serializer', () => {
 
 				const content = serializeBlock( block );
 
-				expect( content ).toBe( '<!--more-->\n<!--noteaser-->' );
+				expect( content ).toBe( '<!-- wp:more {"noTeaser":true} -->\n<!--more-->\n<!--noteaser-->\n<!-- /wp:more -->' );
 			} );
 		} );
 

blocks/library/more/index.js

@@ -1,13 +1,20 @@
+/**
+ * External dependencies
+ */
+import { compact } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { ToggleControl } from '@wordpress/components';
+import { RawHTML } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
+import { createBlock } from '../../api';
 import InspectorControls from '../../inspector-controls';
 
 export const name = 'core/more';
@@ -39,6 +46,28 @@ export const settings = {
 		},
 	},
 
+	transforms: {
+		from: [
+			{
+				type: 'raw',
+				isMatch: ( node ) => node.dataset.block === 'core/more',
+				transform( node ) {
+					const { customText, noTeaser } = node.dataset;
+					const attrs = {};
+					// Don't copy unless defined and not an empty string
+					if ( customText ) {
+						attrs.customText = customText;
+					}
+					// Special handling for boolean
+					if ( noTeaser === '' ) {
+						attrs.noTeaser = true;
+					}
+					return createBlock( 'core/more', attrs );
+				},
+			},
+		],
+	},
+
 	edit( { attributes, setAttributes, isSelected } ) {
 		const { customText, noTeaser } = attributes;
 
@@ -68,7 +97,21 @@ export const settings = {
 		];
 	},
 
-	save() {
-		return null;
+	save( { attributes } ) {
+		const { customText, noTeaser } = attributes;
+
+		const moreTag = customText ?
+			`<!--more ${ customText }-->` :
+			'<!--more-->';
+
+		const noTeaserTag = noTeaser ?
+			'<!--noteaser-->' :
+			'';
+
+		return (
+			<RawHTML>
+				{ compact( [ moreTag, noTeaserTag ] ).join( '\n' ) }
+			</RawHTML>
+		);
 	},
 };

blocks/test/fixtures/core__more.html

@@ -1 +1,3 @@
+<!-- wp:core/more -->
 <!--more-->
+<!-- /wp:core/more -->

blocks/test/fixtures/core__more.json

@@ -7,6 +7,6 @@
             "noTeaser": false
         },
         "innerBlocks": [],
-        "originalContent": ""
+        "originalContent": "<!--more-->"
     }
 ]

blocks/test/fixtures/core__more.parsed.json

@@ -1,10 +1,9 @@
 [
     {
         "blockName": "core/more",
-        "attrs": {
-            "noTeaser": false
-        },
-        "innerHTML": ""
+        "attrs": null,
+        "innerBlocks": [],
+        "innerHTML": "\n<!--more-->\n"
     },
     {
         "attrs": {},

blocks/test/fixtures/core__more.serialized.html

@@ -1 +1,3 @@
+<!-- wp:more -->
 <!--more-->
+<!-- /wp:more -->

blocks/test/fixtures/core__more__custom-text-teaser.html

@@ -1,2 +1,4 @@
+<!-- wp:core/more {"customText":"Continue Reading","noTeaser":true} -->
 <!--more Continue Reading-->
 <!--noteaser-->
+<!-- /wp:core/more -->

blocks/test/fixtures/core__more__custom-text-teaser.json

@@ -8,6 +8,6 @@
             "noTeaser": true
         },
         "innerBlocks": [],
-        "originalContent": ""
+        "originalContent": "<!--more Continue Reading-->\n<!--noteaser-->"
     }
 ]

blocks/test/fixtures/core__more__custom-text-teaser.parsed.json

@@ -5,7 +5,8 @@
             "customText": "Continue Reading",
             "noTeaser": true
         },
-        "innerHTML": ""
+        "innerBlocks": [],
+        "innerHTML": "\n<!--more Continue Reading-->\n<!--noteaser-->\n"
     },
     {
         "attrs": {},

blocks/test/fixtures/core__more__custom-text-teaser.serialized.html

@@ -1,2 +1,4 @@
+<!-- wp:more {"customText":"Continue Reading","noTeaser":true} -->
 <!--more Continue Reading-->
 <!--noteaser-->
+<!-- /wp:more -->