[Feature] Allow to mark elements so they share styles

[rinart73]

I have a grid of services that is essentially a combination of Sections and Info Boxes: https://i.ibb.co/k0chTvr/image.png

The structure is:

• Main Section
  • Section/Column x6
    • Info Box

All styles, both generated based on UI settings and custom ones, are identical for those sections and info blocks. Yet Kadence Blocks understandably puts those styles 6 times in the document with only selectors being different, which creates quite a lot of CSS.

To give context, column CSS for just one element:

.kadence-column_637388-c2{max-width:26%;margin-left:auto;margin-right:auto;}.wp-block-kadence-column>.kt-inside-inner-col>.kadence-column_637388-c2{flex:1 26%;-webkit-flex:1 26%;}.wp-block-kadence-column.kb-section-dir-horizontal>.kt-inside-inner-col>.kadence-column_637388-c2{flex:0 1 26%;-webkit-flex:0 1 26%;max-width:unset;margin-left:unset;margin-right:unset;}.kadence-column_637388-c2 > .kt-inside-inner-col{justify-content:center;flex-direction:column;display:flex;}.kadence-column_637388-c2 > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column_637388-c2{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column_637388-c2{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column_637388-c2 > .kt-inside-inner-col{display:flex;flex-direction:column;justify-content:center;}@media all and (max-width: 1024px){.wp-block-kadence-column.kb-section-md-dir-vertical>.kt-inside-inner-col>.kadence-column_637388-c2{max-width:26%;margin-left:auto;margin-right:auto;}}@media all and (max-width: 767px){.kadence-column_637388-c2, .wp-block-kadence-column.kb-section-sm-dir-vertical:not(.kb-section-sm-dir-horizontal):not(.kb-section-sm-dir-specificity)>.kt-inside-inner-col>.kadence-column_637388-c2{max-width:34%;margin-left:auto;margin-right:auto;}.wp-block-kadence-column>.kt-inside-inner-col>.kadence-column_637388-c2{flex:1 34%;-webkit-flex:1 34%;}.wp-block-kadence-column.kb-section-sm-dir-horizontal>.kt-inside-inner-col>.kadence-column_637388-c2, .wp-block-kadence-column.kb-section-dir-horizontal:not(.kb-section-sm-dir-vertical):not(.kb-section-md-dir-vertical) >.kt-inside-inner-col>.kadence-column_637388-c2{flex:0 1 34%;-webkit-flex:0 1 34%;max-width:unset;margin-left:unset;margin-right:unset;}}

And Info Box CSS for just one element:

#kt-info-box_ddb18a-94 .kt-blocks-info-box-link-wrap{background:var(--accent);padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px;}#kt-info-box_ddb18a-94 .kt-blocks-info-box-link-wrap:hover{border-color:#eeeeee;background:var(--accent);}#kt-info-box_ddb18a-94 .kt-info-svg-icon, #kt-info-box_ddb18a-94 .kt-info-svg-icon-flip, #kt-info-box_ddb18a-94 .kt-blocks-info-box-number{font-size:60px;}@media all and (max-width: 767px){#kt-info-box_ddb18a-94 .kt-info-svg-icon, #kt-info-box_ddb18a-94 .kt-info-svg-icon-flip, #kt-info-box_ddb18a-94 .kt-blocks-info-box-number{font-size:48px;}}#kt-info-box_ddb18a-94 .kt-blocks-info-box-media{color:var(--base-3);background:transparent;border-color:#444444;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;}#kt-info-box_ddb18a-94 .kt-blocks-info-box-media-container{margin-top:0px;margin-right:15px;margin-bottom:0px;margin-left:15px;}#kt-info-box_ddb18a-94 .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media{color:var(--base-3);background:transparent;border-color:#444444;}#kt-info-box_ddb18a-94 .kt-blocks-info-box-text{color:var(--base-3);font-size:0.84em;text-transform:uppercase;}#kt-info-box_ddb18a-94 .kt-blocks-info-box-link-wrap{box-shadow:5px 5px 1px 2px rgba(43, 147, 227, 0.15);}#kt-info-box_ddb18a-94 .kt-blocks-info-box-link-wrap:hover{box-shadow:3px 3px 1px 2px rgba(43, 147, 227, 0.15);}

My suggestion: Allow to manually mark elements which will share styles. Those elements of course should be of the same type (so you can’t match styles of Info Block and Section). Those elements will have the same class selector and so their styles will only be put in the document once.

From what I can see this would require to change some selectors from ids to classes (for Info Boxes for example #kt-info-box_ddb18a-94)