Add "More" block.

blocks/api/post.pegjs

@@ -31,7 +31,7 @@ WP_Tag_More
   = "<!--" WS* "more" customText:(WS+ text:$((!(WS* "-->") .)+) { /** <?php return $text; ?> **/ return text })? WS* "-->" noTeaser:(WS* "<!--noteaser-->")?
   { /** <?php
     return array(
-       'blockName' => 'wp:core/more',
+       'blockName' => 'core/more',
        'attrs' => array(
          'customText' => $customText,
          'noTeaser' => (bool) $noTeaser
@@ -40,7 +40,7 @@ WP_Tag_More
     );
     ?> **/
     return {
-      blockName: 'wp:core/more',
+      blockName: 'core/more',
       attrs: {
         customText: customText,
         noTeaser: !! noTeaser
@@ -95,7 +95,7 @@ WP_Block_Balanced
   }
 
 WP_Block_Html
-  = ts:(!WP_Block_Balanced !WP_Block_Void c:Any {
+  = ts:(!WP_Block_Balanced !WP_Block_Void !WP_Tag_More c:Any {
     /** <?php return $c; ?> **/
     return c;
   })+

blocks/api/serializer.js

@@ -140,8 +140,8 @@ export function serializeBlock( block ) {
 
 	const saveAttributes = getCommentAttributes( block.attributes, parseBlockAttributes( saveContent, blockType.attributes ) );
 
-	if ( 'wp:core/more' === blockName ) {
-		return `<!-- more ${ saveAttributes.customText ? `${ saveAttributes.customText } ` : '' }-->${ saveAttributes.noTeaser ? '\n<!--noteaser-->' : '' }`;
+	if ( 'core/more' === blockName ) {
+		return `<!--more${ saveAttributes.text ? ` ${ saveAttributes.text }` : '' }-->${ saveAttributes.noTeaser ? '\n<!--noteaser-->' : '' }`;
 	}
 
 	const serializedAttributes = ! isEmpty( saveAttributes )

blocks/library/index.js

@@ -6,6 +6,7 @@ import './quote';
 import './embed';
 import './list';
 import './separator';
+import './more';
 import './button';
 import './pullquote';
 import './table';

blocks/library/more/index.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlockType } from '../../api';
+import InspectorControls from '../../inspector-controls';
+import BlockDescription from '../../block-description';
+import ToggleControl from '../../inspector-controls/toggle-control';
+
+registerBlockType( 'core/more', {
+	title: __( 'More' ),
+
+	icon: 'editor-insertmore',
+
+	category: 'layout',
+
+	useOnce: true,
+
+	className: false,
+
+	edit( { attributes, setAttributes, focus, setFocus } ) {
+		const { text, noTeaser } = attributes;
+
+		const toggleNoTeaser = () => setAttributes( { noTeaser: ! noTeaser } );
+		const defaultText = __( 'Read more' );
+		const value = text !== undefined ? text : defaultText;
+		const inputLength = value.length ? value.length + 1 : 1;
+
+		return [
+			focus && (
+				<InspectorControls key="inspector">
+					<BlockDescription>
+						<p>{ __( '"More" allows you to break your post into a part shown on index pages, and the subsequent after clicking a "Read More" link.' ) }</p>
+					</BlockDescription>
+					<ToggleControl
+						label={ __( 'Hide the teaser before the "More" tag' ) }
+						checked={ !! noTeaser }
+						onChange={ toggleNoTeaser }
+					/>
+				</InspectorControls>
+			),
+			<div key="more-tag" className="wp-block-more">
+				<input
+					type="text"
+					value={ value }
+					size={ inputLength }
+					onChange={ ( event ) => setAttributes( { text: event.target.value } ) }
+					onFocus={ setFocus }
+				/>
+			</div>,
+		];
+	},
+
+	save( { attributes } ) {
+		const { text } = attributes;
+
+		return text;
+	},
+} );

blocks/library/more/style.scss

@@ -0,0 +1,34 @@
+.editor-visual-editor__block[data-type="core/more"] {
+	max-width: 100%;
+	text-align: center;
+}
+
+.editor-visual-editor__block .wp-block-more {
+	input {
+		font-size: 12px;
+		text-transform: uppercase;
+		font-weight: 600;
+		font-family: $default-font;
+		color: $dark-gray-300;
+		padding-left: 8px;
+		padding-right: 8px;
+		background: $white;
+		border: none;
+		box-shadow: none;
+		white-space: nowrap;
+
+		&:focus {
+			box-shadow: none;
+		}
+	}
+
+	&:before {
+		content: '';
+		position: absolute;
+		top: calc( 50% );
+		left: $block-mover-padding-visible + $block-padding;
+		right: $block-mover-padding-visible + $block-padding;
+		border-top: 3px dashed $light-gray-700;
+		z-index: z-index( '.editor-visual-editor__block .wp-block-more:before' );
+	}
+}

blocks/test/fixtures/core__more.html

@@ -0,0 +1 @@
+<!--more-->

blocks/test/fixtures/core__more.json

@@ -0,0 +1,11 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/more",
+        "isValid": true,
+        "attributes": {
+            "customText": null,
+            "noTeaser": false
+        }
+    }
+]

blocks/test/fixtures/core__more.parsed.json

@@ -0,0 +1,14 @@
+[
+    {
+        "blockName": "core/more",
+        "attrs": {
+            "customText": null,
+            "noTeaser": false
+        },
+        "rawContent": ""
+    },
+    {
+        "attrs": {},
+        "rawContent": "\n"
+    }
+]

blocks/test/fixtures/core__more.serialized.html

@@ -0,0 +1 @@
+<!--more-->

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

@@ -0,0 +1,2 @@
+<!--more Continue Reading-->
+<!--noteaser-->

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

@@ -0,0 +1,11 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/more",
+        "isValid": true,
+        "attributes": {
+            "customText": "Continue Reading",
+            "noTeaser": true
+        }
+    }
+]

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

@@ -0,0 +1,14 @@
+[
+    {
+        "blockName": "core/more",
+        "attrs": {
+            "customText": "Continue Reading",
+            "noTeaser": true
+        },
+        "rawContent": ""
+    },
+    {
+        "attrs": {},
+        "rawContent": "\n"
+    }
+]

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

@@ -0,0 +1,2 @@
+<!--more-->
+<!--noteaser-->

blocks/test/full-content.js

@@ -205,9 +205,11 @@ describe( 'full post content fixture', () => {
 				) )
 				.map( basename => {
 					const filename = basename + '.html';
+					const parsedBlockFilename = basename + '.json';
 					return {
 						filename,
 						contents: readFixtureFile( filename ),
+						parsed: JSON.parse( readFixtureFile( parsedBlockFilename ) )[ 0 ],
 					};
 				} )
 				.filter( fixture => fixture.contents !== null );
@@ -221,10 +223,7 @@ describe( 'full post content fixture', () => {
 			}
 
 			foundFixtures.forEach( fixture => {
-				const delimiter = new RegExp(
-					'<!--\\s*wp:' + name + '(\\s+|\\s*-->)'
-				);
-				if ( ! delimiter.test( fixture.contents ) ) {
+				if ( name !== fixture.parsed.name ) {
 					errors.push( format(
 						'Expected fixture file \'%s\' to test the \'%s\' block.',
 						fixture.filename,

editor/assets/stylesheets/_z-index.scss

@@ -5,6 +5,7 @@
 $z-layers: (
 	'.editor-block-switcher__arrow': 1,
 	'.editor-visual-editor__block:before': -1,
+	'.editor-visual-editor__block .wp-block-more:before': -1,
 	'.editor-visual-editor__block {core/image aligned left or right}': 10,
 	'.editor-visual-editor__block-controls': 1,
 	'.editor-visual-editor__invalid-block-warning': 1,

lib/parser.php

@@ -266,7 +266,7 @@ private function peg_buildException($message, $expected, $pos) {
     private function peg_f0($text) { return $text; }
     private function peg_f1($customText, $noTeaser) {
         return array(
-           'blockName' => 'wp:core/more',
+           'blockName' => 'core/more',
            'attrs' => array(
              'customText' => $customText,
              'noTeaser' => (bool) $noTeaser
@@ -861,11 +861,26 @@ private function peg_parseWP_Block_Html() {
           $s4 = $this->peg_FAILED;
         }
         if ($s4 !== $this->peg_FAILED) {
-          $s5 = $this->peg_parseAny();
+          $s5 = $this->peg_currPos;
+          $this->peg_silentFails++;
+          $s6 = $this->peg_parseWP_Tag_More();
+          $this->peg_silentFails--;
+          if ($s6 === $this->peg_FAILED) {
+            $s5 = null;
+          } else {
+            $this->peg_currPos = $s5;
+            $s5 = $this->peg_FAILED;
+          }
           if ($s5 !== $this->peg_FAILED) {
-            $this->peg_reportedPos = $s2;
-            $s3 = $this->peg_f7($s5);
-            $s2 = $s3;
+            $s6 = $this->peg_parseAny();
+            if ($s6 !== $this->peg_FAILED) {
+              $this->peg_reportedPos = $s2;
+              $s3 = $this->peg_f7($s6);
+              $s2 = $s3;
+            } else {
+              $this->peg_currPos = $s2;
+              $s2 = $this->peg_FAILED;
+            }
           } else {
             $this->peg_currPos = $s2;
             $s2 = $this->peg_FAILED;
@@ -904,11 +919,26 @@ private function peg_parseWP_Block_Html() {
               $s4 = $this->peg_FAILED;
             }
             if ($s4 !== $this->peg_FAILED) {
-              $s5 = $this->peg_parseAny();
+              $s5 = $this->peg_currPos;
+              $this->peg_silentFails++;
+              $s6 = $this->peg_parseWP_Tag_More();
+              $this->peg_silentFails--;
+              if ($s6 === $this->peg_FAILED) {
+                $s5 = null;
+              } else {
+                $this->peg_currPos = $s5;
+                $s5 = $this->peg_FAILED;
+              }
               if ($s5 !== $this->peg_FAILED) {
-                $this->peg_reportedPos = $s2;
-                $s3 = $this->peg_f7($s5);
-                $s2 = $s3;
+                $s6 = $this->peg_parseAny();
+                if ($s6 !== $this->peg_FAILED) {
+                  $this->peg_reportedPos = $s2;
+                  $s3 = $this->peg_f7($s6);
+                  $s2 = $s3;
+                } else {
+                  $this->peg_currPos = $s2;
+                  $s2 = $this->peg_FAILED;
+                }
               } else {
                 $this->peg_currPos = $s2;
                 $s2 = $this->peg_FAILED;

post-content.js

@@ -26,8 +26,6 @@ window._wpGutenbergPost.content = {
 		'<p style="text-align:right">... like this one, which is right aligned.</p>',
 		'<!-- /wp:core/text -->',
 
-		'<!-- wp:core/more /-->',
-
 		'<!-- wp:core/text -->',
 		'<p>Headings are separate blocks as well, which helps with the outline and organization of your content.</p>',
 		'<!-- /wp:core/text -->',