Element/tag block

Greenshift framework element block is a universal block and a new workflow for building designs. Unlike other blocks, it doesn’t use WordPress wrappers and classes and has a vanilla HTML output.

Attribute system

Regular GS blocks are working based on attributes + you can add the class system to them. Element block doesn’t use attributes for saving styles, it uses a class system.

Element block has variations for each tag. For example, you add “DIV” block (which is variation of Element block). When you do this, on site you will have just DIV tag and nothing more. Then, you can assign local class to the block or attach local styles to block (then it will add a data-style attribute)

Let’s compare the output of 4 different blocks:

  1. Element DIV block without classes and styles
  2. Element DIV block with local class
  3. Element DIV block with local styles
  4. Container block with attributes

If you see, the Element block has cleaner output. This doesn’t mean that Container block is bad, as you can see, it also uses 1 DOM element, but at the same time, it uses auto ids, WordPress classes, etc. So, if you need perfect elements – Element Framework workflow is preferable

No WordPress wrapper

Element block has another thing to keep in mind. It has no wrappers, so, you can simply put, for example, several SPAN Elements near each other and they will work as a single line. Or you can use A Element and put other blocks inside. It will be still an Inline element.

When you use other blocks, they will have WordPress wrappers and they will be always Block Elements.

This has benefits and negative sides.

Benefits: you can mix several inline blocks together and they will work as a common inline element.

When you use Advanced text block – you can’t do this, because it will keep your own blocked area.

But in some situations, this makes negative side. It’s because you need to keep in mind that inline elements can’t keep a central space and you can’t align them relative to their space, so, you will need to put them in another Block with blocked structure.

Visual helpers

Greenshift has many visual helpers that can help to add attributes visually. But in fact the Element block doesn’t have wrappers, then it’s not possible to use visual helpers in this block.

While regular blocks can have many different options for functionality, Element block has only options related to HTML and class system.

Interface options

Element block can be customized in Greeshift settings – Interface. There are two options there.

You can close local styles by default

When do you need this? It’s in cases when you prefer to use the CLASS first approach and you don’t plan to put anything inside local styles.

The second option is Priority for Element block. By default, all blocks are visible in the inserter, but you can change this and disable the Element block, or opposite, you can disable core Greenshift Content blocks (Image, Text, Heading, List). Disable doesn’t mean that they will be removed. It means that they will be not visible in Inserter.

Code helper for HTML/CSS fields

Element block can be used with regular HTML instead inner blocks.

If you want to enable code syntax helper for HTML, you need to install free Smart Code AI plugin

When to use Framework Element blocks and when to use other blocks?

Framework Element block is perfect if you need 100% fluent code and you prefer to use class system widely. You can also build your own patterns and set of blocks with interaction layer feature. All blocks and sites consist of regular HTML tags, so, you can build them with Element blocks. But at the same time, other blocks are more practical if you need to have “from the box” solutions with all elements and styles.

Copy this post’s content
Copy code below, and paste it (CTRL+V) in content of page