GreenLight Element blocks

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/video {"id":"gsbp-96af939","src":"https://youtu.be/friA2_k2E4k","provider":"youtube","poster":"https://i.ytimg.com/vi/friA2_k2E4k/maxresdefault.jpg","modestBranding":true,"suggested":false,"postDate":"2024-03-08T17:07:39+00:00"} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-96af939" id="gs-video-gsbp-96af939"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://youtu.be/friA2_k2E4k" data-provider="youtube" data-autoplay="false" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="false" data-lightbox="false" data-modestbranding="true" data-suggested="false" frameborder="0" allowfullscreen></iframe></div></div>
<!-- /wp:greenshift-blocks/video -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="attribute-system">Attribute system</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <a href="https://greenshiftwp.com/documentation/greenshift-extra/global-and-local-class-system/" data-type="documentation" data-id="3786">local class</a> to the block or attach local styles to block (then it will add a data-style attribute)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's compare the output of 4 different blocks:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Element DIV block without classes and styles</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Element DIV block with local class</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Element DIV block with local styles</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Container block with attributes</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:greenshift-blocks/image {"id":"gsbp-a2bd19a","originalWidth":3154,"originalHeight":858,"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2024/03/output.png","mediaid":4579,"alt":"","lightbox":true} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-a2bd19a gssimglightbox" id="gspb_image-id-gsbp-a2bd19a"><img src="https://greenshiftwp.com/wp-content/uploads/2024/03/output.png" data-src="" alt="" loading="lazy" width="3154" height="858"/></div>
<!-- /wp:greenshift-blocks/image -->

<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="no-wordpress-wrapper">No WordPress wrapper</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When you use other blocks, they will have WordPress wrappers and they will be always Block Elements.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This has benefits and negative sides.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Benefits: you can mix several inline blocks together and they will work as a common inline element. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":4578,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2024/03/span-1024x335.png" alt="" class="wp-image-4578"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>When you use Advanced text block - you can't do this, because it will keep your own blocked area.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="visual-helpers">Visual helpers</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Greenshift has many <a href="https://greenshiftwp.com/documentation/greenshift-basics/visual-design-helpers/" data-type="documentation" data-id="3798">visual helpers</a> 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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="only-html-related-options">Only HTML-related options</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>While regular blocks can have many different options for functionality, Element block has only options related to HTML and class system.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="interface-options">Interface options</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Element block can be customized in Greeshift settings - Interface. There are two options there. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can close local styles by default</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/image {"id":"gsbp-ecded5a","width":["300px",null,null,null],"originalWidth":548,"originalHeight":1088,"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2024/03/local.png","mediaid":4583,"alt":""} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-ecded5a" id="gspb_image-id-gsbp-ecded5a"><img src="https://greenshiftwp.com/wp-content/uploads/2024/03/local.png" data-src="" alt="" loading="lazy" width="300px" height="1088"/></div>
<!-- /wp:greenshift-blocks/image -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="code-helper-for-html-css-fields">Code helper for HTML/CSS fields</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Element block can be used with regular HTML instead inner blocks.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to enable code syntax helper for HTML, you need to install free <a href="https://greenshiftwp.com/learning/ai-blocks/smart-code-ai/" data-type="learning" data-id="3950">Smart Code AI plugin</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="layout-options">Layout options</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When you use Row, Container or other Layout blocks, plugin will add several layers. In Element block, you have full control for each layer and you can build your own workflow, we also provide Content Area section that uses best web dev scenarios of organizing layout. It will also inherit automatically width from Blocksy, Astra, Kadence, block themes or you can set custom layout width in Greenshift - settings - CSS management. Element block has also Flex and Grid helpers</p>
<!-- /wp:paragraph -->

<!-- wp:video {"id":5161} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2024/03/row.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->