Skip to content

format-api-f14b86: Document how and where the icon is being imported #101

@skorasaurus

Description

@skorasaurus

I followed along the example of the Format API and but I was dumbfounded because I couldn't figure out how the icon was being imported and needed to import different one.

Action item:
Explicitly mention how the icon is being imported in the tutorial (or if the approach that I did more common, maybe include that )

Other buttons in the format bar were calling it in by importing WordPress' Icons package but that's not called in the format-api-f14b86 example.

I eventually figured out to import an existing WordPress icon by:

  1. installing the Icons package (npm install @wordpress/icons --save),
  2. in my js file, importing the package and then specifically importing the icon that i wanted to use import { commentReplyLink } from "@wordpress/icons"; List of icons is available at the storybook
  3. within my RichTextToolbarButton component, adding the icon as an object like icon={commentReplyLink} unlike the example which in format-api-f14b86 which brings in a text string.

(for anyone else finding this: if you wanted to import your own, you probably could do it through through https://wordpress.github.io/gutenberg/?path=/docs/components-icon--docs

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions