Enhance the shortcode block to support previewing of shortcodes

README.md

@@ -71,4 +71,4 @@ Please see <a href="https://github.com/WordPress/gutenberg/blob/master/CONTRIBUT
 - <a href="https://make.wordpress.org/core/tag/gutenberg/">Development updates on make.wordpress.org</a>
 - <a href="https://wordpress.org/gutenberg/handbook/">Documentation: Creating Blocks, Reference, and Guidelines</a>
 
-<br/><br/>![Code is Poetry.](https://cldup.com/ZdtsUVg_V3.png)
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

blocks/api/index.js

@@ -22,8 +22,10 @@ export {
 	getUnknownTypeHandlerName,
 	setDefaultBlockName,
 	getDefaultBlockName,
+	getDefaultBlockForPostFormat,
 	getBlockType,
 	getBlockTypes,
+	getBlockSupport,
 	hasBlockSupport,
 	isReusableBlock,
 } from './registration';

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

@@ -63,6 +63,19 @@ let unknownTypeHandlerName;
  */
 let defaultBlockName;
 
+/**
+ * Constant mapping post formats to the expected default block.
+ *
+ * @type {Object}
+ */
+const POST_FORMAT_BLOCK_MAP = {
+	audio: 'core/audio',
+	gallery: 'core/gallery',
+	image: 'core/image',
+	quote: 'core/quote',
+	video: 'core/video',
+};
+
 /**
  * Registers a new block provided a unique name and an object defining its
  * behavior. Once registered, the block is made available as an option to any
@@ -93,21 +106,24 @@ export function registerBlockType( name, settings ) {
 		);
 		return;
 	}
-	if ( ! settings || ! isFunction( settings.save ) ) {
+	if ( blocks[ name ] ) {
 		console.error(
-			'The "save" property must be specified and must be a valid function.'
+			'Block "' + name + '" is already registered.'
 		);
 		return;
 	}
-	if ( 'edit' in settings && ! isFunction( settings.edit ) ) {
+
+	settings = applyFilters( 'blocks.registerBlockType', settings, name );
+
+	if ( ! settings || ! isFunction( settings.save ) ) {
 		console.error(
-			'The "edit" property must be a valid function.'
+			'The "save" property must be specified and must be a valid function.'
 		);
 		return;
 	}
-	if ( blocks[ name ] ) {
+	if ( 'edit' in settings && ! isFunction( settings.edit ) ) {
 		console.error(
-			'Block "' + name + '" is already registered.'
+			'The "edit" property must be a valid function.'
 		);
 		return;
 	}
@@ -145,8 +161,6 @@ export function registerBlockType( name, settings ) {
 		settings.icon = 'block-default';
 	}
 
-	settings = applyFilters( 'blocks.registerBlockType', settings, name );
-
 	return blocks[ name ] = settings;
 }
 
@@ -201,12 +215,26 @@ export function setDefaultBlockName( name ) {
 /**
  * Retrieves the default block name.
  *
- * @return {?string} Blog name.
+ * @return {?string} Block name.
  */
 export function getDefaultBlockName() {
 	return defaultBlockName;
 }
 
+/**
+ * Retrieves the expected default block for the post format.
+ *
+ * @param	{string} postFormat Post format
+ * @return {string}            Block name.
+ */
+export function getDefaultBlockForPostFormat( postFormat ) {
+	const blockName = POST_FORMAT_BLOCK_MAP[ postFormat ];
+	if ( blockName && getBlockType( blockName ) ) {
+		return blockName;
+	}
+	return null;
+}
+
 /**
  * Returns a registered block type.
  *
@@ -227,6 +255,26 @@ export function getBlockTypes() {
 	return Object.values( blocks );
 }
 
+/**
+ * Returns the block support value for a feature, if defined.
+ *
+ * @param  {(string|Object)} nameOrType      Block name or type object
+ * @param  {string}          feature         Feature to retrieve
+ * @param  {*}               defaultSupports Default value to return if not
+ *                                           explicitly defined
+ * @return {?*}                              Block support value
+ */
+export function getBlockSupport( nameOrType, feature, defaultSupports ) {
+	const blockType = 'string' === typeof nameOrType ?
+		getBlockType( nameOrType ) :
+		nameOrType;
+
+	return get( blockType, [
+		'supports',
+		feature,
+	], defaultSupports );
+}
+
 /**
  * Returns true if the block defines support for a feature, or false otherwise.
  *
@@ -238,14 +286,7 @@ export function getBlockTypes() {
  * @return {boolean} Whether block supports feature.
  */
 export function hasBlockSupport( nameOrType, feature, defaultSupports ) {
-	const blockType = 'string' === typeof nameOrType ?
-		getBlockType( nameOrType ) :
-		nameOrType;
-
-	return !! get( blockType, [
-		'supports',
-		feature,
-	], defaultSupports );
+	return !! getBlockSupport( nameOrType, feature, defaultSupports );
 }
 
 /**

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;