Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add note about wp-editor dependancy #12731

Merged
merged 3 commits into from
Jan 25, 2019
Merged

add note about wp-editor dependancy #12731

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7147f1c
add note about wp-editor dependancy
greenhornet79 Dec 9, 2018
c844ba2
Update introducing-attributes-and-editable-fields.md
greenhornet79 Dec 10, 2018
4814839
move sample code below description
greenhornet79 Dec 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions ...velopers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,25 @@ 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
<?php

function gutenberg_boilerplate_block() {
wp_register_script(
'gutenberg-boilerplate-es5-step03',
plugins_url( 'step-03/block.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-editor' )
);

register_block_type( 'gutenberg-boilerplate-es5/hello-world-step-03', array(
'editor_script' => '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`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be awesome to get a code example here, if possible (presumably just taking the example from the first page in the tutorial and updating it)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@greenhornet79 Could you put this code sample below the "To use the RichText component" sentence so it's a little clearer what the code sample is explaining?

I think also instead of the entire block registration function, it would be easier to just show the wp_register_script segment, calling out the change:

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
	)
);


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.