## Customize Gutenberg blocks output on the front-end

Question

I am looking to modify the front-end HTML output of Gutenberg blocks, through PHP.

(The following is a simplified example of what I need, for the purpose of this question.)

I have a WP page with custom Gutenberg blocks. There is a Grid block (name: “stack/grid”) which contains multiple Row (name: “stack/row”) blocks. Each Row block has an Align property that can be set to either left or right.

The block structure is the following:

Grid
Row #1 [align: left]
Row #2 [align: right]
Row #3 [align: left]
Row #4 [align: right]


Block data:

{
"name": "stack/grid",
"attrs": { ... }
"innerBlocks": [
{
"name": "stack/row",
"attrs": {
"align": "left"
},
"innerBlocks": [ ... ]
},
...
]
}


The HTML code generated is the following:

<div class="grid-block">
<div class="row-block left"></div>
<div class="row-block right"></div>
<div class="row-block left"></div>
<div class="row-block right"></div>
</div>


(The blocks used are from a plugin, they are not created by me.)

On the frontend, I need to be able to put the rows in any order and afterward set their Align property to alternating values (left, right, left, right).

For this question, let’s take one single example: Take Row #2 and move it first, then set the Align of all rows to alternating values, starting with “left”.

0
2 years 2020-09-02T15:10:23-05:00 0 Answers 44 views 0