From 5516252c8bbde18bcc6d161131e5f2e15948457a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 19 Oct 2021 10:32:25 -0400 Subject: [PATCH 1/3] Add .eslintrc --- 04-controls/.eslintrc | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 04-controls/.eslintrc diff --git a/04-controls/.eslintrc b/04-controls/.eslintrc new file mode 100644 index 00000000..1351afd6 --- /dev/null +++ b/04-controls/.eslintrc @@ -0,0 +1,6 @@ +{ + "extends": [ "plugin:@wordpress/eslint-plugin/es5" ], + "globals": { + "window":true + } +} From 33702464c18f5f5d14c2a6c5466afa74466019cf Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 19 Oct 2021 10:46:11 -0400 Subject: [PATCH 2/3] Add block.json and assets file. --- 04-controls/block.asset.php | 1 + 04-controls/block.json | 27 +++++++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 04-controls/block.asset.php create mode 100644 04-controls/block.json diff --git a/04-controls/block.asset.php b/04-controls/block.asset.php new file mode 100644 index 00000000..da47ccd7 --- /dev/null +++ b/04-controls/block.asset.php @@ -0,0 +1 @@ + array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n', 'wp-editor', ), 'version' => 'a35cc1c098b69994c9c6d6dc1416bb90'); diff --git a/04-controls/block.json b/04-controls/block.json new file mode 100644 index 00000000..312153e0 --- /dev/null +++ b/04-controls/block.json @@ -0,0 +1,27 @@ +{ + "apiVersion": 2, + "name":"gutenberg-examples/example-04-controls", + "title": "Example: Controls", + "icon": "universal-access-alt", + "category": "layout", + "attributes": { + "content": { + "type": "array", + "source": "children", + "selector": "p" + }, + "alignment": { + "type": "string", + "default": "none" + } + }, + "example": { + "attributes": { + "content": "Hello world", + "alignment": "right" + } + }, + "editorScript": "file:./block.js", + "editorStyle":"file:./editor.css", + "style":"file:./style.css" + } From 01b183b775fd917a5b33e6cf11d9efce521d7d7a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 19 Oct 2021 10:46:33 -0400 Subject: [PATCH 3/3] Updates to block files to use correct API version. --- 04-controls/block.js | 13 +++++++------ 04-controls/index.php | 28 ++-------------------------- 2 files changed, 9 insertions(+), 32 deletions(-) diff --git a/04-controls/block.js b/04-controls/block.js index d5ac45b4..449ef0b7 100644 --- a/04-controls/block.js +++ b/04-controls/block.js @@ -3,12 +3,13 @@ * * Adding extra controls: built-in alignment toolbar. */ -( function( blocks, editor, i18n, element ) { +( function( blocks, editor, i18n, element, blockEditor ) { var el = element.createElement; var __ = i18n.__; var RichText = editor.RichText; var AlignmentToolbar = editor.AlignmentToolbar; var BlockControls = editor.BlockControls; + var useBlockProps = blockEditor.useBlockProps; blocks.registerBlockType( 'gutenberg-examples/example-04-controls', { title: __( 'Example: Controls', 'gutenberg-examples' ), @@ -58,24 +59,24 @@ onChange: onChangeAlignment, } ) ), - el( RichText, { + el( RichText, useBlockProps( { key: 'richtext', tagName: 'p', style: { textAlign: alignment }, className: props.className, onChange: onChangeContent, value: content, - } ), + } ) ), ]; }, save: function( props ) { - return el( RichText.Content, { + return el( RichText.Content, useBlockProps.save( { tagName: 'p', className: 'gutenberg-examples-align-' + props.attributes.alignment, value: props.attributes.content, - } ); + } ) ); }, } ); -} )( window.wp.blocks, window.wp.editor, window.wp.i18n, window.wp.element ); +}( window.wp.blocks, window.wp.editor, window.wp.i18n, window.wp.element, window.wp.blockEditor ) ); diff --git a/04-controls/index.php b/04-controls/index.php index 7dd58b1f..f64d62eb 100644 --- a/04-controls/index.php +++ b/04-controls/index.php @@ -34,32 +34,8 @@ function gutenberg_examples_04_register_block() { return; } - wp_register_script( - 'gutenberg-examples-04', - plugins_url( 'block.js', __FILE__ ), - array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), - filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) - ); - - wp_register_style( - 'gutenberg-examples-04-editor', - plugins_url( 'editor.css', __FILE__ ), - array( 'wp-edit-blocks' ), - filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) - ); - - wp_register_style( - 'gutenberg-examples-04', - plugins_url( 'style.css', __FILE__ ), - array( ), - filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ) - ); - - register_block_type( 'gutenberg-examples/example-04-controls', array( - 'style' => 'gutenberg-examples-04', - 'editor_style' => 'gutenberg-examples-04-editor', - 'editor_script' => 'gutenberg-examples-04', - ) ); + // Register the block by passing the path to it's block.json file. + register_block_type( __DIR__ ); if ( function_exists( 'wp_set_script_translations' ) ) { /**