Comments (3)
Thanks for your feedback on this example @skorasaurus
To change the icon of the RichTextToolbarButton
component, you can update the icon
prop with the desired Dashicon slug. The Dashicons library provides a wide range of icons you can choose from.
Note
I think all components with an icon
property are actually using an <Icon>
component, which admits a dashicon slug
, a SVG, or another component (the example you provide with commentReplyLink
would be this case) to customize the icon
Here's an example of how you can change the icon of RichTextToolbarButton
:
import { RichTextToolbarButton } from '@wordpress/block-editor';
const MyCustomButton = () => {
return (
<RichTextToolbarButton
icon="admin-site"
title="My Custom Button"
onClick={() => {
// Handle button click event
}}
/>
);
};
In the example above, the icon prop is set to admin-site
, corresponding to the Dashicon for a site icon. You can replace admin-site
with the Dashicon slug of your desired icon. You can find a list of available Dashicons and their corresponding slugs in the Dashicons documentation.
Relatedly, the richtexttoolbarbutton component (which appears to be a wrapper or abstraction?) is could have its documentation improved by although that should go in the gutenberg repository; since all that exists is the example in the rich-text readme and a separate reference in https://github.com/WordPress/gutenberg/tree/1eb76440f7b86ca905ac875d4a2c6ed67fc48daf/packages/block-editor which says it's undocumented.
As it states here the RichTextToolbarButton
is a specific "slot" to extend the format toolbar, so you're right saying it's kind of a wrapper.
Read more about Slot and Fills in the Block Editor Handbooks' SlotFills Reference or the Extending plugins using custom SlotFills article in the Developer blog
I agree there's a lot of room for improvement in the docs, so please open an issue at https://github.com/WordPress/gutenberg/issues for any improvement you consider should be done in the docs, so actions can be taken from there.
from block-development-examples.
@skorasaurus I think we can close this issue. What do you think?
For improvement requests/suggestions on the Format API the best place to open an issue is https://github.com/WordPress/gutenberg/issues
from block-development-examples.
@juanmaguitar thanks for following up and for the very detailed reply.
I was a bit frustrated when I filed the issue and will file an issue in gutenberg to propose that RichTextToolbarButton has its props (or parameters?) documented.
I'll propose and credit you for writing:
the icon prop is set to admin-site, corresponding to the Dashicon for a site icon. You can replace admin-site with the Dashicon slug of your desired icon. You can find a list of available Dashicons and their corresponding slugs in the Dashicons documentation.
from block-development-examples.
Related Issues (20)
- Simple editor button example (no build) HOT 2
- Using one instance of wp-scripts to work with all blocks HOT 4
- Interactivity API - Countdown Block - broken w/out Gutenberg plugin active HOT 1
- Create an example of using Block context
- Remove Experimental tag from examples using the Interactivity API HOT 1
- meta-block-bb1e55: Improve example
- Improve the readability of the "Conventions for examples" wiki page HOT 3
- Update conventions diagram to reflect the new name for this repository HOT 1
- Add creation-date, last-updated and author to the main table with examples
- Add examples for transforms
- Review `wp-scripts` package dependency on each example HOT 1
- [Proposal] — Include licenses in software packages HOT 5
- Create an example of an HOC enhancing a Core Component HOT 2
- Replace importFile with importWxr on blueprint steps HOT 1
- Fix issue with variable number of posts on every WP release HOT 1
- Adapt interactivity-api-quiz-1835fa to latest iAPI and add it to table HOT 1
- Add editable-block-no-build example HOT 2
- Add an example of enhancing a Core Component using a Higher Order Component HOT 2
- Improve example inner-blocks-dcd824
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from block-development-examples.