-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Add: Block specific toolbar button sample to the format api tutorial #14113
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.
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -35,3 +35,54 @@ Let's check that everything is working as expected. Reload the post/page and sel | |
|  | ||
|
|
||
| You may also want to check that upon clicking the button the `toggle format` message is shown in your browser's console. | ||
|
|
||
| ## Show the button only for specific blocks | ||
jorgefilipecosta marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| By default, the button is rendered on every rich text toolbar (image captions, buttons, paragraphs, etc). | ||
| It is possible to render the button only on blocks of a certain type by using `wp.data.withSelect` together with `wp.compose.ifCondition`. | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'd like us to add a reminder that to use |
||
| The following sample code renders the previously shown button only on paragraph blocks: | ||
|
|
||
| ```js | ||
| ( function( wp ) { | ||
| var withSelect = wp.data.withSelect; | ||
| var ifCondition = wp.compose.ifCondition; | ||
| var compose = wp.compose.compose; | ||
| var MyCustomButton = function( props ) { | ||
| return wp.element.createElement( | ||
| wp.editor.RichTextToolbarButton, { | ||
| icon: 'editor-code', | ||
| title: 'Sample output', | ||
| onClick: function() { | ||
| console.log( 'toggle format' ); | ||
| }, | ||
| } | ||
| ); | ||
| } | ||
| var ConditionalButton = compose( | ||
| withSelect( function( select ) { | ||
| return { | ||
| selectedBlock: select( 'core/editor' ).getSelectedBlock() | ||
| } | ||
| } ), | ||
| ifCondition( function( props ) { | ||
| return ( | ||
| props.selectedBlock && | ||
| props.selectedBlock.name === 'core/paragraph' | ||
| ); | ||
| } ) | ||
| )( MyCustomButton ); | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nitpick: let's introduce a line break here as a sort of breadth between the components declaration and the format registration, so the format registration stands out. |
||
|
|
||
| wp.richText.registerFormatType( | ||
| 'my-custom-format/sample-output', { | ||
| title: 'Sample output', | ||
| tagName: 'samp', | ||
| className: null, | ||
| edit: ConditionalButton, | ||
| } | ||
| ); | ||
| } )( window.wp ); | ||
| ``` | ||
|
|
||
| Don't forget adding `wp-compose` and `wp-data` to the dependencies array in the PHP script. | ||
|
|
||
| More advanced conditions can be used, e.g., only render the button depending on specific attributes of the block. | ||
Uh oh!
There was an error while loading. Please reload this page.