Learn About Attributes And Components In Gutenberg Blocks

In the past blog, we found out about how edit and save functions work. They depict the design of the block's appearance. Notwithstanding, they just returned straightforward paragraphs. In this blog, we will find out about how the block's design can be changed when the user changes a block. In this blog, we will see about attributes components Gutenberg blocks.

Condition of a block:

To accomplish dynamic change in the block's structure when the user changes a block, a condition of a block is kept up through the editing session as a plain JavaScript object.

Each time block is updated the edit function is called.

Properties:

To separate the JavaScript object again from the saved content of a post and reuse it we use block type's attribute property. They give an instrument to plan from the saved markup to a JavaScript representation of a block.

Attribute Sources:

Attributes components Gutenberg blocks sources help you extricate block attribute values from saved post content. They help you plan from the saved markup to a JavaScript representation of a block. On the off chance that no attribute source is determined, the attribute will be saved to (and read from) the block's comment delimiter.

hpq: Attribute sources are a superset of functionality given by hpq, a little library used to parse and query HTML markup into an object shape.

There are various kinds of attributes sources you can utilize. For instance children, attribute, text, html, query, meta

Illustration of an attribute source: 'meta'

registerBlockType( 'myguten-block/test-block', {

   attributes: {
      content: {
         type: 'array',
         source: 'children',
         selector: 'p'
      },
   },

At the point when you characterize these attribute into registerBlockType(), it is passed to the edit() and save()

source: 'youngsters' signifies it will search for the content within selector

The manner in which you use it into your edit function:

edit( props ) {let { attributes , setAttributes, className } = props;
 function onChange( event ) {
 setAttributes( { author: event.target.value } );
 }

 return { attributes.content };
},

Whenever it's saved into the database, it very well may be extracted utilizing props.attributes

save: ( props ) => {
 console.log( 'save-props', props );
 return (
 { props.attributes.content }

);
}

Gutenberg Components

Since various blocks share similar complex behaviours, reusable components are made available to work on executions of your block's edit function. The common blocks are:

RichText
BlockControls
AlignmentToolbar
Inspect
ColorPalette

You can discover components in the Gutenberg git repo

RichText Component

Rather than making DOM nodes utilizing createElement(), we can exemplify this behaviour utilizing Components . Components give reusability and permit you to conceal the complexity into their independent units. There are various components accessible. We will discuss one of them, called RichText segment. It tends to be considered as textarea component that enables rich content editing including bold, italics, hyperlinks, etc.

You can discover RichText Component characterized in

Kindly try to add wp-editor to the dependency array of registered script handles when calling wp_register_script.

Return value of registerBlockType()

On the off chance that you console log( results ) , what is returned by registerBlockType(), you get:

attributes:
className: {type: "string"}
__proto__: Object
category: "layout"
edit: ƒ edit(props)
icon: {src: "smiley"}
name: "myguten-block/test-block"
save: ƒ save()
title: "Basic Example"

Props

On the off chance that you console.log( props ) inside edit() and when you edit something you get the following data in props

// Result for console.log( props );
attributes:
content:
__proto__: Object
className: "wp-block-myguten-block-test-block"
clientId: "be406ad0-a7e6-45ca-b47d-5ff44673b280"
insertBlocksAfter: ƒ ()
isSelected: true
isSelectionEnabled: true
mergeBlocks: ƒ ()
name: "myguten-block/test-block"
onReplace: ƒ ()
setAttributes: ƒ ()
toggleSelection: ƒ ()

Block Controls And AlignmentToolbar

On the off chance that the return value of your block type's edit function incorporates a BlockControls component, those controls will appear in the selected block's toolbar. This will show a various control buttons might appear in a toolbar over the selected block.

Inspect and ColorPalette Component

The inspector is utilized to show less-often used settings or settings that require more screen space.

In the event that you insert an InspectorControls element in the return value of your block type’s edit function add some content within it, those controls and content will be appeared in the inspector region.

We should add ColorPalette Component within it. What we need to accomplish is that when the user chooses any color on the pallete, the content color of our custom block should change to that one. https://github.com/imranhsayed/myguten-block/tree/reviewer controls-part

At VW themes, you will get at great discounts. Also checkout our best WP bundle and avail at just $99 only.

Back to blog