Merge pull request #5061 from WordPress/remove/parser-more-and-noteas…

…er-exception

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

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/index.js

@@ -12,6 +12,7 @@ import { getBlockTypes, getUnknownTypeHandlerName } from '../registration';
 import { getBlockAttributes, parseWithGrammar } from '../parser';
 import normaliseBlocks from './normalise-blocks';
 import stripAttributes from './strip-attributes';
+import specialCommentConverter from './special-comment-converter';
 import commentRemover from './comment-remover';
 import createUnwrapper from './create-unwrapper';
 import isInlineContent from './is-inline-content';
@@ -96,6 +97,7 @@ export default function rawHandler( { HTML, plainText = '', mode = 'AUTO', tagNa
 			// Add semantic formatting before attributes are stripped.
 			formattingTransformer,
 			stripAttributes,
+			specialCommentConverter,
 			commentRemover,
 			createUnwrapper( ( node ) => ! isInline( node, tagName ) ),
 		] );
@@ -124,6 +126,7 @@ export default function rawHandler( { HTML, plainText = '', mode = 'AUTO', tagNa
 			// Add semantic formatting before attributes are stripped.
 			formattingTransformer,
 			stripAttributes,
+			specialCommentConverter,
 			commentRemover,
 			! canUserUseUnfilteredHTML && createUnwrapper( ( element ) => element.nodeName === 'IFRAME' ),
 			embeddedContentReducer,

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

@@ -0,0 +1,73 @@
+/**
+ * Browser dependencies
+ */
+const { COMMENT_NODE } = window.Node;
+
+/**
+ * Looks for `<!--more-->` comments, as well as the `<!--more Some text-->`
+ * variant and its `<!--noteaser-->` companion, and replaces them with a custom
+ * element representing a future block.
+ *
+ * The custom element is a way to bypass the rest of the `raw-handling`
+ * transforms, which would eliminate other kinds of node with which to carry
+ * `<!--more-->`'s data: nodes with `data` attributes, empty paragraphs, etc.
+ *
+ * The custom element is then expected to be recognized by any registered
+ * block's `raw` transform.
+ *
+ * @param {Node} node The node to be processed.
+ * @return {void}
+ */
+export default function( node ) {
+	if (
+		node.nodeType !== COMMENT_NODE ||
+		node.nodeValue.indexOf( 'more' ) !== 0
+	) {
+		// We don't specificially look for `noteaser`, meaning that if one is
+		// found on its own (and not adjacent to `more`), it will be lost.
+		return;
+	}
+
+	// Grab any custom text in the comment
+	const customText = node.nodeValue.slice( 4 ).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 );
+
+	// Append it to the top level for later conversion to blocks
+	let parent = node.parentNode;
+	while ( parent.nodeName !== 'BODY' ) {
+		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/raw-handling/test/special-comment-converter.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { equal } from 'assert';
+
+/**
+ * Internal dependencies
+ */
+import specialCommentConverter from '../special-comment-converter';
+import { deepFilterHTML } from '../utils';
+
+describe( 'specialCommentConverter', () => {
+	it( 'should convert a single comment into a basic block', () => {
+		equal(
+			deepFilterHTML( '<!--more-->', [ specialCommentConverter ] ),
+			'<wp-block data-block="core/more"></wp-block>'
+		);
+	} );
+	it( 'should convert two comments into a block', () => {
+		equal(
+			deepFilterHTML( '<!--more--><!--noteaser-->', [ specialCommentConverter ] ),
+			'<wp-block data-block="core/more" data-no-teaser=""></wp-block>'
+		);
+	} );
+	it( 'should pass custom text to the block', () => {
+		equal(
+			deepFilterHTML(
+				'<!--more Read all about it!--><!--noteaser-->',
+				[ specialCommentConverter ]
+			),
+			'<wp-block data-block="core/more" data-custom-text="Read all about it!" data-no-teaser=""></wp-block>'
+		);
+	} );
+	it( 'should handle reformatted content', () => {
+		const output = deepFilterHTML(
+			`<p>
+				<!--more-->
+				<!--noteaser-->
+			</p>`,
+			[ specialCommentConverter ]
+		);
+		// Skip the empty paragraph, which other transforms would eliminate
+		const start = output.indexOf( '</p>' ) + '</p>'.length;
+		equal(
+			output.substr( start ),
+			'<wp-block data-block="core/more" data-no-teaser=""></wp-block>'
+		);
+	} );
+} );

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

@@ -283,54 +283,6 @@ 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,
-				} );
-			} );
-
-			it( 'serializes without text', () => {
-				const block = createBlock( 'core/more', {} );
-
-				const content = serializeBlock( block );
-
-				expect( content ).toBe( '<!--more-->' );
-			} );
-
-			it( 'serializes with text', () => {
-				const block = createBlock( 'core/more', {
-					customText: 'Read more!',
-				} );
-
-				const content = serializeBlock( block );
-
-				expect( content ).toBe( '<!--more Read more!-->' );
-			} );
-
-			it( 'serializes with no teaser', () => {
-				const block = createBlock( 'core/more', {
-					noTeaser: true,
-				} );
-
-				const content = serializeBlock( block );
-
-				expect( content ).toBe( '<!--more-->\n<!--noteaser-->' );
-			} );
-		} );
-
 		it( 'serializes the fallback block without comment delimiters', () => {
 			registerBlockType( 'core/unknown-block', {
 				category: 'common',

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 && 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 -->