Develop WordPress React components for Gutenberg with this block site for WP developers. Get snippets, images and information about all tools available for rich WP development.
Help needed! I’ve started on an open source project for this website in React that will replace the current site. Creating a community around this will keep the site up to date and give you the opportunity to request or add functionality that can improve the site. You can find the project here: https://github.com/vaarvik/wp-gb
A red mark means that WordPress has marked it as an experimental component.
Can be used to align something centered, left or right. Often used and seen as a child of BlockControls. Very…
Can be used to suggest/autocomplete things when a user types a character. Similar to how one can select a block…
Can be used to set alignment position of an background image for example. Very similar to the AlignmentMatrixControl component from…
Can be used to set the position or size of something as centered, left, right, wide or full. Often used…
A toolbar box where colors of the toolbar icon can be styled. In most cases it would have its natural…
Children of this component is shown inside the toolbar that is shown when a user selects a block in the…
Can be used to replicate another block inside a block. The block can then be changed to fit the current…
Used for listing different variations of a block. Used in WordPress' core columns block.
Can be used to set the position of something as top, cented or bottom. Often used and seen as a…
Can be used for stuff like padding/margin. Seems to have some trouble with the Visualizer that is offered with this…
Users can select either or both a color and a gradient. A more advanced version of the GradientPicker component.
Used to select a color from a set of colors. A combination between ColorPalette and ColorIndicator.
Used to check contrast based on WCAG 2.0 AA and shows a message if it's not a good enough contrast.
Not sure how this is different from the regular Gradient Picker. This one seems to have less options.
A select tag but with a possibility to style the option elements for good visual effect.
Just another way of rendering the classic WordPress icons. Very similar to the Icon component.
User can pick both time and date. Can also be used as only a TimePicker or a DatePicker.
Has predefined options in a select tag. Not quite sure how it's different from a SelectControl other than that, but…
Provides the usual WordPress drag effect on a block in the editor. Does not work 100% out of the box…
Similar to a DropDownMenu, but with some more flexibility for how the toggle button and the content should be rendered.
A handy dropdown menu that can be used in for example the Toolbar component or other places. Very similar to…
Gives x and y coordinates. Handy when in need of a specific background-position on an image.
Used for font sizes. Can be used to set a custom font size or a font size from a list.…
Can be used to let a user toggle something on and off. Very similar to the ToggleControl component.
Used for selecting multiple tags. FormTokenField takes pretty good advantage of a state so the code below is exporting the…
A gradient picker/customizer. There is a very similar experimental component with less options than this one called CustomGradientPicker.
Used to select a gradient. Very similar to the GradientPicker from the components package, the difference is that the default…
Exactly the same as GradientPicker just with a label prop available in addition so that the component can have a…
Exactly the same as GradientPicker just with a panelbody component wrapped around it. Check out GradientPicker for more information.
Can add a icon as SVG-HTML, a dashicon string or with a custom icon classname. Other than that it's the…
Can be used to change an image's dimensions based on an alternative of image sizes.
Allows blocks inside a block. Kind of works like the editor itself, just inside a block. Used in the core…
Children of this component appear in the advanced section of the Inspector Controls.
Children of this component get's connected to the gived shortcut. Can also be added to the global document if the…
Used to search for any url on the site. External url can also be created. Used when creating link in…
Kind of like a slideshow. However the content on each slide can be whatever you like. Each child which is…
A list of Notices. Each notice has an status and can render a string or an array with HTML-content/React-components. Very…
Used to contain and seperate content. Has three elements that can be used as children: PanelHeader, PanelBody and PanelRow. <Panel…
A collection of ColorGradientControl components wrapped in a collapsed PanelBody component.
Can be used as a placeholder when a state/value when its empty. For example when the user needs to select…
Good for handling big amount of data as for example posts from a query. Can decide how many items to…
A simple group of radio inputs. Very similar to the RadioGroup component but uses regular radio inputs instead of buttons.…
Works like a group of radio inputs but looks like a group of buttons. Uses the Radio component as a…
A wrapper used to resize the element. Is used on for example the default image block WordPress provides.
A responsive wrapper that works well with images. Adds a padding element based on the natural height and width that…
Seems like a portal kind of. The content inside the Slot component is rendered inside the Fill component, which can…
Similar to the Notice component, but with a different look. Used by WordPress when you update a post for example.…
Several Snackbar components shown in rows. Very similar to the NoticeList component but with a different look.
A wrapper where the user can use the the TAB key to navigate between its children.
A simple textarea element. The content is controlled by a value prop instead of as text child as it is…
A toolbar that can be used to control a block. Used a lot by the default blocks in WordPress.
Creates a tree hierarchy. Users can navigate between the tree elements with the arrows. Could probably be good for breadcrumbs…
A select element but with options that can have descenders. The same select that WordPress uses for selecting parent pages.
An input where a number and a unit can be chosen. Has handy props as "onUnitChange" and "isUnitSelectTabbable".