A free eBook providing documentation for useful components available in Gutenberg. It covers the most common input components (such as text inputs, colorpickers, checkboxes, rich text, and more) and interactive components (such as buttons, modals, dropdown menus, icons, and notices). There’s no need to manually write React code for this as it comes readily available in WordPress already. You just need to know about them!
This eBook is compiled from notes, a-ha moments, and code snippets while I was diving into the Gutenberg source code – frustrated from the lack of documentation. As an attempt to compile an overview of useful and re-usable components available in the Gutenberg packages, this guide wrote itself.
Each component (see full overview below) in the eBook is presented with available props (in most cases all, but not always – in these cases I refer to the documentation on Github) and code examples of usage.
Components covered by this guide
Below you’ll find all components presented in the eBook. The components’ names are in paranthesis.
Text input (TextControl)
Rich Text (RichText)
Radio Buttons (RadioControl)
Dropdown Select (SelectControl)
Date & Time Picker (DateTimePicker, DatePicker)
Font Size Picker (FontSizePicker)
Angle Picker (AnglePickerControl)
Button Group (ButtonGroup)
Icon (Icon, Dashicon)
Advanced Tooltip (Popover)
Toggleable Advanced Tooltip (Dropdown)
Dropdown Menu (MenuGroup, MenuItem)
Clickable External Link (ExternalLink)
Color Preview (ColorIndicator)
Content wrapper: Placeholder (Placeholder)
Content wrapper: Disabled (Disabled)
Content wrapper: Generic input (BaseControl)
Inspector Section (PanelBody)
Inspector Section Content wrapper (PanelRow)
Last updated for: WordPress 5.4.2 (July 2020)