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.

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: Block specific toolbar button sample to the format api tutorial #14113

Merged
Merged
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,54 @@ Let's check that everything is working as expected. Reload the post/page and sel
![Toolbar with custom button](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/assets/toolbar-with-custom-button.png)

You may also want to check that upon clicking the button the `toggle format` message is shown in your browser's console.

jorgefilipecosta marked this conversation as resolved.
Show resolved Hide resolved
## 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`.
Copy link
Member

Choose a reason for hiding this comment

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

I'd like us to add a reminder that to use wp.data and wp.compose the authors needs to add them to the plugin dependencies.

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 );
Copy link
Member

@oandregal oandregal Feb 26, 2019

Choose a reason for hiding this comment

The 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.