You are not limited to what you can make dynamic in blocks. You can attach dynamic values to custom attributes or overwrite existing attributes
Currently this feature is working only in Element block
Usage of this feature is very simple; just add the name of the attribute (must by Latin symbols, no spaces, no extra symbols) and value. If you want to make it dynamic, click on the database icon
You can use this feature to overwrite custom attributes. For example, the “src” attribute will link your video or image, making the block a dynamic video or dynamic image.
There are also additional hidden feature. If you want to use partial dynamic value, use placeholder {DYNAMIC}, and it will be replaced by dynamic value instead of replacing the whole attribute.
Interaction layers can also add some interactions for your dynamic attributes. Because they can read and set data for attributes. If you need to set – simply add value. You can also get attribute from one block and set it to another. For this, use a placeholder
{{ATTR:data-src}} where data-src is the attribute that you want to get. If you click on the cog icon, you will find a lot of dynamic placeholders. If you click on the Map icon, you can set the source selector where you can get the data for dynamic placeholders.
<!-- wp:paragraph -->
<p>You are not limited to what you can make dynamic in blocks. You can attach dynamic values to custom attributes or overwrite existing attributes</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/infobox {"id":"gsbp-99e382d","type":"infolight"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-99e382d" id="gspb_infoBox-id-gsbp-99e382d"><div class="gs-box infolight_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Currently this feature is working only in <a href="https://greenshiftwp.com/element-tag-block/" data-type="post" data-id="4576">Element block</a></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->
<!-- wp:paragraph -->
<p>Usage of this feature is very simple; just add the name of the attribute (must by Latin symbols, no spaces, no extra symbols) and value. If you want to make it dynamic, click on the database icon</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5068,"width":357,"height":219,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/08/[email protected]" alt="" class="wp-image-5068" width="357" height="219"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>You can use this feature to overwrite custom attributes. For example, the "src" attribute will link your video or image, making the block a dynamic video or dynamic image. </p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/infobox {"id":"gsbp-69f857d","type":"infolight"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-69f857d" id="gspb_infoBox-id-gsbp-69f857d"><div class="gs-box infolight_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>You can read more about <a href="https://greenshiftwp.com/dynamic-fields/">dynamic fields</a></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->
<!-- wp:paragraph -->
<p>There are also additional hidden feature. If you want to use partial dynamic value, use placeholder {DYNAMIC}, and it will be replaced by dynamic value instead of replacing the whole attribute. </p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/infobox {"id":"gsbp-b27dcd7","type":"infolight"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-b27dcd7" id="gspb_infoBox-id-gsbp-b27dcd7"><div class="gs-box infolight_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Dynamic attributes are great in combination with <a href="https://greenshiftwp.com/learning/greenshift-extra/interaction-panels/" data-type="learning" data-id="3687">Interaction Layers</a></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->
<!-- wp:paragraph -->
<p>Interaction layers can also add some interactions for your dynamic attributes. Because they can read and set data for attributes. If you need to set - simply add value. You can also get attribute from one block and set it to another. For this, use a placeholder </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>{{ATTR:data-src}} where <em>data-src</em> is the attribute that you want to get. If you click on the cog icon, you will find a lot of dynamic placeholders. If you click on the Map icon, you can set the source selector where you can get the data for dynamic placeholders.</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5069,"width":333,"height":492,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/08/[email protected]" alt="" class="wp-image-5069" width="333" height="492"/></figure>
<!-- /wp:image -->
