Block Editor: Experiment with dynamic content as tokens

lib/blocks.php

@@ -66,6 +66,7 @@ function gutenberg_reregister_core_block_types() {
 		'shortcode.php'       => 'core/shortcode',
 		'social-link.php'     => 'core/social-link',
 		'tag-cloud.php'       => 'core/tag-cloud',
+		'token.php'           => 'core/token',
 	);
 
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ) ) {

packages/block-editor/src/components/block-token/index.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InnerBlocks from '../inner-blocks';
+
+const ALLOWED_BLOCKS = [ 'core/token' ];
+
+const BlockToken = ( { className, initialValue, tagName } ) => {
+	const [ initialTemplate ] = useState( [
+		[ 'core/token', { className, tagName, content: initialValue } ],
+	] );
+
+	return (
+		<InnerBlocks
+			allowedBlocks={ ALLOWED_BLOCKS }
+			template={ initialTemplate }
+			templateLock="all"
+			__experimentalCaptureToolbars
+		/>
+	);
+};
+
+export default BlockToken;

packages/block-editor/src/components/index.js

@@ -20,6 +20,7 @@ export { default as BlockNavigationDropdown } from './block-navigation/dropdown'
 export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-slot';
 export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor';
 export { default as __experimentalBlockNavigationTree } from './block-navigation/tree';
+export { default as __unstableBlockToken } from './block-token';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
 export { default as ButtonBlockerAppender } from './button-block-appender';

packages/block-library/src/file/block.json

@@ -28,11 +28,6 @@
 		"showDownloadButton": {
 			"type": "boolean",
 			"default": true
-		},
-		"downloadButtonText": {
-			"type": "string",
-			"source": "html",
-			"selector": "a[download]"
 		}
 	},
 	"supports": {

packages/block-library/src/file/edit.js

@@ -13,12 +13,13 @@ import { withSelect } from '@wordpress/data';
 import {
 	BlockControls,
 	BlockIcon,
+	__unstableBlockToken as BlockToken,
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	RichText,
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
 
 /**
@@ -49,13 +50,8 @@ class FileEdit extends Component {
 	}
 
 	componentDidMount() {
-		const {
-			attributes,
-			mediaUpload,
-			noticeOperations,
-			setAttributes,
-		} = this.props;
-		const { downloadButtonText, href } = attributes;
+		const { attributes, mediaUpload, noticeOperations } = this.props;
+		const { href } = attributes;
 
 		// Upload a file drag-and-dropped into the editor
 		if ( isBlobURL( href ) ) {
@@ -72,12 +68,6 @@ class FileEdit extends Component {
 
 			revokeBlobURL( href );
 		}
-
-		if ( downloadButtonText === undefined ) {
-			setAttributes( {
-				downloadButtonText: _x( 'Download', 'button label' ),
-			} );
-		}
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -144,7 +134,6 @@ class FileEdit extends Component {
 			textLinkHref,
 			textLinkTarget,
 			showDownloadButton,
-			downloadButtonText,
 		} = attributes;
 		const { hasError, showCopyConfirmation } = this.state;
 		const attachmentPage = media && media.link;
@@ -219,20 +208,10 @@ class FileEdit extends Component {
 											'wp-block-file__button-richtext-wrapper'
 										}
 									>
-										{ /* Using RichText here instead of PlainText so that it can be styled like a button */ }
-										<RichText
-											tagName="div" // must be block-level or else cursor disappears
-											className={
-												'wp-block-file__button'
-											}
-											value={ downloadButtonText }
-											withoutInteractiveFormatting
-											placeholder={ __( 'Add text…' ) }
-											onChange={ ( text ) =>
-												setAttributes( {
-													downloadButtonText: text,
-												} )
-											}
+										<BlockToken
+											tagName="div"
+											className="wp-block-file__button"
+											initialValue="Download"
 										/>
 									</div>
 								) }

packages/block-library/src/file/save.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const {
@@ -10,7 +10,6 @@ export default function save( { attributes } ) {
 		textLinkHref,
 		textLinkTarget,
 		showDownloadButton,
-		downloadButtonText,
 	} = attributes;
 
 	return (
@@ -31,7 +30,7 @@ export default function save( { attributes } ) {
 						className="wp-block-file__button"
 						download={ true }
 					>
-						<RichText.Content value={ downloadButtonText } />
+						<InnerBlocks.Content />
 					</a>
 				) }
 			</div>

packages/block-library/src/index.js

@@ -48,6 +48,7 @@ import * as pullquote from './pullquote';
 import * as reusableBlock from './block';
 import * as rss from './rss';
 import * as search from './search';
+import * as token from './token';
 import * as group from './group';
 import * as separator from './separator';
 import * as shortcode from './shortcode';
@@ -156,6 +157,7 @@ export const registerCoreBlocks = () => {
 		table,
 		tagCloud,
 		textColumns,
+		token,
 		verse,
 		video,
 	].forEach( registerBlock );

packages/block-library/src/token/block.json

@@ -0,0 +1,20 @@
+{
+	"name": "core/token",
+	"category": "text",
+	"attributes": {
+		"className": {
+			"type": "string"
+		},
+		"tagName": {
+			"type": "string"
+		},
+		"content": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"customClassName": true,
+		"html": false,
+		"inserter": false
+	}
+}

packages/block-library/src/token/edit.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+
+export default function TokenEdit( {
+	attributes,
+	className,
+	isSelected,
+	setAttributes,
+} ) {
+	const { content, tagName: Tag } = attributes;
+
+	if ( isSelected ) {
+		return (
+			<RichText
+				identifier="content"
+				className={ className }
+				tagName={ Tag }
+				value={ content }
+				onChange={ ( value ) => setAttributes( { content: value } ) }
+			/>
+		);
+	}
+
+	return (
+		<Tag className={ className }>
+			<ServerSideRender block="core/token" attributes={ attributes } />
+		</Tag>
+	);
+}

packages/block-library/src/token/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Block Token' ),
+	description: __( 'Allows using dynamic data.' ),
+	edit,
+};

packages/block-library/src/token/index.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Server-side rendering of the `core/token` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/token` block on server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Rendered HTML of the referenced block.
+ */
+function render_block_core_token( $attributes ) {
+	if ( empty( $attributes ) ) {
+		return '';
+	}
+
+	return __( $attributes['content'] );
+}
+
+/**
+ * Registers the `core/token` block.
+ */
+function register_block_core_token() {
+	register_block_type_from_metadata(
+		__DIR__ . '/token',
+		array(
+			'render_callback' => 'render_block_core_token',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_token' );