Applying Block Attributes to multiple HTML elements

Hi everyone,

I am new to Pinegrow, but familiar with HTML and CSS. My primary interest is building WordPress Blocks using Pinegrow’s WordPress Plugin. Any suggestions or guidance would be very much appreciated. I am eager to learn new things.

I’ve been importing HTML and CSS code from VSCode, Dreamweaver, or Brackets, and using Blocks Smart Actions and the Common Block Attributes to build easy-to-edit, reusable blocks.

I want to reapply repeating block attributes to multiple HTML elements within a block/section or throughout a project. Thus far, I’ve been adding attributes to every element for every property, which is a repetitive and tedious process that requires a tremendous amount of time. I want to avoid this, if possible.

For example, let’s say I build a two-column section using Flexbox, with each column consisting of an h1 and h2 heading, two paragraphs, and a list. The font-size, font-family, font-style, font-weight, text-transform, text-variant, line-height, letter-spacing, word-spacing, background color, border-radius…apply to every element in the block. Is there a way to add block attributes once and use them to control/edit all the elements from within the block editor?

Creating a custom WordPress Block is not the problem. I want to reuse Block Smart Attributes for multiple elements.

Thank you for any help you can provide.

Kind regards,

Mark

Hi @markCarr, I wonder if I understood your idea well, but here are some images that could give you ideas.

Hi Junior,

Thank you for responding to my question and for the detailed answer.

I am fine with everything you presented, which makes me happy because it means I understand what I am doing :slightly_smiling_face:

But is there a way to apply those same smart block attributes to multiple HTML elements in the same block, plugin, etc.? For example, on that page, there are two h1s, two h2s, two paragraphs, and two lists. I would love to be able to edit all of those elements in the Block Editor using the same attribute controls, so that I don’t have to repeat the process of adding the same smart block attributes to every element in Pinegrow. It’s repetitive and time-consuming. I hope you understand me.

Also, is it possible to use “Select” for Control Type, or another control type, to allow users to choose between different HTML elements? It’s impossible, for example, to know which heading element they will use in a block, so if they had the option of selecting an h1, h2, or h3 from a dropdown list, that would really offer additional flexibility.

Thanks again for your help. I realize Pinegrow is not a page builder, but you want to provide your client with as much flexibility as possible. I’m trying to determine how much flexibility I can offer, and the cost in terms of time and effort.

Kind regards,

Mark

Hi @MarkCarr ,

Question: Also, is it possible to use “Select” for Control Type, or another control type, to allow users to choose between different HTML elements? It’s impossible, for example, to know which heading element they will use in a block, so if they had the option of selecting an h1, h2, or h3 from a dropdown list, that would really offer additional flexibility.

This is the answer

Hi,

Thanks so much. I feel a bit stupid for not seeing that myself. It only makes sense to select Tag for “Use As.”

Regarding the issue of reapplying similar block attributes to multiple elements, is that possible? If not, I’ll do them one by one, which is OK, but tedious.

Thanks again.

Mark

In my opinion, it is essential that all elements have the same id attributes.

In order to improve your understanding, I advise you to watch the YouTube channel of Pinegrow.

No problem, we learn every day and I am also learning when I give explanations to someone.

You are welcom

Hi,

I watched most, if not all, of the relevant YouTube videos and read most of the online documentation, so I feel like I have a good understanding of how this works. With that said, there’s always something new to learn. Thanks for the advice.

In the accompanying example (pic), I assigned both h1 and h2 elements the same Attribute id and Title. In the Block editor, I can’t edit them independently, unfortunately. Content placed in the h1_heading field is reflected in both h1 elements on the page simultaneously, and the same for the h2_subheading.

This is the issue I’m trying to resolve, so I don’t have to create distinct block attributes for elements that share similar properties.

Thanks again.

Mark