From 34d25a7cf63770e620872529ec091b7e1c221f2b Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Wed, 17 Jun 2020 18:13:29 +0200 Subject: [PATCH 1/2] Block Editor: Try BlockToken component and block --- .../src/components/block-token/index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 packages/block-editor/src/components/block-token/index.js diff --git a/packages/block-editor/src/components/block-token/index.js b/packages/block-editor/src/components/block-token/index.js new file mode 100644 index 0000000000000..672d30b4267b6 --- /dev/null +++ b/packages/block-editor/src/components/block-token/index.js @@ -0,0 +1,17 @@ +/** + * Internal dependencies + */ +import { InnerBlocks } from '../inner-blocks'; + +const BlockToken = ( { type } ) => { + return ( + + ); +}; + +export default BlockToken; From e157fb64e11916b1bbafbe04f93233b9f1d67145 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Thu, 18 Jun 2020 11:08:15 +0200 Subject: [PATCH 2/2] Block: Try Token block with dynamic content --- lib/blocks.php | 1 + .../src/components/block-token/index.js | 19 ++++++++-- packages/block-editor/src/components/index.js | 1 + packages/block-library/src/file/block.json | 5 --- packages/block-library/src/file/edit.js | 37 ++++--------------- packages/block-library/src/file/save.js | 5 +-- packages/block-library/src/index.js | 2 + packages/block-library/src/token/block.json | 20 ++++++++++ packages/block-library/src/token/edit.js | 32 ++++++++++++++++ packages/block-library/src/token/index.js | 20 ++++++++++ packages/block-library/src/token/index.php | 34 +++++++++++++++++ 11 files changed, 135 insertions(+), 41 deletions(-) create mode 100644 packages/block-library/src/token/block.json create mode 100644 packages/block-library/src/token/edit.js create mode 100644 packages/block-library/src/token/index.js create mode 100644 packages/block-library/src/token/index.php diff --git a/lib/blocks.php b/lib/blocks.php index 80522bda95367..5a16bd26c3b57 100644 --- a/lib/blocks.php +++ b/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' ) ) { diff --git a/packages/block-editor/src/components/block-token/index.js b/packages/block-editor/src/components/block-token/index.js index 672d30b4267b6..343cfe83d8961 100644 --- a/packages/block-editor/src/components/block-token/index.js +++ b/packages/block-editor/src/components/block-token/index.js @@ -1,13 +1,24 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + /** * Internal dependencies */ -import { InnerBlocks } from '../inner-blocks'; +import InnerBlocks from '../inner-blocks'; + +const ALLOWED_BLOCKS = [ 'core/token' ]; + +const BlockToken = ( { className, initialValue, tagName } ) => { + const [ initialTemplate ] = useState( [ + [ 'core/token', { className, tagName, content: initialValue } ], + ] ); -const BlockToken = ( { type } ) => { return ( diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index e810619fd2532..5640db9b787d9 100644 --- a/packages/block-editor/src/components/index.js +++ b/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'; diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json index 664ec1154a4d0..d07263ef01661 100644 --- a/packages/block-library/src/file/block.json +++ b/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": { diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index 7f0ab5c3720f1..ce87ecd61f59a 100644 --- a/packages/block-library/src/file/edit.js +++ b/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 */ } - - setAttributes( { - downloadButtonText: text, - } ) - } + ) } diff --git a/packages/block-library/src/file/save.js b/packages/block-library/src/file/save.js index 25102dfd0f92d..27db92254bfe1 100644 --- a/packages/block-library/src/file/save.js +++ b/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 } > - + ) } diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index cf54d74dab512..6a92fe7a889a2 100644 --- a/packages/block-library/src/index.js +++ b/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 ); diff --git a/packages/block-library/src/token/block.json b/packages/block-library/src/token/block.json new file mode 100644 index 0000000000000..fdd7d6c5c91b6 --- /dev/null +++ b/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 + } +} diff --git a/packages/block-library/src/token/edit.js b/packages/block-library/src/token/edit.js new file mode 100644 index 0000000000000..9e353fac01f76 --- /dev/null +++ b/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 ( + setAttributes( { content: value } ) } + /> + ); + } + + return ( + + + + ); +} diff --git a/packages/block-library/src/token/index.js b/packages/block-library/src/token/index.js new file mode 100644 index 0000000000000..45cffd5d49247 --- /dev/null +++ b/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, +}; diff --git a/packages/block-library/src/token/index.php b/packages/block-library/src/token/index.php new file mode 100644 index 0000000000000..1917cb51c4a85 --- /dev/null +++ b/packages/block-library/src/token/index.php @@ -0,0 +1,34 @@ + 'render_block_core_token', + ) + ); +} +add_action( 'init', 'register_block_core_token' );