Merge pull request #2828 from WordPress/fix/post-content-teaser

Blocks: Fix demo teaser markup, More block custom text

blocks/api/post.pegjs

@@ -30,19 +30,20 @@ WP_Block
 WP_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' => array(
-         'customText' => $customText,
-         'noTeaser' => (bool) $noTeaser
-       ),
+       'attrs' => $attrs,
        'rawContent' => ''
     );
     ?> **/
     return {
       blockName: 'core/more',
       attrs: {
-        customText: customText,
+        customText: customText || undefined,
         noTeaser: !! noTeaser
       },
       rawContent: ''

blocks/api/serializer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, reduce, isObject, castArray } from 'lodash';
+import { isEmpty, reduce, isObject, castArray, compact } from 'lodash';
 import { html as beautifyHtml } from 'js-beautify';
 import classnames from 'classnames';
 
@@ -187,8 +187,17 @@ export function serializeBlock( block ) {
 
 	switch ( blockName ) {
 		case 'core/more':
-			const { text, noTeaser } = saveAttributes;
-			return `<!--more${ text ? ` ${ text }` : '' }-->${ noTeaser ? '\n<!--noteaser-->' : '' }`;
+			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

@@ -271,7 +271,7 @@ describe( 'block serializer', () => {
 					category: 'layout',
 					title: 'more',
 					attributes: {
-						text: {
+						customText: {
 							type: 'string',
 						},
 						noTeaser: {
@@ -280,7 +280,7 @@ describe( 'block serializer', () => {
 						},
 					},
 
-					save: ( { attributes } ) => attributes.text,
+					save: ( { attributes } ) => attributes.customText,
 				} );
 			} );
 
@@ -294,7 +294,7 @@ describe( 'block serializer', () => {
 
 			it( 'serializes with text', () => {
 				const block = createBlock( 'core/more', {
-					text: 'Read more!',
+					customText: 'Read more!',
 				} );
 
 				const content = serializeBlock( block );

blocks/library/more/index.js

@@ -24,7 +24,7 @@ registerBlockType( 'core/more', {
 	className: false,
 
 	attributes: {
-		text: {
+		customText: {
 			type: 'string',
 		},
 		noTeaser: {
@@ -34,11 +34,11 @@ registerBlockType( 'core/more', {
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus } ) {
-		const { text, noTeaser } = attributes;
+		const { customText, noTeaser } = attributes;
 
 		const toggleNoTeaser = () => setAttributes( { noTeaser: ! noTeaser } );
 		const defaultText = __( 'Read more' );
-		const value = text !== undefined ? text : defaultText;
+		const value = customText !== undefined ? customText : defaultText;
 		const inputLength = value.length ? value.length + 1 : 1;
 
 		return [
@@ -59,16 +59,14 @@ registerBlockType( 'core/more', {
 					type="text"
 					value={ value }
 					size={ inputLength }
-					onChange={ ( event ) => setAttributes( { text: event.target.value } ) }
+					onChange={ ( event ) => setAttributes( { customText: event.target.value } ) }
 					onFocus={ setFocus }
 				/>
 			</div>,
 		];
 	},
 
-	save( { attributes } ) {
-		const { text } = attributes;
-
-		return text;
+	save() {
+		return null;
 	},
 } );

blocks/test/fixtures/core__more.parsed.json

@@ -2,7 +2,6 @@
     {
         "blockName": "core/more",
         "attrs": {
-            "customText": null,
             "noTeaser": false
         },
         "rawContent": ""

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

@@ -4,6 +4,7 @@
         "name": "core/more",
         "isValid": true,
         "attributes": {
+            "customText": "Continue Reading",
             "noTeaser": true
         },
         "originalContent": ""

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

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

lib/parser.php

@@ -265,12 +265,13 @@ private function peg_buildException($message, $expected, $pos) {
 
     private function peg_f0($text) { return $text; }
     private function peg_f1($customText, $noTeaser) {
+        $attrs = array( 'noTeaser' => (bool) $noTeaser );
+        if ( ! empty( $customText ) ) {
+          $attrs['customText'] = $customText;
+        }
         return array(
            'blockName' => 'core/more',
-           'attrs' => array(
-             'customText' => $customText,
-             'noTeaser' => (bool) $noTeaser
-           ),
+           'attrs' => $attrs,
            'rawContent' => ''
         );
         }

post-content.js

@@ -11,8 +11,7 @@ window._wpGutenbergPost.content = {
 		'<section class="wp-block-cover-image has-parallax has-background-dim" style="background-image:url(https://cldup.com/GCwahb3aOb.jpg)"><h2>Of mountains &amp; printing presses</h2></section>',
 		'<!-- /wp:core/cover-image -->',
 
-		'<!-- more Keep on reading! -->',
-		'<!-- noteaser -->',
+		'<!--more Keep on reading!-->\n<!--noteaser-->',
 
 		'<!-- wp:core/paragraph -->',
 		'<p>The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of <em>pieces of content</em>—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you&#x27;ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.</p>',