From 7147f1c99bb44002a38bca6bb0775749475b9d16 Mon Sep 17 00:00:00 2001 From: Jeremy Green Date: Sun, 9 Dec 2018 12:43:50 -0600 Subject: [PATCH 1/3] add note about wp-editor dependancy If you don't add wp-editor as a dependency, the example code will throw an error. --- .../introducing-attributes-and-editable-fields.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md b/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md index 3a993ce1c2b71a..152fa96d8a0b80 100644 --- a/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md +++ b/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md @@ -120,6 +120,8 @@ Earlier examples used the `createElement` function to create DOM nodes, but it's The `RichText` component can be considered as a super-powered `textarea` element, enabling rich content editing including bold, italics, hyperlinks, etc. It is not too much unlike the single editor region of the legacy post editor, and is in fact powered by the same TinyMCE library. +To use the `RichText` component, add `wp-editor` to the array of registered script handles when calling `wp_register_script`. + Implementing this behavior as a component enables you as the block implementer to be much more granular about editable fields. Your block may not need `RichText` at all, or it may need many independent `RichText` elements, each operating on a subset of the overall block state. Because `RichText` allows for nested nodes, you'll most often use it in conjunction with the `html` attribute source when extracting the value from saved content. You'll also use `RichText.Content` in the `save` function to output RichText values. From c844ba2e14ddbbffa9362d694646c58854698afb Mon Sep 17 00:00:00 2001 From: Jeremy Green Date: Mon, 10 Dec 2018 10:18:11 -0700 Subject: [PATCH 2/3] Update introducing-attributes-and-editable-fields.md --- ...ntroducing-attributes-and-editable-fields.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md b/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md index 152fa96d8a0b80..7109f9d94b019e 100644 --- a/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md +++ b/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md @@ -120,6 +120,23 @@ Earlier examples used the `createElement` function to create DOM nodes, but it's The `RichText` component can be considered as a super-powered `textarea` element, enabling rich content editing including bold, italics, hyperlinks, etc. It is not too much unlike the single editor region of the legacy post editor, and is in fact powered by the same TinyMCE library. +```php + 'gutenberg-boilerplate-es5-step03', + ) ); +} +add_action( 'init', 'gutenberg_boilerplate_block' ); +``` + To use the `RichText` component, add `wp-editor` to the array of registered script handles when calling `wp_register_script`. Implementing this behavior as a component enables you as the block implementer to be much more granular about editable fields. Your block may not need `RichText` at all, or it may need many independent `RichText` elements, each operating on a subset of the overall block state. From 4814839e41183b94fc4c6f94322449847c11a55f Mon Sep 17 00:00:00 2001 From: Jeremy Green Date: Fri, 21 Dec 2018 11:12:17 -0700 Subject: [PATCH 3/3] move sample code below description --- ...roducing-attributes-and-editable-fields.md | 27 ++++++++----------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md b/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md index 7109f9d94b019e..cd2b40e7d561e9 100644 --- a/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md +++ b/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md @@ -120,25 +120,20 @@ Earlier examples used the `createElement` function to create DOM nodes, but it's The `RichText` component can be considered as a super-powered `textarea` element, enabling rich content editing including bold, italics, hyperlinks, etc. It is not too much unlike the single editor region of the legacy post editor, and is in fact powered by the same TinyMCE library. +To use the `RichText` component, add `wp-editor` to the array of registered script handles when calling `wp_register_script`. + ```php - 'gutenberg-boilerplate-es5-step03', - ) ); -} -add_action( 'init', 'gutenberg_boilerplate_block' ); +wp_register_script( + 'gutenberg-boilerplate-es5-step03', + plugins_url( 'step-03/block.js', __FILE__ ), + array( + 'wp-blocks', + 'wp-element', + 'wp-editor', // Note the addition of wp-editor to the dependencies + ) +); ``` -To use the `RichText` component, add `wp-editor` to the array of registered script handles when calling `wp_register_script`. - Implementing this behavior as a component enables you as the block implementer to be much more granular about editable fields. Your block may not need `RichText` at all, or it may need many independent `RichText` elements, each operating on a subset of the overall block state. Because `RichText` allows for nested nodes, you'll most often use it in conjunction with the `html` attribute source when extracting the value from saved content. You'll also use `RichText.Content` in the `save` function to output RichText values.