From b6eae18b7f08da2a7711999ba1b8f536c75cc11f Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Tue, 19 Feb 2019 10:51:34 -0800 Subject: [PATCH 1/3] Add ESNext syntax to meta block tutorial --- .../tutorials/metabox/meta-block-3-add.md | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md b/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md index 0ad9966b91a12c..df78956ef6de53 100644 --- a/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md +++ b/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md @@ -10,6 +10,8 @@ By specifying the source of the attributes as `meta`, the Block Editor automatic Add this code to your JavaScript file (this tutorial will call the file `myguten.js`): +{% codetabs %} +{% ES5 %} ```js ( function( wp ) { var el = wp.element.createElement; @@ -56,6 +58,49 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten }); })( window.wp ); ``` +{% ESNext %} +```jsx +const { registerBlockType } = wp.blocks; +const TextField = wp.components.TextControl; + +registerBlockType("myguten/meta-block", { + title: "Meta Block", + icon: "smiley", + category: "common", + + attributes: { + blockValue: { + type: "string", + source: "meta", + meta: "myguten_meta_block_field" + } + }, + + edit( { className, setAttributes, attributes } ) { + + function updateBlockValue( blockValue ) { + setAttributes({ blockValue }); + } + + return ( +
+ +
+ ); + }, + + // No information saved to the block + // Data is saved to post meta via attributes + save() { + return null; + } +}); +``` +{% end %} **Important:** Before you test, you need to enqueue your JavaScript file and its dependencies. Note the WordPress packages used above are `wp.element`, `wp.blocks`, and `wp.components`. Each of these need to be included in the array of dependencies. Update the `myguten-meta-block.php` file adding the enqueue function: From f5e94311a650b3e72d300e90f5debbe368da9a0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Wed, 20 Feb 2019 08:36:04 +0100 Subject: [PATCH 2/3] Applied WordPress code styles to the examples --- .../tutorials/metabox/meta-block-3-add.md | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md b/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md index df78956ef6de53..27bbbb4a47ae68 100644 --- a/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md +++ b/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md @@ -16,22 +16,22 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten ( function( wp ) { var el = wp.element.createElement; var registerBlockType = wp.blocks.registerBlockType; - var TextField = wp.components.TextControl; + var TextControl = wp.components.TextControl; - registerBlockType("myguten/meta-block", { - title: "Meta Block", - icon: "smiley", - category: "common", + registerBlockType( 'myguten/meta-block', { + title: 'Meta Block', + icon: 'smiley', + category: 'common', attributes: { blockValue: { - type: "string", - source: "meta", - meta: "myguten_meta_block_field" + type: 'string', + source: 'meta', + meta: 'myguten_meta_block_field' } }, - edit: function(props) { + edit: function( props ) { var className = props.className; var setAttributes = props.setAttributes; @@ -39,11 +39,11 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten setAttributes({ blockValue }); } - return el( - "div", + return el( + 'div', { className: className }, - el( TextField, { - label: "Meta Block Field", + el( TextControl, { + label: 'Meta Block Field', value: props.attributes.blockValue, onChange: updateBlockValue } ) @@ -55,38 +55,38 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten save: function() { return null; } - }); -})( window.wp ); + } ); +} )( window.wp ); ``` {% ESNext %} ```jsx const { registerBlockType } = wp.blocks; -const TextField = wp.components.TextControl; +const { TextControl } = wp.components; -registerBlockType("myguten/meta-block", { - title: "Meta Block", - icon: "smiley", - category: "common", +registerBlockType( 'myguten/meta-block', { + title: 'Meta Block', + icon: 'smiley', + category: 'common', attributes: { blockValue: { - type: "string", - source: "meta", - meta: "myguten_meta_block_field" - } + type: 'string', + source: 'meta', + meta: 'myguten_meta_block_field', + }, }, edit( { className, setAttributes, attributes } ) { function updateBlockValue( blockValue ) { - setAttributes({ blockValue }); + setAttributes( { blockValue } ); } return (
-
@@ -98,7 +98,7 @@ registerBlockType("myguten/meta-block", { save() { return null; } -}); +} ); ``` {% end %} From 5b008afd2063f598b472033a1af0ad63b8fc7fbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 20 Feb 2019 06:51:28 -0800 Subject: [PATCH 3/3] Apply suggestions from code review Co-Authored-By: mkaz --- .../developers/tutorials/metabox/meta-block-3-add.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md b/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md index 27bbbb4a47ae68..4f6e54f148ed7b 100644 --- a/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md +++ b/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md @@ -60,8 +60,8 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten ``` {% ESNext %} ```jsx -const { registerBlockType } = wp.blocks; -const { TextControl } = wp.components; +import { registerBlockType } from '@wordpress/blocks'; +import { TextControl } from '@wordpress/components'; registerBlockType( 'myguten/meta-block', { title: 'Meta Block',