Stackable icon indicating copy to clipboard operation
Stackable copied to clipboard

Icon List Icon cannot be changed

Open benniledl opened this issue 1 year ago • 2 comments

Describe the bug I am using your Sol 1 FAQ Block and I want to add an icon list in one of the faq drop downs, when I change the Icon, the changes do not reflect neither in the frontend nor in gutenberg

I tested on a freshly setup WordPress 6.3 Installation (2024 theme) with only Stackable installed.

Desktop

  • Firefox and Chrome (newest)

Here is the Block that I tried:

<!-- wp:stackable/columns {"uniqueId":"889c7d6","hasBackground":true,"blockBackgroundColor":"var(\u002d\u002dstk-global-color-58834, #ffffff)","blockPadding":{"top":80,"right":"","bottom":80,"left":""},"align":"","innerBlockContentAlign":"alignwide"} -->
<div class="wp-block-stackable-columns stk-block-columns stk-block stk-889c7d6 stk-block-background" data-block-id="889c7d6"><style>.stk-889c7d6{background-color:var(--stk-global-color-58834,#ffffff) !important;padding-top:80px !important;padding-bottom:80px !important}.stk-889c7d6:before{background-color:var(--stk-global-color-58834,#ffffff) !important}</style><div class="stk-row stk-inner-blocks stk-block-content stk-content-align stk-889c7d6-column alignwide"><!-- wp:stackable/column {"uniqueId":"d462964"} -->
<div class="wp-block-stackable-column stk-block-column stk-column stk-block stk-d462964" data-v="4" data-block-id="d462964"><div class="stk-column-wrapper stk-block-column__content stk-container stk-d462964-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-d462964-inner-blocks"><!-- wp:stackable/heading {"contentAlign":"center","uniqueId":"fa87037","blockMargin":{"top":"","right":"","bottom":"","left":""},"blockPadding":{"top":"","right":"","bottom":"","left":""},"fontSize":48,"fontFamily":"Raleway","fontWeight":"800","textColor1":"#1a1a1a"} -->
<div class="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-fa87037" id="anleitungen" data-block-id="fa87037"><style>.stk-fa87037 .stk-block-heading__text{font-size:48px !important;color:#1a1a1a !important;font-weight:800 !important;font-family:"Raleway",Sans-serif !important}@media screen and (max-width:1023px){.stk-fa87037 .stk-block-heading__text{font-size:48px !important}}</style><h2 class="stk-block-heading__text has-text-color has-text-align-center">Anleitungen</h2></div>
<!-- /wp:stackable/heading -->

<!-- wp:stackable/text {"uniqueId":"5faf2f3","blockMargin":{"top":"","right":"","bottom":40,"left":""},"contentAlign":"center","textColorClass":"has-stk-global-color-56986-color","textColor1":"var(\u002d\u002dstk-global-color-56986, #111111)"} -->
<div class="wp-block-stackable-text stk-block-text stk-block stk-5faf2f3" data-block-id="5faf2f3"><style>.stk-5faf2f3{margin-bottom:40px !important}.stk-5faf2f3 .stk-block-text__text{color:var(--stk-global-color-56986,#111111) !important}</style><p class="stk-block-text__text has-text-color has-stk-global-color-56986-color has-text-align-center"></p></div>
<!-- /wp:stackable/text -->

<!-- wp:stackable/columns {"uniqueId":"734b5ff"} -->
<div class="wp-block-stackable-columns stk-block-columns stk-block stk-734b5ff" data-block-id="734b5ff"><div class="stk-row stk-inner-blocks stk-block-content stk-content-align stk-734b5ff-column"><!-- wp:stackable/column {"uniqueId":"58d3230","columnWidth":33.3} -->
<div class="wp-block-stackable-column stk-block-column stk-column stk-block stk-58d3230" data-v="4" data-block-id="58d3230"><style>@media screen and (min-width:768px){.stk-58d3230{flex:1 1 33.3% !important}}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-58d3230-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-58d3230-inner-blocks"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2"} -->
<h2 class="wp-block-heading has-base-2-color has-text-color has-link-color" style="font-style:normal;font-weight:700">Allgemein</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Gilt für alle Konten</h3>
<!-- /wp:heading --></div></div></div>
<!-- /wp:stackable/column -->

<!-- wp:stackable/column {"uniqueId":"aeb6104","columnWidth":66.7} -->
<div class="wp-block-stackable-column stk-block-column stk-column stk-block stk-aeb6104" data-v="4" data-block-id="aeb6104"><style>@media screen and (min-width:768px){.stk-aeb6104{flex:1 1 66.7% !important}}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-aeb6104-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-aeb6104-inner-blocks"><!-- wp:stackable/accordion {"uniqueId":"511b55d","hasBackground":true,"blockBackgroundColor":"var(\u002d\u002dstk-global-color-81840, #f6f6f6)","blockMargin":{"top":"","right":"","bottom":"","left":""},"blockPadding":{"top":0,"right":0,"bottom":0,"left":0},"onlyOnePanelOpen":true} -->
<details class="wp-block-stackable-accordion stk-block-accordion stk-inner-blocks stk-block-content stk--single-open stk-block stk-511b55d stk-block-background" data-block-id="511b55d"><style>.stk-511b55d{background-color:var(--stk-global-color-81840,#f6f6f6) !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important}.stk-511b55d:before{background-color:var(--stk-global-color-81840,#f6f6f6) !important}</style><!-- wp:stackable/column {"uniqueId":"cd571cf","blockPadding":{"top":8,"right":32,"bottom":8,"left":32},"htmlTag":"summary","templateLock":"insert","className":"stk\u002d\u002dcontainer-small stk-block-accordion__heading"} -->
<summary class="wp-block-stackable-column stk-block-column stk-column stk-block stk-cd571cf stk--container-small stk-block-accordion__heading" data-v="4" data-block-id="cd571cf"><style>.stk-cd571cf{padding-top:8px !important;padding-right:32px !important;padding-bottom:8px !important;padding-left:32px !important}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-cd571cf-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-cd571cf-inner-blocks"><!-- wp:stackable/icon-label {"uniqueId":"37c1794"} -->
<div class="wp-block-stackable-icon-label stk-block-icon-label stk-block stk-37c1794" data-block-id="37c1794"><div class="stk-row stk-inner-blocks stk-block-content"><!-- wp:stackable/heading {"contentAlign":"center","uniqueId":"493320a","blockMargin":{"top":"","right":"","bottom":"","left":""},"blockPadding":{"top":"","right":"","bottom":"","left":""},"fontSize":24,"fontFamily":"Raleway","fontWeight":"600","textColor1":"#1a1a1a"} -->
<div class="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-493320a" id="catch-all-einstellungen" data-block-id="493320a"><style>.stk-493320a .stk-block-heading__text{font-size:24px !important;color:#1a1a1a !important;font-weight:600 !important;font-family:"Raleway",Sans-serif !important}@media screen and (max-width:1023px){.stk-493320a .stk-block-heading__text{font-size:24px !important}}</style><h2 class="stk-block-heading__text has-text-color has-text-align-center">Catch-All Einstellungen</h2></div>
<!-- /wp:stackable/heading -->

<!-- wp:stackable/icon {"uniqueId":"6535fc2","icon":"\u003csvg data-prefix=\u0022fas\u0022 data-icon=\u0022chevron-down\u0022 class=\u0022svg-inline\u002d\u002dfa fa-chevron-down fa-w-14\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 viewBox=\u00220 0 448 512\u0022 aria-hidden=\u0022true\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\u0022\u003e\u003c/path\u003e\u003c/svg\u003e"} -->
<div class="wp-block-stackable-icon stk-block-icon stk-block stk-6535fc2" data-block-id="6535fc2"><span class="stk--svg-wrapper"><div class="stk--inner-svg"><svg style="height:0;width:0"><defs><linearGradient id="linear-gradient-6535fc2" x1="0" x2="100%" y1="0" y2="0"><stop offset="0%" style="stop-opacity:1;stop-color:var(--linear-gradient-6535-fc-2-color-1)"></stop><stop offset="100%" style="stop-opacity:1;stop-color:var(--linear-gradient-6535-fc-2-color-2)"></stop></linearGradient></defs></svg><svg data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true" width="32" height="32"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></div></span></div>
<!-- /wp:stackable/icon --></div></div>
<!-- /wp:stackable/icon-label --></div></div></summary>
<!-- /wp:stackable/column -->

<!-- wp:stackable/column {"uniqueId":"63ed91a","containerPadding":{"top":0,"right":"","bottom":8,"left":""},"className":"stk-block-accordion__content"} -->
<div class="wp-block-stackable-column stk-block-column stk-column stk-block stk-63ed91a stk-block-accordion__content" data-v="4" data-block-id="63ed91a"><style>.stk-63ed91a-container{padding-top:0px !important;padding-bottom:8px !important}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-63ed91a-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-63ed91a-inner-blocks"><!-- wp:paragraph -->
<p>This is dummy text</p>
<!-- /wp:paragraph -->

<!-- wp:stackable/icon-list {"uniqueId":"ac653a7","icon":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 viewBox=\u00220 0 320 512\u0022\u003e\u003cpath d=\u0022M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z\u0022/\u003e\u003c/svg\u003e","icons":{"ul li:nth-child(5)":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 viewBox=\u00220 0 384 512\u0022\u003e\u003cpath d=\u0022M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z\u0022/\u003e\u003c/svg\u003e"},"iconSize":1.2,"iconGap":5,"rowGap":8} -->
<div class="wp-block-stackable-icon-list stk-block-icon-list stk-block stk-ac653a7" data-block-id="ac653a7"><style>.stk-ac653a7 .stk-block-icon-list-item__content{gap:5px !important}.stk-ac653a7{--stk-icon-list-row-gap:8px !important;--stk-icon-height:1.2px !important}</style><svg style="display:none"><defs><g id="stk-icon-list__icon-svg-def-ac653a7"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/></svg></g></defs></svg><ul class="stk-block-icon-list__ul stk-block-icon-list--column"><!-- wp:stackable/icon-list-item {"uniqueId":"9f0961d","parentUniqueId":"ac653a7"} -->
<li class="wp-block-stackable-icon-list-item stk-block-icon-list-item stk-block stk-9f0961d" data-block-id="9f0961d"><div class="stk-block-icon-list-item__content"><span class="stk--svg-wrapper"><div class="stk--inner-svg"><svg aria-hidden="true" width="32" height="32"><use xlink:href="#stk-icon-list__icon-svg-def-ac653a7"></use></svg></div></span><span class="stk-block-icon-list-item__text"><div class="body-bg"><div id="content" class="main-section"><div class="container"><div class="row"><div class="col-md-9" role="main"><div id="c24912"><div class="jui-accordion ui-accordion ui-widget ui-helper-reset" data-jui-accordion="{&quot;collapsible&quot;:true,&quot;active&quot;:false,&quot;heightStyle&quot;:&quot;content&quot;}" role="tablist"><div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false"><ul><li>Hey Stackable Team ;)</li></ul></div></div></div></div></div></div></div></div></span></div></li>
<!-- /wp:stackable/icon-list-item -->

<!-- wp:stackable/icon-list-item {"uniqueId":"a03791b","parentUniqueId":"ac653a7"} -->
<li class="wp-block-stackable-icon-list-item stk-block-icon-list-item stk-block stk-a03791b" data-block-id="a03791b"><div class="stk-block-icon-list-item__content"><span class="stk--svg-wrapper"><div class="stk--inner-svg"><svg aria-hidden="true" width="32" height="32"><use xlink:href="#stk-icon-list__icon-svg-def-ac653a7"></use></svg></div></span><span class="stk-block-icon-list-item__text"><div class="body-bg"><div id="content" class="main-section"><div class="container"><div class="row"><div class="col-md-9" role="main"><div id="c24912"><div class="jui-accordion ui-accordion ui-widget ui-helper-reset" data-jui-accordion="{&quot;collapsible&quot;:true,&quot;active&quot;:false,&quot;heightStyle&quot;:&quot;content&quot;}" role="tablist"><div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false"><ul><li>Helloooo</li></ul></div></div></div></div></div></div></div></div></span></div></li>
<!-- /wp:stackable/icon-list-item -->

<!-- wp:stackable/icon-list-item {"uniqueId":"e6d8d66","parentUniqueId":"ac653a7"} -->
<li class="wp-block-stackable-icon-list-item stk-block-icon-list-item stk-block stk-e6d8d66" data-block-id="e6d8d66"><div class="stk-block-icon-list-item__content"><span class="stk--svg-wrapper"><div class="stk--inner-svg"><svg aria-hidden="true" width="32" height="32"><use xlink:href="#stk-icon-list__icon-svg-def-ac653a7"></use></svg></div></span><span class="stk-block-icon-list-item__text"><div class="body-bg"><div id="content" class="main-section"><div class="container"><div class="row"><div class="col-md-9" role="main"><div id="c24912"><div class="jui-accordion ui-accordion ui-widget ui-helper-reset" data-jui-accordion="{&quot;collapsible&quot;:true,&quot;active&quot;:false,&quot;heightStyle&quot;:&quot;content&quot;}" role="tablist"><div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false"><ul><li>Have a great day :)</li></ul></div></div></div></div></div></div></div></div></span></div></li>
<!-- /wp:stackable/icon-list-item --></ul></div>
<!-- /wp:stackable/icon-list --></div></div></div>
<!-- /wp:stackable/column --></details>
<!-- /wp:stackable/accordion -->

<!-- wp:stackable/accordion {"uniqueId":"58ba19e","hasBackground":true,"blockBackgroundColor":"var(\u002d\u002dstk-global-color-81840, #f6f6f6)","blockMargin":{"top":"","right":"","bottom":"","left":""},"blockPadding":{"top":0,"right":0,"bottom":0,"left":0},"onlyOnePanelOpen":true} -->
<details class="wp-block-stackable-accordion stk-block-accordion stk-inner-blocks stk-block-content stk--single-open stk-block stk-58ba19e stk-block-background" data-block-id="58ba19e"><style>.stk-58ba19e{background-color:var(--stk-global-color-81840,#f6f6f6) !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important}.stk-58ba19e:before{background-color:var(--stk-global-color-81840,#f6f6f6) !important}</style><!-- wp:stackable/column {"uniqueId":"fe67aeb","blockPadding":{"top":8,"right":32,"bottom":8,"left":32},"htmlTag":"summary","templateLock":"insert","className":"stk\u002d\u002dcontainer-small stk-block-accordion__heading"} -->
<summary class="wp-block-stackable-column stk-block-column stk-column stk-block stk-fe67aeb stk--container-small stk-block-accordion__heading" data-v="4" data-block-id="fe67aeb"><style>.stk-fe67aeb{padding-top:8px !important;padding-right:32px !important;padding-bottom:8px !important;padding-left:32px !important}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-fe67aeb-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-fe67aeb-inner-blocks"><!-- wp:stackable/icon-label {"uniqueId":"3285383"} -->
<div class="wp-block-stackable-icon-label stk-block-icon-label stk-block stk-3285383" data-block-id="3285383"><div class="stk-row stk-inner-blocks stk-block-content"><!-- wp:stackable/heading {"contentAlign":"center","uniqueId":"9155695","blockMargin":{"top":"","right":"","bottom":"","left":""},"blockPadding":{"top":"","right":"","bottom":"","left":""},"fontSize":24,"fontFamily":"Raleway","fontWeight":"600","textColor1":"#1a1a1a"} -->
<div class="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-9155695" id="how-often-should-i-replace-my-lenses" data-block-id="9155695"><style>.stk-9155695 .stk-block-heading__text{font-size:24px !important;color:#1a1a1a !important;font-weight:600 !important;font-family:"Raleway",Sans-serif !important}@media screen and (max-width:1023px){.stk-9155695 .stk-block-heading__text{font-size:24px !important}}</style><h2 class="stk-block-heading__text has-text-color has-text-align-center">How often should I replace my lenses?</h2></div>
<!-- /wp:stackable/heading -->

<!-- wp:stackable/icon {"uniqueId":"489c799","icon":"\u003csvg data-prefix=\u0022fas\u0022 data-icon=\u0022chevron-down\u0022 class=\u0022svg-inline\u002d\u002dfa fa-chevron-down fa-w-14\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 viewBox=\u00220 0 448 512\u0022 aria-hidden=\u0022true\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\u0022\u003e\u003c/path\u003e\u003c/svg\u003e"} -->
<div class="wp-block-stackable-icon stk-block-icon stk-block stk-489c799" data-block-id="489c799"><span class="stk--svg-wrapper"><div class="stk--inner-svg"><svg style="height:0;width:0"><defs><linearGradient id="linear-gradient-489c799" x1="0" x2="100%" y1="0" y2="0"><stop offset="0%" style="stop-opacity:1;stop-color:var(--linear-gradient-489-c-799-color-1)"></stop><stop offset="100%" style="stop-opacity:1;stop-color:var(--linear-gradient-489-c-799-color-2)"></stop></linearGradient></defs></svg><svg data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true" width="32" height="32"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></div></span></div>
<!-- /wp:stackable/icon --></div></div>
<!-- /wp:stackable/icon-label --></div></div></summary>
<!-- /wp:stackable/column -->

<!-- wp:stackable/column {"uniqueId":"8ae21aa","containerPadding":{"top":0,"right":"","bottom":8,"left":""},"className":"stk-block-accordion__content"} -->
<div class="wp-block-stackable-column stk-block-column stk-column stk-block stk-8ae21aa stk-block-accordion__content" data-v="4" data-block-id="8ae21aa"><style>.stk-8ae21aa-container{padding-top:0px !important;padding-bottom:8px !important}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-8ae21aa-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-8ae21aa-inner-blocks"><!-- wp:stackable/text {"uniqueId":"538dad0","textColorClass":"has-stk-global-color-56986-color","textColor1":"var(\u002d\u002dstk-global-color-56986, #111111)"} -->
<div class="wp-block-stackable-text stk-block-text stk-block stk-538dad0" data-block-id="538dad0"><style>.stk-538dad0 .stk-block-text__text{color:var(--stk-global-color-56986,#111111) !important}</style><p class="stk-block-text__text has-text-color has-stk-global-color-56986-color">Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.</p></div>
<!-- /wp:stackable/text --></div></div></div>
<!-- /wp:stackable/column --></details>
<!-- /wp:stackable/accordion --></div></div></div>
<!-- /wp:stackable/column --></div></div>
<!-- /wp:stackable/columns -->

<!-- wp:stackable/columns {"uniqueId":"c7ab4bb"} -->
<div class="wp-block-stackable-columns stk-block-columns stk-block stk-c7ab4bb" data-block-id="c7ab4bb"><div class="stk-row stk-inner-blocks stk-block-content stk-content-align stk-c7ab4bb-column"><!-- wp:stackable/column {"uniqueId":"c7cebe9","columnWidth":33.3} -->
<div class="wp-block-stackable-column stk-block-column stk-column stk-block stk-c7cebe9" data-v="4" data-block-id="c7cebe9"><style>@media screen and (min-width:768px){.stk-c7cebe9{flex:1 1 33.3% !important}}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-c7cebe9-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-c7cebe9-inner-blocks"><!-- wp:stackable/heading {"contentAlign":"left","uniqueId":"24c91a2","blockMargin":{"top":"","right":"","bottom":"","left":""},"blockPadding":{"top":"","right":"","bottom":"","left":""},"fontSize":32,"fontFamily":"Raleway","fontWeight":"800","textColorClass":"has-stk-global-color-71534-color","textColor1":"var(\u002d\u002dstk-global-color-71534, #ed5521)"} -->
<div class="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-24c91a2" id="sunglasses-care" data-block-id="24c91a2"><style>.stk-24c91a2 .stk-block-heading__text{font-size:32px !important;color:var(--stk-global-color-71534,#ed5521) !important;font-weight:800 !important;font-family:"Raleway",Sans-serif !important}@media screen and (max-width:1023px){.stk-24c91a2 .stk-block-heading__text{font-size:32px !important}}</style><h2 class="stk-block-heading__text has-text-color has-stk-global-color-71534-color has-text-align-left">Sunglasses Care</h2></div>
<!-- /wp:stackable/heading --></div></div></div>
<!-- /wp:stackable/column -->

<!-- wp:stackable/column {"uniqueId":"c25949c","columnWidth":66.7} -->
<div class="wp-block-stackable-column stk-block-column stk-column stk-block stk-c25949c" data-v="4" data-block-id="c25949c"><style>@media screen and (min-width:768px){.stk-c25949c{flex:1 1 66.7% !important}}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-c25949c-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-c25949c-inner-blocks"><!-- wp:stackable/accordion {"uniqueId":"0759664","hasBackground":true,"blockBackgroundColor":"var(\u002d\u002dstk-global-color-81840, #f6f6f6)","blockMargin":{"top":"","right":"","bottom":"","left":""},"blockPadding":{"top":0,"right":0,"bottom":0,"left":0},"onlyOnePanelOpen":true} -->
<details class="wp-block-stackable-accordion stk-block-accordion stk-inner-blocks stk-block-content stk--single-open stk-block stk-0759664 stk-block-background" data-block-id="0759664"><style>.stk-0759664{background-color:var(--stk-global-color-81840,#f6f6f6) !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important}.stk-0759664:before{background-color:var(--stk-global-color-81840,#f6f6f6) !important}</style><!-- wp:stackable/column {"uniqueId":"fca3e31","blockPadding":{"top":8,"right":32,"bottom":8,"left":32},"htmlTag":"summary","templateLock":"insert","className":"stk\u002d\u002dcontainer-small stk-block-accordion__heading"} -->
<summary class="wp-block-stackable-column stk-block-column stk-column stk-block stk-fca3e31 stk--container-small stk-block-accordion__heading" data-v="4" data-block-id="fca3e31"><style>.stk-fca3e31{padding-top:8px !important;padding-right:32px !important;padding-bottom:8px !important;padding-left:32px !important}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-fca3e31-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-fca3e31-inner-blocks"><!-- wp:stackable/icon-label {"uniqueId":"497257f"} -->
<div class="wp-block-stackable-icon-label stk-block-icon-label stk-block stk-497257f" data-block-id="497257f"><div class="stk-row stk-inner-blocks stk-block-content"><!-- wp:stackable/heading {"contentAlign":"center","uniqueId":"9ac4bb3","blockMargin":{"top":"","right":"","bottom":"","left":""},"blockPadding":{"top":"","right":"","bottom":"","left":""},"fontSize":24,"fontFamily":"Raleway","fontWeight":"600","textColor1":"#1a1a1a"} -->
<div class="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-9ac4bb3" id="do-your-sunglasses-have-prescription" data-block-id="9ac4bb3"><style>.stk-9ac4bb3 .stk-block-heading__text{font-size:24px !important;color:#1a1a1a !important;font-weight:600 !important;font-family:"Raleway",Sans-serif !important}@media screen and (max-width:1023px){.stk-9ac4bb3 .stk-block-heading__text{font-size:24px !important}}</style><h2 class="stk-block-heading__text has-text-color has-text-align-center">Do your sunglasses have prescription?</h2></div>
<!-- /wp:stackable/heading -->

<!-- wp:stackable/icon {"uniqueId":"c8a7cb0","icon":"\u003csvg data-prefix=\u0022fas\u0022 data-icon=\u0022chevron-down\u0022 class=\u0022svg-inline\u002d\u002dfa fa-chevron-down fa-w-14\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 viewBox=\u00220 0 448 512\u0022 aria-hidden=\u0022true\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\u0022\u003e\u003c/path\u003e\u003c/svg\u003e"} -->
<div class="wp-block-stackable-icon stk-block-icon stk-block stk-c8a7cb0" data-block-id="c8a7cb0"><span class="stk--svg-wrapper"><div class="stk--inner-svg"><svg style="height:0;width:0"><defs><linearGradient id="linear-gradient-c8a7cb0" x1="0" x2="100%" y1="0" y2="0"><stop offset="0%" style="stop-opacity:1;stop-color:var(--linear-gradient-c-8-a-7-cb-0-color-1)"></stop><stop offset="100%" style="stop-opacity:1;stop-color:var(--linear-gradient-c-8-a-7-cb-0-color-2)"></stop></linearGradient></defs></svg><svg data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true" width="32" height="32"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></div></span></div>
<!-- /wp:stackable/icon --></div></div>
<!-- /wp:stackable/icon-label --></div></div></summary>
<!-- /wp:stackable/column -->

<!-- wp:stackable/column {"uniqueId":"dfcc288","containerPadding":{"top":0,"right":"","bottom":8,"left":""},"className":"stk-block-accordion__content"} -->
<div class="wp-block-stackable-column stk-block-column stk-column stk-block stk-dfcc288 stk-block-accordion__content" data-v="4" data-block-id="dfcc288"><style>.stk-dfcc288-container{padding-top:0px !important;padding-bottom:8px !important}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-dfcc288-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-dfcc288-inner-blocks"><!-- wp:stackable/text {"uniqueId":"78764ad","textColorClass":"has-stk-global-color-56986-color","textColor1":"var(\u002d\u002dstk-global-color-56986, #111111)"} -->
<div class="wp-block-stackable-text stk-block-text stk-block stk-78764ad" data-block-id="78764ad"><style>.stk-78764ad .stk-block-text__text{color:var(--stk-global-color-56986,#111111) !important}</style><p class="stk-block-text__text has-text-color has-stk-global-color-56986-color">Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.</p></div>
<!-- /wp:stackable/text --></div></div></div>
<!-- /wp:stackable/column --></details>
<!-- /wp:stackable/accordion -->

<!-- wp:stackable/accordion {"uniqueId":"bc557dc","hasBackground":true,"blockBackgroundColor":"var(\u002d\u002dstk-global-color-81840, #f6f6f6)","blockMargin":{"top":"","right":"","bottom":"","left":""},"blockPadding":{"top":0,"right":0,"bottom":0,"left":0},"onlyOnePanelOpen":true} -->
<details class="wp-block-stackable-accordion stk-block-accordion stk-inner-blocks stk-block-content stk--single-open stk-block stk-bc557dc stk-block-background" data-block-id="bc557dc"><style>.stk-bc557dc{background-color:var(--stk-global-color-81840,#f6f6f6) !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important}.stk-bc557dc:before{background-color:var(--stk-global-color-81840,#f6f6f6) !important}</style><!-- wp:stackable/column {"uniqueId":"3822167","blockPadding":{"top":8,"right":32,"bottom":8,"left":32},"htmlTag":"summary","templateLock":"insert","className":"stk\u002d\u002dcontainer-small stk-block-accordion__heading"} -->
<summary class="wp-block-stackable-column stk-block-column stk-column stk-block stk-3822167 stk--container-small stk-block-accordion__heading" data-v="4" data-block-id="3822167"><style>.stk-3822167{padding-top:8px !important;padding-right:32px !important;padding-bottom:8px !important;padding-left:32px !important}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-3822167-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-3822167-inner-blocks"><!-- wp:stackable/icon-label {"uniqueId":"e9a998a"} -->
<div class="wp-block-stackable-icon-label stk-block-icon-label stk-block stk-e9a998a" data-block-id="e9a998a"><div class="stk-row stk-inner-blocks stk-block-content"><!-- wp:stackable/heading {"contentAlign":"center","uniqueId":"f85d826","blockMargin":{"top":"","right":"","bottom":"","left":""},"blockPadding":{"top":"","right":"","bottom":"","left":""},"fontSize":24,"fontFamily":"Raleway","fontWeight":"600","textColor1":"#1a1a1a"} -->
<div class="wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-f85d826" id="do-they-block-out-uv-rays" data-block-id="f85d826"><style>.stk-f85d826 .stk-block-heading__text{font-size:24px !important;color:#1a1a1a !important;font-weight:600 !important;font-family:"Raleway",Sans-serif !important}@media screen and (max-width:1023px){.stk-f85d826 .stk-block-heading__text{font-size:24px !important}}</style><h2 class="stk-block-heading__text has-text-color has-text-align-center">Do they block out UV rays?</h2></div>
<!-- /wp:stackable/heading -->

<!-- wp:stackable/icon {"uniqueId":"668a794","icon":"\u003csvg data-prefix=\u0022fas\u0022 data-icon=\u0022chevron-down\u0022 class=\u0022svg-inline\u002d\u002dfa fa-chevron-down fa-w-14\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 viewBox=\u00220 0 448 512\u0022 aria-hidden=\u0022true\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\u0022\u003e\u003c/path\u003e\u003c/svg\u003e"} -->
<div class="wp-block-stackable-icon stk-block-icon stk-block stk-668a794" data-block-id="668a794"><span class="stk--svg-wrapper"><div class="stk--inner-svg"><svg style="height:0;width:0"><defs><linearGradient id="linear-gradient-668a794" x1="0" x2="100%" y1="0" y2="0"><stop offset="0%" style="stop-opacity:1;stop-color:var(--linear-gradient-668-a-794-color-1)"></stop><stop offset="100%" style="stop-opacity:1;stop-color:var(--linear-gradient-668-a-794-color-2)"></stop></linearGradient></defs></svg><svg data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true" width="32" height="32"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></div></span></div>
<!-- /wp:stackable/icon --></div></div>
<!-- /wp:stackable/icon-label --></div></div></summary>
<!-- /wp:stackable/column -->

<!-- wp:stackable/column {"uniqueId":"bb53042","containerPadding":{"top":0,"right":"","bottom":8,"left":""},"className":"stk-block-accordion__content"} -->
<div class="wp-block-stackable-column stk-block-column stk-column stk-block stk-bb53042 stk-block-accordion__content" data-v="4" data-block-id="bb53042"><style>.stk-bb53042-container{padding-top:0px !important;padding-bottom:8px !important}</style><div class="stk-column-wrapper stk-block-column__content stk-container stk-bb53042-container stk--no-background stk--no-padding"><div class="stk-block-content stk-inner-blocks stk-bb53042-inner-blocks"><!-- wp:stackable/text {"uniqueId":"ee209e3","textColorClass":"has-stk-global-color-56986-color","textColor1":"var(\u002d\u002dstk-global-color-56986, #111111)"} -->
<div class="wp-block-stackable-text stk-block-text stk-block stk-ee209e3" data-block-id="ee209e3"><style>.stk-ee209e3 .stk-block-text__text{color:var(--stk-global-color-56986,#111111) !important}</style><p class="stk-block-text__text has-text-color has-stk-global-color-56986-color">Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.</p></div>
<!-- /wp:stackable/text --></div></div></div>
<!-- /wp:stackable/column --></details>
<!-- /wp:stackable/accordion --></div></div></div>
<!-- /wp:stackable/column --></div></div>
<!-- /wp:stackable/columns --></div></div></div>
<!-- /wp:stackable/column --></div></div>
<!-- /wp:stackable/columns -->

benniledl avatar Feb 29 '24 08:02 benniledl

Hi @at-benni,

Thank you for providing your block code. Upon checking it out, it seems that the Icon List's Icon Size is set to 1.2.

Can you try adjusting the Icon Size to 10 or more and see if the icons appear now? Here's a sample screenshot which the Icon Size is currently set to 15. Let me know how it goes!

Screenshot 2024-03-04 at 10 09 29 AM

andeng1106 avatar Mar 04 '24 02:03 andeng1106

Thanks @andeng1106 , it works :D I don't know why it was set to this tho, is that the block standard? Only problem I have now is that the default circles still appear

benniledl avatar Mar 04 '24 07:03 benniledl

@at-benni Glad to know that it works!

I don't know why it was set to this tho, is that the block standard?

The Icon Size before the Icon List update was in em but it has been changed to px. Some icon sizes in em will show the equivalent size to px, causing some icon sizes to adjust.

Only problem I have now is that the default circles still appear

You can change/modify the Content for the Icon List item as the circles are included in the content 😄

andeng1106 avatar Mar 05 '24 07:03 andeng1106