Contents
How to create a Gutenberg block in WordPress?
WordPress’ RichText component gives you a “borderless” textarea with text formatting support. You might prefer using this instead of a (ugly?) standard text input or textarea.
How to save an attribute in WordPress comment block?
To solve this we need to work with the attribute property source. The source property allowing WordPress to extract and interpret the content directly from the post content. If an attribute has no source set, it will be saved in and extracted from the HTML comment block.
Why do you need attributes in Gutenberg block?
Anything you need saved for your block (input from the user/editor) requires an attribute. It’s up you how you structure your data, by defining separate attributes for each or bunch them all up in an object. It will just be a difference in how you fetch their data and how you update them.
When to use a prop in Gutenberg block?
When you work with RichText you most likely want to control the HTML wrapper around the text, for example a or a , both in frontend and in editor. For that we can use a prop called tagName. The component RichText allows several other props as well.
How are attributes added to an array in Gutenberg?
Attributes are added as objects in an array to the attributes property in registerBlockType (). Each attribute’s key is the attribute name, and you must have the property type as a minimum. The type property can be any of the following; null, boolean, object, array, number, string, or integer.
How are attribute sources used in WordPress block editor?
Under the hood, attribute sources are a superset of the functionality provided by hpq, a small library used to parse and query HTML markup into an object shape. Use attribute to extract the value of an attribute from markup. Example: Extract the src attribute from an image found in the block’s markup.
Where do the attributes go in a block?
They provide a mechanism to map from the saved markup to a JavaScript representation of a block. If no attribute source is specified, the attribute will be saved to (and read from) the block’s comment delimiter. The keys specified in the attributes source object are named as you see fit.