From 8122cccf59ebf2769c12bbff464a7b413cc9667e Mon Sep 17 00:00:00 2001
From: Benjamin Intal <bfintal@gmail.com>
Date: Mon, 23 Sep 2024 14:20:52 +0800
Subject: [PATCH 01/18] Fix: Editor Performance Rework (#3290)

* added generator

* partial implementation in the column block

* optimized AdvancedRangeControl

* useMemo instead of useRafMemo

* removed caching

* added implementation for text block

* Optimized useBlockCssGenerator for edit and save

* converted alignment

* finalized styles for inner column and text blocks

* modified columns block style implementation

* optimized string concat to array join

* optimized column edit to remove useBlockContext

* optimized group placeholder

* changed use context

* optimized some useBlockContext

* since render appender is now undefined if a block has contents, then we also need to change this to last child

* removed minification from save css, let's not worry about this so we can save speed

* optimize css save compiler

* cache previous css generated

* sometimes do not use useAttributeEditHandlers

* memoed the alignment toolbar

* fixed number of columns

* fixed useSelect where we're not getting the innerBlocks but just block order

* fixed css of attributes with valuePreCallback are not generated

* memo renderAppender

* optimized column component

* apply to heading

* apply to subtitle

* apply to spacer

* apply to divider

* optimized block hover state hook to prevent rerenders

* added memo to some components

* separated the inspector controls into a separated memoed component to prevent rerenders

* changed component name to InspectorControls

* optimize divider inspector controls

* fix hover state

* optimize heading and spacer inspector controls

* apply to accordion and blockquote

* apply to button and button group

* optimize inspector controls

* fix block errors for timeline, progress bar and circle

* apply block changes to all blocks

* fix posts and separator block

* fix separator layer styles

* fix separator block

* fix adding button block

* fix desktop column wrap in feature block

* fix background responsive

* fix generatedCss

* delete from this.addedStyles

* fix style generation for save

* fix tabs block

* remove render appender

* revert appender

* remove conditional for background

* use orderedStyles

* add dynamicBlockStyles in orderedStyles

* small changes to avoid confusion

* remove unused function

* return ordered block styles if no attrNames passed

* remove old styles

---------

Co-authored-by: bfintal@gmail.com <>
Co-authored-by: mxkae <tapiamkr@gmail.com>
---
 src/__block-container-template/edit.js        |   2 +-
 src/block-components/advanced/index.js        |   4 +-
 src/block-components/advanced/style.js        | 637 ++++++------
 src/block-components/alignment/edit.js        |  10 +-
 src/block-components/alignment/index.js       |   4 +-
 src/block-components/alignment/style.js       | 579 ++++++-----
 src/block-components/block-div/edit.js        |   5 +-
 src/block-components/block-div/index.js       |   9 +-
 src/block-components/block-div/style.js       |  38 +-
 src/block-components/button/edit.js           |  30 +-
 src/block-components/button/index.js          |   4 +-
 src/block-components/button/style.js          | 422 ++++----
 .../column/get-column-handlers.js             | 142 +++
 src/block-components/column/index.js          |  32 +-
 src/block-components/column/style.js          | 172 ++--
 .../columns/column-settings-button.js         |  14 +-
 src/block-components/columns/edit.js          |  19 +-
 src/block-components/columns/index.js         |   4 +-
 src/block-components/columns/style.js         | 316 +++---
 src/block-components/container-div/index.js   |   4 +-
 src/block-components/container-div/style.js   | 111 +-
 src/block-components/content-align/index.js   |   2 +-
 .../effects-animations/index.js               |   4 +-
 .../effects-animations/style.js               |  12 +-
 .../helpers/backgrounds/style.js              | 598 ++++++-----
 src/block-components/helpers/borders/style.js | 419 ++++----
 .../helpers/flex-gap/style.js                 |  78 +-
 src/block-components/helpers/size/edit.js     |   6 +-
 src/block-components/helpers/size/style.js    | 529 +++++-----
 src/block-components/icon/index.js            |   4 +-
 src/block-components/icon/style.js            | 545 +++++-----
 src/block-components/image/index.js           |   4 +-
 src/block-components/image/style.js           | 951 +++++++++---------
 src/block-components/margin-bottom/index.js   |  53 +-
 src/block-components/margin-bottom/style.js   |  37 +-
 src/block-components/progress-bar/index.js    |   4 +-
 src/block-components/progress-bar/style.js    | 434 ++++----
 src/block-components/row/index.js             |  19 +-
 src/block-components/separator/edit.js        |   8 +-
 src/block-components/separator/index.js       |   6 +-
 src/block-components/separator/style.js       | 258 +++--
 src/block-components/transform/index.js       |   4 +-
 src/block-components/transform/style.js       |  12 +-
 src/block-components/typography/index.js      |   4 +-
 src/block-components/typography/style.js      | 512 ++++++----
 src/block/accordion/edit.js                   | 118 ++-
 src/block/accordion/save.js                   |   7 +-
 src/block/accordion/style.js                  |  54 +-
 src/block/blockquote/edit.js                  |  74 +-
 src/block/blockquote/save.js                  |   7 +-
 src/block/blockquote/style.js                 |  60 +-
 src/block/button-group/edit.js                | 160 +--
 src/block/button-group/save.js                |   7 +-
 src/block/button-group/style.js               | 452 ++++-----
 src/block/button-group/variations.js          |   6 +
 src/block/button/edit.js                      | 103 +-
 src/block/button/save.js                      |   7 +-
 src/block/button/style.js                     |  99 +-
 src/block/call-to-action/edit.js              |  74 +-
 src/block/call-to-action/save.js              |   7 +-
 src/block/call-to-action/style.js             |  62 +-
 src/block/card/edit.js                        |  96 +-
 src/block/card/save.js                        |   7 +-
 src/block/card/style.js                       | 109 +-
 src/block/carousel/edit.js                    | 836 +++++++--------
 src/block/carousel/save.js                    |   7 +-
 src/block/carousel/style.js                   | 475 ++++-----
 src/block/column/edit.js                      | 178 ++--
 src/block/column/save.js                      |   7 +-
 src/block/column/style.js                     | 260 ++---
 src/block/columns/edit.js                     | 112 ++-
 src/block/columns/save.js                     |   7 +-
 src/block/columns/style.js                    |  83 +-
 src/block/count-up/edit.js                    | 104 +-
 src/block/count-up/save.js                    |   7 +-
 src/block/count-up/style.js                   |  53 +-
 src/block/countdown/divider.js                |  93 +-
 src/block/countdown/edit.js                   | 348 ++++---
 src/block/countdown/save.js                   |   3 +-
 src/block/countdown/style.js                  | 165 +--
 src/block/divider/edit.js                     | 105 +-
 src/block/divider/save.js                     |   3 +-
 src/block/divider/style.js                    | 277 +++--
 src/block/expand/edit.js                      |  67 +-
 src/block/expand/save.js                      |   8 +-
 src/block/expand/style.js                     |  54 +-
 src/block/feature-grid/edit.js                |  77 +-
 src/block/feature-grid/save.js                |   7 +-
 src/block/feature-grid/style.js               |  66 +-
 src/block/feature/edit.js                     |  73 +-
 src/block/feature/save.js                     |   7 +-
 src/block/feature/style.js                    | 144 +--
 src/block/heading/edit.js                     | 268 ++---
 src/block/heading/save.js                     |   7 +-
 src/block/heading/style.js                    | 269 ++---
 src/block/hero/edit.js                        |  71 +-
 src/block/hero/save.js                        |   7 +-
 src/block/hero/style.js                       |  61 +-
 src/block/horizontal-scroller/edit.js         | 261 ++---
 src/block/horizontal-scroller/save.js         |   7 +-
 src/block/horizontal-scroller/style.js        | 269 ++---
 src/block/icon-box/edit.js                    |  75 +-
 src/block/icon-box/save.js                    |   7 +-
 src/block/icon-box/style.js                   |  59 +-
 src/block/icon-button/edit.js                 |  89 +-
 src/block/icon-button/save.js                 |   7 +-
 src/block/icon-button/style.js                |  53 +-
 src/block/icon-label/edit.js                  |  99 +-
 src/block/icon-label/save.js                  |   7 +-
 src/block/icon-label/style.js                 | 110 +-
 src/block/icon-list-item/edit.js              |  69 +-
 src/block/icon-list-item/save.js              |   7 +-
 src/block/icon-list-item/style.js             |  55 +-
 src/block/icon-list/deprecated/save.js        |   2 +-
 src/block/icon-list/deprecated/style.js       | 274 +++++
 src/block/icon-list/edit.js                   | 527 +++++-----
 src/block/icon-list/save.js                   |   3 +-
 src/block/icon-list/style.js                  | 455 ++++-----
 src/block/icon/edit.js                        |  93 +-
 src/block/icon/save.js                        |   7 +-
 src/block/icon/style.js                       |  56 +-
 src/block/image-box/edit.js                   |  66 +-
 src/block/image-box/save.js                   |   6 +-
 src/block/image-box/style.js                  |  49 +-
 src/block/image/edit.js                       |  89 +-
 src/block/image/save.js                       |   7 +-
 src/block/image/style.js                      |  89 +-
 src/block/map/edit.js                         | 461 +++++----
 src/block/map/save.js                         |   3 +-
 src/block/map/style.js                        | 103 +-
 src/block/notification/edit.js                | 176 ++--
 src/block/notification/save.js                |   3 +-
 src/block/notification/style.js               | 116 +--
 src/block/number-box/edit.js                  | 133 +--
 src/block/number-box/save.js                  |   7 +-
 src/block/number-box/style.js                 | 157 +--
 src/block/posts/edit.js                       | 477 ++++-----
 src/block/posts/save.js                       |   3 +-
 src/block/posts/style.js                      | 670 ++++++------
 src/block/price/edit.js                       |  56 +-
 src/block/price/save.js                       |   7 +-
 src/block/price/style.js                      |  51 +-
 src/block/pricing-box/edit.js                 |  73 +-
 src/block/pricing-box/save.js                 |   7 +-
 src/block/pricing-box/style.js                |  57 +-
 src/block/progress-bar/edit.js                |  84 +-
 src/block/progress-bar/save.js                |   3 +-
 src/block/progress-bar/style.js               |  62 +-
 src/block/progress-circle/edit.js             |  86 +-
 src/block/progress-circle/save.js             |   3 +-
 src/block/progress-circle/style.js            |  64 +-
 src/block/separator/edit.js                   | 127 +--
 src/block/separator/save.js                   |   7 +-
 src/block/separator/style.js                  |  81 +-
 src/block/spacer/edit.js                      |  89 +-
 src/block/spacer/save.js                      |   8 +-
 src/block/spacer/style.js                     |  84 +-
 src/block/subtitle/edit.js                    |  74 +-
 src/block/subtitle/save.js                    |   4 +-
 src/block/subtitle/style.js                   |  58 +-
 src/block/tab-content/edit.js                 |  58 +-
 src/block/tab-content/save.js                 |   7 +-
 src/block/tab-content/style.js                |  63 +-
 src/block/tab-labels/edit.js                  | 728 +++++++-------
 src/block/tab-labels/save.js                  |   7 +-
 src/block/tab-labels/style.js                 | 387 +++----
 src/block/table-of-contents/edit.js           | 254 ++---
 src/block/table-of-contents/save.js           |   3 +-
 src/block/table-of-contents/style.js          | 346 +++----
 src/block/tabs/edit.js                        | 239 +++--
 src/block/tabs/save.js                        |   7 +-
 src/block/tabs/style.js                       | 136 +--
 src/block/team-member/edit.js                 |  71 +-
 src/block/team-member/save.js                 |   7 +-
 src/block/team-member/style.js                |  59 +-
 src/block/testimonial/edit.js                 |  71 +-
 src/block/testimonial/save.js                 |   7 +-
 src/block/testimonial/style.js                |  59 +-
 src/block/text/edit.js                        | 151 +--
 src/block/text/save.js                        |   4 +-
 src/block/text/style.js                       | 109 +-
 src/block/timeline/edit.js                    | 267 ++---
 src/block/timeline/save.js                    |   7 +-
 src/block/timeline/style.js                   | 361 +++----
 src/block/video-popup/edit.js                 | 194 ++--
 src/block/video-popup/save.js                 |   7 +-
 src/block/video-popup/style.js                |  86 +-
 .../advanced-range-control/range-control.js   |  40 +-
 .../block-css/block-style-generator-class.js  | 309 ++++++
 src/components/block-css/css-save-compiler.js |  38 +-
 src/components/block-css/index.js             |   8 +-
 .../block-css/use-block-style-generator.js    |  77 ++
 .../color-palette-popup.js                    |   5 +-
 src/components/column-inserter/index.js       |   4 +-
 .../dynamic-content-control/index.js          | 101 ++
 src/components/group-placeholder/index.js     |   8 +-
 src/components/index.js                       |   5 +-
 src/components/resizable-column/index.js      |  48 +-
 src/higher-order/with-block-wrapper/index.js  |  15 +-
 src/hooks/use-block-hover-state.js            |  61 +-
 src/util/attributes/index.js                  |   8 +
 201 files changed, 11514 insertions(+), 12078 deletions(-)
 create mode 100644 src/block-components/column/get-column-handlers.js
 create mode 100644 src/block/icon-list/deprecated/style.js
 create mode 100644 src/components/block-css/block-style-generator-class.js
 create mode 100644 src/components/block-css/use-block-style-generator.js

diff --git a/src/__block-container-template/edit.js b/src/__block-container-template/edit.js
index d8452808e..5e62860a5 100644
--- a/src/__block-container-template/edit.js
+++ b/src/__block-container-template/edit.js
@@ -118,7 +118,7 @@ const Edit = props => {
 				/>
 				<CustomCSS mainBlockClass="stk-block-columns" />
 
-				{ ! hasInnerBlocks && <GroupPlaceholder /> }
+				{ ! hasInnerBlocks && <GroupPlaceholder blockName="stackable/column" /> }
 				<Separator>
 					<div
 						className={ contentClassNames }
diff --git a/src/block-components/advanced/index.js b/src/block-components/advanced/index.js
index 3f617981d..a9826ea21 100644
--- a/src/block-components/advanced/index.js
+++ b/src/block-components/advanced/index.js
@@ -1,6 +1,6 @@
 import { addAttributes } from './attributes'
 import { Edit } from './edit'
-import { Style } from './style'
+import { addStyles } from './style'
 
 export const Advanced = () => {
 	return null
@@ -10,4 +10,4 @@ Advanced.InspectorControls = Edit
 
 Advanced.addAttributes = addAttributes
 
-Advanced.Style = Style
+Advanced.addStyles = addStyles
diff --git a/src/block-components/advanced/style.js b/src/block-components/advanced/style.js
index 7f789c624..0e76a3525 100644
--- a/src/block-components/advanced/style.js
+++ b/src/block-components/advanced/style.js
@@ -1,9 +1,4 @@
-/**
- * External dependencies
- */
-import { BlockCss } from '~stackable/components'
-
-const Styles = props => {
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -15,333 +10,315 @@ const Styles = props => {
 		dependencies = [],
 	} = props
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector={ positionSelector }
-				hoverSelector={ positionSelector ? `${ positionSelector }:hover` : undefined }
-				styleRule="top"
-				attrName="positionNum"
-				key="positionNum-save-top"
-				responsive="all"
-				hover="all"
-				hasUnits="px"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					// If position is sticky, we need to set top: 0px or else the sticky won't show.
-					if ( device === 'desktop' && state === 'normal' ) {
-						const isSticky = getAttribute( 'position', device, 'normal', true ) === 'sticky'
-						const isTopBlank = ! value || ( value && value.top === '' )
-						if ( isSticky && isTopBlank ) {
-							return 0
-						}
-					}
+	blockStyleGenerator.addBlockStyles( 'positionNum', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selector: positionSelector,
+		hoverSelector: positionSelector ? `${ positionSelector }:hover` : undefined,
+		styleRule: 'top',
+		attrName: 'positionNum',
+		key: 'positionNum-save-top',
+		responsive: 'all',
+		hover: 'all',
+		hasUnits: 'px',
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			// If position is sticky, we need to set top: 0px or else the sticky won't show.
+			if ( device === 'desktop' && state === 'normal' ) {
+				const isSticky = getAttribute( 'position', device, 'normal', true ) === 'sticky'
+				const isTopBlank = ! value || ( value && value.top === '' )
+				if ( isSticky && isTopBlank ) {
+					return 0
+				}
+			}
 
-					return value?.top
-				} }
-				dependencies={ [
-					'position',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector={ positionSelector }
-				hoverSelector={ positionSelector ? `${ positionSelector }:hover` : undefined }
-				styleRule="right"
-				attrName="positionNum"
-				key="positionNum-save-right"
-				responsive="all"
-				hover="all"
-				hasUnits="px"
-				valuePreCallback={ value => value?.right }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector={ positionSelector }
-				hoverSelector={ positionSelector ? `${ positionSelector }:hover` : undefined }
-				styleRule="bottom"
-				attrName="positionNum"
-				key="positionNum-save-bottom"
-				responsive="all"
-				hover="all"
-				hasUnits="px"
-				valuePreCallback={ value => value?.bottom }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector={ positionSelector }
-				hoverSelector={ positionSelector ? `${ positionSelector }:hover` : undefined }
-				styleRule="left"
-				attrName="positionNum"
-				key="positionNum-save-left"
-				responsive="all"
-				hover="all"
-				hasUnits="px"
-				valuePreCallback={ value => value?.left }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=""
-				styleRule="position"
-				attrName="position"
-				key="position-save"
-				responsive="all"
-			/>
-			{ /**
-			   * For positions (top, right, bottom, left) and postiion (absolute,
-			   * sticky) we need to apply these to the block itself so it would look
-			   * correctly in the editor.
-			   */ }
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]` }
-				hoverSelectorCallback={ ( getAttributes, attributes, clientId ) => positionSelector ? `.editor-styles-wrapper [data-block="${ clientId }"]:hover` : undefined }
-				styleRule="top"
-				attrName="positionNum"
-				key="positionNum-top"
-				responsive="all"
-				hover="all"
-				hasUnits="px"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-				// If position is sticky, we need to set top: 0px or else the sticky won't show.
-					if ( device === 'desktop' && state === 'normal' ) {
-						const isSticky = getAttribute( 'position', device, 'normal', true ) === 'sticky'
-						const isTopBlank = ! value || ( value && value.top === '' )
-						if ( isSticky && isTopBlank ) {
-							return 0
-						}
-					}
+			return value?.top
+		},
+		dependencies: [
+			'position',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: positionSelector,
+		hoverSelector: positionSelector ? `${ positionSelector }:hover` : undefined,
+		styleRule: 'right',
+		attrName: 'positionNum',
+		key: 'positionNum-save-right',
+		responsive: 'all',
+		hover: 'all',
+		hasUnits: 'px',
+		valuePreCallback: value => value?.right,
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: positionSelector,
+		hoverSelector: positionSelector ? `${ positionSelector }:hover` : undefined,
+		styleRule: 'bottom',
+		attrName: 'positionNum',
+		key: 'positionNum-save-bottom',
+		responsive: 'all',
+		hover: 'all',
+		hasUnits: 'px',
+		valuePreCallback: value => value?.bottom,
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: positionSelector,
+		hoverSelector: positionSelector ? `${ positionSelector }:hover` : undefined,
+		styleRule: 'left',
+		attrName: 'positionNum',
+		key: 'positionNum-save-left',
+		responsive: 'all',
+		hover: 'all',
+		hasUnits: 'px',
+		valuePreCallback: value => value?.left,
+	} ] )
 
-					return value?.top
-				} }
-				dependencies={ [
-					'position',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]` }
-				hoverSelectorCallback={ ( getAttributes, attributes, clientId ) => positionSelector ? `.editor-styles-wrapper [data-block="${ clientId }"]:hover` : undefined }
-				selector={ positionSelector }
-				hoverSelector={ positionSelector ? `${ positionSelector }:hover` : undefined }
-				styleRule="bottom"
-				attrName="positionNum"
-				key="positionNum-bottom"
-				responsive="all"
-				hover="all"
-				hasUnits="px"
-				valuePreCallback={ value => value?.bottom }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]` }
-				hoverSelectorCallback={ ( getAttributes, attributes, clientId ) => positionSelector ? `.editor-styles-wrapper [data-block="${ clientId }"]:hover` : undefined }
-				selector={ positionSelector }
-				hoverSelector={ positionSelector ? `${ positionSelector }:hover` : undefined }
-				styleRule="left"
-				attrName="positionNum"
-				key="positionNum-left"
-				responsive="all"
-				hover="all"
-				hasUnits="px"
-				valuePreCallback={ value => value?.left }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]` }
-				hoverSelectorCallback={ ( getAttributes, attributes, clientId ) => positionSelector ? `.editor-styles-wrapper [data-block="${ clientId }"]:hover` : undefined }
-				selector={ positionSelector }
-				hoverSelector={ positionSelector ? `${ positionSelector }:hover` : undefined }
-				styleRule="right"
-				attrName="positionNum"
-				key="positionNum-right"
-				responsive="all"
-				hover="all"
-				hasUnits="px"
-				valuePreCallback={ value => value?.right }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector={ positionSelector }
-				hoverSelector={ positionSelector ? `${ positionSelector }:hover` : undefined }
-				styleRule="position"
-				attrName="positionNum"
-				key="positionNum"
-				responsive="all"
-				hover="all"
-				valuePreCallback={ ( value, getAttribute, device ) => {
-					if ( value && ( value.top !== '' || value.right !== '' || value.bottom !== '' || value.left !== '' ) ) {
-						if ( getAttribute( 'position', device ) === '' ) {
-							return 'relative'
-						}
-					}
-					return undefined
-				} }
-				dependencies={ [
-					'position',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]` }
-				styleRule="position"
-				attrName="position"
-				key="position"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="opacity"
-				attrName="opacity"
-				key="opacity"
-				responsive="all"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				// We need to implement z-index on the block itself or else it won't look correct in the editor.
-				renderIn="edit"
-				selectorCallback={ ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]` }
-				styleRule="zIndex"
-				attrName="zIndex"
-				key="zIndex"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=""
-				styleRule="zIndex"
-				attrName="zIndex"
-				key="zIndex-save"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="overflow"
-				attrName="overflow"
-				key="overflow"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-container"
-				styleRule="overflow"
-				attrName="overflow"
-				key="overflow-container"
-				enabledCallback={ getAttribute => getAttribute( 'overflow' ) === 'visible' }
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="clear"
-				attrName="clear"
-				key="clear"
-			/>
+	blockStyleGenerator.addBlockStyles( 'position', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selector: '',
+		styleRule: 'position',
+		attrName: 'position',
+		key: 'position-save',
+		responsive: 'all',
+	} ] )
 
-			{
-			// If a top, right, bottom, left hover state position was given, it will not
-			// animate since there is no initial value for the position (e.g. top: 0). This
-			// function adds a `top: 0` for the normal state of the CSS if there's a hover
-			// state position e.g. hover `top: 20px` given but no initial state.
-			}
-			<BlockCss
-				{ ...propsToPass }
-				selector={ positionSelector }
-				styleRule="top"
-				attrName="positionNum"
-				key="positionNum-hover-top"
-				responsive="all"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( ( ! value || value.top === '' ) && state === 'normal' ) {
-						const hoverValue = getAttribute( 'positionNum', device, 'hover' )
-						const parentHoverValue = getAttribute( 'positionNum', device, 'parent-hover' )
-						if ( ( hoverValue && hoverValue.top !== '' ) || ( parentHoverValue && parentHoverValue.top !== '' ) ) {
-							return 0
-						}
-					}
-					return undefined
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ positionSelector }
-				styleRule="right"
-				attrName="positionNum"
-				key="positionNum-hover-right"
-				responsive="all"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( ( ! value || value.right === '' ) && state === 'normal' ) {
-						const hoverValue = getAttribute( 'positionNum', device, 'hover' )
-						const parentHoverValue = getAttribute( 'positionNum', device, 'parent-hover' )
-						if ( ( hoverValue && hoverValue.right !== '' ) || ( parentHoverValue && parentHoverValue.right !== '' ) ) {
-							return 0
-						}
-					}
-					return undefined
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ positionSelector }
-				styleRule="bottom"
-				attrName="positionNum"
-				key="positionNum-hover-bottom"
-				responsive="all"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( ( ! value || value.bottom === '' ) && state === 'normal' ) {
-						const hoverValue = getAttribute( 'positionNum', device, 'hover' )
-						const parentHoverValue = getAttribute( 'positionNum', device, 'parent-hover' )
-						if ( ( hoverValue && hoverValue.bottom !== '' ) || ( parentHoverValue && parentHoverValue.bottom !== '' ) ) {
-							return 0
-						}
-					}
-					return undefined
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ positionSelector }
-				styleRule="left"
-				attrName="positionNum"
-				key="positionNum-hover-left"
-				responsive="all"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( ( ! value || value.left === '' ) && state === 'normal' ) {
-						const hoverValue = getAttribute( 'positionNum', device, 'hover' )
-						const parentHoverValue = getAttribute( 'positionNum', device, 'parent-hover' )
-						if ( ( hoverValue && hoverValue.left !== '' ) || ( parentHoverValue && parentHoverValue.left !== '' ) ) {
-							return 0
-						}
-					}
-					return undefined
-				} }
-			/>
-		</>
-	)
-}
+	/**
+		* For positions (top, right, bottom, left) and postiion (absolute,
+		* sticky) we need to apply these to the block itself so it would look
+		* correctly in the editor.
+		*/
+	blockStyleGenerator.addBlockStyles( 'positionNum', [ {
+	 ...propsToPass,
+		 renderIn: 'edit',
+		 selectorCallback: ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]`,
+		 hoverSelectorCallback: ( getAttributes, attributes, clientId ) => positionSelector ? `.editor-styles-wrapper [data-block="${ clientId }"]:hover` : undefined,
+		 styleRule: 'top',
+		 attrName: 'positionNum',
+		 key: 'positionNum-top',
+		 responsive: 'all',
+		 hover: 'all',
+		 hasUnits: 'px',
+		 valuePreCallback: ( value, getAttribute, device, state ) => {
+		 // If position is sticky, we need to set top: 0px or else the sticky won't show.
+			 if ( device === 'desktop' && state === 'normal' ) {
+				 const isSticky = getAttribute( 'position', device, 'normal', true ) === 'sticky'
+				 const isTopBlank = ! value || ( value && value.top === '' )
+				 if ( isSticky && isTopBlank ) {
+					 return 0
+				 }
+			 }
 
-export const Style = props => {
-	return <Styles { ...props } />
-}
+			 return value?.top
+		 },
+		 dependencies: [
+			 'position',
+			 ...dependencies,
+		 ],
+	}, {
+		 ...propsToPass,
+		 renderIn: 'edit',
+		 selectorCallback: ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]`,
+		 hoverSelectorCallback: ( getAttributes, attributes, clientId ) => positionSelector ? `.editor-styles-wrapper [data-block="${ clientId }"]:hover` : undefined,
+		 selector: positionSelector,
+		 hoverSelector: positionSelector ? `${ positionSelector }:hover` : undefined,
+		 styleRule: 'bottom',
+		 attrName: 'positionNum',
+		 key: 'positionNum-bottom',
+		 responsive: 'all',
+		 hover: 'all',
+		 hasUnits: 'px',
+		 valuePreCallback: value => value?.bottom,
+	}, {
+		 ...propsToPass,
+		 renderIn: 'edit',
+		 selectorCallback: ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]`,
+		 hoverSelectorCallback: ( getAttributes, attributes, clientId ) => positionSelector ? `.editor-styles-wrapper [data-block="${ clientId }"]:hover` : undefined,
+		 selector: positionSelector,
+		 hoverSelector: positionSelector ? `${ positionSelector }:hover` : undefined,
+		 styleRule: 'left',
+		 attrName: 'positionNum',
+		 key: 'positionNum-left',
+		 responsive: 'all',
+		 hover: 'all',
+		 hasUnits: 'px',
+		 valuePreCallback: value => value?.left,
+	}, {
+		...propsToPass,
+		 renderIn: 'edit',
+		 selectorCallback: ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]`,
+		 hoverSelectorCallback: ( getAttributes, attributes, clientId ) => positionSelector ? `.editor-styles-wrapper [data-block="${ clientId }"]:hover` : undefined,
+		 selector: positionSelector,
+		 hoverSelector: positionSelector ? `${ positionSelector }:hover` : undefined,
+		 styleRule: 'right',
+		 attrName: 'positionNum',
+		 key: 'positionNum-right',
+		 responsive: 'all',
+		 hover: 'all',
+		 hasUnits: 'px',
+		 valuePreCallback: value => value?.right,
+	}, {
+		...propsToPass,
+		 renderIn: 'edit',
+		 selector: positionSelector,
+		 hoverSelector: positionSelector ? `${ positionSelector }:hover` : undefined,
+		 styleRule: 'position',
+		 attrName: 'positionNum',
+		 key: 'positionNum',
+		 responsive: 'all',
+		 hover: 'all',
+		 valuePreCallback: ( value, getAttribute, device ) => {
+			 if ( value && ( value.top !== '' || value.right !== '' || value.bottom !== '' || value.left !== '' ) ) {
+				 if ( getAttribute( 'position', device ) === '' ) {
+					 return 'relative'
+				 }
+			 }
+			 return undefined
+		 },
+		 dependencies: [
+			 'position',
+			 ...dependencies,
+		 ],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'position', [ {
+		...propsToPass,
+		 renderIn: 'edit',
+		 selectorCallback: ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]`,
+		 styleRule: 'position',
+		 attrName: 'position',
+		 key: 'position',
+		 responsive: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'opacity', [ {
+		...propsToPass,
+		 selector: '',
+		 styleRule: 'opacity',
+		 attrName: 'opacity',
+		 key: 'opacity',
+		 responsive: 'all',
+		 hover: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'zIndex', [ {
+		...propsToPass,
+		 // We need to implement z-index on the block itself or else it won't look correct in the editor.
+		 renderIn: 'edit',
+		 selectorCallback: ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]`,
+		 styleRule: 'zIndex',
+		 attrName: 'zIndex',
+		 key: 'zIndex',
+		 responsive: 'all',
+	}, {
+		...propsToPass,
+		 renderIn: 'save',
+		 selector: '',
+		 styleRule: 'zIndex',
+		 attrName: 'zIndex',
+		 key: 'zIndex-save',
+		 responsive: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'overflow', [ {
+		...propsToPass,
+		 selector: '',
+		 styleRule: 'overflow',
+		 attrName: 'overflow',
+		 key: 'overflow',
+		 responsive: 'all',
+	}, {
+		...propsToPass,
+		 selector: '.stk-container',
+		 styleRule: 'overflow',
+		 attrName: 'overflow',
+		 key: 'overflow-container',
+		 enabledCallback: getAttribute => getAttribute( 'overflow' ) === 'visible',
+		 responsive: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'clear', [ {
+		...propsToPass,
+		 selector: '',
+		 styleRule: 'clear',
+		 attrName: 'clear',
+		 key: 'clear',
+	} ] )
+
+	 // If a top, right, bottom, left hover state position was given, it will not
+	 // animate since there is no initial value for the position (e.g. top: 0). This
+	 // function adds a `top: 0` for the normal state of the CSS if there's a hover
+	 // state position e.g. hover `top: 20px` given but no initial state.
 
-Style.Content = props => {
-	return <Styles { ...props } />
+	 blockStyleGenerator.addBlockStyles( 'positionNum', [ {
+		...propsToPass,
+		 selector: positionSelector,
+		 styleRule: 'top',
+		 attrName: 'positionNum',
+		 key: 'positionNum-hover-top',
+		 responsive: 'all',
+		 valuePreCallback: ( value, getAttribute, device, state ) => {
+			 if ( ( ! value || value.top === '' ) && state === 'normal' ) {
+				 const hoverValue = getAttribute( 'positionNum', device, 'hover' )
+				 const parentHoverValue = getAttribute( 'positionNum', device, 'parent-hover' )
+				 if ( ( hoverValue && hoverValue.top !== '' ) || ( parentHoverValue && parentHoverValue.top !== '' ) ) {
+					 return 0
+				 }
+			 }
+			 return undefined
+		 },
+	}, {
+		...propsToPass,
+		 selector: positionSelector,
+		 styleRule: 'right',
+		 attrName: 'positionNum',
+		 key: 'positionNum-hover-right',
+		 responsive: 'all',
+		 valuePreCallback: ( value, getAttribute, device, state ) => {
+			 if ( ( ! value || value.right === '' ) && state === 'normal' ) {
+				 const hoverValue = getAttribute( 'positionNum', device, 'hover' )
+				 const parentHoverValue = getAttribute( 'positionNum', device, 'parent-hover' )
+				 if ( ( hoverValue && hoverValue.right !== '' ) || ( parentHoverValue && parentHoverValue.right !== '' ) ) {
+					 return 0
+				 }
+			 }
+			 return undefined
+		 },
+	}, {
+		...propsToPass,
+		 selector: positionSelector,
+		 styleRule: 'bottom',
+		 attrName: 'positionNum',
+		 key: 'positionNum-hover-bottom',
+		 responsive: 'all',
+		 valuePreCallback: ( value, getAttribute, device, state ) => {
+			 if ( ( ! value || value.bottom === '' ) && state === 'normal' ) {
+				 const hoverValue = getAttribute( 'positionNum', device, 'hover' )
+				 const parentHoverValue = getAttribute( 'positionNum', device, 'parent-hover' )
+				 if ( ( hoverValue && hoverValue.bottom !== '' ) || ( parentHoverValue && parentHoverValue.bottom !== '' ) ) {
+					 return 0
+				 }
+			 }
+			 return undefined
+		 },
+	}, {
+		...propsToPass,
+		 selector: positionSelector,
+		 styleRule: 'left',
+		 attrName: 'positionNum',
+		 key: 'positionNum-hover-left',
+		 responsive: 'all',
+		 valuePreCallback: ( value, getAttribute, device, state ) => {
+			 if ( ( ! value || value.left === '' ) && state === 'normal' ) {
+				 const hoverValue = getAttribute( 'positionNum', device, 'hover' )
+				 const parentHoverValue = getAttribute( 'positionNum', device, 'parent-hover' )
+				 if ( ( hoverValue && hoverValue.left !== '' ) || ( parentHoverValue && parentHoverValue.left !== '' ) ) {
+					 return 0
+				 }
+			 }
+			 return undefined
+		 },
+	} ] )
 }
diff --git a/src/block-components/alignment/edit.js b/src/block-components/alignment/edit.js
index 648c8095d..dd02239e3 100644
--- a/src/block-components/alignment/edit.js
+++ b/src/block-components/alignment/edit.js
@@ -22,7 +22,7 @@ import {
 	AlignmentToolbar,
 	BlockControls,
 } from '@wordpress/block-editor'
-import { Fragment } from '@wordpress/element'
+import { memo } from '@wordpress/element'
 import { sprintf, __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
 import { useSelect } from '@wordpress/data'
@@ -52,7 +52,7 @@ const ALIGN_OPTIONS = [
 
 const ALIGN_OPTIONS_NO_JUSTIFY = ALIGN_OPTIONS.filter( option => option.align !== 'justify' )
 
-export const Edit = props => {
+export const Edit = memo( props => {
 	const {
 		contentAlign,
 		columnJustify,
@@ -137,7 +137,7 @@ export const Edit = props => {
 	</>
 
 	return (
-		<Fragment>
+		<>
 			<BlockControls>
 				<AlignmentToolbar
 					value={ contentAlign }
@@ -348,9 +348,9 @@ export const Edit = props => {
 					/>
 				}
 			</InspectorLayoutControls>
-		</Fragment>
+		</>
 	)
-}
+} )
 
 // Add additional classes when browser is Firefox to fix alignment
 const userAgent = navigator?.userAgent
diff --git a/src/block-components/alignment/index.js b/src/block-components/alignment/index.js
index 28b948b40..b5c242a37 100644
--- a/src/block-components/alignment/index.js
+++ b/src/block-components/alignment/index.js
@@ -1,6 +1,6 @@
 import { addAttributes } from './attributes'
 import { Edit } from './edit'
-import { Style } from './style'
+import { addStyles } from './style'
 
 export * from './use-alignment'
 
@@ -12,4 +12,4 @@ Alignment.InspectorControls = Edit
 
 Alignment.addAttributes = addAttributes
 
-Alignment.Style = Style
+Alignment.addStyles = addStyles
diff --git a/src/block-components/alignment/style.js b/src/block-components/alignment/style.js
index 4068db1d8..5efa60abf 100644
--- a/src/block-components/alignment/style.js
+++ b/src/block-components/alignment/style.js
@@ -1,314 +1,305 @@
-/**
- * Internal dependencies
- */
-import { BlockCss } from '~stackable/components'
-
-const AlignmentStyles = props => {
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
 		versionAdded: '3.0.0',
 		versionDeprecated: '',
 	}
+
 	const {
 		selectorCallback = getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) }`,
 		editorSelectorCallback = getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) }`,
-		columnAlignSelectorCallback = ( () => '' ),
+		columnAlignSelectorEditCallback = ( () => '' ),
+		columnAlignSelectorSaveCallback = ( () => '' ),
 		innerBlockSelectorCallback = getAttribute => `.stk-${ getAttribute( 'uniqueId' ) }-inner-blocks > .block-editor-inner-blocks > .block-editor-block-list__layout`,
 		editorInnerBlockSelectorCallback = getAttribute => `.stk-${ getAttribute( 'uniqueId' ) }-inner-blocks`,
 		dependencies = [],
 	} = props
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ columnAlignSelectorCallback }
-				responsive="all"
-				styleRule="alignSelf"
-				attrName="columnAlign"
-				key="columnAlign"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selectorCallback={ selectorCallback }
-				styleRule="alignItems"
-				attrName="rowAlign"
-				key="rowAlign-save"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				 ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ editorSelectorCallback }
-				styleRule="alignItems"
-				attrName="rowAlign"
-				key="rowAlign"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
-			{ /* When blocks are vertical */ }
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ innerBlockSelectorCallback }
-				styleRule="alignItems"
-				attrName="innerBlockJustify"
-				key="innerBlockJustifyVerticalEdit"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selectorCallback={ editorInnerBlockSelectorCallback }
-				styleRule="alignItems"
-				attrName="innerBlockJustify"
-				key="innerBlockJustifyVerticalSave"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ innerBlockSelectorCallback }
-				styleRule="justifyContent"
-				attrName="innerBlockAlign"
-				key="innerBlockAlignVerticalEdit"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selectorCallback={ editorInnerBlockSelectorCallback }
-				styleRule="justifyContent"
-				attrName="innerBlockAlign"
-				key="innerBlockAlignVerticalSave"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
-			{ /* When blocks are horizontal */ }
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ innerBlockSelectorCallback }
-				styleRule="justifyContent"
-				attrName="innerBlockJustify"
-				key="innerBlockJustifyHorizontalEdit"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selectorCallback={ editorInnerBlockSelectorCallback }
-				styleRule="justifyContent"
-				attrName="innerBlockJustify"
-				key="innerBlockJustifyHorizontalSave"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ innerBlockSelectorCallback }
-				styleRule="alignItems"
-				attrName="innerBlockAlign"
-				key="innerBlockAlignHorizontalEdit"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selectorCallback={ editorInnerBlockSelectorCallback }
-				styleRule="alignItems"
-				attrName="innerBlockAlign"
-				key="innerBlockAlignHorizontalSave"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
+	blockStyleGenerator.addBlockStyles( 'columnAlign', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: columnAlignSelectorEditCallback,
+		responsive: 'all',
+		styleRule: 'alignSelf',
+		attrName: 'columnAlign',
+		key: 'columnAlign',
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: columnAlignSelectorSaveCallback,
+		responsive: 'all',
+		styleRule: 'alignSelf',
+		attrName: 'columnAlign',
+		key: 'columnAlign',
+	} ] )
 
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ innerBlockSelectorCallback }
-				styleRule="flexWrap"
-				attrName="innerBlockWrap"
-				key="innerBlockWrapEdit"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selectorCallback={ editorInnerBlockSelectorCallback }
-				styleRule="flexWrap"
-				attrName="innerBlockWrap"
-				key="innerBlockWrapSave"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
+	blockStyleGenerator.addBlockStyles( 'rowAlign', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'rowAlign',
+		key: 'rowAlign-save',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		 ],
+	}, {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: editorSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'rowAlign',
+		key: 'rowAlign',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
 
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ innerBlockSelectorCallback }
-				styleRule="columnGap"
-				attrName="innerBlockColumnGap"
-				key="innerBlockColumnGapEdit"
-				format={ `%spx` }
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selectorCallback={ editorInnerBlockSelectorCallback }
-				styleRule="columnGap"
-				attrName="innerBlockColumnGap"
-				key="innerBlockColumnGapSave"
-				format={ `%spx` }
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' }
-				dependencies={ [
-					'innerBlockOrientation',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ innerBlockSelectorCallback }
-				styleRule="rowGap"
-				attrName="innerBlockRowGap"
-				key="innerBlockRowGapEdit"
-				format={ `%spx` }
-				responsive="all"
-				enabledCallback={ getAttribute => {
-					return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
-						( getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap' )
-				} }
-				dependencies={ [
-					'innerBlockOrientation',
-					'innerBlockWrap',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selectorCallback={ editorInnerBlockSelectorCallback }
-				styleRule="rowGap"
-				attrName="innerBlockRowGap"
-				key="innerBlockRowGapSave"
-				format={ `%spx` }
-				responsive="all"
-				enabledCallback={ getAttribute => {
-					return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
-						( getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap' )
-				} }
-				dependencies={ [
-					'innerBlockOrientation',
-					'innerBlockWrap',
-					...dependencies,
-				] }
-			/>
+	{ /* When blocks are vertical */ }
+	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyVerticalEdit',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyVerticalSave',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
 
-			{ /* On flex wrap, we also need to set alignContent so that the wrapped elements would align correctly. Or else we will have huge gaps. */ }
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ innerBlockSelectorCallback }
-				styleRule="alignContent"
-				attrName="innerBlockAlign"
-				key="innerBlockAlignWrapEdit"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap' }
-				dependencies={ [
-					'innerBlockOrientation',
-					'innerBlockWrap',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selectorCallback={ editorInnerBlockSelectorCallback }
-				styleRule="alignContent"
-				attrName="innerBlockAlign"
-				key="innerBlockAlignWrapSave"
-				responsive="all"
-				enabledCallback={ getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap' }
-				dependencies={ [
-					'innerBlockOrientation',
-					'innerBlockWrap',
-					...dependencies,
-				] }
-			/>
-		</>
-	)
-}
+	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'justifyContent',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignVerticalEdit',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'justifyContent',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignVerticalSave',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
 
-export const Style = props => {
-	return <AlignmentStyles { ...props } />
-}
+	{ /* When blocks are horizontal */ }
+	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'justifyContent',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyHorizontalEdit',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'justifyContent',
+		attrName: 'innerBlockJustify',
+		key: 'innerBlockJustifyHorizontalSave',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignHorizontalEdit',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'alignItems',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignHorizontalSave',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'innerBlockWrap', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'flexWrap',
+		attrName: 'innerBlockWrap',
+		key: 'innerBlockWrapEdit',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'flexWrap',
+		attrName: 'innerBlockWrap',
+		key: 'innerBlockWrapSave',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'innerBlockColumnGap', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'columnGap',
+		attrName: 'innerBlockColumnGap',
+		key: 'innerBlockColumnGapEdit',
+		format: `%spx`,
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'columnGap',
+		attrName: 'innerBlockColumnGap',
+		key: 'innerBlockColumnGapSave',
+		format: `%spx`,
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
+		dependencies: [
+			'innerBlockOrientation',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'innerBlockRowGap', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'rowGap',
+		attrName: 'innerBlockRowGap',
+		key: 'innerBlockRowGapEdit',
+		format: `%spx`,
+		responsive: 'all',
+		enabledCallback: getAttribute => {
+			return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
+				( getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap' )
+		},
+		dependencies: [
+			'innerBlockOrientation',
+			'innerBlockWrap',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'rowGap',
+		attrName: 'innerBlockRowGap',
+		key: 'innerBlockRowGapSave',
+		format: `%spx`,
+		responsive: 'all',
+		enabledCallback: getAttribute => {
+			return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
+			( getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap' )
+		},
+		dependencies: [
+			'innerBlockOrientation',
+			'innerBlockWrap',
+			...dependencies,
+		],
+	} ] )
 
-Style.Content = props => {
-	return <AlignmentStyles { ...props } />
+	{ /* On flex wrap, we also need to set alignContent so that the wrapped elements would align correctly. Or else we will have huge gaps. */ }
+	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: innerBlockSelectorCallback,
+		styleRule: 'alignContent',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignWrapEdit',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap',
+		dependencies: [
+			'innerBlockOrientation',
+			'innerBlockWrap',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selectorCallback: editorInnerBlockSelectorCallback,
+		styleRule: 'alignContent',
+		attrName: 'innerBlockAlign',
+		key: 'innerBlockAlignWrapSave',
+		responsive: 'all',
+		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap',
+		dependencies: [
+			'innerBlockOrientation',
+			'innerBlockWrap',
+			...dependencies,
+		],
+	} ] )
 }
diff --git a/src/block-components/block-div/edit.js b/src/block-components/block-div/edit.js
index 8f7df2b5f..30f28a123 100644
--- a/src/block-components/block-div/edit.js
+++ b/src/block-components/block-div/edit.js
@@ -25,8 +25,9 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
-export const Edit = props => {
+export const Edit = memo( props => {
 	const {
 		hasSizeSpacing,
 		initialOpen,
@@ -88,7 +89,7 @@ export const Edit = props => {
 			</InspectorStyleControls>
 		</>
 	)
-}
+} )
 
 Edit.defaultProps = {
 	hasSizeSpacing: true,
diff --git a/src/block-components/block-div/index.js b/src/block-components/block-div/index.js
index 15bda697f..5327af98d 100644
--- a/src/block-components/block-div/index.js
+++ b/src/block-components/block-div/index.js
@@ -1,7 +1,7 @@
 import './deprecated'
 import { addAttributes } from './attributes'
 import { createUniqueClass, useUniqueId } from './use-unique-id'
-import { Style } from './style'
+import { addStyles } from './style'
 import { Edit } from './edit'
 import { firefoxHasPolyfill } from './firefox-has-polyfill'
 
@@ -9,6 +9,7 @@ import classnames from 'classnames/dedupe'
 import { Div } from '~stackable/components'
 import { useVariationPicker } from '~stackable/hooks'
 import { getUniqueBlockClass, useQueryLoopInstanceId } from '~stackable/util'
+import { memo } from '@wordpress/element'
 
 import { useBlockProps } from '@wordpress/block-editor'
 import { applyFilters } from '@wordpress/hooks'
@@ -19,7 +20,7 @@ import { version as VERSION } from 'stackable'
 export { useUniqueId }
 export { deprecateBlockBackgroundColorOpacity, deprecateBlockShadowColor } from './deprecated'
 
-export const BlockDiv = props => {
+export const BlockDiv = memo( props => {
 	const {
 		className,
 		applyCustomAttributes,
@@ -96,7 +97,7 @@ export const BlockDiv = props => {
 		{ props.children }
 		{ firefoxHasPolyfill( clientId, attributes ) }
 	</Div>
-}
+} )
 
 BlockDiv.defaultProps = {
 	className: '',
@@ -174,4 +175,4 @@ BlockDiv.InspectorControls = Edit
 
 BlockDiv.addAttributes = addAttributes
 
-BlockDiv.Style = Style
+BlockDiv.addStyles = addStyles
diff --git a/src/block-components/block-div/style.js b/src/block-components/block-div/style.js
index e0dfdac4d..bef2ba76e 100644
--- a/src/block-components/block-div/style.js
+++ b/src/block-components/block-div/style.js
@@ -1,30 +1,22 @@
 /**
  * Internal dependencies
  */
-import { Fragment } from '@wordpress/element'
-import { useBlockAttributesContext } from '~stackable/hooks'
 import {
-	BorderStyle, SizeStyle, BackgroundStyle,
+	addBorderStyles, addSizeStyles, addBackgroundStyles,
 } from '../helpers'
 
-export const Style = props => {
-	const hasBackground = useBlockAttributesContext( attributes => attributes.hasBackground )
-
-	return (
-		<>
-			{ hasBackground && <BackgroundStyle { ...props } attrNameTemplate="block%s" /> }
-			<BorderStyle { ...props } attrNameTemplate="block%s" />
-			<SizeStyle { ...props } attrNameTemplate="block%s" />
-		</>
-	)
-}
-
-Style.Content = props => {
-	return (
-		<>
-			{ props.attributes.hasBackground && <BackgroundStyle.Content { ...props } attrNameTemplate="block%s" /> }
-			<BorderStyle.Content { ...props } attrNameTemplate="block%s" />
-			<SizeStyle.Content { ...props } attrNameTemplate="block%s" />
-		</>
-	)
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
+	addBackgroundStyles( blockStyleGenerator, {
+		...props,
+		renderCondition: 'hasBackground',
+		attrNameTemplate: 'block%s',
+	} )
+	addBorderStyles( blockStyleGenerator, {
+		...props,
+		attrNameTemplate: 'block%s',
+	} )
+	addSizeStyles( blockStyleGenerator, {
+		...props,
+		attrNameTemplate: 'block%s',
+	} )
 }
diff --git a/src/block-components/button/edit.js b/src/block-components/button/edit.js
index dacf0542f..a75fd68d6 100644
--- a/src/block-components/button/edit.js
+++ b/src/block-components/button/edit.js
@@ -12,11 +12,7 @@ import {
 	AdvancedSelectControl,
 } from '~stackable/components'
 import { i18n } from 'stackable'
-import {
-	useAttributeEditHandlers,
-	useBlockAttributesContext,
-	useBlockContext,
-} from '~stackable/hooks'
+import { useBlockAttributesContext } from '~stackable/hooks'
 
 /**
  * WordPress dependencies
@@ -30,6 +26,9 @@ import { BorderControls as _BorderControls } from '../helpers/borders'
 import { Link as _Link } from '../link'
 import { Icon as _Icon } from '../icon'
 import { applyFilters } from '@wordpress/hooks'
+import { useSelect } from '@wordpress/data'
+import { useBlockEditContext } from '@wordpress/block-editor'
+import { getAttributeNameFunc } from '~stackable/util'
 
 export const Icon = props => (
 	<_Icon.InspectorControls
@@ -110,9 +109,7 @@ export const ColorsControls = props => {
 		attrNameTemplate = 'button%s',
 	} = props
 
-	const {
-		getAttrName,
-	} = useAttributeEditHandlers( attrNameTemplate )
+	const getAttrName = getAttributeNameFunc( attrNameTemplate )
 
 	const buttonBackgroundColorType = useBlockAttributesContext( attributes => {
 		return attributes[ getAttrName( 'backgroundColorType' ) ]
@@ -181,9 +178,7 @@ const SizeControls = props => {
 		attrNameTemplate = 'button%s',
 	} = props
 
-	const {
-		getAttrName,
-	} = useAttributeEditHandlers( attrNameTemplate )
+	const getAttrName = getAttributeNameFunc( attrNameTemplate )
 
 	return ( <>
 		{ props.hasFullWidth && (
@@ -289,7 +284,18 @@ export const Edit = props => {
 		...propsToPass
 	} = props
 
-	const { parentBlock } = useBlockContext()
+	const { clientId } = useBlockEditContext()
+	const { parentBlock } = useSelect(
+		select => {
+			const { getBlockRootClientId, getBlock } = select( 'core/block-editor' )
+			const rootClientId = getBlockRootClientId( clientId )
+
+			return {
+				parentBlock: getBlock( rootClientId ),
+			}
+		},
+		[ clientId ]
+	)
 
 	const enableLink = applyFilters( 'stackable.edit.button.enable-link', true, parentBlock )
 
diff --git a/src/block-components/button/index.js b/src/block-components/button/index.js
index 561529d61..a789c658f 100644
--- a/src/block-components/button/index.js
+++ b/src/block-components/button/index.js
@@ -8,7 +8,7 @@ import { useBlockAttributesContext } from '~stackable/hooks'
  * Internal dependencies
  */
 import { addAttributes } from './attributes'
-import { Style } from './style'
+import { addStyles } from './style'
 import { Edit } from './edit'
 import { Link } from '../link'
 import { Icon } from '../icon'
@@ -81,4 +81,4 @@ Button.InspectorControls = Edit
 
 Button.addAttributes = addAttributes
 
-Button.Style = Style
+Button.addStyles = addStyles
diff --git a/src/block-components/button/style.js b/src/block-components/button/style.js
index aac6d8b0f..7a06f6db8 100644
--- a/src/block-components/button/style.js
+++ b/src/block-components/button/style.js
@@ -1,251 +1,219 @@
 /**
  * Internal dependencies
  */
-import { BorderStyle } from '../helpers/borders'
+import { addBorderStyles } from '../helpers/borders'
 import { Icon } from '../icon'
-import { BlockCss } from '~stackable/components'
 
-const Styles = props => {
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
 		versionAdded: '3.0.0',
 		versionDeprecated: '',
 	}
+
 	const {
+		selector = '',
 		attrNameTemplate = 'button%s',
-		selector,
+		borderSelector = `${ selector }:before`,
+		borderHoverSelector = `${ selector }:hover:before`,
 		backgroundSelector = `${ selector }:after`,
 		hoverSelector,
 		dependencies = [],
 	} = props
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ '', '.stk-button' ] }
-				styleRule="width"
-				attrName="fullWidth"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonFullWidth"
-				valueCallback={ () => '100%' }
-				format="%spx"
-				enabledCallback={ getAttribute => getAttribute( 'fullWidth' ) }
-			/>
-			{
-			// This makes the full-width button occupy the available space, but make
-			// others wrap when it's too small.
+	blockStyleGenerator.addBlockStyles( 'fullWidth', [ {
+		...propsToPass,
+		selector: [ '', '.stk-button' ],
+		styleRule: 'width',
+		attrName: 'fullWidth',
+		attrNameTemplate,
+		key: 'buttonFullWidth',
+		valueCallback: () => '100%',
+		format: '%spx',
+		enabledCallback: getAttribute => getAttribute( 'fullWidth' ),
+	} ] )
+
+	{
+	// This makes the full-width button occupy the available space, but make
+	// others wrap when it's too small.
+	}
+
+	blockStyleGenerator.addBlockStyles( 'fullWidth', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selector: '',
+		styleRule: 'flex',
+		attrName: 'fullWidth',
+		attrNameTemplate,
+		key: 'buttonFullWidth-save',
+		valueCallback: () => '1 0 var(--stk-button-group-flex-wrap, 0)',
+		enabledCallback: getAttribute => getAttribute( 'fullWidth' ),
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'fullWidth', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]`,
+		styleRule: 'flex',
+		attrName: 'fullWidth',
+		attrNameTemplate,
+		key: 'buttonFullWidth-flex',
+		valueCallback: () => '1 0 var(--stk-button-group-flex-wrap, 0)',
+		enabledCallback: getAttribute => getAttribute( 'fullWidth' ),
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'minHeight', [ {
+		...propsToPass,
+		selector,
+		responsive: 'all',
+		styleRule: 'minHeight',
+		attrName: 'minHeight',
+		attrNameTemplate,
+		key: 'buttonMinHeight',
+		format: '%spx',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'width', [ {
+		...propsToPass,
+		selector,
+		responsive: 'all',
+		styleRule: 'width',
+		attrName: 'width',
+		attrNameTemplate,
+		key: 'buttonWidth',
+		format: '%spx',
+		enabledCallback: getAttribute => ! getAttribute( 'fullWidth' ),
+		dependencies: [
+			'fullWidth',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'padding', [ {
+		...propsToPass,
+		selector,
+		responsive: 'all',
+		styleRule: 'paddingTop',
+		attrName: 'padding',
+		attrNameTemplate,
+		key: 'buttonPadding-top',
+		hasUnits: 'px',
+		valuePreCallback: value => value?.top,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'padding', [ {
+		...propsToPass,
+		selector,
+		responsive: 'all',
+		styleRule: 'paddingRight',
+		attrName: 'padding',
+		attrNameTemplate,
+		key: 'buttonPadding-right',
+		hasUnits: 'px',
+		valuePreCallback: value => value?.right,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'padding', [ {
+		...propsToPass,
+		selector,
+		responsive: 'all',
+		styleRule: 'paddingBottom',
+		attrName: 'padding',
+		attrNameTemplate,
+		key: 'buttonPadding-bottom',
+		hasUnits: 'px',
+		valuePreCallback: value => value?.bottom,
+
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'padding', [ {
+		...propsToPass,
+		selector,
+		responsive: 'all',
+		styleRule: 'paddingLeft',
+		attrName: 'padding',
+		attrNameTemplate,
+		key: 'buttonPadding-left',
+		hasUnits: 'px',
+		valuePreCallback: value => value?.left,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'backgroundColor', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'background',
+		attrName: 'backgroundColor',
+		attrNameTemplate,
+		key: 'buttonBackgroundColor',
+		dependencies: [
+			'backgroundColorType',
+			...dependencies,
+		 ],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'backgroundColor', [ {
+		...propsToPass,
+		selector: backgroundSelector || `${ selector }:after`,
+		styleRule: 'background',
+		attrName: 'backgroundColor',
+		attrNameTemplate,
+		key: 'buttonBackgroundColor-after',
+		hover: 'all',
+		hoverSelector: hoverSelector ? hoverSelector : `${ selector }:hover:after`,
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			if ( state === 'normal' ) {
+				return undefined
 			}
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=""
-				styleRule="flex"
-				attrName="fullWidth"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonFullWidth-save"
-				valueCallback={ () => '1 0 var(--stk-button-group-flex-wrap, 0)' }
-				enabledCallback={ getAttribute => getAttribute( 'fullWidth' ) }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]` }
-				styleRule="flex"
-				attrName="fullWidth"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonFullWidth-flex"
-				valueCallback={ () => '1 0 var(--stk-button-group-flex-wrap, 0)' }
-				enabledCallback={ getAttribute => getAttribute( 'fullWidth' ) }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				responsive="all"
-				styleRule="minHeight"
-				attrName="minHeight"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonMinHeight"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				responsive="all"
-				styleRule="width"
-				attrName="width"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonWidth"
-				format="%spx"
-				enabledCallback={ getAttribute => ! getAttribute( 'fullWidth' ) }
-				dependencies={ [
-					'fullWidth',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				responsive="all"
-				styleRule="paddingTop"
-				attrName="padding"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonPadding-top"
-				hasUnits="px"
-				valuePreCallback={ value => value?.top }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				responsive="all"
-				styleRule="paddingRight"
-				attrName="padding"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonPadding-right"
-				hasUnits="px"
-				valuePreCallback={ value => value?.right }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				responsive="all"
-				styleRule="paddingBottom"
-				attrName="padding"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonPadding-bottom"
-				hasUnits="px"
-				valuePreCallback={ value => value?.bottom }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				responsive="all"
-				styleRule="paddingLeft"
-				attrName="padding"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonPadding-left"
-				hasUnits="px"
-				valuePreCallback={ value => value?.left }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="background"
-				attrName="backgroundColor"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonBackgroundColor"
-				dependencies={ [
-					'backgroundColorType',
-					...dependencies,
-				 ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ backgroundSelector || `${ selector }:after` }
-				styleRule="background"
-				attrName="backgroundColor"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonBackgroundColor-after"
-				hover="all"
-				hoverSelector={ hoverSelector ? hoverSelector : `${ selector }:hover:after` }
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( state === 'normal' ) {
-						return undefined
-					}
-					return value
-				} }
-				dependencies={ [
-					'backgroundColorType',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ backgroundSelector || `${ selector }:after` }
-				styleRule="opacity"
-				attrName="backgroundColor"
-				attrNameTemplate={ attrNameTemplate }
-				key="buttonBackgroundColor-opacity"
-				hover="all"
-				hoverSelector={ hoverSelector ? hoverSelector : `${ selector }:hover:after` }
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( state === 'normal' ) {
-						return undefined
-					}
-
-					const buttonBackgroundColor = getAttribute( 'backgroundColor', 'desktop', state )
-
-					if (
-						typeof buttonBackgroundColor !== 'undefined' &&
-					buttonBackgroundColor !== ''
-					) {
-						return 1
-					}
-
-					return undefined
-				} }
-			/>
-		</>
-	)
-}
+			return value
+		},
+		dependencies: [
+			'backgroundColorType',
+			...dependencies,
+		],
+	} ] )
 
-export const Style = props => {
-	const {
-		selector = '',
-		attrNameTemplate = 'button%s',
-		borderSelector = `${ selector }:before`,
-		borderHoverSelector = `${ selector }:hover:before`,
-	} = props
+	blockStyleGenerator.addBlockStyles( 'backgroundColor', [ {
+		...propsToPass,
+		selector: backgroundSelector || `${ selector }:after`,
+		styleRule: 'opacity',
+		attrName: 'backgroundColor',
+		attrNameTemplate,
+		key: 'buttonBackgroundColor-opacity',
+		hover: 'all',
+		hoverSelector: hoverSelector ? hoverSelector : `${ selector }:hover:after`,
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			if ( state === 'normal' ) {
+				return undefined
+			}
 
-	return (
-		<>
-			<Styles
-				{ ...props }
-				attrNameTemplate={ attrNameTemplate }
-			/>
-			<BorderStyle
-				{ ...props }
-				selector={ borderSelector }
-				// Adding border radius clips button's shadow.
-				// This prevents this from happening.
-				// @see src/block-components/borders/style.js
-				addBorderRadiusOverflow={ false }
-				hoverSelector={ borderHoverSelector }
-				borderRadiusSelector={ selector }
-				attrNameTemplate={ attrNameTemplate }
-			/>
-			<Icon.Style { ...props } />
-		</>
-	)
-}
+			const buttonBackgroundColor = getAttribute( 'backgroundColor', 'desktop', state )
 
-Style.Content = props => {
-	const {
-		selector = '',
-		attrNameTemplate = 'button%s',
-		borderSelector = `${ selector }:before`,
-		borderHoverSelector = `${ selector }:hover:before`,
-	} = props
+			if (
+				typeof buttonBackgroundColor !== 'undefined' &&
+			buttonBackgroundColor !== ''
+			) {
+				return 1
+			}
+
+			return undefined
+		},
+	} ] )
 
-	return (
-		<>
-			<Styles
-				{ ...props }
-				attrNameTemplate={ attrNameTemplate }
-			/>
-			<BorderStyle.Content
-				{ ...props }
-				selector={ borderSelector }
-				// Adding border radius clips button's shadow.
-				// This prevents this from happening.
-				// @see src/block-components/borders/style.js}
-				addBorderRadiusOverflow={ false }
-				hoverSelector={ borderHoverSelector }
-				borderRadiusSelector={ selector }
-				attrNameTemplate={ attrNameTemplate }
-			/>
-			<Icon.Style.Content { ...props } />
-		</>
-	)
+	addBorderStyles( blockStyleGenerator, {
+		...propsToPass,
+		selector: borderSelector,
+		// Adding border radius clips button's shadow.
+		// This prevents this from happening.
+		// @see src/block-components/borders/style.js,
+		addBorderRadiusOverflow: false,
+		hoverSelector: borderHoverSelector,
+		borderRadiusSelector: selector,
+		attrNameTemplate,
+	} )
+
+	Icon.addStyles( blockStyleGenerator, {
+		...propsToPass,
+	} )
 }
+
diff --git a/src/block-components/column/get-column-handlers.js b/src/block-components/column/get-column-handlers.js
new file mode 100644
index 000000000..90e36efc9
--- /dev/null
+++ b/src/block-components/column/get-column-handlers.js
@@ -0,0 +1,142 @@
+/**
+ * WordPress Dependencies
+ */
+import { dispatch } from '@wordpress/data'
+import classnames from 'classnames'
+import { getRowsFromColumns } from './util'
+
+export const getColumnHandlers = ( clientId, parentBlock ) => {
+	// console.log( 'testing' )
+	const onChangeDesktop = widths => {
+		const adjacentBlocks = parentBlock?.innerBlocks || []
+
+		if ( adjacentBlocks.length ) {
+			// Update multiple blocks.
+			const [ clientIds, attributes ] = widths.reduce( ( results, width, i ) => {
+				const clientId = adjacentBlocks[ i ].clientId
+				results[ 0 ].push( clientId ),
+				results[ 1 ][ clientId ] = {
+					columnWidth: width,
+					columnAdjacentCount: widths.length,
+					columnWrapDesktop: false,
+				}
+				return results
+			}, [ [], {} ] )
+
+			dispatch( 'core/block-editor' ).updateBlockAttributes( clientIds, attributes, true ) // eslint-disable-line stackable/no-update-block-attributes
+		}
+	}
+
+	const onChangeDesktopWrap = ( width, widths ) => {
+		const clientIds = [ clientId ]
+		const attributes = {
+			[ clientId ]: { columnWidth: width },
+		}
+
+		const adjacentBlocks = parentBlock?.innerBlocks || []
+
+		if ( adjacentBlocks.length ) {
+			const columnRows = getRowsFromColumns( widths )
+
+			// Update multiple blocks.
+			widths.forEach( ( width, i ) => {
+				const clientId = adjacentBlocks[ i ].clientId
+				clientIds.push( clientId )
+				attributes[ clientId ] = {
+					columnWidth: width,
+					columnAdjacentCount: columnRows.filter( n => n === columnRows[ i ] ).length,
+					columnWrapDesktop: true,
+				}
+			} )
+		}
+
+		dispatch( 'core/block-editor' ).updateBlockAttributes( clientIds, attributes, true ) // eslint-disable-line stackable/no-update-block-attributes
+	}
+
+	const onChangeTablet = ( width, widths ) => {
+		const clientIds = [ clientId ]
+		const attributes = {
+			[ clientId ]: { columnWidthTablet: width },
+		}
+
+		const adjacentBlocks = parentBlock?.innerBlocks || []
+
+		if ( adjacentBlocks.length ) {
+			const columnRows = getRowsFromColumns( widths )
+
+			// Update multiple blocks.
+			widths.forEach( ( width, i ) => {
+				const clientId = adjacentBlocks[ i ].clientId
+				clientIds.push( clientId )
+				attributes[ clientId ] = {
+					columnWidthTablet: width,
+					columnAdjacentCountTablet: columnRows.filter( n => n === columnRows[ i ] ).length,
+				}
+			} )
+		}
+
+		dispatch( 'core/block-editor' ).updateBlockAttributes( clientIds, attributes, true ) // eslint-disable-line stackable/no-update-block-attributes
+	}
+
+	const onChangeMobile = ( width, widths ) => {
+		const clientIds = [ clientId ]
+		const attributes = {
+			[ clientId ]: { columnWidthMobile: width },
+		}
+
+		const adjacentBlocks = parentBlock?.innerBlocks || []
+
+		if ( adjacentBlocks.length ) {
+			const columnRows = getRowsFromColumns( widths )
+
+			// Update multiple blocks.
+			widths.forEach( ( width, i ) => {
+				const clientId = adjacentBlocks[ i ].clientId
+				clientIds.push( clientId )
+				attributes[ clientId ] = {
+					columnWidthMobile: width,
+					columnAdjacentCountMobile: columnRows.filter( n => n === columnRows[ i ] ).length,
+				}
+			} )
+		}
+
+		dispatch( 'core/block-editor' ).updateBlockAttributes( clientIds, attributes, true ) // eslint-disable-line stackable/no-update-block-attributes
+	}
+
+	const onResetDesktop = () => {
+		const adjacentBlocks = parentBlock?.innerBlocks || []
+
+		if ( adjacentBlocks.length ) {
+			const clientIds = adjacentBlocks.map( block => block.clientId )
+			dispatch( 'core/block-editor' ).updateBlockAttributes( clientIds, { columnWidth: '' } ) // eslint-disable-line stackable/no-update-block-attributes
+		}
+	}
+
+	const onResetTabletMobile = () => {
+		const adjacentBlocks = parentBlock?.innerBlocks || []
+
+		if ( adjacentBlocks.length ) {
+			const clientIds = adjacentBlocks.map( block => block.clientId )
+			dispatch( 'core/block-editor' ).updateBlockAttributes( clientIds, { columnWidthTablet: '', columnWidthMobile: '' } ) // eslint-disable-line stackable/no-update-block-attributes
+		}
+	}
+
+	return {
+		onChangeDesktop,
+		onChangeDesktopWrap,
+		onChangeTablet,
+		onChangeMobile,
+		onResetDesktop,
+		onResetTabletMobile,
+	}
+}
+
+export const getColumnClasses = () => {
+	const columnClasses = classnames( [
+		'stk-column',
+	] )
+	return [
+		columnClasses,
+		'stk-column-wrapper',
+	]
+}
diff --git a/src/block-components/column/index.js b/src/block-components/column/index.js
index 6e1423693..99b851909 100644
--- a/src/block-components/column/index.js
+++ b/src/block-components/column/index.js
@@ -1,37 +1,31 @@
 import { addAttributes } from './attributes'
-import { Style } from './style'
-import { useColumn } from './use-column'
+import { getColumnHandlers } from './get-column-handlers'
+import { addStyles } from './style'
+export { getColumnClasses } from './use-column'
 
 import { ResizableColumn } from '~stackable/components'
-import { useBlockAttributesContext } from '~stackable/hooks'
-
-export { getColumnClasses } from './use-column'
+import { memo } from '@wordpress/element'
 
-export const Column = props => {
+export const Column = memo( props => {
 	const {
 		isHovered,
+		clientId,
+		parentBlock,
 		...propsToPass
 	} = props
 
-	const setHandlers = useColumn()
-	const attributes = useBlockAttributesContext( attributes => {
-		return {
-			columnWidth: attributes.columnWidth,
-			columnWidthTablet: attributes.columnWidthTablet,
-			columnWidthMobile: attributes.columnWidthMobile,
-		}
-	} )
+	const setHandlers = getColumnHandlers( clientId, parentBlock )
 
 	return <ResizableColumn
 		showHandle={ isHovered }
 		isHovered={ isHovered }
-		columnWidth={ attributes.columnWidth }
-		columnWidthTablet={ attributes.columnWidthTablet }
-		columnWidthMobile={ attributes.columnWidthMobile }
+		columnWidth={ props.columnWidth }
+		columnWidthTablet={ props.columnWidthTablet }
+		columnWidthMobile={ props.columnWidthMobile }
 		{ ...setHandlers }
 		{ ...propsToPass }
 	/>
-}
+} )
 
 Column.defaultProps = {
 	isHovered: true,
@@ -41,4 +35,4 @@ Column.InspectorControls = null
 
 Column.addAttributes = addAttributes
 
-Column.Style = Style
+Column.addStyles = addStyles
diff --git a/src/block-components/column/style.js b/src/block-components/column/style.js
index 0d240cd5d..073727ca4 100644
--- a/src/block-components/column/style.js
+++ b/src/block-components/column/style.js
@@ -2,110 +2,100 @@
  * External dependencies
  */
 import { __getValue } from '~stackable/util'
-import { BlockCss } from '~stackable/components'
 
-const ColumnStyles = props => {
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
 		versionAdded: '3.0.0',
 		versionDeprecated: '',
 	}
+
 	const {
 		selector = '',
 		dependencies = [],
 	} = props
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selectorCallback={ ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]` }
-				styleRule="flex"
-				attrName="columnWidth"
-				key="columnWidth-flex"
-				responsive={ [ 'desktopTablet', 'tabletOnly', 'mobile' ] }
-				format="1 1 %s%"
-				dependencies={ [
-					'columnAdjacentCount',
-					...dependencies,
-				] }
-				valueCallback={ ( value, getAttribute, device ) => {
-					if ( device === 'desktop' ) {
-						return value
-					}
-					const adjacentCount = getAttribute( 'columnAdjacentCount', device )
-					if ( adjacentCount ) {
-						return value.replace( /([\d\.]+%)$/, `calc($1 - var(--stk-column-gap, 0px) * ${ adjacentCount - 1 } / ${ adjacentCount } )` )
-					}
-					return value
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				// We need to add a maxWidth in the editor since the re-resizable box
-				// can mess up the snapping if the column width is too small, then
-				// resizes to a larger size.
-				renderIn="edit"
-				selectorCallback={ ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]` }
-				styleRule="maxWidth"
-				attrName="columnWidth"
-				key="columnWidth-maxwidth"
-				responsive={ [ 'desktopTablet', 'tabletOnly', 'mobile' ] }
-				format="%s%"
-				dependencies={ [
-					'columnAdjacentCount',
-					...dependencies,
-				] }
-				valueCallback={ ( value, getAttribute, device ) => {
-					const adjacentCount = getAttribute( 'columnAdjacentCount', device )
-					if ( adjacentCount ) {
-						return value.replace( /([\d\.]+%)$/, `calc($1 - var(--stk-column-gap, 0px) * ${ adjacentCount - 1 } / ${ adjacentCount } )` )
-					}
-					return value
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector={ selector }
-				styleRule="flex"
-				attrName="columnWidth"
-				key="columnWidth-save-flex"
-				responsive={ [ 'desktopTablet', 'tabletOnly', 'mobile' ] }
-				format="var(--stk-flex-grow, 1) 1 %s%"
-				dependencies={ [
-					'columnAdjacentCount',
-					...dependencies,
-				 ] }
-				valueCallback={ ( _value, getAttribute, device ) => {
-					// Flex grow should be turned on in desktop, so negative margins
-					// can make the columns expand. (e.g. 50% 50% then -200px margin
-					// left on 2nd column).
-					//
-					// In tablet/mobile, don't allow expanding since columns would
-					// always expand to the available space (so you can't do a 30%
-					// 30% columns in tablet/mobile, they will expand to 50% 50%)
-					//
-					// No need to do this in the editor since it already does this.
-					const value = device === 'desktop' && ! getAttribute( 'columnWrapDesktop' ) ? _value : _value.replace( /^var(--stk-flex-grow, 1) 1/, '0 1' )
+	blockStyleGenerator.addBlockStyles( 'columnWidth', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]`,
+		styleRule: 'flex',
+		attrName: 'columnWidth',
+		key: 'columnWidth-flex',
+		responsive: [ 'desktopTablet', 'tabletOnly', 'mobile' ],
+		format: '1 1 %s%',
+		dependencies: [
+			'columnAdjacentCount',
+			...dependencies,
+		],
+		valueCallback: ( value, getAttribute, device ) => {
+			if ( device === 'desktop' ) {
+				return value
+			}
+			const adjacentCount = getAttribute( 'columnAdjacentCount', device )
+			if ( adjacentCount ) {
+				return value.replace( /([\d\.]+%)$/, `calc($1 - var(--stk-column-gap, 0px) * ${ adjacentCount - 1 } / ${ adjacentCount } )` )
+			}
+			return value
+		},
+	} ] )
 
-					const adjacentCount = getAttribute( 'columnAdjacentCount', device )
-					if ( adjacentCount ) {
-						return value.replace( /([\d\.]+%)$/, `calc($1 - var(--stk-column-gap, 0px) * ${ adjacentCount - 1 } / ${ adjacentCount } )` )
-					}
-					return value
-				} }
-			/>
-		</>
-	)
-}
+	// We need to add a maxWidth in the editor since the re-resizable box
+	// can mess up the snapping if the column width is too small, then
+	// resizes to a larger size.
+	blockStyleGenerator.addBlockStyles( 'columnWidth', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selectorCallback: ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]`,
+		styleRule: 'maxWidth',
+		attrName: 'columnWidth',
+		key: 'columnWidth-maxwidth',
+		responsive: [ 'desktopTablet', 'tabletOnly', 'mobile' ],
+		format: '%s%',
+		dependencies: [
+			'columnAdjacentCount',
+			...dependencies,
+		],
+		valueCallback: ( value, getAttribute, device ) => {
+			const adjacentCount = getAttribute( 'columnAdjacentCount', device )
+			if ( adjacentCount ) {
+				return value.replace( /([\d\.]+%)$/, `calc($1 - var(--stk-column-gap, 0px) * ${ adjacentCount - 1 } / ${ adjacentCount } )` )
+			}
+			return value
+		},
+	} ] )
 
-export const Style = props => {
-	return <ColumnStyles { ...props } />
-}
+	blockStyleGenerator.addBlockStyles( 'columnWidth', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selector,
+		styleRule: 'flex',
+		attrName: 'columnWidth',
+		key: 'columnWidth-save-flex',
+		responsive: [ 'desktopTablet', 'tabletOnly', 'mobile' ],
+		format: 'var(--stk-flex-grow, 1) 1 %s%',
+		dependencies: [
+			'columnAdjacentCount',
+			...dependencies,
+		 ],
+		valueCallback: ( _value, getAttribute, device ) => {
+			// Flex grow should be turned on in desktop, so negative margins
+			// can make the columns expand. (e.g. 50% 50% then -200px margin
+			// left on 2nd column).
+			//
+			// In tablet/mobile, don't allow expanding since columns would
+			// always expand to the available space (so you can't do a 30%
+			// 30% columns in tablet/mobile, they will expand to 50% 50%)
+			//
+			// No need to do this in the editor since it already does this.
+			const value = device === 'desktop' && ! getAttribute( 'columnWrapDesktop' ) ? _value : _value.replace( /^var(--stk-flex-grow, 1) 1/, '0 1' )
 
-Style.Content = props => {
-	return <ColumnStyles { ...props } />
+			const adjacentCount = getAttribute( 'columnAdjacentCount', device )
+			if ( adjacentCount ) {
+				return value.replace( /([\d\.]+%)$/, `calc($1 - var(--stk-column-gap, 0px) * ${ adjacentCount - 1 } / ${ adjacentCount } )` )
+			}
+			return value
+		},
+	} ] )
 }
diff --git a/src/block-components/columns/column-settings-button.js b/src/block-components/columns/column-settings-button.js
index c6209c6a6..1e083c0a8 100644
--- a/src/block-components/columns/column-settings-button.js
+++ b/src/block-components/columns/column-settings-button.js
@@ -1,6 +1,5 @@
 import { i18n } from 'stackable'
 import { last, pick } from 'lodash'
-import { useBlockContext } from '~stackable/hooks'
 import { AdvancedRangeControl, Tooltip } from '~stackable/components'
 
 import { __ } from '@wordpress/i18n'
@@ -26,7 +25,18 @@ export const ColumnsControl = props => {
 	const clientId = rootClientId || _clientId
 	const {
 		numInnerBlocks, innerBlocks,
-	} = useBlockContext( rootClientId )
+	} = useSelect(
+		select => {
+			const { getBlock } = select( 'core/block-editor' )
+			const { innerBlocks } = getBlock( clientId )
+			return {
+				innerBlocks,
+				numInnerBlocks: innerBlocks.length,
+			}
+		},
+		[ clientId ]
+	)
+
 	const {
 		multiClientIds, multiNumInnerBlocks, multiInnerBlocks, hasMultiSelectedBlocks,
 	} = useSelect( select => {
diff --git a/src/block-components/columns/edit.js b/src/block-components/columns/edit.js
index 134fe138f..bab92e1ae 100644
--- a/src/block-components/columns/edit.js
+++ b/src/block-components/columns/edit.js
@@ -19,7 +19,9 @@ import {
 } from '~stackable/components'
 import { getAttributeName } from '~stackable/util'
 import {
-	useBlockAttributesContext, useBlockContext, useBlockSetAttributesContext, useDeviceType,
+	useBlockAttributesContext,
+	useBlockSetAttributesContext,
+	useDeviceType,
 } from '~stackable/hooks'
 import { range } from 'lodash'
 
@@ -37,7 +39,20 @@ export const Controls = props => {
 	const [ , setColumnsUpdate ] = useState( 0 )
 	const deviceType = useDeviceType()
 	const { clientId } = useBlockEditContext()
-	const { numInnerBlocks, innerBlocks } = useBlockContext()
+	const {
+		numInnerBlocks, innerBlocks,
+	} = useSelect(
+		select => {
+			const { getBlock } = select( 'core/block-editor' )
+			const innerBlocks = getBlock( clientId )?.innerBlocks
+
+			return {
+				innerBlocks,
+				numInnerBlocks: innerBlocks.length,
+			}
+		},
+		[ clientId ]
+	)
 
 	const {
 		multiClientIds, multiInnerBlocks, hasMultiSelectedBlocks,
diff --git a/src/block-components/columns/index.js b/src/block-components/columns/index.js
index 89c0b74b0..53398ebe9 100644
--- a/src/block-components/columns/index.js
+++ b/src/block-components/columns/index.js
@@ -1,6 +1,6 @@
 import { addAttributes } from './attributes'
 import { Edit } from './edit'
-import { Style } from './style'
+import { addStyles } from './style'
 
 export const Columns = () => {
 	return null
@@ -8,6 +8,6 @@ export const Columns = () => {
 
 Columns.InspectorControls = Edit
 
-Columns.Style = Style
+Columns.addStyles = addStyles
 
 Columns.addAttributes = addAttributes
diff --git a/src/block-components/columns/style.js b/src/block-components/columns/style.js
index 5d855194a..8e2c614d5 100644
--- a/src/block-components/columns/style.js
+++ b/src/block-components/columns/style.js
@@ -3,18 +3,7 @@
  */
 import { range } from 'lodash'
 
-/**
- * Internal dependencies
- */
-import { BlockCss } from '~stackable/components'
-import { useBlockAttributesContext } from '~stackable/hooks'
-
-/**
- * WordPress dependencies
- */
-import { Fragment } from '@wordpress/element'
-
-const Styles = props => {
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -24,175 +13,146 @@ const Styles = props => {
 	const {
 		hasRowGap = true,
 		columnWrapDesktopSaveStyleRule = '',
-		numColumns,
 	} = props
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-column"
-				styleRule="--stk-columns-spacing"
-				attrName="columnSpacing"
-				key="columnSpacing"
-				hasUnits="px"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".%s-column"
-				styleRule="--stk-column-gap"
-				attrName="columnGap"
-				key="columnGap-save"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout"
-				styleRule="--stk-column-gap"
-				attrName="columnGap"
-				key="columnGap"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".%s-column"
-				styleRule={ columnWrapDesktopSaveStyleRule || 'flexWrap' }
-				attrName="columnWrapDesktop"
-				key="columnWrapDesktop-save"
-				valueCallback={ value => value ? 'wrap' : undefined }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout"
-				styleRule="flexWrap"
-				attrName="columnWrapDesktop"
-				key="columnWrapDesktop"
-				valueCallback={ value => value ? 'wrap' : undefined }
-			/>
-			{ /*
-			   * Desktop columns stretch to the whole width because of flex-grow,
-			   * we need to force it to not grow or else we cannot specify a
-			   * column that's 50% (and alone without any column beside it)
-			   * because it will always stretch to 100%. */
-			}
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".%s-column"
-				styleRule="--stk-flex-grow"
-				attrName="columnWrapDesktop"
-				key="columnWrapDesktop-FlexGrow-save"
-				valueCallback={ value => value ? '0' : undefined }
-			/>
-			{ hasRowGap && <>
-				<BlockCss
-					{ ...propsToPass }
-					renderIn="save"
-					selector=".%s-column"
-					styleRule="rowGap"
-					attrName="rowGap"
-					key="rowGap-save"
-					format="%spx"
-					responsive="all"
-				/>
-				<BlockCss
-					{ ...propsToPass }
-					renderIn="edit"
-					selector=".%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout"
-					styleRule="rowGap"
-					attrName="rowGap"
-					key="rowGap"
-					format="%spx"
-					responsive="all"
-				/>
-			</> }
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".%s-column"
-				styleRule="justifyContent"
-				attrName="columnJustify"
-				key="columnJustify-save"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout"
-				styleRule="justifyContent"
-				attrName="columnJustify"
-				key="columnJustify"
-				responsive="all"
-			/>
+	blockStyleGenerator.addBlockStyles( 'columnSpacing', [ {
+		...propsToPass,
+		selector: '.%s-column',
+		styleRule: '--stk-columns-spacing',
+		attrName: 'columnSpacing',
+		hasUnits: 'px',
+		responsive: 'all',
+	} ] )
 
-			{ range( 1, numColumns + 1 ).map( i => {
-				return (
-					<Fragment key={ `column-arrangement-${ i }` }>
-						<BlockCss
-							{ ...propsToPass }
-							// In the editor, target the specific column to change the order.
-							renderIn="edit"
-							selector={ `> .stk-block-content > .block-editor-inner-blocks > .block-editor-block-list__layout > :nth-child(${ i })` }
-							styleRule="order"
-							responsive="all"
-							attrName="columnArrangement"
-							key="columnArrangement"
-							valueCallback={ value => {
-								// Look for the order in the values list for the column i
-								return ( value.split( ',' ) || [] ).indexOf( i.toString() ) + 1
-							} }
-							valuePreCallback={ ( value, getAttribute, device ) => {
-								const tabletAttribute = getAttribute( 'columnArrangement', 'tablet' )
-								if ( device === 'mobile' && ! value && tabletAttribute ) {
-									return [ ...Array( numColumns ).keys() ].map( i => i + 1 ).join( ',' )
-								}
-								return value
-							} }
-						/>
-						<BlockCss
-							{ ...propsToPass }
-							// In the frontend, use the css custom property to specify the order.
-							// See style.scss We do this because we cannot use the direct descendent
-							// selector ">" in the saved CSS or else non-admin users in multisite
-							// will encounter block errors (this is a WP issue)
-							renderIn="save"
-							styleRule={ `--stk-col-order-${ i }` }
-							responsive="all"
-							attrName="columnArrangement"
-							key="columnArrangement-save"
-							valueCallback={ value => {
-								// Look for the order in the values list for the column i
-								return ( value.split( ',' ) || [] ).indexOf( i.toString() ) + 1
-							} }
-							valuePreCallback={ ( value, getAttribute, device ) => {
-								const tabletAttribute = getAttribute( 'columnArrangement', 'tablet' )
-								if ( device === 'mobile' && ! value && tabletAttribute ) {
-									return [ ...Array( numColumns ).keys() ].map( i => i + 1 ).join( ',' )
-								}
-								return value
-							} }
-						/>
-					</Fragment>
-				)
-			} ) }
-		</>
-	)
-}
+	blockStyleGenerator.addBlockStyles( 'columnGap', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selector: '.%s-column',
+		styleRule: '--stk-column-gap',
+		attrName: 'columnGap',
+		format: '%spx',
+		responsive: 'all',
+	}, {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: '.%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout',
+		styleRule: '--stk-column-gap',
+		attrName: 'columnGap',
+		format: '%spx',
+		responsive: 'all',
+	} ] )
 
-export const Style = props => {
-	const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
-	const numColumns = ( columnArrangement || '' ).split( ',' ).length
-	return <Styles { ...props } numColumns={ numColumns } />
-}
+	blockStyleGenerator.addBlockStyles( 'columnWrapDesktop', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selector: '.%s-column',
+		styleRule: columnWrapDesktopSaveStyleRule || 'flexWrap',
+		attrName: 'columnWrapDesktop',
+		valueCallback: value => value ? 'wrap' : undefined,
+	}, {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: '.%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout',
+		styleRule: 'flexWrap',
+		attrName: 'columnWrapDesktop',
+		valueCallback: value => value ? 'wrap' : undefined,
+	} ] )
+
+	// Desktop columns stretch to the whole width because of flex-grow, we need
+	// to force it to not grow or else we cannot specify a column that's 50%
+	// (and alone without any column beside it) because it will always stretch
+	// to 100%.
+	blockStyleGenerator.addBlockStyles( 'columnWrapDesktop', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selector: '.%s-column',
+		styleRule: '--stk-flex-grow',
+		attrName: 'columnWrapDesktop',
+		valueCallback: value => value ? '0' : undefined,
+	} ] )
+
+	if ( hasRowGap ) {
+		blockStyleGenerator.addBlockStyles( 'rowGap', [ {
+			...propsToPass,
+			renderIn: 'save',
+			selector: '.%s-column',
+			styleRule: 'rowGap',
+			attrName: 'rowGap',
+			format: '%spx',
+			responsive: 'all',
+		}, {
+			...propsToPass,
+			renderIn: 'edit',
+			selector: '.%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout',
+			styleRule: 'rowGap',
+			attrName: 'rowGap',
+			format: '%spx',
+			responsive: 'all',
+		} ] )
+	}
+
+	blockStyleGenerator.addBlockStyles( 'columnJustify', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selector: '.%s-column',
+		styleRule: 'justifyContent',
+		attrName: 'columnJustify',
+		responsive: 'all',
+	}, {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: '.%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout',
+		styleRule: 'justifyContent',
+		attrName: 'columnJustify',
+		responsive: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyleConditionally( ( attributes, addBlockCssFunc ) => {
+		const numColumns = ( attributes.columnArrangementMobile || attributes.columnArrangementTablet || '' ).split( ',' ).length
+
+		range( 1, numColumns + 1 ).forEach( i => {
+			addBlockCssFunc( {
+				...propsToPass,
+				// In the editor, target the specific column to change the order.
+				renderIn: 'edit',
+				selector: `> .stk-block-content > .block-editor-inner-blocks > .block-editor-block-list__layout > :nth-child(${ i })`,
+				styleRule: 'order',
+				responsive: 'all',
+				attrName: 'columnArrangement',
+				valueCallback: value => {
+					// Look for the order in the values list for the column i
+					return ( value.split( ',' ) || [] ).indexOf( i.toString() ) + 1
+				},
+				valuePreCallback: ( value, getAttribute, device ) => {
+					const tabletAttribute = getAttribute( 'columnArrangement', 'tablet' )
+					if ( device === 'mobile' && ! value && tabletAttribute ) {
+						return [ ...Array( numColumns ).keys() ].map( i => i + 1 ).join( ',' )
+					}
+					return value
+				},
+			} )
 
-Style.Content = props => {
-	const numColumns = ( props.attributes.columnArrangementMobile || props.attributes.columnArrangementTablet || '' ).split( ',' ).length
-	return <Styles { ...props } numColumns={ numColumns } />
+			addBlockCssFunc( {
+				// In the frontend, use the css custom property to specify the order.
+				// See style.scss We do this because we cannot use the direct descendent
+				// selector ">" in the saved CSS or else non-admin users in multisite
+				// will encounter block errors (this is a WP issue)
+				renderIn: 'save',
+				styleRule: `--stk-col-order-${ i }`,
+				responsive: 'all',
+				attrName: 'columnArrangement',
+				valueCallback: value => {
+					// Look for the order in the values list for the column i
+					return ( value.split( ',' ) || [] ).indexOf( i.toString() ) + 1
+				},
+				valuePreCallback: ( value, getAttribute, device ) => {
+					const tabletAttribute = getAttribute( 'columnArrangement', 'tablet' )
+					if ( device === 'mobile' && ! value && tabletAttribute ) {
+						return [ ...Array( numColumns ).keys() ].map( i => i + 1 ).join( ',' )
+					}
+					return value
+				},
+			} )
+		} )
+	} )
 }
diff --git a/src/block-components/container-div/index.js b/src/block-components/container-div/index.js
index 89fdb5e93..140f6d274 100644
--- a/src/block-components/container-div/index.js
+++ b/src/block-components/container-div/index.js
@@ -1,5 +1,5 @@
 import { addAttributes } from './attributes'
-import { Style } from './style'
+import { addStyles } from './style'
 import { Edit } from './edit'
 
 import classnames from 'classnames'
@@ -93,4 +93,4 @@ ContainerDiv.InspectorControls = Edit
 
 ContainerDiv.addAttributes = addAttributes
 
-ContainerDiv.Style = Style
+ContainerDiv.addStyles = addStyles
diff --git a/src/block-components/container-div/style.js b/src/block-components/container-div/style.js
index 7a75965fe..4281bc0a5 100644
--- a/src/block-components/container-div/style.js
+++ b/src/block-components/container-div/style.js
@@ -2,11 +2,10 @@
  * Internal dependencies
  */
 import {
-	BorderStyle, SizeStyle, BackgroundStyle,
+	addBorderStyles, addSizeStyles, addBackgroundStyles,
 } from '../helpers'
-import { useBlockAttributesContext } from '~stackable/hooks'
 
-export const Style = props => {
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const {
 		backgroundSelector = '.%s-container',
 		borderSelector = '.%s-container',
@@ -18,86 +17,28 @@ export const Style = props => {
 		// sizeVerticalAlignSelectorEdit = '',
 	} = props
 
-	const hasContainer = useBlockAttributesContext( attributes => attributes.hasContainer )
-
-	return (
-		<>
-			{ hasContainer &&
-				<BackgroundStyle
-					{ ...props }
-					attrNameTemplate="container%s"
-					selector={ backgroundSelector }
-				/>
-			}
-			{ hasContainer &&
-				<BorderStyle
-					{ ...props }
-					attrNameTemplate="container%s"
-					selector={ borderSelector }
-					hoverSelector={ `${ borderSelector }:hover` }
-				/>
-			}
-			<SizeStyle
-				{ ...props }
-				attrNameTemplate="container%s"
-				selector={ sizeSelector }
-				verticalAlignRule={ sizeVerticalAlignRule }
-				verticalAlignSelector={ sizeVerticalAlignSelector }
-				// verticalAlignSelectorEdit={ sizeVerticalAlignSelectorEdit }
-				horizontalAlignRule={ sizeHorizontalAlignRule }
-				wrapperSelector={ wrapperSelector }
-				// hasPaddings={ hasContainer }
-			/>
-		</>
-	)
-}
-
-Style.defaultProps = {
-	options: {},
+	addBackgroundStyles( blockStyleGenerator, {
+		...props,
+		renderCondition: 'hasContainer',
+		attrNameTemplate: 'container%s',
+		selector: backgroundSelector,
+	} )
+	addBorderStyles( blockStyleGenerator, {
+		...props,
+		renderCondition: 'hasContainer',
+		attrNameTemplate: 'container%s',
+		selector: borderSelector,
+		hoverSelector: `${ borderSelector }:hover`,
+	} )
+	addSizeStyles( blockStyleGenerator, {
+		...props,
+		attrNameTemplate: 'container%s',
+		selector: sizeSelector,
+		verticalAlignRule: sizeVerticalAlignRule,
+		verticalAlignSelector: sizeVerticalAlignSelector,
+		// verticalAlignSelectorEdit: sizeVerticalAlignSelectorEdit,
+		horizontalAlignRule: sizeHorizontalAlignRule,
+		wrapperSelector,
+		// hasPaddings: hasContainer,
+	} )
 }
-
-Style.Content = props => {
-	const {
-		backgroundSelector = '.%s-container',
-		borderSelector = '.%s-container',
-		sizeSelector = '.%s-container',
-		sizeVerticalAlignRule = null,
-		sizeHorizontalAlignRule = 'margin',
-		wrapperSelector = '',
-		sizeVerticalAlignSelector = '',
-		// sizeVerticalAlignSelectorEdit = '',
-		attributes,
-	} = props
-
-	return (
-		<>
-			{ attributes.hasContainer &&
-				<BackgroundStyle.Content
-					{ ...props }
-					attrNameTemplate="container%s"
-					selector={ backgroundSelector }
-				/>
-			}
-			{ attributes.hasContainer &&
-				<BorderStyle.Content
-					{ ...props }
-					attrNameTemplate="container%s"
-					selector={ borderSelector }
-					hoverSelector={ `${ borderSelector }:hover` }
-				/>
-			}
-			<SizeStyle.Content
-				{ ...props }
-				attrNameTemplate="container%s"
-				selector={ sizeSelector }
-				verticalAlignRule={ sizeVerticalAlignRule }
-				verticalAlignSelector={ sizeVerticalAlignSelector }
-				// verticalAlignSelectorEdit={ sizeVerticalAlignSelectorEdit }
-				horizontalAlignRule={ sizeHorizontalAlignRule }
-				wrapperSelector={ wrapperSelector }
-				// hasPaddings={ attributes.hasContainer }
-			/>
-		</>
-	)
-}
-
diff --git a/src/block-components/content-align/index.js b/src/block-components/content-align/index.js
index 059e707c6..966fbb9c7 100644
--- a/src/block-components/content-align/index.js
+++ b/src/block-components/content-align/index.js
@@ -10,7 +10,7 @@ export { getContentAlignmentClasses } from './use-content-align'
 
 ContentAlign.InspectorControls = Edit
 
-ContentAlign.Style = null
+ContentAlign.addStyles = () => {}
 
 ContentAlign.addAttributes = addAttributes
 
diff --git a/src/block-components/effects-animations/index.js b/src/block-components/effects-animations/index.js
index e083605f5..d8c94ed3b 100644
--- a/src/block-components/effects-animations/index.js
+++ b/src/block-components/effects-animations/index.js
@@ -1,6 +1,6 @@
 import { addAttributes } from './attributes'
 import { Edit } from './edit'
-import { Style } from './style'
+import { addStyles } from './style'
 
 import { applyFilters } from '@wordpress/hooks'
 
@@ -24,4 +24,4 @@ EffectsAnimations.InspectorControls = Edit
 
 EffectsAnimations.addAttributes = addAttributes
 
-EffectsAnimations.Style = Style
+EffectsAnimations.addStyles = addStyles
diff --git a/src/block-components/effects-animations/style.js b/src/block-components/effects-animations/style.js
index 6cba3bbf1..091ef95dc 100644
--- a/src/block-components/effects-animations/style.js
+++ b/src/block-components/effects-animations/style.js
@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { applyFilters } from '@wordpress/hooks'
+import { doAction } from '@wordpress/hooks'
 
-export const Style = props => {
-	const EffectStyles = applyFilters( 'stackable.block-component.effects-animations.style', null )
-	return EffectStyles && <EffectStyles { ...props } />
-}
-
-Style.Content = props => {
-	const EffectStyles = applyFilters( 'stackable.block-component.effects-animations.style.content', null )
-	return EffectStyles && <EffectStyles { ...props } />
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
+	doAction( 'stackable.block-component.effects-animations.style.addStyles', blockStyleGenerator, props )
 }
diff --git a/src/block-components/helpers/backgrounds/style.js b/src/block-components/helpers/backgrounds/style.js
index 365516895..c5f00b77c 100644
--- a/src/block-components/helpers/backgrounds/style.js
+++ b/src/block-components/helpers/backgrounds/style.js
@@ -1,9 +1,4 @@
-/**
- * External dependencies
- */
-import { BlockCss } from '~stackable/components'
-
-const Styles = props => {
+export const addBackgroundStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -17,305 +12,308 @@ const Styles = props => {
 		selectorCallback = null,
 	} = props
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				hoverSelector={ `${ selector }:hover` }
-				styleRule="backgroundColor"
-				attrName="backgroundColor"
-				key="backgroundColor-hover"
-				attrNameTemplate={ attrNameTemplate }
-				selectorCallback={ selectorCallback }
-				hoverCallback={ getAttribute => {
-					return getAttribute( 'backgroundColorType' ) !== 'gradient'
-						? 'all' : false
-				} }
-				valueCallback={ ( value, getAttribute ) => {
-					const backgroundColorType = getAttribute( 'backgroundColorType' )
+	blockStyleGenerator.addBlockStyles( 'backgroundColor', [ {
+		...propsToPass,
+		selector,
+		hoverSelector: `${ selector }:hover`,
+		styleRule: 'backgroundColor',
+		attrName: 'backgroundColor',
+		key: 'backgroundColor-hover',
+		attrNameTemplate,
+		selectorCallback,
+		hoverCallback: getAttribute => {
+			return getAttribute( 'backgroundColorType' ) !== 'gradient'
+				? 'all' : false
+		},
+		valueCallback: ( value, getAttribute ) => {
+			const backgroundColorType = getAttribute( 'backgroundColorType' )
+
+			if ( backgroundColorType === 'gradient' && ( value.match( /rgba\(([^\)]*?)\s*0\s*\.?0?0?\)/ ) || value.includes( 'transparent' ) ) ) {
+				return 'transparent'
+			}
+
+			return value
+		},
+		dependencies: [
+			'backgroundColorType',
+			...dependencies,
+		],
+	} ] )
+
+	// To allow smaller screensizes to override the larger screensize
+	// background images, we need to split these css rules to individual
+	// ones: desktop, tablet and mobile
+
+	/* Desktop */
+	blockStyleGenerator.addBlockStyles( 'backgroundMediaUrl', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'backgroundImage',
+		attrName: 'backgroundMediaUrl',
+		key: 'backgroundMediaUrl',
+		attrNameTemplate,
+		format: 'url(%s)',
+		responsive: [ 'desktop' ],
+		valuePreCallback: value => {
+			// If it's a video, don't print out the style because
+			// it's handled by a video element. And this will cause
+			// the video to show up twice in the network requests.
+			if ( typeof value === 'string' ) {
+				if ( value.match( /\.(mp4|ogg|webm)$/i ) ) {
+					return undefined
+				}
+			}
+			return value
+		},
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'backgroundMediaExternalUrl', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'backgroundImage',
+		attrName: 'backgroundMediaExternalUrl',
+		key: 'backgroundMediaExternalUrl',
+		responsive: [ 'desktop' ],
+		attrNameTemplate,
+		format: 'url(%s)',
+	} ] )
+
+	/* Tablet */
+	blockStyleGenerator.addBlockStyles( 'backgroundMediaUrl', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'backgroundImage',
+		attrName: 'backgroundMediaUrl',
+		key: 'backgroundMediaUrlTablet',
+		attrNameTemplate,
+		format: 'url(%s)',
+		responsive: [ 'tablet' ],
+		valuePreCallback: value => {
+			// If it's a video, don't print out the style because
+			// it's handled by a video element. And this will cause
+			// the video to show up twice in the network requests.
+			if ( typeof value === 'string' ) {
+				if ( value.match( /\.(mp4|ogg|webm)$/i ) ) {
+					return undefined
+				}
+			}
+			return value
+		},
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'backgroundMediaExternalUrl', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'backgroundImage',
+		attrName: 'backgroundMediaExternalUrl',
+		key: 'backgroundMediaExternalUrlTablet',
+		responsive: [ 'tablet' ],
+		attrNameTemplate,
+		format: 'url(%s)',
+	} ] )
+
+	 /* Mobile */
+	blockStyleGenerator.addBlockStyles( 'backgroundMediaUrl', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'backgroundImage',
+		attrName: 'backgroundMediaUrl',
+		key: 'backgroundMediaUrlMobile',
+		attrNameTemplate,
+		format: 'url(%s)',
+		responsive: [ 'mobile' ],
+		valuePreCallback: value => {
+			// If it's a video, don't print out the style because
+			// it's handled by a video element. And this will cause
+			// the video to show up twice in the network requests.
+			if ( typeof value === 'string' ) {
+				if ( value.match( /\.(mp4|ogg|webm)$/i ) ) {
+					return undefined
+				}
+			}
+			return value
+		},
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'backgroundMediaExternalUrl', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'backgroundImage',
+		attrName: 'backgroundMediaExternalUrl',
+		key: 'backgroundMediaExternalUrlMobile',
+		responsive: [ 'mobile' ],
+		attrNameTemplate,
+		format: 'url(%s)',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'fixedBackground', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'backgroundAttachment',
+		attrName: 'fixedBackground',
+		key: 'fixedBackground',
+		attrNameTemplate,
+		valueCallback: value => value ? 'fixed' : undefined,
+	} ] )
 
-					if ( backgroundColorType === 'gradient' && ( value.match( /rgba\(([^\)]*?)\s*0\s*\.?0?0?\)/ ) || value.includes( 'transparent' ) ) ) {
-						return 'transparent'
-					}
+	blockStyleGenerator.addBlockStyles( 'backgroundPosition', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'backgroundPosition',
+		attrName: 'backgroundPosition',
+		key: 'backgroundPosition',
+		attrNameTemplate,
+		responsive: 'all',
+	} ] )
 
-					return value
-				} }
-				dependencies={ [
-					'backgroundColorType',
-					...dependencies,
-				] }
-			/>
-			{
-			// To allow smaller screensizes to override the larger screensize
-			// background images, we need to split these css rules to individual
-			// ones: desktop, tablet and mobile
+	blockStyleGenerator.addBlockStyles( 'backgroundRepeat', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'backgroundRepeat',
+		attrName: 'backgroundRepeat',
+		key: 'backgroundRepeat',
+		attrNameTemplate,
+		responsive: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'backgroundSize', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'backgroundSize',
+		attrName: 'backgroundSize',
+		key: 'backgroundSize',
+		attrNameTemplate,
+		responsive: 'all',
+		valueCallback: ( value, getAttribute, device ) => {
+			if ( value === 'custom' ) {
+				if ( getAttribute( 'backgroundCustomSize', device ) ) {
+					return getAttribute( 'backgroundCustomSize', device ) + ( getAttribute( 'backgroundCustomSizeUnit', device ) || '%' )
+				}
 			}
-			{ /* Desktop */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="backgroundImage"
-				attrName="backgroundMediaUrl"
-				key="backgroundMediaUrl"
-				attrNameTemplate={ attrNameTemplate }
-				format="url(%s)"
-				responsive={ [ 'desktop' ] }
-				valuePreCallback={ value => {
-					// If it's a video, don't print out the style because
-					// it's handled by a video element. And this will cause
-					// the video to show up twice in the network requests.
-					if ( typeof value === 'string' ) {
-						if ( value.match( /\.(mp4|ogg|webm)$/i ) ) {
-							return undefined
-						}
-					}
-					return value
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="backgroundImage"
-				attrName="backgroundMediaExternalUrl"
-				key="backgroundMediaExternalUrl"
-				responsive={ [ 'desktop' ] }
-				attrNameTemplate={ attrNameTemplate }
-				format="url(%s)"
-			/>
-			{ /* Tablet */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="backgroundImage"
-				attrName="backgroundMediaUrl"
-				key="backgroundMediaUrlTablet"
-				attrNameTemplate={ attrNameTemplate }
-				format="url(%s)"
-				responsive={ [ 'tablet' ] }
-				valuePreCallback={ value => {
-					// If it's a video, don't print out the style because
-					// it's handled by a video element. And this will cause
-					// the video to show up twice in the network requests.
-					if ( typeof value === 'string' ) {
-						if ( value.match( /\.(mp4|ogg|webm)$/i ) ) {
-							return undefined
-						}
-					}
-					return value
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="backgroundImage"
-				attrName="backgroundMediaExternalUrl"
-				key="backgroundMediaExternalUrlTablet"
-				responsive={ [ 'tablet' ] }
-				attrNameTemplate={ attrNameTemplate }
-				format="url(%s)"
-			/>
-			{ /* Mobile */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="backgroundImage"
-				attrName="backgroundMediaUrl"
-				key="backgroundMediaUrlMobile"
-				attrNameTemplate={ attrNameTemplate }
-				format="url(%s)"
-				responsive={ [ 'mobile' ] }
-				valuePreCallback={ value => {
-					// If it's a video, don't print out the style because
-					// it's handled by a video element. And this will cause
-					// the video to show up twice in the network requests.
-					if ( typeof value === 'string' ) {
-						if ( value.match( /\.(mp4|ogg|webm)$/i ) ) {
-							return undefined
-						}
-					}
-					return value
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="backgroundImage"
-				attrName="backgroundMediaExternalUrl"
-				key="backgroundMediaExternalUrlMobile"
-				responsive={ [ 'mobile' ] }
-				attrNameTemplate={ attrNameTemplate }
-				format="url(%s)"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="backgroundAttachment"
-				attrName="fixedBackground"
-				key="fixedBackground"
-				attrNameTemplate={ attrNameTemplate }
-				valueCallback={ value => value ? 'fixed' : undefined }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="backgroundPosition"
-				attrName="backgroundPosition"
-				key="backgroundPosition"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="backgroundRepeat"
-				attrName="backgroundRepeat"
-				key="backgroundRepeat"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="backgroundSize"
-				attrName="backgroundSize"
-				key="backgroundSize"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				valueCallback={ ( value, getAttribute, device ) => {
-					if ( value === 'custom' ) {
-						if ( getAttribute( 'backgroundCustomSize', device ) ) {
-							return getAttribute( 'backgroundCustomSize', device ) + ( getAttribute( 'backgroundCustomSizeUnit', device ) || '%' )
-						}
-					}
-					return value
-				} }
-				dependencies={ [
-					'backgroundCustomSize',
+			return value
+		},
+		dependencies: [
+			'backgroundCustomSize',
 					 'backgroundCustomSizeUnit',
 					 ...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="backgroundBlendMode"
-				attrName="backgroundImageBlendMode"
-				key="backgroundImageBlendMode"
-				attrNameTemplate={ attrNameTemplate }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ selector }:before` }
-				hoverSelector={ `${ selector }:hover:before` }
-				styleRule="backgroundColor"
-				attrName="backgroundColor"
-				key="backgroundColor-before"
-				attrNameTemplate={ attrNameTemplate }
-				selectorCallback={ selectorCallback }
-				hover="all"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( value === '' ) {
-						if ( getAttribute( 'backgroundTintStrength', device, state ) ) {
-							return '#000000'
-						}
-					}
-					return value
-				} }
-				valueCallback={ ( value, getAttribute ) => {
-					const isGradient = getAttribute( 'backgroundColorType' ) === 'gradient'
-					return ! isGradient && value ? value : undefined
-				} }
-				dependencies={ [
-					'backgroundColorType',
-					'backgroundTintStrength',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ selector }:before` }
-				hoverSelector={ `${ selector }:hover:before` }
-				styleRule="opacity"
-				attrName="backgroundTintStrength"
-				key="backgroundTintStrength"
-				attrNameTemplate={ attrNameTemplate }
-				hover="all"
-				enabledCallback={ getAttribute => !! ( getAttribute( 'backgroundMediaUrl', 'mobile', 'normal', true ) || getAttribute( 'backgroundMediaExternalUrl', 'mobile', 'normal', true ) ) }
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( value === '' ) {
-						if ( getAttribute( 'backgroundColor', device, state ) ) {
-							return 5
-						}
-					}
-					return value
-				} }
-				valueCallback={ value => {
-					return parseInt( value, 10 ) / 10
-				} }
-				dependencies={ [
-					'backgroundColor',
-					'backgroundMediaUrl',
-					'backgroundMediaExternalUrl',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ selector }:before` }
-				styleRule="mixBlendMode"
-				attrName="backgroundGradientBlendMode"
-				key="backgroundGradientBlendMode"
-				attrNameTemplate={ attrNameTemplate }
-				enabledCallback={ getAttribute => getAttribute( 'backgroundColorType' ) === 'gradient' }
-				dependencies={ [
-					'backgroundColorType',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ selector }:before` }
-				styleRule="backgroundImage"
-				attrName="backgroundColor"
-				key="backgroundColor-image"
-				attrNameTemplate={ attrNameTemplate }
-				enabledCallback={ getAttribute => getAttribute( 'backgroundColorType' ) === 'gradient' }
-				dependencies={ [
-					'backgroundColorType',
-					'backgroundColor',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				// In the editor, the background overlay can go outside the block if there's a border radius.
-				renderIn="edit"
-				selector={ `${ selector }:before` }
-				styleRule="borderRadius"
-				attrName="borderRadius"
-				key="borderRadius"
-				attrNameTemplate={ attrNameTemplate }
-				format="%spx"
-				enabledCallback={ getAttribute =>
-					getAttribute( 'backgroundColorType' ) === 'gradient' ||
-					getAttribute( 'backgroundColor' ) ||
-					getAttribute( 'backgroundColor', 'desktop', 'hover' ) ||
-					getAttribute( 'backgroundColor', 'desktop', 'parent-hover' ) }
-				dependencies={ [
-					'backgroundColorType',
-					'backgroundColor',
-					...dependencies,
-				] }
-			/>
-		</>
-	)
-}
+		],
+	} ] )
 
-export const BackgroundStyle = props => {
-	return <Styles { ...props } />
-}
+	blockStyleGenerator.addBlockStyles( 'backgroundImageBlendMode', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'backgroundBlendMode',
+		attrName: 'backgroundImageBlendMode',
+		key: 'backgroundImageBlendMode',
+		attrNameTemplate,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'backgroundColor', [ {
+		...propsToPass,
+		selector: `${ selector }:before`,
+		hoverSelector: `${ selector }:hover:before`,
+		styleRule: 'backgroundColor',
+		attrName: 'backgroundColor',
+		key: 'backgroundColor-before',
+		attrNameTemplate,
+		selectorCallback,
+		hover: 'all',
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			if ( value === '' ) {
+				if ( getAttribute( 'backgroundTintStrength', device, state ) ) {
+					return '#000000'
+				}
+			}
+			return value
+		},
+		valueCallback: ( value, getAttribute ) => {
+			const isGradient = getAttribute( 'backgroundColorType' ) === 'gradient'
+			return ! isGradient && value ? value : undefined
+		},
+		dependencies: [
+			'backgroundColorType',
+			'backgroundTintStrength',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'backgroundTintStrength', [ {
+		...propsToPass,
+		selector: `${ selector }:before`,
+		hoverSelector: `${ selector }:hover:before`,
+		styleRule: 'opacity',
+		attrName: 'backgroundTintStrength',
+		key: 'backgroundTintStrength',
+		attrNameTemplate,
+		hover: 'all',
+		enabledCallback: getAttribute => !! ( getAttribute( 'backgroundMediaUrl', 'mobile', 'normal', true ) || getAttribute( 'backgroundMediaExternalUrl', 'mobile', 'normal', true ) ),
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			if ( value === '' ) {
+				if ( getAttribute( 'backgroundColor', device, state ) ) {
+					return 5
+				}
+			}
+			return value
+		},
+		valueCallback: value => {
+			return parseInt( value, 10 ) / 10
+		},
+		dependencies: [
+			'backgroundColor',
+			'backgroundMediaUrl',
+			'backgroundMediaExternalUrl',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'backgroundGradientBlendMode', [ {
+		...propsToPass,
+		selector: `${ selector }:before`,
+		styleRule: 'mixBlendMode',
+		attrName: 'backgroundGradientBlendMode',
+		key: 'backgroundGradientBlendMode',
+		attrNameTemplate,
+		enabledCallback: getAttribute => getAttribute( 'backgroundColorType' ) === 'gradient',
+		dependencies: [
+			'backgroundColorType',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'backgroundColor', [ {
+		...propsToPass,
+		selector: `${ selector }:before`,
+		styleRule: 'backgroundImage',
+		attrName: 'backgroundColor',
+		key: 'backgroundColor-image',
+		attrNameTemplate,
+		enabledCallback: getAttribute => getAttribute( 'backgroundColorType' ) === 'gradient',
+		dependencies: [
+			'backgroundColorType',
+			'backgroundColor',
+			...dependencies,
+		],
+	} ] )
 
-BackgroundStyle.Content = props => {
-	return <Styles { ...props } />
+	blockStyleGenerator.addBlockStyles( 'borderRadius', [ {
+		...propsToPass,
+		// In the editor, the background overlay can go outside the block if there's a border radius.
+		renderIn: 'edit',
+		selector: `${ selector }:before`,
+		styleRule: 'borderRadius',
+		attrName: 'borderRadius',
+		key: 'borderRadius',
+		attrNameTemplate,
+		format: '%spx',
+		enabledCallback: getAttribute =>
+			getAttribute( 'backgroundColorType' ) === 'gradient' ||
+			getAttribute( 'backgroundColor' ) ||
+			getAttribute( 'backgroundColor', 'desktop', 'hover' ) ||
+			getAttribute( 'backgroundColor', 'desktop', 'parent-hover' ),
+		dependencies: [
+			'backgroundColorType',
+			'backgroundColor',
+			...dependencies,
+		],
+	} ] )
 }
diff --git a/src/block-components/helpers/borders/style.js b/src/block-components/helpers/borders/style.js
index 3e1e8d7ca..90ffbf079 100644
--- a/src/block-components/helpers/borders/style.js
+++ b/src/block-components/helpers/borders/style.js
@@ -1,9 +1,4 @@
-/**
- * External dependencies
- */
-import { BlockCss } from '~stackable/components'
-
-const Styles = props => {
+export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -19,218 +14,206 @@ const Styles = props => {
 		borderEnabledCallback = getAttribute => getAttribute( 'borderType' ),
 	} = props
 
-	return (
-		<>
-			{ /* The style below is deprecated. We have to keep it
-			because users who have updated will suddenly see that they have lost their
-			border radius */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector={ borderRadiusSelector || selector }
-				styleRule="borderRadius"
-				attrName="borderRadius"
-				key="borderRadius"
-				attrNameTemplate={ attrNameTemplate }
-				format="%spx"
-				responsive="all"
-				hover="all"
-				hoverSelector={ borderRadiusSelector ? undefined : hoverSelector }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ borderRadiusSelector || selector }
-				styleRule="borderTopLeftRadius"
-				attrName="borderRadius2"
-				key="borderTopLeftRadius2"
-				attrNameTemplate={ attrNameTemplate }
-				format="%spx"
-				responsive="all"
-				hover="all"
-				valuePreCallback={ value => value?.top }
-				hoverSelector={ borderRadiusSelector ? undefined : hoverSelector }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ borderRadiusSelector || selector }
-				styleRule="borderTopRightRadius"
-				attrName="borderRadius2"
-				key="borderTopRightRadius2"
-				attrNameTemplate={ attrNameTemplate }
-				format="%spx"
-				responsive="all"
-				hover="all"
-				valuePreCallback={ value => value?.right }
-				hoverSelector={ borderRadiusSelector ? undefined : hoverSelector }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ borderRadiusSelector || selector }
-				styleRule="borderBottomRightRadius"
-				attrName="borderRadius2"
-				key="borderBottomRightRadius2"
-				attrNameTemplate={ attrNameTemplate }
-				format="%spx"
-				responsive="all"
-				hover="all"
-				valuePreCallback={ value => value?.left }
-				hoverSelector={ borderRadiusSelector ? undefined : hoverSelector }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ borderRadiusSelector || selector }
-				styleRule="borderBottomLeftRadius"
-				attrName="borderRadius2"
-				key="borderBottomLeftRadius2"
-				attrNameTemplate={ attrNameTemplate }
-				format="%spx"
-				responsive="all"
-				hover="all"
-				valuePreCallback={ value => value?.bottom }
-				hoverSelector={ borderRadiusSelector ? undefined : hoverSelector }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				// Adding a border radius should append `overflow: hidden`.
-				// This is to prevent gradient background from overflowing.
-				// borderRadius is deprecated, see comment below.
-				selector={ borderRadiusSelector || selector }
-				styleRule="overflow"
-				attrName="borderRadius"
-				key="borderRadius-overflow"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hover="all"
-				hoverSelector={ borderRadiusSelector ? undefined : hoverSelector }
-				enabledCallback={ ( _getAttribute, attributes ) => {
-					if ( addBorderRadiusOverflow && attrNameTemplate === 'block%s' && attributes.overflow ) {
-						return false
-					}
-					return addBorderRadiusOverflow
-				} }
-				valueCallback={ () => 'hidden' }
-				dependencies={ [ 'overflow' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				// borderRadius is deprecated, so we had to duplicate the style
-				// generated by the borderRadius to be used by borderRadius2.
-				// Adding a border radius should append `overflow: hidden`.
-				// This is to prevent gradient background from overflowing.
-				selector={ borderRadiusSelector || selector }
-				styleRule="overflow"
-				attrName="borderRadius2"
-				key="borderRadius2-overflow"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hover="all"
-				hoverSelector={ borderRadiusSelector ? undefined : hoverSelector }
-				enabledCallback={ ( _getAttribute, attributes ) => {
-					if ( addBorderRadiusOverflow && attrNameTemplate === 'block%s' && attributes.overflow ) {
-						return false
-					}
-					return addBorderRadiusOverflow
-				} }
-				valueCallback={ () => 'hidden' }
-				dependencies={ [ 'overflow' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="boxShadow"
-				attrName="shadow"
-				key="shadow"
-				attrNameTemplate={ attrNameTemplate }
-				hover="all"
-				hoverSelector={ hoverSelector }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="borderStyle"
-				attrName="borderType"
-				key="borderType"
-				attrNameTemplate={ attrNameTemplate }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="borderColor"
-				attrName="borderColor"
-				key="borderColor"
-				attrNameTemplate={ attrNameTemplate }
-				enabledCallback={ borderEnabledCallback }
-				hover="all"
-				hoverSelector={ hoverSelector }
-				dependencies={ [ 'borderType' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="borderTopWidth"
-				attrName="borderWidth"
-				key="borderWidth-top"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hover="all"
-				hoverSelector={ hoverSelector }
-				format="%spx"
-				enabledCallback={ borderEnabledCallback }
-				valuePreCallback={ value => value?.top }
-				dependencies={ [ 'borderType' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="borderRightWidth"
-				attrName="borderWidth"
-				key="borderWidth-right"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hover="all"
-				hoverSelector={ hoverSelector }
-				format="%spx"
-				enabledCallback={ borderEnabledCallback }
-				valuePreCallback={ value => value?.right }
-				dependencies={ [ 'borderType' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="borderBottomWidth"
-				attrName="borderWidth"
-				key="borderWidth-bottom"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hover="all"
-				hoverSelector={ hoverSelector }
-				format="%spx"
-				enabledCallback={ borderEnabledCallback }
-				valuePreCallback={ value => value?.bottom }
-				dependencies={ [ 'borderType' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="borderLeftWidth"
-				attrName="borderWidth"
-				key="borderWidth-left"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hover="all"
-				hoverSelector={ hoverSelector }
-				format="%spx"
-				enabledCallback={ borderEnabledCallback }
-				valuePreCallback={ value => value?.left }
-				dependencies={ [ 'borderType' ] }
-			/>
-		</>
-	)
-}
+	// The style below is deprecated. We have to keep it because users who have
+	// updated will suddenly see that they have lost their border radius
+	blockStyleGenerator.addBlockStyles( 'borderRadius', [ {
+		...propsToPass,
+		selector: borderRadiusSelector || selector,
+		styleRule: 'borderRadius',
+		attrName: 'borderRadius',
+		key: 'borderRadius',
+		attrNameTemplate,
+		format: '%spx',
+		responsive: 'all',
+		hover: 'all',
+		hoverSelector: borderRadiusSelector ? undefined : hoverSelector,
+	} ] )
 
-export const BorderStyle = props => {
-	return <Styles { ...props } />
-}
+	blockStyleGenerator.addBlockStyles( 'borderRadius2', [ {
+		...propsToPass,
+		selector: borderRadiusSelector || selector,
+		styleRule: 'borderTopLeftRadius',
+		attrName: 'borderRadius2',
+		key: 'borderTopLeftRadius2',
+		attrNameTemplate,
+		format: '%spx',
+		responsive: 'all',
+		hover: 'all',
+		valuePreCallback: value => value?.top,
+		hoverSelector: borderRadiusSelector ? undefined : hoverSelector,
+	}, {
+		...propsToPass,
+		selector: borderRadiusSelector || selector,
+		styleRule: 'borderTopRightRadius',
+		attrName: 'borderRadius2',
+		key: 'borderTopRightRadius2',
+		attrNameTemplate,
+		format: '%spx',
+		responsive: 'all',
+		hover: 'all',
+		valuePreCallback: value => value?.right,
+		hoverSelector: borderRadiusSelector ? undefined : hoverSelector,
+	}, {
+		...propsToPass,
+		selector: borderRadiusSelector || selector,
+		styleRule: 'borderBottomRightRadius',
+		attrName: 'borderRadius2',
+		key: 'borderBottomRightRadius2',
+		attrNameTemplate,
+		format: '%spx',
+		responsive: 'all',
+		hover: 'all',
+		valuePreCallback: value => value?.left,
+		hoverSelector: borderRadiusSelector ? undefined : hoverSelector,
+	}, {
+		...propsToPass,
+		selector: borderRadiusSelector || selector,
+		styleRule: 'borderBottomLeftRadius',
+		attrName: 'borderRadius2',
+		key: 'borderBottomLeftRadius2',
+		attrNameTemplate,
+		format: '%spx',
+		responsive: 'all',
+		hover: 'all',
+		valuePreCallback: value => value?.bottom,
+		hoverSelector: borderRadiusSelector ? undefined : hoverSelector,
+	} ] )
+
+	// Adding a border radius should append `overflow: hidden`.  This is to
+	// prevent gradient background from overflowing.  borderRadius is
+	// deprecated, see comment below.
+	blockStyleGenerator.addBlockStyles( 'borderRadius', [ {
+		...propsToPass,
+		selector: borderRadiusSelector || selector,
+		styleRule: 'overflow',
+		attrName: 'borderRadius',
+		key: 'borderRadius-overflow',
+		attrNameTemplate,
+		responsive: 'all',
+		hover: 'all',
+		hoverSelector: borderRadiusSelector ? undefined : hoverSelector,
+		enabledCallback: ( _getAttribute, attributes ) => {
+			if ( addBorderRadiusOverflow && attrNameTemplate === 'block%s' && attributes.overflow ) {
+				return false
+			}
+			return addBorderRadiusOverflow
+		},
+		valueCallback: () => 'hidden',
+		dependencies: [ 'overflow' ],
+	} ] )
+
+	// borderRadius is deprecated, so we had to duplicate the style generated by
+	// the borderRadius to be used by borderRadius2.  Adding a border radius
+	// should append `overflow: hidden`.  This is to prevent gradient background
+	// from overflowing.
+	blockStyleGenerator.addBlockStyles( 'borderRadius2', [ {
+		...propsToPass,
+		selector: borderRadiusSelector || selector,
+		styleRule: 'overflow',
+		attrName: 'borderRadius2',
+		key: 'borderRadius2-overflow',
+		attrNameTemplate,
+		responsive: 'all',
+		hover: 'all',
+		hoverSelector: borderRadiusSelector ? undefined : hoverSelector,
+		enabledCallback: ( _getAttribute, attributes ) => {
+			if ( addBorderRadiusOverflow && attrNameTemplate === 'block%s' && attributes.overflow ) {
+				return false
+			}
+			return addBorderRadiusOverflow
+		},
+		valueCallback: () => 'hidden',
+		dependencies: [ 'overflow' ],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'shadow', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'boxShadow',
+		attrName: 'shadow',
+		key: 'shadow',
+		attrNameTemplate,
+		hover: 'all',
+		hoverSelector,
+	} ] )
 
-BorderStyle.Content = props => {
-	return <Styles { ...props } />
+	blockStyleGenerator.addBlockStyles( 'borderType', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'borderStyle',
+		attrName: 'borderType',
+		key: 'borderType',
+		attrNameTemplate,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'borderColor', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'borderColor',
+		attrName: 'borderColor',
+		key: 'borderColor',
+		attrNameTemplate,
+		enabledCallback: borderEnabledCallback,
+		hover: 'all',
+		hoverSelector,
+		dependencies: [ 'borderType' ],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'borderWidth', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'borderTopWidth',
+		attrName: 'borderWidth',
+		key: 'borderWidth-top',
+		attrNameTemplate,
+		responsive: 'all',
+		hover: 'all',
+		hoverSelector,
+		format: '%spx',
+		enabledCallback: borderEnabledCallback,
+		valuePreCallback: value => value?.top,
+		dependencies: [ 'borderType' ],
+	}, {
+		...propsToPass,
+		selector,
+		styleRule: 'borderRightWidth',
+		attrName: 'borderWidth',
+		key: 'borderWidth-right',
+		attrNameTemplate,
+		responsive: 'all',
+		hover: 'all',
+		hoverSelector,
+		format: '%spx',
+		enabledCallback: borderEnabledCallback,
+		valuePreCallback: value => value?.right,
+		dependencies: [ 'borderType' ],
+	}, {
+		...propsToPass,
+		selector,
+		styleRule: 'borderBottomWidth',
+		attrName: 'borderWidth',
+		key: 'borderWidth-bottom',
+		attrNameTemplate,
+		responsive: 'all',
+		hover: 'all',
+		hoverSelector,
+		format: '%spx',
+		enabledCallback: borderEnabledCallback,
+		valuePreCallback: value => value?.bottom,
+		dependencies: [ 'borderType' ],
+	}, {
+		...propsToPass,
+		selector,
+		styleRule: 'borderLeftWidth',
+		attrName: 'borderWidth',
+		key: 'borderWidth-left',
+		attrNameTemplate,
+		responsive: 'all',
+		hover: 'all',
+		hoverSelector,
+		format: '%spx',
+		enabledCallback: borderEnabledCallback,
+		valuePreCallback: value => value?.left,
+		dependencies: [ 'borderType' ],
+	} ] )
 }
diff --git a/src/block-components/helpers/flex-gap/style.js b/src/block-components/helpers/flex-gap/style.js
index 93f580699..7b999b746 100644
--- a/src/block-components/helpers/flex-gap/style.js
+++ b/src/block-components/helpers/flex-gap/style.js
@@ -1,9 +1,4 @@
-/**
- * External dependencies
- */
-import { BlockCss } from '~stackable/components'
-
-const Styles = props => {
+export const addFlexGapStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -12,38 +7,51 @@ const Styles = props => {
 	}
 	const {
 		selector,
+		editSelector = '',
+		saveSelector = '',
 		enableColumnGap = true,
 	} = props
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="columnGap"
-				attrName="columnGap"
-				key="columnGap"
-				format="%spx"
-				responsive="all"
-				enabledCallback={ () => enableColumnGap }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="rowGap"
-				attrName="rowGap"
-				key="rowGap"
-				format="%spx"
-				responsive="all"
-			/>
-		</>
-	)
-}
+	blockStyleGenerator.addBlockStyles( 'columnGap', [ {
+		...propsToPass,
 
-export const FlexGapStyles = props => {
-	return <Styles { ...props } />
-}
+		renderIn: 'edit',
+		selector: editSelector || selector,
+		styleRule: 'columnGap',
+		attrName: 'columnGap',
+		key: 'columnGap',
+		format: '%spx',
+		responsive: 'all',
+		enabledCallback: () => enableColumnGap,
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: saveSelector || selector,
+		styleRule: 'columnGap',
+		attrName: 'columnGap',
+		key: 'columnGap',
+		format: '%spx',
+		responsive: 'all',
+		enabledCallback: () => enableColumnGap,
+	} ] )
 
-FlexGapStyles.Content = props => {
-	return <Styles { ...props } />
+	blockStyleGenerator.addBlockStyles( 'rowGap', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: editSelector || selector,
+		styleRule: 'rowGap',
+		attrName: 'rowGap',
+		key: 'rowGap',
+		format: '%spx',
+		responsive: 'all',
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: saveSelector || selector,
+		styleRule: 'rowGap',
+		attrName: 'rowGap',
+		key: 'rowGap',
+		format: '%spx',
+		responsive: 'all',
+	} ] )
 }
diff --git a/src/block-components/helpers/size/edit.js b/src/block-components/helpers/size/edit.js
index a2b736b30..6c555fbb0 100644
--- a/src/block-components/helpers/size/edit.js
+++ b/src/block-components/helpers/size/edit.js
@@ -13,6 +13,7 @@ import { useAttributeEditHandlers, useDeviceType } from '~stackable/hooks'
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n'
+import { getAttributeNameFunc } from '~stackable/util'
 
 const Layout = props => {
 	const deviceType = useDeviceType()
@@ -114,9 +115,8 @@ Layout.defaultProps = {
 }
 
 const Spacing = props => {
-	const {
-		getAttrName,
-	} = useAttributeEditHandlers( props.attrNameTemplate )
+	// Don't use the hook form so we don't rerender
+	const getAttrName = getAttributeNameFunc( props.attrNameTemplate )
 
 	const {
 		labelPaddings = __( 'Paddings', i18n ),
diff --git a/src/block-components/helpers/size/style.js b/src/block-components/helpers/size/style.js
index c45b9a87d..7daae3267 100644
--- a/src/block-components/helpers/size/style.js
+++ b/src/block-components/helpers/size/style.js
@@ -1,278 +1,291 @@
-/**
- * External dependencies
- */
-import { BlockCss } from '~stackable/components'
-
-const Styles = props => {
+export const addSizeStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
 		versionAdded: '3.0.0',
 		versionDeprecated: '',
 	}
+
 	const {
 		selector = '',
 		attrNameTemplate = '%s',
 		horizontalAlignRule = 'margin',
 		verticalAlignRule = 'alignItems',
-		// verticalAlignSelectorEdit = '',
+		verticalAlignSelectorEdit = '',
+		verticalAlignSelectorSave = '',
 		verticalAlignSelector = '',
 		hasPaddings = true, // Disallow the padding styles
 		wrapperSelector = '', // The outer wrapper element that where the outer flex alignments, widths and margins are applied to.
 		dependencies = [],
 	} = props
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="minHeight"
-				attrName="height"
-				key="height"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hasUnits="px"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ verticalAlignSelector || selector }
-				styleRule={ verticalAlignRule || 'alignItems' }
-				attrName="verticalAlign"
-				key="verticalAlign-save"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ wrapperSelector || selector }
-				styleRule="maxWidth"
-				attrName="width"
-				key="width-maxwidth"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hasUnits="px"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ wrapperSelector || selector }
-				styleRule="minWidth"
-				attrName="width"
-				key="width-minwidth"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hover="all"
-				versionAdded="3.0.0"
-				versionDeprecated="3.0.2"
-				valueCallback={ value => {
-					return value !== '' ? 'auto' : undefined
-				} }
-			/>
-			{ hasPaddings && <>
-				<BlockCss
-					{ ...propsToPass }
-					selector={ selector }
-					styleRule="paddingTop"
-					attrName="padding"
-					key="padding-top"
-					attrNameTemplate={ attrNameTemplate }
-					responsive="all"
-					hover="all"
-					hasUnits="px"
-					valuePreCallback={ value => value?.top }
-				/>
-				<BlockCss
-					{ ...propsToPass }
-					selector={ selector }
-					styleRule="paddingRight"
-					attrName="padding"
-					key="padding-right"
-					attrNameTemplate={ attrNameTemplate }
-					responsive="all"
-					hover="all"
-					hasUnits="px"
-					valuePreCallback={ value => value?.right }
-				/>
-				<BlockCss
-					{ ...propsToPass }
-					selector={ selector }
-					styleRule="paddingBottom"
-					attrName="padding"
-					key="padding-bottom"
-					attrNameTemplate={ attrNameTemplate }
-					responsive="all"
-					hover="all"
-					hasUnits="px"
-					valuePreCallback={ value => value?.bottom }
-				/>
-				<BlockCss
-					{ ...propsToPass }
-					selector={ selector }
-					styleRule="paddingLeft"
-					attrName="padding"
-					key="padding-left"
-					attrNameTemplate={ attrNameTemplate }
-					responsive="all"
-					hover="all"
-					hasUnits="px"
-					valuePreCallback={ value => value?.left }
-				/>
-			</> }
-			<BlockCss
-				{ ...propsToPass }
-				selector={ wrapperSelector || selector }
-				styleRule="marginTop"
-				attrName="margin"
-				key="margin-top"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ value => value?.top }
-				valueCallback={ value => {
-					return value.startsWith( 'auto' ) ? 'auto' : value
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ wrapperSelector || selector }
-				styleRule="marginRight"
-				attrName="margin"
-				key="margin-right"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ ( value, getAttribute, device ) => {
-					const right = value?.right
-					const horizontalAlign = getAttribute( 'horizontalAlign', device )
-					const blockWidth = getAttribute( 'width', device )
-					if ( blockWidth || typeof right !== 'undefined' ) {
-						switch ( horizontalAlign ) {
-							case 'flex-start':
-							case 'center':
-								return 'auto'
-							case 'flex-end':
-								return right || 0
-							default: return right
-						}
-					} else {
-						return ''
-					}
-				} }
-				valueCallback={ value => {
-					return value.startsWith( 'auto' ) ? 'auto' : value
-				} }
-				dependencies={ [
-					'horizontalAlign',
-					 'width',
-					 ...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ wrapperSelector || selector }
-				styleRule="marginBottom"
-				attrName="margin"
-				key="margin-bottom"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ value => value?.bottom }
-				valueCallback={ value => {
-					return value.startsWith( 'auto' ) ? 'auto' : value
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ wrapperSelector || selector }
-				styleRule="marginLeft"
-				attrName="margin"
-				key="margin-left"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ ( value, getAttribute, device ) => {
-					const left = value?.left
-					const horizontalAlign = getAttribute( 'horizontalAlign', device )
-					const blockWidth = getAttribute( 'width', device )
-					if ( blockWidth || typeof left !== 'undefined' ) {
-						switch ( horizontalAlign ) {
-							case 'flex-start':
-								return left || 0
-							case 'center':
-							case 'flex-end':
-								return 'auto'
-							default: return left
-						}
-					} else {
-						return ''
-					}
-				} }
-				valueCallback={ value => {
-					return value.startsWith( 'auto' ) ? 'auto' : value
-				} }
-				dependencies={ [
-					'horizontalAlign',
-					 'width',
-					 ...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="display"
-				attrName="verticalAlign"
-				key="verticalAlign-display"
-				attrNameTemplate={ attrNameTemplate }
-				responsive="all"
-				valueCallback={ () => {
-					return 'flex'
-				} }
-			/>
-			{ /* <BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector={ selector }
-				styleRule="flexDirection"
-				attrName="verticalAlign"
-				key="verticalAlign-save-flex"
-				responsive="all"
-				attrNameTemplate={ attrNameTemplate }
-				valueCallback={ () => {
-					return ( verticalAlignRule || 'alignItems' ) === 'justifyContent' ? 'column' : undefined
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector={ selector }
-				styleRule="flexDirection"
-				attrName="verticalAlign"
-				key="verticalAlign-flex"
-				responsive="all"
-				attrNameTemplate={ attrNameTemplate }
-				valueCallback={ () => {
-					return 'column'
-				} }
-			/> */ }
-			{ horizontalAlignRule !== 'margin' &&
-				<BlockCss
-					{ ...propsToPass }
-					renderIn="save"
-					selector={ wrapperSelector || selector }
-					styleRule={ horizontalAlignRule || 'justifyContent' }
-					attrName="horizontalAlign"
-					key="horizontalAlign"
-					attrNameTemplate={ attrNameTemplate }
-					responsive="all"
-				/> }
-		</>
-	)
-}
+	blockStyleGenerator.addBlockStyles( 'height', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'minHeight',
+		attrName: 'height',
+		key: 'height',
+		attrNameTemplate,
+		responsive: 'all',
+		hasUnits: 'px',
+	} ] )
 
-export const SizeStyle = props => {
-	return <Styles { ...props } />
-}
+	if ( verticalAlignSelectorEdit ) {
+		blockStyleGenerator.addBlockStyles( 'verticalAlign', [ {
+			...propsToPass,
+			renderIn: 'edit',
+			selector: verticalAlignSelectorEdit,
+			styleRule: verticalAlignRule || 'alignItems',
+			attrName: 'verticalAlign',
+			key: 'verticalAlign-edit',
+			attrNameTemplate,
+			responsive: 'all',
+		} ] )
+	}
+
+	if ( verticalAlignSelectorSave ) {
+		blockStyleGenerator.addBlockStyles( 'verticalAlign', [ {
+			...propsToPass,
+			renderIn: 'save',
+			selector: verticalAlignSelectorSave,
+			styleRule: verticalAlignRule || 'alignItems',
+			attrName: 'verticalAlign',
+			key: 'verticalAlign-save',
+			attrNameTemplate,
+			responsive: 'all',
+		} ] )
+	}
+
+	if ( ! verticalAlignSelectorEdit && ! verticalAlignSelectorSave ) {
+		blockStyleGenerator.addBlockStyles( 'verticalAlign', [ {
+			...propsToPass,
+			selector: verticalAlignSelector || selector,
+			styleRule: verticalAlignRule || 'alignItems',
+			attrName: 'verticalAlign',
+			key: 'verticalAlign',
+			attrNameTemplate,
+			responsive: 'all',
+		} ] )
+	}
 
-SizeStyle.Content = props => {
-	return <Styles { ...props } />
+	blockStyleGenerator.addBlockStyles( 'width', [ {
+		...propsToPass,
+		selector: wrapperSelector || selector,
+		styleRule: 'maxWidth',
+		attrName: 'width',
+		key: 'width-maxwidth',
+		attrNameTemplate,
+		responsive: 'all',
+		hasUnits: 'px',
+	}, {
+		...propsToPass,
+		selector: wrapperSelector || selector,
+		styleRule: 'minWidth',
+		attrName: 'width',
+		key: 'width-minwidth',
+		attrNameTemplate,
+		responsive: 'all',
+		hover: 'all',
+		versionAdded: '3.0.0',
+		versionDeprecated: '3.0.2',
+		valueCallback: value => {
+			return value !== '' ? 'auto' : undefined
+		},
+	} ] )
+
+	if ( hasPaddings ) {
+		blockStyleGenerator.addBlockStyles( 'padding', [ {
+			...propsToPass,
+			selector,
+			styleRule: 'paddingTop',
+			attrName: 'padding',
+			key: 'padding-top',
+			attrNameTemplate,
+			responsive: 'all',
+			hover: 'all',
+			hasUnits: 'px',
+			valuePreCallback: value => value?.top,
+		}, {
+			...propsToPass,
+			selector,
+			styleRule: 'paddingRight',
+			attrName: 'padding',
+			key: 'padding-right',
+			attrNameTemplate,
+			responsive: 'all',
+			hover: 'all',
+			hasUnits: 'px',
+			valuePreCallback: value => value?.right,
+		}, {
+			...propsToPass,
+			selector,
+			styleRule: 'paddingBottom',
+			attrName: 'padding',
+			key: 'padding-bottom',
+			attrNameTemplate,
+			responsive: 'all',
+			hover: 'all',
+			hasUnits: 'px',
+			valuePreCallback: value => value?.bottom,
+		}, {
+			...propsToPass,
+			selector,
+			styleRule: 'paddingLeft',
+			attrName: 'padding',
+			key: 'padding-left',
+			attrNameTemplate,
+			responsive: 'all',
+			hover: 'all',
+			hasUnits: 'px',
+			valuePreCallback: value => value?.left,
+		} ] )
+	}
+
+	blockStyleGenerator.addBlockStyles( 'margin', [ {
+		...propsToPass,
+		selector: wrapperSelector || selector,
+		styleRule: 'marginTop',
+		attrName: 'margin',
+		key: 'margin-top',
+		attrNameTemplate,
+		responsive: 'all',
+		hasUnits: 'px',
+		valuePreCallback: value => value?.top,
+		valueCallback: value => {
+			return value.startsWith( 'auto' ) ? 'auto' : value
+		},
+	}, {
+		...propsToPass,
+		selector: wrapperSelector || selector,
+		styleRule: 'marginRight',
+		attrName: 'margin',
+		key: 'margin-right',
+		attrNameTemplate,
+		responsive: 'all',
+		hasUnits: 'px',
+		valuePreCallback: ( value, getAttribute, device ) => {
+			const right = value?.right
+			const horizontalAlign = getAttribute( 'horizontalAlign', device )
+			const blockWidth = getAttribute( 'width', device )
+			if ( blockWidth || typeof right !== 'undefined' ) {
+				switch ( horizontalAlign ) {
+					case 'flex-start':
+					case 'center':
+						return 'auto'
+					case 'flex-end':
+						return right || 0
+					default: return right
+				}
+			} else {
+				return ''
+			}
+		},
+		valueCallback: value => {
+			return value.startsWith( 'auto' ) ? 'auto' : value
+		},
+		dependencies: [
+			'horizontalAlign',
+		 'width',
+		 ...dependencies,
+		],
+	}, {
+		...propsToPass,
+		selector: wrapperSelector || selector,
+		styleRule: 'marginBottom',
+		attrName: 'margin',
+		key: 'margin-bottom',
+		attrNameTemplate,
+		responsive: 'all',
+		hasUnits: 'px',
+		valuePreCallback: value => value?.bottom,
+		valueCallback: value => {
+			return value.startsWith( 'auto' ) ? 'auto' : value
+		},
+	}, {
+		...propsToPass,
+		selector: wrapperSelector || selector,
+		styleRule: 'marginLeft',
+		attrName: 'margin',
+		key: 'margin-left',
+		attrNameTemplate,
+		responsive: 'all',
+		hasUnits: 'px',
+		valuePreCallback: ( value, getAttribute, device ) => {
+			const left = value?.left
+			const horizontalAlign = getAttribute( 'horizontalAlign', device )
+			const blockWidth = getAttribute( 'width', device )
+			if ( blockWidth || typeof left !== 'undefined' ) {
+				switch ( horizontalAlign ) {
+					case 'flex-start':
+						return left || 0
+					case 'center':
+					case 'flex-end':
+						return 'auto'
+					default: return left
+				}
+			} else {
+				return ''
+			}
+		},
+		valueCallback: value => {
+			return value.startsWith( 'auto' ) ? 'auto' : value
+		},
+		dependencies: [
+			'horizontalAlign',
+		 'width',
+		 ...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'verticalAlign', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'display',
+		attrName: 'verticalAlign',
+		key: 'verticalAlign-display',
+		attrNameTemplate,
+		responsive: 'all',
+		valueCallback: () => {
+			return 'flex'
+		},
+	} ] )
+
+	// blockStyleGenerator.addBlockStyles( 'verticalAlign', [ {
+	// 	...propsToPass,
+	// 	renderIn: 'save',
+	// 	selector,
+	// 	styleRule: 'flexDirection',
+	// 	attrName: 'verticalAlign',
+	// 	key: 'verticalAlign-save-flex',
+	// 	responsive: 'all',
+	// 	attrNameTemplate,
+	// 	valueCallback: () => {
+	// 		return ( verticalAlignRule || 'alignItems' ) === 'justifyContent' ? 'column' : undefined
+	// 	},
+	// }, {
+	// 	...propsToPass,
+	// 	renderIn: 'edit',
+	// 	selector,
+	// 	styleRule: 'flexDirection',
+	// 	attrName: 'verticalAlign',
+	// 	key: 'verticalAlign-flex',
+	// 	responsive: 'all',
+	// 	attrNameTemplate,
+	// 	valueCallback: () => {
+	// 		return 'column'
+	// 	},
+	// } ] )
+
+	if ( horizontalAlignRule !== 'margin' ) {
+		blockStyleGenerator.addBlockStyles( 'horizontalAlign', [ {
+			...propsToPass,
+			renderIn: 'save',
+			selector: wrapperSelector || selector,
+			styleRule: horizontalAlignRule || 'justifyContent',
+			attrName: 'horizontalAlign',
+			key: 'horizontalAlign',
+			attrNameTemplate,
+			responsive: 'all',
+		} ] )
+	}
 }
diff --git a/src/block-components/icon/index.js b/src/block-components/icon/index.js
index 070598222..206baa9c5 100644
--- a/src/block-components/icon/index.js
+++ b/src/block-components/icon/index.js
@@ -14,7 +14,7 @@ import { IconSearchPopover, SvgIcon } from '~stackable/components'
  */
 import { Edit } from './edit'
 import { addAttributes } from './attributes'
-import { Style } from './style'
+import { addStyles } from './style'
 
 /**
  * WordPress dependencies
@@ -255,5 +255,5 @@ Icon.InspectorControls = Edit
 
 Icon.addAttributes = addAttributes
 
-Icon.Style = Style
+Icon.addStyles = addStyles
 
diff --git a/src/block-components/icon/style.js b/src/block-components/icon/style.js
index 454cb4139..2a1444c55 100644
--- a/src/block-components/icon/style.js
+++ b/src/block-components/icon/style.js
@@ -1,14 +1,9 @@
-/**
- * External dependencies
- */
-import { BlockCss } from '~stackable/components'
-
 /**
  * WordPress dependencies
  */
-import { applyFilters } from '@wordpress/hooks'
+import { doAction } from '@wordpress/hooks'
 
-const Styles = props => {
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -38,286 +33,282 @@ const Styles = props => {
 	const shapeSelector = `${ selector } .stk--inner-svg`
 	const shapeHoverSelector = `${ hoverSelector } .stk--inner-svg`
 
-	return (
-		<>
-			{ /* Icon Styles */ }
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => getSvgSelector( getAttribute ) }
-				hoverSelectorCallback={ getAttribute => getSvgHoverSelector( getAttribute, hoverSelector ) }
-				styleRule="height"
-				attrName="iconSize"
-				key="iconSize"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => getSvgSelector( getAttribute ) }
-				hoverSelectorCallback={ getAttribute => getSvgHoverSelector( getAttribute, hoverSelector ) }
-				styleRule="width"
-				attrName="iconSize"
-				key="iconSize-width"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => getSvgSelector( getAttribute ) }
-				hoverSelectorCallback={ getAttribute => getSvgHoverSelector( getAttribute, hoverSelector ) }
-				styleRule="opacity"
-				attrName="iconOpacity"
-				key="iconOpacity"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => getSvgSelector( getAttribute ) }
-				hoverSelectorCallback={ getAttribute => getSvgHoverSelector( getAttribute, hoverSelector ) }
-				styleRule="transform"
-				attrName="iconRotation"
-				key="iconRotation"
-				hover="all"
-				format="rotate(%sdeg)"
-			/>
-			{ hasIconGap &&
-				<BlockCss
-					{ ...propsToPass }
-					selectorCallback={ getAttribute => getSvgSelector( getAttribute ) }
-					hoverSelectorCallback={ getAttribute => getSvgSelector( getAttribute, hoverSelector ) }
-					styleRuleCallback={ getAttribute => getAttribute( 'iconPosition' ) === 'right' ? 'marginInlineStart' : 'marginInlineEnd' }
-					attrName="iconGap"
-					key="iconGap"
-					format="%spx"
-					dependencies={ [
-						'iconPosition',
-						...dependencies,
-					] }
-				/>
+	{ /* Icon Styles */ }
+	blockStyleGenerator.addBlockStyles( 'iconSize', [ {
+		...propsToPass,
+		selectorCallback: getAttribute => getSvgSelector( getAttribute ),
+		hoverSelectorCallback: getAttribute => getSvgHoverSelector( getAttribute, hoverSelector ),
+		styleRule: 'height',
+		attrName: 'iconSize',
+		key: 'iconSize',
+		responsive: 'all',
+		format: '%spx',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'iconSize', [ {
+		...propsToPass,
+		selectorCallback: getAttribute => getSvgSelector( getAttribute ),
+		hoverSelectorCallback: getAttribute => getSvgHoverSelector( getAttribute, hoverSelector ),
+		styleRule: 'width',
+		attrName: 'iconSize',
+		key: 'iconSize-width',
+		responsive: 'all',
+		format: '%spx',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'iconOpacity', [ {
+		...propsToPass,
+		selectorCallback: getAttribute => getSvgSelector( getAttribute ),
+		hoverSelectorCallback: getAttribute => getSvgHoverSelector( getAttribute, hoverSelector ),
+		styleRule: 'opacity',
+		attrName: 'iconOpacity',
+		key: 'iconOpacity',
+		hover: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'iconRotation', [ {
+		...propsToPass,
+		selectorCallback: getAttribute => getSvgSelector( getAttribute ),
+		hoverSelectorCallback: getAttribute => getSvgHoverSelector( getAttribute, hoverSelector ),
+		styleRule: 'transform',
+		attrName: 'iconRotation',
+		key: 'iconRotation',
+		hover: 'all',
+		format: 'rotate(%sdeg)',
+	} ] )
+
+	if ( hasIconGap ) {
+		blockStyleGenerator.addBlockStyles( 'iconGap', [ {
+			...propsToPass,
+			selectorCallback: getAttribute => getSvgSelector( getAttribute ),
+			hoverSelectorCallback: getAttribute => getSvgSelector( getAttribute, hoverSelector ),
+			styleRuleCallback: getAttribute => getAttribute( 'iconPosition' ) === 'right' ? 'marginInlineStart' : 'marginInlineEnd',
+			attrName: 'iconGap',
+			key: 'iconGap',
+			format: '%spx',
+			dependencies: [
+				'iconPosition',
+				...dependencies,
+			],
+		} ] )
+	}
+
+	blockStyleGenerator.addBlockStyles( 'iconColor1', [ {
+		...propsToPass,
+		selectorCallback: getAttribute => getSvgSelector( getAttribute, selector, [ 'g', 'path', 'rect', 'polygon', 'ellipse' ] ),
+		hoverSelectorCallback: getAttribute => getSvgHoverSelector( getAttribute, hoverSelector, [ 'g', 'path', 'rect', 'polygon', 'ellipse' ] ),
+		styleRule: 'fill',
+		attrName: 'iconColor1',
+		key: 'iconColor1-fill',
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			if ( getAttribute( 'iconColorType' ) === 'gradient' && getAttribute( 'iconColor1', 'desktop', state ) && getAttribute( 'iconColor2', 'desktop', state ) ) {
+				return `url(#linear-gradient-${ getAttribute( 'uniqueId' ) })`
 			}
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => getSvgSelector( getAttribute, selector, [ 'g', 'path', 'rect', 'polygon', 'ellipse' ] ) }
-				hoverSelectorCallback={ getAttribute => getSvgHoverSelector( getAttribute, hoverSelector, [ 'g', 'path', 'rect', 'polygon', 'ellipse' ] ) }
-				styleRule="fill"
-				attrName="iconColor1"
-				key="iconColor1-fill"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( getAttribute( 'iconColorType' ) === 'gradient' && getAttribute( 'iconColor1', 'desktop', state ) && getAttribute( 'iconColor2', 'desktop', state ) ) {
-						return `url(#linear-gradient-${ getAttribute( 'uniqueId' ) })`
-					}
 
-					if ( ! getAttribute( 'iconColorType' ) ) {
-						return value
-					}
+			if ( ! getAttribute( 'iconColorType' ) ) {
+				return value
+			}
+
+			return undefined
+		},
+		dependencies: [
+			'iconColorType',
+			'iconColor1',
+			'iconColor2',
+			'uniqueId',
+			...dependencies,
+		],
+		hover: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'iconColorGradientDirection', [ {
+		...propsToPass,
+		selectorCallback: getAttribute => `${ selector } #linear-gradient-${ getAttribute( 'uniqueId' ) }`,
+		styleRule: 'transform',
+		format: 'rotate(%sdeg)',
+		attrName: 'iconColorGradientDirection',
+		key: 'iconColorGradientDirection',
+		hoverSelectorCallback: getAttribute => `${ selector }:hover #linear-gradient-${ getAttribute( 'uniqueId' ) }`,
+	} ] )
 
-					return undefined
-				} }
-				dependencies={ [
-					'iconColorType',
-					'iconColor1',
-					'iconColor2',
-					'uniqueId',
-					...dependencies,
-				] }
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => `${ selector } #linear-gradient-${ getAttribute( 'uniqueId' ) }` }
-				styleRule="transform"
-				format="rotate(%sdeg)"
-				attrName="iconColorGradientDirection"
-				key="iconColorGradientDirection"
-				hoverSelectorCallback={ getAttribute => `${ selector }:hover #linear-gradient-${ getAttribute( 'uniqueId' ) }` }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => `${ selector } #linear-gradient-${ getAttribute( 'uniqueId' ) }` }
-				styleRuleCallback={ getAttribute => `--linear-gradient-${ getAttribute( 'uniqueId' ) }-color-1` }
-				attrName="iconColor1"
-				key="iconColor1"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( getAttribute( 'iconColorType' ) !== 'gradient' ||
-					     ! getAttribute( 'iconColor1', 'desktop', state ) ||
-					     ! getAttribute( 'iconColor2', 'desktop', state )
-					) {
-						return undefined
-					}
-					return value
-				} }
-				hoverSelectorCallback={ getAttribute => `${ selector }:hover #linear-gradient-${ getAttribute( 'uniqueId' ) }` }
-				dependencies={ [
-					'iconColorType',
-					'iconColor1',
-					'iconColor2',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => `${ selector } #linear-gradient-${ getAttribute( 'uniqueId' ) }` }
-				styleRuleCallback={ getAttribute => `--linear-gradient-${ getAttribute( 'uniqueId' ) }-color-2` }
-				attrName="iconColor2"
-				key="iconColor2"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( getAttribute( 'iconColorType' ) !== 'gradient' ||
+	blockStyleGenerator.addBlockStyles( 'iconColor1', [ {
+		...propsToPass,
+		selectorCallback: getAttribute => `${ selector } #linear-gradient-${ getAttribute( 'uniqueId' ) }`,
+		styleRuleCallback: getAttribute => `--linear-gradient-${ getAttribute( 'uniqueId' ) }-color-1`,
+		attrName: 'iconColor1',
+		key: 'iconColor1',
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			if ( getAttribute( 'iconColorType' ) !== 'gradient' ||
 					! getAttribute( 'iconColor1', 'desktop', state ) ||
 					! getAttribute( 'iconColor2', 'desktop', state )
-					) {
-						return undefined
-					}
-					return value
-				} }
-				hoverSelectorCallback={ getAttribute => `${ selector }:hover #linear-gradient-${ getAttribute( 'uniqueId' ) }` }
-				dependencies={ [
-					'iconColorType',
-					'iconColor1',
-					'iconColor2',
-					...dependencies,
-				] }
-			/>
+			) {
+				return undefined
+			}
+			return value
+		},
+		hoverSelectorCallback: getAttribute => `${ selector }:hover #linear-gradient-${ getAttribute( 'uniqueId' ) }`,
+		dependencies: [
+			'iconColorType',
+			'iconColor1',
+			'iconColor2',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'iconColor2', [ {
+		...propsToPass,
+		selectorCallback: getAttribute => `${ selector } #linear-gradient-${ getAttribute( 'uniqueId' ) }`,
+		styleRuleCallback: getAttribute => `--linear-gradient-${ getAttribute( 'uniqueId' ) }-color-2`,
+		attrName: 'iconColor2',
+		key: 'iconColor2',
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			if ( getAttribute( 'iconColorType' ) !== 'gradient' ||
+			! getAttribute( 'iconColor1', 'desktop', state ) ||
+			! getAttribute( 'iconColor2', 'desktop', state )
+			) {
+				return undefined
+			}
+			return value
+		},
+		hoverSelectorCallback: getAttribute => `${ selector }:hover #linear-gradient-${ getAttribute( 'uniqueId' ) }`,
+		dependencies: [
+			'iconColorType',
+			'iconColor1',
+			'iconColor2',
+			...dependencies,
+		],
+	} ] )
 
-			{ /* Shape Styles */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector={ shapeSelector }
-				hoverSelector={ shapeHoverSelector }
-				styleRule="backgroundColor"
-				attrName="shapeColor1"
-				key="shapeColor1"
-				hover="all"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					const shapeColorType = getAttribute( 'shapeColorType' )
-					if ( state !== 'normal' && shapeColorType === 'gradient' ) {
-						return undefined
-					}
+	{ /* Shape Styles */ }
+	blockStyleGenerator.addBlockStyles( 'shapeColor1', [ {
+		...propsToPass,
+		selector: shapeSelector,
+		hoverSelector: shapeHoverSelector,
+		styleRule: 'backgroundColor',
+		attrName: 'shapeColor1',
+		key: 'shapeColor1',
+		hover: 'all',
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			const shapeColorType = getAttribute( 'shapeColorType' )
+			if ( state !== 'normal' && shapeColorType === 'gradient' ) {
+				return undefined
+			}
 
-					return value
-				} }
-				dependencies={ [
-					'shapeColorType',
-					 'shapeColor2',
-					 'shapeColorType',
-					 'shapeGradientDirection',
-					 ...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ shapeSelector }
-				hoverSelector={ shapeHoverSelector }
-				styleRule="borderRadius"
-				attrName="shapeBorderRadius"
-				key="shapeBorderRadius"
-				format="%s%"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ shapeSelector }
-				hoverSelector={ shapeHoverSelector }
-				styleRule="padding"
-				attrName="shapePadding"
-				key="shapePadding"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ shapeSelector }
-				hoverSelector={ shapeHoverSelector }
-				styleRule="borderColor"
-				attrName="shapeOutlineColor"
-				key="shapeOutlineColor"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ shapeSelector }
-				hoverSelector={ shapeHoverSelector }
-				styleRule="borderStyle"
-				attrName="borderStyle"
-				key="borderStyle"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if (
-						! getAttribute( 'shapeOutlineWidth', 'desktop', state )?.top ||
-						! getAttribute( 'shapeOutlineWidth', 'desktop', state )?.right ||
-						! getAttribute( 'shapeOutlineWidth', 'desktop', state )?.bottom ||
-						! getAttribute( 'shapeOutlineWidth', 'desktop', state )?.left
-					) {
-						return undefined
-					}
+			return value
+		},
+		dependencies: [
+			'shapeColorType',
+			'shapeColor2',
+			'shapeColorType',
+			'shapeGradientDirection',
+			...dependencies,
+		],
+	} ] )
 
-					return 'solid'
-				} }
-				hover="all"
-				dependencies={ [
-					'shapeOutlineWidth',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ shapeSelector }
-				hoverSelector={ shapeHoverSelector }
-				styleRule="borderTopWidth"
-				attrName="shapeOutlineWidth"
-				key="shapeOutlineWidth-top"
-				responsive="all"
-				format="%spx"
-				valuePreCallback={ value => value?.top }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ shapeSelector }
-				hoverSelector={ shapeHoverSelector }
-				styleRule="borderRightWidth"
-				attrName="shapeOutlineWidth"
-				key="shapeOutlineWidth-right"
-				responsive="all"
-				format="%spx"
-				valuePreCallback={ value => value?.right }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ shapeSelector }
-				hoverSelector={ shapeHoverSelector }
-				styleRule="borderBottomWidth"
-				attrName="shapeOutlineWidth"
-				key="shapeOutlineWidth-bottom"
-				responsive="all"
-				format="%spx"
-				valuePreCallback={ value => value?.bottom }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ shapeSelector }
-				hoverSelector={ shapeHoverSelector }
-				styleRule="borderLeftWidth"
-				attrName="shapeOutlineWidth"
-				key="shapeOutlineWidth-left"
-				responsive="all"
-				format="%spx"
-				valuePreCallback={ value => value?.left }
-			/>
-		</>
-	)
-}
+	blockStyleGenerator.addBlockStyles( 'shapeBorderRadius', [ {
+		...propsToPass,
+		selector: shapeSelector,
+		hoverSelector: shapeHoverSelector,
+		styleRule: 'borderRadius',
+		attrName: 'shapeBorderRadius',
+		key: 'shapeBorderRadius',
+		format: '%s%',
+		hover: 'all',
+	} ] )
 
-export const Style = props => {
-	const IndivIconStyles = applyFilters( 'stackable.block-component.icon.indiv-icon-style', null )
+	blockStyleGenerator.addBlockStyles( 'shapePadding', [ {
+		...propsToPass,
+		selector: shapeSelector,
+		hoverSelector: shapeHoverSelector,
+		styleRule: 'padding',
+		attrName: 'shapePadding',
+		key: 'shapePadding',
+		format: '%spx',
+	} ] )
 
-	return <>
-		<Styles { ...props } />
-		{ IndivIconStyles && <IndivIconStyles { ...props } /> }
-	</>
-}
+	blockStyleGenerator.addBlockStyles( 'shapeOutlineColor', [ {
+		...propsToPass,
+		selector: shapeSelector,
+		hoverSelector: shapeHoverSelector,
+		styleRule: 'borderColor',
+		attrName: 'shapeOutlineColor',
+		key: 'shapeOutlineColor',
+		hover: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'borderStyle', [ {
+		...propsToPass,
+		selector: shapeSelector,
+		hoverSelector: shapeHoverSelector,
+		styleRule: 'borderStyle',
+		attrName: 'borderStyle',
+		key: 'borderStyle',
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			if (
+				! getAttribute( 'shapeOutlineWidth', 'desktop', state )?.top ||
+				! getAttribute( 'shapeOutlineWidth', 'desktop', state )?.right ||
+				! getAttribute( 'shapeOutlineWidth', 'desktop', state )?.bottom ||
+				! getAttribute( 'shapeOutlineWidth', 'desktop', state )?.left
+			) {
+				return undefined
+			}
+
+			return 'solid'
+		},
+		hover: 'all',
+		dependencies: [
+			'shapeOutlineWidth',
+			...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'shapeOutlineWidth', [ {
+		...propsToPass,
+		selector: shapeSelector,
+		hoverSelector: shapeHoverSelector,
+		styleRule: 'borderTopWidth',
+		attrName: 'shapeOutlineWidth',
+		key: 'shapeOutlineWidth-top',
+		responsive: 'all',
+		format: '%spx',
+		valuePreCallback: value => value?.top,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'shapeOutlineWidth', [ {
+		...propsToPass,
+		selector: shapeSelector,
+		hoverSelector: shapeHoverSelector,
+		styleRule: 'borderRightWidth',
+		attrName: 'shapeOutlineWidth',
+		key: 'shapeOutlineWidth-right',
+		responsive: 'all',
+		format: '%spx',
+		valuePreCallback: value => value?.right,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'shapeOutlineWidth', [ {
+		...propsToPass,
+		selector: shapeSelector,
+		hoverSelector: shapeHoverSelector,
+		styleRule: 'borderBottomWidth',
+		attrName: 'shapeOutlineWidth',
+		key: 'shapeOutlineWidth-bottom',
+		responsive: 'all',
+		format: '%spx',
+		valuePreCallback: value => value?.bottom,
+	} ] )
 
-Style.Content = props => {
-	const IndivIconStyles = applyFilters( 'stackable.block-component.icon.indiv-icon-style', null )
+	blockStyleGenerator.addBlockStyles( 'shapeOutlineWidth', [ {
+		...propsToPass,
+		selector: shapeSelector,
+		hoverSelector: shapeHoverSelector,
+		styleRule: 'borderLeftWidth',
+		attrName: 'shapeOutlineWidth',
+		key: 'shapeOutlineWidth-left',
+		responsive: 'all',
+		format: '%spx',
+		valuePreCallback: value => value?.left,
+	} ] )
 
-	return <>
-		<Styles { ...props } />
-		{ IndivIconStyles && <IndivIconStyles { ...props } /> }
-	</>
+	doAction( 'stackable.block-component.icon.indiv-icon-style.addStyles', blockStyleGenerator )
 }
diff --git a/src/block-components/image/index.js b/src/block-components/image/index.js
index 17fb2b197..70f6cd1d4 100644
--- a/src/block-components/image/index.js
+++ b/src/block-components/image/index.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { addAttributes } from './attributes'
-import { Style } from './style'
+import { addStyles } from './style'
 import { useImage } from './use-image'
 import { Edit } from './edit'
 import Image_ from './image'
@@ -176,4 +176,4 @@ Image.InspectorControls = Edit
 
 Image.addAttributes = addAttributes
 
-Image.Style = Style
+Image.addStyles = addStyles
diff --git a/src/block-components/image/style.js b/src/block-components/image/style.js
index 6b65b4e69..62dc4d15e 100644
--- a/src/block-components/image/style.js
+++ b/src/block-components/image/style.js
@@ -7,7 +7,6 @@ import { getShapeCSS } from './get-shape-css'
  * External dependencies
  */
 import { toNumber } from 'lodash'
-import { BlockCss } from '~stackable/components'
 
 const focalPointToPosition = ( { x, y } ) => {
 	let _x = toNumber( x )
@@ -17,501 +16,509 @@ const focalPointToPosition = ( { x, y } ) => {
 	return `${ _x }% ${ _y }%`
 }
 
-const Styles = props => {
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
 		versionAdded: '3.0.0',
 		versionDeprecated: '',
 	}
+
 	const {
 		selector = '.stk-img-wrapper',
 		hoverSelector = '.stk-img-wrapper:hover',
 		hoverSelectorCallback = null,
 		enableWidth = true,
+		enableWidthCallback = null,
+		saveEnableWidthCallback = null,
 		enableHeight = true,
+		enableHeightCallback = null,
 		enableAspectRatio = true,
+		enableAspectRatioCallback = null,
 		widthStyleRule = null,
-		widthUnitCallback = null,
+		widthStyleRuleCallback = null,
+		editorWidthUnitCallback = null,
+		saveWidthUnitCallback = null,
 		heightUnitCallback = null,
 		dependencies = [],
 	} = props
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [
-					selector,
-					`${ selector } .stk-img-resizer-wrapper`,
-				] }
-				renderIn="edit"
-				styleRule="aspectRatio"
-				attrName="imageAspectRatio"
-				key="imageAspectRatio"
-				responsive="all"
-				enabledCallback={ () => enableAspectRatio }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				renderIn="save"
-				styleRule="aspectRatio"
-				attrName="imageAspectRatio"
-				key="imageAspectRatio"
-				responsive="all"
-				enabledCallback={ () => enableAspectRatio }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ selector }:not(.stk--is-resizing)` }
-				renderIn="edit"
-				styleRule="width"
-				attrName="imageWidth"
-				key="imageWidth"
-				hasUnits="%"
-				unitCallback={ widthUnitCallback }
-				responsive="all"
-				enabledCallback={ () => enableWidth }
-				valueCallback={ ( value, getAttribute ) => {
-					// If there's an aspect ratio and the other dimension is not given, use auto
-					if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageHeight' ) ) {
-						return 'auto'
-					}
-					return value
-				} }
-				dependencies={ [
-					'imageAspectRatio',
-					'imageHeight',
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				renderIn="save"
-				styleRule={ widthStyleRule || 'width' }
-				attrName="imageWidth"
-				key="imageWidth-save"
-				hasUnits="%"
-				unitCallback={ widthUnitCallback }
-				responsive="all"
-				enabledCallback={ () => enableWidth }
-				valueCallback={ ( value, getAttribute ) => {
-					// If there's an aspect ratio and the other dimension is not given, use auto
-					if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageHeight' ) ) {
-						return 'auto'
-					}
-					return value
-				} }
-				dependencies={ [
-					'imageAspectRatio',
-					'imageHeight',
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ selector }:not(.stk--is-resizing)` }
-				renderIn="edit"
-				styleRule="height"
-				attrName="imageHeight"
-				key="imageHeight"
-				hasUnits="px"
-				unitCallback={ heightUnitCallback }
-				responsive="all"
-				enabledCallback={ () => enableHeight }
-				valueCallback={ ( value, getAttribute ) => {
-					// If there's an aspect ratio and the other dimension is not given, use auto
-					if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageWidth' ) ) {
-						return 'auto'
-					}
-					return value
-				} }
-				valuePreCallback={ ( value, getAttribute ) => {
-					if ( enableAspectRatio && value === '' && getAttribute( 'imageAspectRatio' ) && ! getAttribute( 'imageWidth' ) ) {
-						return 'auto'
-					}
-					return value
-				} }
-				dependencies={ [
-					'imageAspectRatio',
-					'imageWidth',
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				renderIn="save"
-				styleRule="height"
-				attrName="imageHeight"
-				key="imageHeight-save"
-				hasUnits="px"
-				unitCallback={ heightUnitCallback }
-				responsive="all"
-				enabledCallback={ () => enableHeight }
-				valueCallback={ ( value, getAttribute ) => {
-					// If there's an aspect ratio and the other dimension is not given, use auto
-					if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageWidth' ) ) {
-						return 'auto'
-					}
-					return value
-				} }
-				valuePreCallback={ ( value, getAttribute ) => {
-					if ( enableAspectRatio && value === '' && getAttribute( 'imageAspectRatio' ) && ! getAttribute( 'imageHeight' ) ) {
-						return 'auto'
-					}
-					return value
-				} }
-				dependencies={ [
-					'imageAspectRatio',
-					'imageWidth',
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				/**
-				 * `box-shadow` will not work alongside
-				 * `mask-image`. Use `drop-shadow` instead.
-				 *
-				 * @see https://stackoverflow.com/questions/12492006/box-shadow-on-element-with-webkit-mask-image
-				 */
-				selector={ `${ selector } .stk-img-resizer-wrapper` }
-				hoverSelector={ hoverSelector ? `${ hoverSelector } .stk-img-resizer-wrapper` : undefined }
-				hoverSelectorCallback={ hoverSelectorCallback }
-				renderIn="edit"
-				styleRule="filter"
-				attrName="imageShadow"
-				key="imageShadow"
-				format="drop-shadow(%s)"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				hoverSelector={ hoverSelector }
-				renderIn="save"
-				styleRule="filter"
-				attrName="imageShadow"
-				key="imageShadow-save"
-				format="drop-shadow(%s)"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ selector } img` }
-				hoverSelector={ `${ hoverSelector } img` }
-				hoverSelectorCallback={ hoverSelectorCallback }
-				styleRule="filter"
-				attrName="imageFilter"
-				key="imageFilter"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ selector } img` }
-				hoverSelector={ `${ hoverSelector } img` }
-				hoverSelectorCallback={ hoverSelectorCallback }
-				styleRule="transform"
-				attrName="imageZoom"
-				key="imageZoom"
-				format="scale(%s)"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				/**
-				 * Add the border radius in the actual image since
-				 * filter CSS style values (e.g. `brightness`) can sometimes mess up
-				 * the border radius of the image. So add the border-radius alongside filters.
-				 *
-				 * @see https://github.com/gambitph/Stackable/issues/1833
-				 */
-				selector={ `${ selector } .stk-img-resizer-wrapper img` }
-				renderIn="edit"
-				styleRule="borderRadius"
-				attrName="imageBorderRadius"
-				key="imageBorderRadius"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ selector } img` }
-				renderIn="save"
-				styleRule="borderRadius"
-				attrName="imageBorderRadius"
-				key="imageBorderRadius-save"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ selector } img` }
-				hoverSelector={ `${ hoverSelector } img` }
-				hoverSelectorCallback={ hoverSelectorCallback }
-				styleRule="objectPosition"
-				attrName="imageFocalPoint"
-				key="imageFocalPoint"
-				valueCallback={ focalPointToPosition }
-				responsive="all"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ selector } img` }
-				styleRule="objectFit"
-				attrName="imageFit"
-				key="imageFit"
-				responsive="all"
-			/>
 
-			{ /** Image shape */ }
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				// This is so that the resizer won't get clipped.
-				selector={ [
-					`${ selector } .stk-img-resizer-wrapper img`,
-					`${ selector } .stk-img-resizer-wrapper::after`,
-					`${ selector } .stk-img-resizer-wrapper::before`,
-				] }
-				styleRule="mask-image"
-				vendorPrefixes={ [ '-webkit-' ] }
-				attrName="imageShape"
-				key="imageShape"
-				responsive="all"
-				enabledCallback={ getAttribute => !! getAttribute( 'imageShape' ) }
-				valueCallback={ ( value, getAttribute ) => {
-					return getShapeCSS( value, getAttribute( 'imageShapeFlipX' ), getAttribute( 'imageShapeFlipY' ), getAttribute( 'imageShapeStretch' ) )
-				} }
-				dependencies={ [
-					'imageShapeFlipX',
-					'imageShapeFlipY',
-					'imageShapeStretch',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector={ [
-					`${ selector } img`,
-					`${ selector }::after`,
-					`${ selector }::before`,
-				] }
-				styleRule="mask-image"
-				vendorPrefixes={ [ '-webkit-' ] }
-				attrName="imageShape"
-				key="imageShape-save"
-				responsive="all"
-				enabledCallback={ getAttribute => !! getAttribute( 'imageShape' ) }
-				valueCallback={ ( value, getAttribute ) => {
-					return getShapeCSS( value, getAttribute( 'imageShapeFlipX' ), getAttribute( 'imageShapeFlipY' ), getAttribute( 'imageShapeStretch' ) )
-				} }
-				dependencies={ [
-					'imageShapeFlipX',
-					'imageShapeFlipY',
-					'imageShapeStretch',
-					...dependencies,
-				] }
-			/>
-			{ /* These 2 components are for the gradient overlay normal states */ }
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector={ `${ selector }::after` }
-				hoverSelector={ `${ hoverSelector }::after` }
-				hoverSelectorCallback={ hoverSelectorCallback }
-				styleRuleCallback={ getAttribute => {
-					const colorType = getAttribute( 'imageOverlayColorType' )
-					return colorType === 'gradient' ? 'backgroundImage' : 'backgroundColor'
-				} }
-				attrName="imageOverlayColor"
-				key="imageOverlayColor-save"
-				hoverCallback={ getAttribute => {
-					const colorType = getAttribute( 'imageOverlayColorType' )
-					return colorType === 'gradient' ? null : 'all'
-				} }
-				valueCallback={ ( value, getAttribute ) => {
-					const textColorType = getAttribute( 'imageOverlayColorType' )
-					const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
+	const _enableWidthCallback = enableWidthCallback || ( () => enableWidth )
+	const _enableHeightCallback = enableHeightCallback || ( () => enableHeight )
+	const _enableAspectRatioCallback = enableAspectRatioCallback || ( () => enableAspectRatio )
+	const _widthStyleRuleCallback = widthStyleRuleCallback || ( () => widthStyleRule || 'width' )
 
-					// If the type was switched, adjust the value so that gradient will show up.
-					if ( textColorType === 'gradient' && ! isGradient ) {
-						return `linear-gradient(${ value } 0%, ${ value } 100%)`
-					} else if ( textColorType !== 'gradient' && isGradient ) {
-						const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
-						if ( color ) {
-							return color[ 0 ]
-						}
-					}
-					return value
-				} }
-				dependencies={ [
-					'imageOverlayColorType',
-					...dependencies,
-				 ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector={ `${ selector } .stk-img-resizer-wrapper::after` }
-				hoverSelector={ `${ hoverSelector } .stk-img-resizer-wrapper::after` }
-				hoverSelectorCallback={ hoverSelectorCallback }
-				styleRuleCallback={ getAttribute => {
-					const colorType = getAttribute( 'imageOverlayColorType' )
-					return colorType === 'gradient' ? 'backgroundImage' : 'backgroundColor'
-				} }
-				attrName="imageOverlayColor"
-				key="imageOverlayColor"
-				hoverCallback={ getAttribute => {
-					const colorType = getAttribute( 'imageOverlayColorType' )
-					return colorType === 'gradient' ? null : 'all'
-				} }
-				valueCallback={ ( value, getAttribute ) => {
-					const textColorType = getAttribute( 'imageOverlayColorType' )
-					const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
+	blockStyleGenerator.addBlockStyles( 'imageAspectRatio', [ {
+		...propsToPass,
+		selector: [
+			selector,
+			`${ selector } .stk-img-resizer-wrapper`,
+		],
+		renderIn: 'edit',
+		styleRule: 'aspectRatio',
+		attrName: 'imageAspectRatio',
+		key: 'imageAspectRatio',
+		responsive: 'all',
+		enabledCallback: _enableAspectRatioCallback,
+	}, {
+		...propsToPass,
+		selector,
+		renderIn: 'save',
+		styleRule: 'aspectRatio',
+		attrName: 'imageAspectRatio',
+		key: 'imageAspectRatio',
+		responsive: 'all',
+		enabledCallback: _enableAspectRatioCallback,
+	} ] )
 
-					// If the type was switched, adjust the value so that gradient will show up.
-					if ( textColorType === 'gradient' && ! isGradient ) {
-						return `linear-gradient(${ value } 0%, ${ value } 100%)`
-					} else if ( textColorType !== 'gradient' && isGradient ) {
-						const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
-						if ( color ) {
-							return color[ 0 ]
-						}
-					}
-					return value
-				} }
-				dependencies={ [
-					'imageOverlayColorType',
-					 ...dependencies,
-				] }
-			/>
-			{ /* These 2 components are for the gradient overlay for hover states */ }
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector={ `${ selector }::after` }
-				hoverSelector={ `${ selector }::before` }
-				styleRuleCallback={ getAttribute => {
-					const colorType = getAttribute( 'imageOverlayColorType' )
-					return colorType === 'gradient' ? 'backgroundImage' : 'backgroundColor'
-				} }
-				attrName="imageOverlayColor"
-				key="imageOverlayColor-edit-image"
-				hoverCallback={ getAttribute => {
-					const colorType = getAttribute( 'imageOverlayColorType' )
-					return colorType === 'gradient' ? 'all' : null
-				} }
-				enabledCallback={ getAttribute => getAttribute( 'imageOverlayColorType' ) === 'gradient' }
-				valueCallback={ ( value, getAttribute, device, state ) => {
-					if ( state === 'normal' ) {
-						return undefined
-					}
+	blockStyleGenerator.addBlockStyles( 'imageWidth', [ {
+		...propsToPass,
+		selector: `${ selector }:not(.stk--is-resizing)`,
+		renderIn: 'edit',
+		styleRule: 'width',
+		attrName: 'imageWidth',
+		key: 'imageWidth',
+		hasUnits: '%',
+		unitCallback: editorWidthUnitCallback,
+		responsive: 'all',
+		enabledCallback: _enableWidthCallback,
+		valueCallback: ( value, getAttribute ) => {
+			// If there's an aspect ratio and the other dimension is not given, use auto
+			if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageHeight' ) ) {
+				return 'auto'
+			}
+			return value
+		},
+		dependencies: [
+			'imageAspectRatio',
+			'imageHeight',
+		],
+	}, {
+		...propsToPass,
+		selector,
+		renderIn: 'save',
+		styleRuleCallback: _widthStyleRuleCallback,
+		attrName: 'imageWidth',
+		key: 'imageWidth-save',
+		hasUnits: '%',
+		unitCallback: saveWidthUnitCallback,
+		responsive: 'all',
+		enabledCallback: saveEnableWidthCallback || _enableWidthCallback,
+		valueCallback: ( value, getAttribute ) => {
+			// If there's an aspect ratio and the other dimension is not given, use auto
+			if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageHeight' ) ) {
+				return 'auto'
+			}
+			return value
+		},
+		dependencies: [
+			'imageAspectRatio',
+			'imageHeight',
+		],
+	} ] )
 
-					const textColorType = getAttribute( 'imageOverlayColorType' )
-					const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
+	blockStyleGenerator.addBlockStyles( 'imageHeight', [ {
+		...propsToPass,
+		selector: `${ selector }:not(.stk--is-resizing)`,
+		renderIn: 'edit',
+		styleRule: 'height',
+		attrName: 'imageHeight',
+		key: 'imageHeight',
+		hasUnits: 'px',
+		unitCallback: heightUnitCallback,
+		responsive: 'all',
+		enabledCallback: _enableHeightCallback,
+		valueCallback: ( value, getAttribute ) => {
+			// If there's an aspect ratio and the other dimension is not given, use auto
+			if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageWidth' ) ) {
+				return 'auto'
+			}
+			return value
+		},
+		valuePreCallback: ( value, getAttribute ) => {
+			if ( enableAspectRatio && value === '' && getAttribute( 'imageAspectRatio' ) && ! getAttribute( 'imageWidth' ) ) {
+				return 'auto'
+			}
+			return value
+		},
+		dependencies: [
+			'imageAspectRatio',
+			'imageWidth',
+		],
+	}, {
+		...propsToPass,
+		selector,
+		renderIn: 'save',
+		styleRule: 'height',
+		attrName: 'imageHeight',
+		key: 'imageHeight-save',
+		hasUnits: 'px',
+		unitCallback: heightUnitCallback,
+		responsive: 'all',
+		enabledCallback: _enableHeightCallback,
+		valueCallback: ( value, getAttribute ) => {
+			// If there's an aspect ratio and the other dimension is not given, use auto
+			if ( enableAspectRatio && ! value && getAttribute( 'imageAspectRatio' ) && getAttribute( 'imageWidth' ) ) {
+				return 'auto'
+			}
+			return value
+		},
+		valuePreCallback: ( value, getAttribute ) => {
+			if ( enableAspectRatio && value === '' && getAttribute( 'imageAspectRatio' ) && ! getAttribute( 'imageHeight' ) ) {
+				return 'auto'
+			}
+			return value
+		},
+		dependencies: [
+			'imageAspectRatio',
+			'imageWidth',
+		],
+	},
+	] )
 
-					// If the type was switched, adjust the value so that gradient will show up.
-					if ( textColorType === 'gradient' && ! isGradient ) {
-						return `linear-gradient(${ value } 0%, ${ value } 100%)`
-					} else if ( textColorType !== 'gradient' && isGradient ) {
-						const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
-						if ( color ) {
-							return color[ 0 ]
-						}
-					}
-					return value
-				} }
-				dependencies={ [
-					'imageOverlayColorType',
-					'imageOverlayOpacity',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector={ `${ selector }::after` }
-				hoverSelector={ `${ selector }::before` }
-				styleRuleCallback={ getAttribute => {
-					const colorType = getAttribute( 'imageOverlayColorType' )
-					return colorType === 'gradient' ? 'backgroundImage' : 'backgroundColor'
-				} }
-				attrName="imageOverlayColor"
-				key="imageOverlayColor-save-image"
-				hoverCallback={ getAttribute => {
-					const colorType = getAttribute( 'imageOverlayColorType' )
-					return colorType === 'gradient' ? 'all' : null
-				} }
-				enabledCallback={ getAttribute => getAttribute( 'imageOverlayColorType' ) === 'gradient' }
-				valueCallback={ ( value, getAttribute, device, state ) => {
-					if ( state === 'normal' ) {
-						return undefined
-					}
+	blockStyleGenerator.addBlockStyles( 'imageShadow', [ {
+		...propsToPass,
+		/**
+		 * `box-shadow` will not work alongside
+		 * `mask-image`. Use `drop-shadow` instead.
+		 *
+		 * @see https://stackoverflow.com/questions/12492006/box-shadow-on-element-with-webkit-mask-image
+		 */
+		selector: `${ selector } .stk-img-resizer-wrapper`,
+		hoverSelector: hoverSelector ? `${ hoverSelector } .stk-img-resizer-wrapper` : undefined,
+		hoverSelectorCallback,
+		renderIn: 'edit',
+		styleRule: 'filter',
+		attrName: 'imageShadow',
+		key: 'imageShadow',
+		format: 'drop-shadow(%s)',
+		hover: 'all',
+	}, {
+		...propsToPass,
+		selector,
+		hoverSelector,
+		renderIn: 'save',
+		styleRule: 'filter',
+		attrName: 'imageShadow',
+		key: 'imageShadow-save',
+		format: 'drop-shadow(%s)',
+		hover: 'all',
+	} ] )
 
-					const textColorType = getAttribute( 'imageOverlayColorType' )
-					const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
+	blockStyleGenerator.addBlockStyles( 'imageFilter', [ {
+		...propsToPass,
+		selector: `${ selector } img`,
+		hoverSelector: `${ hoverSelector } img`,
+		hoverSelectorCallback,
+		styleRule: 'filter',
+		attrName: 'imageFilter',
+		key: 'imageFilter',
+		hover: 'all',
+	} ] )
 
-					// If the type was switched, adjust the value so that gradient will show up.
-					if ( textColorType === 'gradient' && ! isGradient ) {
-						return `linear-gradient(${ value } 0%, ${ value } 100%)`
-					} else if ( textColorType !== 'gradient' && isGradient ) {
-						const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
-						if ( color ) {
-							return color[ 0 ]
-						}
-					}
-					return value
-				} }
-				dependencies={ [
-					'imageOverlayColorType',
-					'imageOverlayOpacity',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector={ `${ selector }` }
-				hoverSelector={ `${ selector }::before` }
-				styleRule="--stk-gradient-overlay"
-				attrName="imageOverlayOpacity"
-				key="imageOverlayOpacity-save"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector={ `${ selector } .stk-img-resizer-wrapper` }
-				hoverSelector={ `${ selector } .stk-img-resizer-wrapper::before` }
-				styleRule="--stk-gradient-overlay"
-				attrName="imageOverlayOpacity"
-				key="imageOverlayOpacity"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector={ `${ selector }::after, ${ selector }::before` }
-				styleRule="mix-blend-mode"
-				attrName="imageOverlayBlendMode"
-				key="imageOverlayBlendMode-save"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector={ `${ selector } .stk-img-resizer-wrapper::after, ${ selector } .stk-img-resizer-wrapper::before` }
-				hoverSelectorCallback={ hoverSelectorCallback }
-				styleRule="mix-blend-mode"
-				attrName="imageOverlayBlendMode"
-				key="imageOverlayBlendMode"
-			/>
-		</>
-	)
-}
+	blockStyleGenerator.addBlockStyles( 'imageZoom', [ {
+		...propsToPass,
+		selector: `${ selector } img`,
+		hoverSelector: `${ hoverSelector } img`,
+		hoverSelectorCallback,
+		styleRule: 'transform',
+		attrName: 'imageZoom',
+		key: 'imageZoom',
+		format: 'scale(%s)',
+		hover: 'all',
+	} ] )
 
-export const Style = props => {
-	return <Styles { ...props } />
-}
+	blockStyleGenerator.addBlockStyles( 'imageBorderRadius', [ {
+		...propsToPass,
+		/**
+		 * Add the border radius in the actual image since
+		 * filter CSS style values (e.g. `brightness`) can sometimes mess up
+		 * the border radius of the image. So add the border-radius alongside filters.
+		 *
+		 * @see https://github.com/gambitph/Stackable/issues/1833
+		 */
+		selector: `${ selector } .stk-img-resizer-wrapper img`,
+		renderIn: 'edit',
+		styleRule: 'borderRadius',
+		attrName: 'imageBorderRadius',
+		key: 'imageBorderRadius',
+		format: '%spx',
+	}, {
+		...propsToPass,
+		selector: `${ selector } img`,
+		renderIn: 'save',
+		styleRule: 'borderRadius',
+		attrName: 'imageBorderRadius',
+		key: 'imageBorderRadius-save',
+		format: '%spx',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'imageFocalPoint', [ {
+		...propsToPass,
+		selector: `${ selector } img`,
+		hoverSelector: `${ hoverSelector } img`,
+		hoverSelectorCallback,
+		styleRule: 'objectPosition',
+		attrName: 'imageFocalPoint',
+		key: 'imageFocalPoint',
+		valueCallback: focalPointToPosition,
+		responsive: 'all',
+		hover: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'imageFit', [ {
+		...propsToPass,
+		selector: `${ selector } img`,
+		styleRule: 'objectFit',
+		attrName: 'imageFit',
+		key: 'imageFit',
+		responsive: 'all',
+	} ] )
+
+	{ /** Image shape */ }
+
+	blockStyleGenerator.addBlockStyles( 'imageShape', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		// This is so that the resizer won't get clipped.
+		selector: [
+			`${ selector } .stk-img-resizer-wrapper img`,
+			`${ selector } .stk-img-resizer-wrapper::after`,
+			`${ selector } .stk-img-resizer-wrapper::before`,
+		],
+		styleRule: 'mask-image',
+		vendorPrefixes: [ '-webkit-' ],
+		attrName: 'imageShape',
+		key: 'imageShape',
+		responsive: 'all',
+		enabledCallback: getAttribute => !! getAttribute( 'imageShape' ),
+		valueCallback: ( value, getAttribute ) => {
+			return getShapeCSS( value, getAttribute( 'imageShapeFlipX' ), getAttribute( 'imageShapeFlipY' ), getAttribute( 'imageShapeStretch' ) )
+		},
+		dependencies: [
+			'imageShapeFlipX',
+			'imageShapeFlipY',
+			'imageShapeStretch',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: [
+			`${ selector } img`,
+			`${ selector }::after`,
+			`${ selector }::before`,
+		],
+		styleRule: 'mask-image',
+		vendorPrefixes: [ '-webkit-' ],
+		attrName: 'imageShape',
+		key: 'imageShape-save',
+		responsive: 'all',
+		enabledCallback: getAttribute => !! getAttribute( 'imageShape' ),
+		valueCallback: ( value, getAttribute ) => {
+			return getShapeCSS( value, getAttribute( 'imageShapeFlipX' ), getAttribute( 'imageShapeFlipY' ), getAttribute( 'imageShapeStretch' ) )
+		},
+		dependencies: [
+			'imageShapeFlipX',
+			'imageShapeFlipY',
+			'imageShapeStretch',
+			...dependencies,
+		],
+	}	] )
+
+	{ /* These 2 components are for the gradient overlay normal states */ }
+
+	blockStyleGenerator.addBlockStyles( 'imageOverlayColor', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selector: `${ selector }::after`,
+		hoverSelector: `${ hoverSelector }::after`,
+		hoverSelectorCallback,
+		styleRuleCallback: getAttribute => {
+			const colorType = getAttribute( 'imageOverlayColorType' )
+			return colorType === 'gradient' ? 'backgroundImage' : 'backgroundColor'
+		},
+		attrName: 'imageOverlayColor',
+		key: 'imageOverlayColor-save',
+		hoverCallback: getAttribute => {
+			const colorType = getAttribute( 'imageOverlayColorType' )
+			return colorType === 'gradient' ? null : 'all'
+		},
+		valueCallback: ( value, getAttribute ) => {
+			const textColorType = getAttribute( 'imageOverlayColorType' )
+			const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
+
+			// If the type was switched, adjust the value so that gradient will show up.
+			if ( textColorType === 'gradient' && ! isGradient ) {
+				return `linear-gradient(${ value } 0%, ${ value } 100%)`
+			} else if ( textColorType !== 'gradient' && isGradient ) {
+				const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
+				if ( color ) {
+					return color[ 0 ]
+				}
+			}
+			return value
+		},
+		dependencies: [
+			'imageOverlayColorType',
+			...dependencies,
+		 ],
+	}, {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: `${ selector } .stk-img-resizer-wrapper::after`,
+		hoverSelector: `${ hoverSelector } .stk-img-resizer-wrapper::after`,
+		hoverSelectorCallback,
+		styleRuleCallback: getAttribute => {
+			const colorType = getAttribute( 'imageOverlayColorType' )
+			return colorType === 'gradient' ? 'backgroundImage' : 'backgroundColor'
+		},
+		attrName: 'imageOverlayColor',
+		key: 'imageOverlayColor',
+		hoverCallback: getAttribute => {
+			const colorType = getAttribute( 'imageOverlayColorType' )
+			return colorType === 'gradient' ? null : 'all'
+		},
+		valueCallback: ( value, getAttribute ) => {
+			const textColorType = getAttribute( 'imageOverlayColorType' )
+			const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
+
+			// If the type was switched, adjust the value so that gradient will show up.
+			if ( textColorType === 'gradient' && ! isGradient ) {
+				return `linear-gradient(${ value } 0%, ${ value } 100%)`
+			} else if ( textColorType !== 'gradient' && isGradient ) {
+				const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
+				if ( color ) {
+					return color[ 0 ]
+				}
+			}
+			return value
+		},
+		dependencies: [
+			'imageOverlayColorType',
+			...dependencies,
+		],
+
+	} ] )
+
+	{ /* These 2 components are for the gradient overlay for hover states */ }
+	blockStyleGenerator.addBlockStyles( 'imageOverlayColor', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: `${ selector }::after`,
+		hoverSelector: `${ selector }::before`,
+		styleRuleCallback: getAttribute => {
+			const colorType = getAttribute( 'imageOverlayColorType' )
+			return colorType === 'gradient' ? 'backgroundImage' : 'backgroundColor'
+		},
+		attrName: 'imageOverlayColor',
+		key: 'imageOverlayColor-edit-image',
+		hoverCallback: getAttribute => {
+			const colorType = getAttribute( 'imageOverlayColorType' )
+			return colorType === 'gradient' ? 'all' : null
+		},
+		enabledCallback: getAttribute => getAttribute( 'imageOverlayColorType' ) === 'gradient',
+		valueCallback: ( value, getAttribute, device, state ) => {
+			if ( state === 'normal' ) {
+				return undefined
+			}
+
+			const textColorType = getAttribute( 'imageOverlayColorType' )
+			const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
+
+			// If the type was switched, adjust the value so that gradient will show up.
+			if ( textColorType === 'gradient' && ! isGradient ) {
+				return `linear-gradient(${ value } 0%, ${ value } 100%)`
+			} else if ( textColorType !== 'gradient' && isGradient ) {
+				const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
+				if ( color ) {
+					return color[ 0 ]
+				}
+			}
+			return value
+		},
+		dependencies: [
+			'imageOverlayColorType',
+			'imageOverlayOpacity',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: `${ selector }::after`,
+		hoverSelector: `${ selector }::before`,
+		styleRuleCallback: getAttribute => {
+			const colorType = getAttribute( 'imageOverlayColorType' )
+			return colorType === 'gradient' ? 'backgroundImage' : 'backgroundColor'
+		},
+		attrName: 'imageOverlayColor',
+		key: 'imageOverlayColor-save-image',
+		hoverCallback: getAttribute => {
+			const colorType = getAttribute( 'imageOverlayColorType' )
+			return colorType === 'gradient' ? 'all' : null
+		},
+		enabledCallback: getAttribute => getAttribute( 'imageOverlayColorType' ) === 'gradient',
+		valueCallback: ( value, getAttribute, device, state ) => {
+			if ( state === 'normal' ) {
+				return undefined
+			}
+
+			const textColorType = getAttribute( 'imageOverlayColorType' )
+			const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
+
+			// If the type was switched, adjust the value so that gradient will show up.
+			if ( textColorType === 'gradient' && ! isGradient ) {
+				return `linear-gradient(${ value } 0%, ${ value } 100%)`
+			} else if ( textColorType !== 'gradient' && isGradient ) {
+				const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
+				if ( color ) {
+					return color[ 0 ]
+				}
+			}
+			return value
+		},
+		dependencies: [
+			'imageOverlayColorType',
+			'imageOverlayOpacity',
+			...dependencies,
+		],
+	},
+	] )
+
+	blockStyleGenerator.addBlockStyles( 'imageOverlayOpacity', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selector: `${ selector }`,
+		hoverSelector: `${ selector }::before`,
+		styleRule: '--stk-gradient-overlay',
+		attrName: 'imageOverlayOpacity',
+		key: 'imageOverlayOpacity-save',
+		hover: 'all',
+	}, {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: `${ selector } .stk-img-resizer-wrapper`,
+		hoverSelector: `${ selector } .stk-img-resizer-wrapper::before`,
+		styleRule: '--stk-gradient-overlay',
+		attrName: 'imageOverlayOpacity',
+		key: 'imageOverlayOpacity',
+		hover: 'all',
+	} ] )
 
-Style.Content = props => {
-	return <Styles { ...props } />
+	blockStyleGenerator.addBlockStyles( 'imageOverlayBlendMode', [ {
+		...propsToPass,
+		renderIn: 'save',
+		selector: `${ selector }::after, ${ selector }::before`,
+		styleRule: 'mix-blend-mode',
+		attrName: 'imageOverlayBlendMode',
+		key: 'imageOverlayBlendMode-save',
+	}, {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: `${ selector } .stk-img-resizer-wrapper::after, ${ selector } .stk-img-resizer-wrapper::before`,
+		hoverSelectorCallback,
+		styleRule: 'mix-blend-mode',
+		attrName: 'imageOverlayBlendMode',
+		key: 'imageOverlayBlendMode',
+	} ] )
 }
diff --git a/src/block-components/margin-bottom/index.js b/src/block-components/margin-bottom/index.js
index 8fdd19f28..975927e5d 100644
--- a/src/block-components/margin-bottom/index.js
+++ b/src/block-components/margin-bottom/index.js
@@ -2,12 +2,10 @@
  * Internal dependencies
  */
 import { addAttributes } from './attributes'
-import { Style } from './style'
+import { addStyles } from './style'
 import { ResizableBottomMargin } from '~stackable/components'
 import { getUniqueBlockClass } from '~stackable/util'
-import {
-	useBlockAttributesContext, useBlockContext, useBlockContextContext,
-} from '~stackable/hooks'
+import { useBlockAttributesContext, useBlockContextContext } from '~stackable/hooks'
 
 /**
  * WordPress dependencies
@@ -15,7 +13,7 @@ import {
 import { useBlockEditContext } from '@wordpress/block-editor'
 import { applyFilters } from '@wordpress/hooks'
 import { memo } from '@wordpress/element'
-import { select } from '@wordpress/data'
+import { useSelect } from '@wordpress/data'
 
 export const MarginBottom = memo( props => {
 	const { clientId } = useBlockEditContext()
@@ -32,7 +30,36 @@ export const MarginBottom = memo( props => {
 		}
 	} )
 
-	const { isLastBlock, parentBlock } = useBlockContext( clientId )
+	const {
+		isLastBlock,
+		parentBlock,
+		isGroupBlock,
+		isRowLayout,
+	} = useSelect(
+		select => {
+			const {
+				getBlockOrder, getBlockRootClientId, getBlock,
+			} = select( 'core/block-editor' )
+
+			const rootClientId = getBlockRootClientId( clientId )
+			const parentBlock = getBlock( rootClientId )
+			const parentInnerBlocks = getBlockOrder( rootClientId )
+
+			const isGroupBlock = parentBlock?.name === 'core/group'
+			let isRowLayout = false
+			if ( isGroupBlock ) {
+				isRowLayout = parentBlock.attributes.layout?.type === 'flex' && parentBlock.attributes.layout?.flexWrap === 'nowrap'
+			}
+
+			return {
+				parentBlock,
+				isLastBlock: parentInnerBlocks[ parentInnerBlocks.length - 1 ] === clientId,
+				isGroupBlock,
+				isRowLayout,
+			}
+		},
+		[ clientId ]
+	)
 
 	// Check if the parent block (like a Column block) is displaying blocks
 	// horizontally, we don't want to show the margin bottom draggable
@@ -44,20 +71,16 @@ export const MarginBottom = memo( props => {
 		return null
 	}
 
-	// Don't show the margin bottom draggable indicator if this is in a row block.
-	const isGroupBlock = parentBlock && parentBlock.name === 'core/group'
-	let isRowLayout = false
-	if ( isGroupBlock ) {
-		const attributes = select( 'core/block-editor' ).getBlockAttributes( parentBlock.clientId )
-		isRowLayout = attributes.layout?.type === 'flex' && attributes.layout?.flexWrap === 'nowrap'
+	if ( isGroupBlock && isRowLayout ) {
+		return null
 	}
 
-	if ( isGroupBlock && isRowLayout ) {
+	if ( isLastBlock || ! attributes.uniqueId ) {
 		return null
 	}
 
 	const enable = applyFilters( 'stackable.edit.margin-bottom.enable-handlers', true, parentBlock )
-	if ( isLastBlock || ! enable || ! attributes.uniqueId ) {
+	if ( ! enable ) {
 		return null
 	}
 
@@ -73,4 +96,4 @@ export const MarginBottom = memo( props => {
 
 MarginBottom.addAttributes = addAttributes
 
-MarginBottom.Style = Style
+MarginBottom.addStyles = addStyles
diff --git a/src/block-components/margin-bottom/style.js b/src/block-components/margin-bottom/style.js
index 8e9449492..4911bb9bd 100644
--- a/src/block-components/margin-bottom/style.js
+++ b/src/block-components/margin-bottom/style.js
@@ -1,9 +1,4 @@
-/**
- * External dependencies
- */
-import { BlockCss } from '~stackable/components'
-
-const Styles = props => {
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -14,25 +9,13 @@ const Styles = props => {
 		selector = '',
 	} = props
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="marginBottom"
-				attrName="blockMarginBottom"
-				key="blockMarginBottom"
-				responsive="all"
-				format="%spx"
-			/>
-		</>
-	)
-}
-
-export const Style = props => {
-	return <Styles { ...props } />
-}
-
-Style.Content = props => {
-	return <Styles { ...props } />
+	blockStyleGenerator.addBlockStyles( 'blockMarginBottom', [ {
+		...propsToPass,
+		selector,
+		styleRule: 'marginBottom',
+		attrName: 'blockMarginBottom',
+		key: 'blockMarginBottom',
+		responsive: 'all',
+		format: '%spx',
+	} ] )
 }
diff --git a/src/block-components/progress-bar/index.js b/src/block-components/progress-bar/index.js
index 179f4eae5..d894df5d4 100644
--- a/src/block-components/progress-bar/index.js
+++ b/src/block-components/progress-bar/index.js
@@ -1,9 +1,9 @@
 import { Edit } from './edit'
-import { Style } from './style'
+import { addStyles } from './style'
 import { addAttributes } from './attributes'
 
 export const ProgressBar = () => <div />
 
 ProgressBar.InspectorControls = Edit
-ProgressBar.Style = Style
+ProgressBar.addStyles = addStyles
 ProgressBar.addAttributes = addAttributes
diff --git a/src/block-components/progress-bar/style.js b/src/block-components/progress-bar/style.js
index 6ea479914..ab1a86c2d 100644
--- a/src/block-components/progress-bar/style.js
+++ b/src/block-components/progress-bar/style.js
@@ -1,7 +1,6 @@
 import { hexToRgba } from '~stackable/util'
-import { BlockCss } from '~stackable/components'
 
-const Styles = props => {
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -15,226 +14,219 @@ const Styles = props => {
 
 	const selector = isCircle ? '.stk-progress-circle' : '.stk-progress-bar'
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="--progress-max"
-				attrName="progressMax"
-				key="progressMax"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				renderIn="save"
-				styleRule="--progress-value"
-				attrName="progressValue"
-				key="progressValue"
-				format={ ! isCircle ? '%s%' : undefined }
-			/>
-			{ ! isCircle && (
-				<BlockCss
-					{ ...propsToPass }
-					selector={ selector }
-					styleRule="--progress-color-1"
-					attrName="progressColor1"
-					key="progressColor1-bar"
-					dependencies={ [
-						'progressColorType',
-						'progressColor2',
-						...dependencies,
-					] }
-				/>
-			) }
-			{ isCircle && (
-				<BlockCss
-					{ ...propsToPass }
-					selector={ selector }
-					styleRule="--progress-color-1"
-					attrName="progressColor1"
-					key="progressColor1-circle"
-					dependencies={ [
-						'progressColorType',
-						'progressColor2',
-						...dependencies,
-					] }
-					renderIn="save"
-					valuePreCallback={ ( value, getAttribute ) => {
-						if ( getAttribute( 'progressColorType' ) === 'gradient' ) {
-							const uniqueId = getAttribute( 'uniqueId' )
-							return `url(#gradient-${ uniqueId })`
-						}
-						return value
-					} }
-				/>
-			) }
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				styleRule="--progress-background"
-				attrName="progressBackgroundColor"
-				key="progressBackgroundColor"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				responsive="all"
-				styleRule="--progress-size"
-				attrName="progressSize"
-				key="progressSize"
-				format="%spx"
-			/>
-			{ /* Only use these stylRules when it's a circular progress */ }
-			{ isCircle &&
-				<>
-					<BlockCss
-						{ ...propsToPass }
-						selector={ selector }
-						renderIn="edit"
-						styleRule="--progress-color-1"
-						attrName="progressColor1"
-						key="progressColor1-circle-var"
-						valuePreCallback={ ( value, getAttribute ) => {
-							if ( getAttribute( 'progressColorType' ) === 'gradient' ) {
-								// generate custom identifier on the editor as uniqueId can be blank.
-								// This happens when adding block with default block styling created.
-								// should use uniqueId upon saving
-								const color1 = getAttribute( 'progressColor1' ) || '-'
-								const color2 = getAttribute( 'progressColor2' ) || '-'
-								const direction = getAttribute( 'progressColorGradientDirection' ) || ''
-								const customGradientId = ( color1 + color2 + direction ).replace( /[^0-9A-Z]+/gi, '' )
-								return `url(#gradient-${ customGradientId })`
-							}
-							return value
-						} }
-						dependencies={ [
-							 'progressColorType',
-							 'progressColor2',
-							 'progressColorGradientDirection',
-							 ...dependencies,
-						] }
-					/>
-					<BlockCss
-						{ ...propsToPass }
-						selector={ selector }
-						styleRule="--progress-rounded"
-						attrName="progressRounded"
-						key="progressRounded"
-						valuePreCallback={ value => {
-							if ( typeof value === 'string' || value === false ) {
-								return undefined
-							}
-							return 'round'
-						} }
-					/>
-					<BlockCss
-						{ ...propsToPass }
-						selector={ selector }
-						responsive="all"
-						styleRule="--progress-thickness"
-						attrName="progressThickness"
-						key="progressThickness"
-						format="%spx"
-					/>
-				</>
-			}
-			{ /* Only use these stylRules for progress bars */ }
-			{ ! isCircle &&
-				<>
-					<BlockCss
-						{ ...propsToPass }
-						selector={ selector }
-						styleRule="--progress-bar-width"
-						attrName="progressWidth"
-						key="progressWidth"
-						hasUnits="%"
-						responsive="all"
-						dependencies={ [
-							'progressWidthUnit',
-							...dependencies,
-						] }
-					/>
-					<BlockCss
-						{ ...propsToPass }
-						selector={ selector }
-						styleRule="--progress-border-radius"
-						attrName="progressBorderRadius"
-						key="progressBorderRadius"
-						hasUnits="px"
-					/>
-					<BlockCss
-						{ ...propsToPass }
-						selector={ selector }
-						styleRule="--progress-bar-border-radius"
-						attrName="progressApplyBarRadius"
-						key="progressApplyBarRadius"
-						valuePreCallback={ ( value, getAttribute ) => {
-							const borderRadius = getAttribute( 'progressBorderRadius' )
-							return value ? borderRadius : undefined
-						} }
-						format="%spx"
-						dependencies={ [
-							'progressBorderRadius',
-							...dependencies,
-						] }
-					/>
-					<BlockCss
-						{ ...propsToPass }
-						selector=".stk-progress-bar__bar.stk--has-background-overlay:before"
-						styleRule="mixBlendMode"
-						attrName="progressColorGradientBlendMode"
-						key="progressColorGradientBlendMode"
-						enabledCallback={ getAttribute => getAttribute( 'progressColorType' ) === 'gradient' }
-						dependencies={ [
-							'progressColorType',
-							...dependencies,
-						] }
-					/>
-					<BlockCss
-						{ ...propsToPass }
-						selector=".stk-progress-bar__bar.stk--has-background-overlay:before"
-						styleRule="backgroundImage"
-						attrName="progressColor1"
-						key="progressColor1-overlay"
-						enabledCallback={ getAttribute => getAttribute( 'progressColorType' ) === 'gradient' }
-						valueCallback={ ( value, getAttribute ) => {
-							if ( ! getAttribute( 'progressColor2' ) ) {
-								return undefined
-							}
-							// The default color is the same as the other one but transparent. Same so that there won't be a weird transition to transparent.
-							const defaultColor1 = hexToRgba( getAttribute( 'progressColor2' ) || '#ffffff', 0 )
-							const defaultColor2 = hexToRgba( getAttribute( 'progressColor1' ) || '#3498db', 0 )
-
-							// Gradient location.
-							const color1Location = `${ getAttribute( 'progressColorGradientLocation1' ) || '0' }%`
-							const color2Location = `${ getAttribute( 'progressColorGradientLocation2' ) || '100' }%`
-
-							const directionAngle = getAttribute( 'progressColorGradientDirection' )
-							const angle = typeof directionAngle === 'string' ? '90deg' : `${ directionAngle }deg`
-
-							return `linear-gradient(${ angle }, ${ getAttribute( 'progressColor1' ) || defaultColor1 } ${ color1Location }, ${ getAttribute( 'progressColor2' ) || defaultColor2 } ${ color2Location })`
-						} }
-						dependencies={ [
-							'progressColorType',
-							'progressColor1',
-							'progressColor2',
-							'progressColorGradientLocation1',
-							'progressColorGradientLocation2',
-							'progressColorGradientDirection',
-							...dependencies,
-						] }
-					/>
-				</>
+	blockStyleGenerator.addBlockStyles( 'progressMax', [ {
+		...propsToPass,
+		selector,
+		styleRule: '--progress-max',
+		attrName: 'progressMax',
+		key: 'progressMax',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'progressValue', [ {
+		...propsToPass,
+		selector,
+		renderIn: 'save',
+		styleRule: '--progress-value',
+		attrName: 'progressValue',
+		key: 'progressValue',
+		format: ! isCircle ? '%s%' : undefined,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'progressColor1', [ {
+		...propsToPass,
+		renderCondition: () => ! isCircle,
+		selector,
+		styleRule: '--progress-color-1',
+		attrName: 'progressColor1',
+		key: 'progressColor1-bar',
+		dependencies: [
+			'progressColorType',
+			'progressColor2',
+			...dependencies,
+		],
+	}, {
+		...propsToPass,
+		renderCondition: () => isCircle,
+		selector,
+		styleRule: '--progress-color-1',
+		attrName: 'progressColor1',
+		key: 'progressColor1-circle',
+		dependencies: [
+			'progressColorType',
+			'progressColor2',
+			...dependencies,
+		],
+		renderIn: 'save',
+		valuePreCallback: ( value, getAttribute ) => {
+			if ( getAttribute( 'progressColorType' ) === 'gradient' ) {
+				const uniqueId = getAttribute( 'uniqueId' )
+				return `url(#gradient-${ uniqueId })`
 			}
-		</>
-	)
-}
+			return value
+		},
+	} ] )
 
-export const Style = props => {
-	return <Styles { ...props } />
-}
+	blockStyleGenerator.addBlockStyles( 'progressBackgroundColor', [ {
+		...propsToPass,
+		selector,
+		styleRule: '--progress-background',
+		attrName: 'progressBackgroundColor',
+		key: 'progressBackgroundColor',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'progressSize', [ {
+		...propsToPass,
+		selector,
+		responsive: 'all',
+		styleRule: '--progress-size',
+		attrName: 'progressSize',
+		key: 'progressSize',
+		format: '%spx',
+	} ] )
+
+	{ /* Only use these stylRules when it's a circular progress */ }
+	if ( isCircle ) {
+		blockStyleGenerator.addBlockStyles( 'progressColor1', [ {
+			...propsToPass,
+			selector,
+			renderIn: 'edit',
+			styleRule: '--progress-color-1',
+			attrName: 'progressColor1',
+			key: 'progressColor1-circle-var',
+			valuePreCallback: ( value, getAttribute ) => {
+				if ( getAttribute( 'progressColorType' ) === 'gradient' ) {
+					// generate custom identifier on the editor as uniqueId can be blank.
+					// This happens when adding block with default block styling created.
+					// should use uniqueId upon saving
+					const color1 = getAttribute( 'progressColor1' ) || '-'
+					const color2 = getAttribute( 'progressColor2' ) || '-'
+					const direction = getAttribute( 'progressColorGradientDirection' ) || ''
+					const customGradientId = ( color1 + color2 + direction ).replace( /[^0-9A-Z]+/gi, '' )
+					return `url(#gradient-${ customGradientId })`
+				}
+				return value
+			},
+			dependencies: [
+				'progressColorType',
+				'progressColor2',
+				'progressColorGradientDirection',
+				...dependencies,
+			],
+		} ] )
+
+		blockStyleGenerator.addBlockStyles( 'progressRounded', [ {
+			...propsToPass,
+			selector,
+			styleRule: '--progress-rounded',
+			attrName: 'progressRounded',
+			key: 'progressRounded',
+			valuePreCallback: value => {
+				if ( typeof value === 'string' || value === false ) {
+					return undefined
+				}
+				return 'round'
+			},
+		} ] )
+
+		blockStyleGenerator.addBlockStyles( 'progressThickness', [ {
+			...propsToPass,
+			selector,
+			responsive: 'all',
+			styleRule: '--progress-thickness',
+			attrName: 'progressThickness',
+			key: 'progressThickness',
+			format: '%spx',
+		} ] )
+	}
+
+	{ /* Only use these stylRules for progress bars */ }
+	if ( ! isCircle ) {
+		blockStyleGenerator.addBlockStyles( 'progressWidth', [ {
+			...propsToPass,
+			selector,
+			styleRule: '--progress-bar-width',
+			attrName: 'progressWidth',
+			key: 'progressWidth',
+			hasUnits: '%',
+			responsive: 'all',
+			dependencies: [
+				'progressWidthUnit',
+				...dependencies,
+			],
+		} ] )
+
+		blockStyleGenerator.addBlockStyles( 'progressBorderRadius', [ {
+			...propsToPass,
+			selector,
+			styleRule: '--progress-border-radius',
+			attrName: 'progressBorderRadius',
+			key: 'progressBorderRadius',
+			hasUnits: 'px',
+		} ] )
+
+		blockStyleGenerator.addBlockStyles( 'progressApplyBarRadius', [ {
+			...propsToPass,
+			selector,
+			styleRule: '--progress-bar-border-radius',
+			attrName: 'progressApplyBarRadius',
+			key: 'progressApplyBarRadius',
+			valuePreCallback: ( value, getAttribute ) => {
+				const borderRadius = getAttribute( 'progressBorderRadius' )
+				return value ? borderRadius : undefined
+			},
+			format: '%spx',
+			dependencies: [
+				'progressBorderRadius',
+				...dependencies,
+			],
+		} ] )
+
+		blockStyleGenerator.addBlockStyles( 'progressColorGradientBlendMode', [ {
+			...propsToPass,
+			selector: '.stk-progress-bar__bar.stk--has-background-overlay:before',
+			styleRule: 'mixBlendMode',
+			attrName: 'progressColorGradientBlendMode',
+			key: 'progressColorGradientBlendMode',
+			enabledCallback: getAttribute => getAttribute( 'progressColorType' ) === 'gradient',
+			dependencies: [
+				'progressColorType',
+				...dependencies,
+			],
+		} ] )
 
-Style.Content = props => {
-	return <Styles { ...props } />
+		blockStyleGenerator.addBlockStyles( 'progressColor1', [ {
+			...propsToPass,
+			selector: '.stk-progress-bar__bar.stk--has-background-overlay:before',
+			styleRule: 'backgroundImage',
+			attrName: 'progressColor1',
+			key: 'progressColor1-overlay',
+			enabledCallback: getAttribute => getAttribute( 'progressColorType' ) === 'gradient',
+			valueCallback: ( value, getAttribute ) => {
+				if ( ! getAttribute( 'progressColor2' ) ) {
+					return undefined
+				}
+				// The default color is the same as the other one but transparent. Same so that there won't be a weird transition to transparent.
+				const defaultColor1 = hexToRgba( getAttribute( 'progressColor2' ) || '#ffffff', 0 )
+				const defaultColor2 = hexToRgba( getAttribute( 'progressColor1' ) || '#3498db', 0 )
+
+				// Gradient location.
+				const color1Location = `${ getAttribute( 'progressColorGradientLocation1' ) || '0' }%`
+				const color2Location = `${ getAttribute( 'progressColorGradientLocation2' ) || '100' }%`
+
+				const directionAngle = getAttribute( 'progressColorGradientDirection' )
+				const angle = typeof directionAngle === 'string' ? '90deg' : `${ directionAngle }deg`
+
+				return `linear-gradient(${ angle }, ${ getAttribute( 'progressColor1' ) || defaultColor1 } ${ color1Location }, ${ getAttribute( 'progressColor2' ) || defaultColor2 } ${ color2Location })`
+			},
+			dependencies: [
+				'progressColorType',
+				'progressColor1',
+				'progressColor2',
+				'progressColorGradientLocation1',
+				'progressColorGradientLocation2',
+				'progressColorGradientDirection',
+				...dependencies,
+			],
+		} ] )
+	}
 }
diff --git a/src/block-components/row/index.js b/src/block-components/row/index.js
index 9a7f5f328..472564ae2 100644
--- a/src/block-components/row/index.js
+++ b/src/block-components/row/index.js
@@ -1,13 +1,26 @@
 import { addAttributes } from './attributes'
 
-import { useBlockAttributesContext, useBlockContext } from '~stackable/hooks'
-
+import { useBlockAttributesContext } from '~stackable/hooks'
+import { useBlockEditContext } from '@wordpress/block-editor'
 import { Fragment, useEffect } from '@wordpress/element'
+import { useSelect } from '@wordpress/data'
 
 export * from './use-row'
 
 export const Row = props => {
-	const { numInnerBlocks } = useBlockContext()
+	const { clientId } = useBlockEditContext()
+	const { numInnerBlocks } = useSelect(
+		select => {
+			const { getBlockRootClientId, getBlockOrder } = select( 'core/block-editor' )
+			const rootClientId = getBlockRootClientId( clientId )
+
+			return {
+				numInnerBlocks: getBlockOrder( rootClientId ).length,
+			}
+		},
+		[ clientId ]
+	)
+
 	const attributes = useBlockAttributesContext()
 
 	useEffect( () => {
diff --git a/src/block-components/separator/edit.js b/src/block-components/separator/edit.js
index e7abb76de..32065bf10 100644
--- a/src/block-components/separator/edit.js
+++ b/src/block-components/separator/edit.js
@@ -12,7 +12,8 @@ import {
 	InspectorStyleControls,
 } from '~stackable/components'
 import {
-	useAttributeEditHandlers, useBlockAttributesContext, useBlockSetAttributesContext,
+	useBlockAttributesContext,
+	useBlockSetAttributesContext,
 } from '~stackable/hooks'
 
 /*
@@ -26,6 +27,7 @@ import { i18n, showProNotice } from 'stackable'
 import { __ } from '@wordpress/i18n'
 import { applyFilters } from '@wordpress/hooks'
 import { useMemo } from '@wordpress/element'
+import { getAttributeNameFunc } from '~stackable/util'
 
 const SEPARATOR_SHADOWS = [
 	'none',
@@ -47,9 +49,7 @@ const SeparatorControls = props => {
 		hasFlipVertically,
 	} = props
 
-	const {
-		getAttrName,
-	} = useAttributeEditHandlers( attrNameTemplate )
+	const getAttrName = getAttributeNameFunc( attrNameTemplate )
 
 	const separatorShadowOptions = applyFilters( 'stackable.separator.shadows', SEPARATOR_SHADOWS )
 
diff --git a/src/block-components/separator/index.js b/src/block-components/separator/index.js
index b5dfc99be..cd4e60cf0 100644
--- a/src/block-components/separator/index.js
+++ b/src/block-components/separator/index.js
@@ -8,13 +8,13 @@ import { Separator2 } from '~stackable/components'
 /**
  * Internal dependencies
  */
-import { Style, SeparatorStyles } from './style'
+import { addStyles, addSeparatorStyles } from './style'
 import { Edit } from './edit'
 import {
 	addAttributes, createSeparatorAttributes, createSeparatorLayerAttributes,
 } from './attributes'
 export {
-	createSeparatorAttributes, createSeparatorLayerAttributes, SeparatorStyles,
+	createSeparatorAttributes, createSeparatorLayerAttributes, addSeparatorStyles,
 }
 
 /**
@@ -111,4 +111,4 @@ Separator.InspectorControls = Edit
 
 Separator.addAttributes = addAttributes
 
-Separator.Style = Style
+Separator.addStyles = addStyles
diff --git a/src/block-components/separator/style.js b/src/block-components/separator/style.js
index b6b41e480..3ae82e80c 100644
--- a/src/block-components/separator/style.js
+++ b/src/block-components/separator/style.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { BlockCss } from '~stackable/components'
-
 /**
  * External dependencies
  */
@@ -11,15 +6,16 @@ import { compact } from 'lodash'
 /**
  * WordPress dependencies
  */
-import { applyFilters } from '@wordpress/hooks'
+import { doAction } from '@wordpress/hooks'
 
-export const SeparatorStyles = props => {
+export const addSeparatorStyles = ( blockStyleGenerator, props ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
 		versionAdded: '3.0.0',
 		versionDeprecated: '',
 	}
+
 	const {
 		location = '',
 		selector: _selector,
@@ -32,100 +28,95 @@ export const SeparatorStyles = props => {
 
 	const selector = _selector !== undefined ? _selector : ` > .stk-separator__${ location }`
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				attrNameTemplate={ `${ location }%s` }
-				selector={ selector }
-				styleRule="zIndex"
-				attrName="separatorBringToFront"
-				key="separatorBringToFront"
-				valuePreCallback={ value => {
-					if ( value ) {
-						return 6
-					}
-					return undefined
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				attrNameTemplate={ `${ location }%s` }
-				selector={ selector }
-				styleRule="transform"
-				attrName="separatorFlipHorizontally"
-				key="separatorFlipHorizontally"
-				valuePreCallback={ ( value, getAttribute ) => {
-					const flipHorizontally = value
-					const flipVertically = getAttribute( 'separatorFlipVertically' )
-
-					if ( ! enableFlipVertically && ! enableFlipHorizontally ) {
-						return undefined
-					}
-
-					if ( ! flipHorizontally && ! flipVertically ) {
-						return undefined
-					}
-
-					const shouldApplyScaleX = enableFlipHorizontally && flipHorizontally
-					const shouldAddScaleYAlongsideScaleX = shouldApplyScaleX && isInitiallyFlippedVertically
-					const shouldApplyScaleY = enableFlipVertically && flipVertically
-
-					return compact( [
-						shouldApplyScaleX ? 'scaleX(-1)' : undefined,
-						shouldAddScaleYAlongsideScaleX ? 'scaleY(-1)' : undefined,
-						shouldApplyScaleY ? 'scaleY(-1)' : undefined,
-					] ).join( ' ' )
-				} }
-				dependencies={ [
-					 'separatorFlipVertically',
-					 ...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				attrNameTemplate={ `${ location }%s` }
-				selector={ selector + ' svg' }
-				styleRule="fill"
-				attrName="separatorColor"
-				key="separatorColor"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				attrNameTemplate={ `${ location }%s` }
-				selector={ selector + ` ${ wrapperSelector }` }
-				styleRule="transform"
-				attrName="separatorWidth"
-				key="separatorWidth"
-				format="scaleX(%s)"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				attrNameTemplate={ `${ location }%s` }
-				selector={ selector + ` ${ wrapperSelector }` }
-				styleRule="height"
-				responsive="all"
-				attrName="separatorHeight"
-				key="separatorHeight"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				attrNameTemplate={ `${ location }%s` }
-				selector={ selector + ' svg' }
-				styleRule="filter"
-				attrName="separatorShadow"
-				key="separatorShadow"
-				format="drop-shadow(%s)"
-				valueCallback={ value => {
-					return value === 'drop-shadow(none)' ? 'none' : value
-				} }
-			/>
-		</>
-	)
+	blockStyleGenerator.addBlockStyles( 'separatorBringToFront', [ {
+		...propsToPass,
+		attrNameTemplate: `${ location }%s`,
+		selector,
+		styleRule: 'zIndex',
+		attrName: 'separatorBringToFront',
+		valuePreCallback: value => {
+			if ( value ) {
+				return 6
+			}
+			return undefined
+		},
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'separatorFlipHorizontally', [ {
+		...propsToPass,
+		attrNameTemplate: `${ location }%s`,
+		selector,
+		styleRule: 'transform',
+		attrName: 'separatorFlipHorizontally',
+		valuePreCallback: ( value, getAttribute ) => {
+			const flipHorizontally = value
+			const flipVertically = getAttribute( 'separatorFlipVertically' )
+
+			if ( ! enableFlipVertically && ! enableFlipHorizontally ) {
+				return undefined
+			}
+
+			if ( ! flipHorizontally && ! flipVertically ) {
+				return undefined
+			}
+
+			const shouldApplyScaleX = enableFlipHorizontally && flipHorizontally
+			const shouldAddScaleYAlongsideScaleX = shouldApplyScaleX && isInitiallyFlippedVertically
+			const shouldApplyScaleY = enableFlipVertically && flipVertically
+
+			return compact( [
+				shouldApplyScaleX ? 'scaleX(-1)' : undefined,
+				shouldAddScaleYAlongsideScaleX ? 'scaleY(-1)' : undefined,
+				shouldApplyScaleY ? 'scaleY(-1)' : undefined,
+			] ).join( ' ' )
+		},
+		dependencies: [
+			 'separatorFlipVertically',
+			 ...dependencies,
+		],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'separatorColor', [ {
+		...propsToPass,
+		attrNameTemplate: `${ location }%s`,
+		selector: selector + ' svg',
+		styleRule: 'fill',
+		attrName: 'separatorColor',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'separatorWidth', [ {
+		...propsToPass,
+		attrNameTemplate: `${ location }%s`,
+		selector: selector + ` ${ wrapperSelector }`,
+		styleRule: 'transform',
+		attrName: 'separatorWidth',
+		format: 'scaleX(%s)',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'separatorHeight', [ {
+		...propsToPass,
+		attrNameTemplate: `${ location }%s`,
+		selector: selector + ` ${ wrapperSelector }`,
+		styleRule: 'height',
+		responsive: 'all',
+		attrName: 'separatorHeight',
+		format: '%spx',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'separatorShadow', [ {
+		...propsToPass,
+		attrNameTemplate: `${ location }%s`,
+		selector: selector + ' svg',
+		styleRule: 'filter',
+		attrName: 'separatorShadow',
+		format: 'drop-shadow(%s)',
+		valueCallback: value => {
+			return value === 'drop-shadow(none)' ? 'none' : value
+		},
+	} ] )
 }
 
-const MarginBottomStyles = props => {
+const addMarginBottomStyles = ( blockStyleGenerator, props ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -136,46 +127,35 @@ const MarginBottomStyles = props => {
 		selector: _selector,
 	} = props
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector={ _selector !== undefined ? _selector : ` > .stk-separator__bottom` }
-				styleRule="bottom"
-				attrName="blockMargin"
-				key="blockMargin"
-				responsive="all"
-				valuePreCallback={ value => value?.bottom }
-				format="%spx"
-			/>
-		</>
-	)
-}
-
-export const Style = props => {
-	const SeparatorLayerStyles = applyFilters( 'stackable.block-component.separator.layer-styles', null )
-
-	return (
-		<>
-			<SeparatorStyles { ...props } location="top" />
-			<SeparatorStyles { ...props } isInitiallyFlippedVertically={ false } location="bottom" />
-			<MarginBottomStyles { ...props } />
-			{ SeparatorLayerStyles && <SeparatorLayerStyles { ...props } location="top" /> }
-			{ SeparatorLayerStyles && <SeparatorLayerStyles { ...props } location="bottom" /> }
-		</>
-	)
+	blockStyleGenerator.addBlockStyles( 'textShadow', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: _selector !== undefined ? _selector : ` > .stk-separator__bottom`,
+		styleRule: 'bottom',
+		attrName: 'blockMargin',
+		responsive: 'all',
+		valuePreCallback: value => value?.bottom,
+		format: '%spx',
+	} ] )
 }
 
-Style.Content = props => {
-	const SeparatorLayerStyles = applyFilters( 'stackable.block-component.separator.layer-styles', null )
-
-	return (
-		<>
-			<SeparatorStyles { ...props } location="top" />
-			<SeparatorStyles { ...props } isInitiallyFlippedVertically={ false } location="bottom" />
-			{ SeparatorLayerStyles && <SeparatorLayerStyles { ...props } location="top" /> }
-			{ SeparatorLayerStyles && <SeparatorLayerStyles { ...props } location="bottom" /> }
-		</>
-	)
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
+	addSeparatorStyles( blockStyleGenerator, {
+		...props,
+		location: 'top',
+	} )
+	addSeparatorStyles( blockStyleGenerator, {
+		...props,
+		isInitiallyFlippedVertically: false,
+		location: 'bottom',
+	} )
+	addMarginBottomStyles( blockStyleGenerator, props )
+	doAction( 'stackable.block-component.separator.layer-styles.addStyles', blockStyleGenerator, {
+		...props,
+		location: 'top',
+	} )
+	doAction( 'stackable.block-component.separator.layer-styles.addStyles', blockStyleGenerator, {
+		...props,
+		location: 'bottom',
+	} )
 }
diff --git a/src/block-components/transform/index.js b/src/block-components/transform/index.js
index 3f05d8a67..9892ef9d5 100644
--- a/src/block-components/transform/index.js
+++ b/src/block-components/transform/index.js
@@ -1,6 +1,6 @@
 import { addAttributes } from './attributes'
 import { Edit } from './edit'
-import { Style } from './style'
+import { addStyles } from './style'
 
 export const Transform = () => {
 	return null
@@ -10,4 +10,4 @@ Transform.InspectorControls = Edit
 
 Transform.addAttributes = addAttributes
 
-Transform.Style = Style
+Transform.addStyles = addStyles
diff --git a/src/block-components/transform/style.js b/src/block-components/transform/style.js
index b04d086a8..e248bb71c 100644
--- a/src/block-components/transform/style.js
+++ b/src/block-components/transform/style.js
@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { applyFilters } from '@wordpress/hooks'
+import { doAction } from '@wordpress/hooks'
 
-export const Style = props => {
-	const TransformStyles = applyFilters( 'stackable.block-component.transform.style', null )
-	return TransformStyles && <TransformStyles { ...props } />
-}
-
-Style.Content = props => {
-	const TransformStyles = applyFilters( 'stackable.block-component.transform.style.content', null )
-	return TransformStyles && <TransformStyles { ...props } />
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
+	doAction( 'stackable.block-component.transform.style.addStyles', blockStyleGenerator, props )
 }
diff --git a/src/block-components/typography/index.js b/src/block-components/typography/index.js
index ec6198113..33f5d196a 100644
--- a/src/block-components/typography/index.js
+++ b/src/block-components/typography/index.js
@@ -3,7 +3,7 @@
  */
 import { Edit } from './edit'
 import { addAttributes } from './attributes'
-import { Style } from './style'
+import { addStyles } from './style'
 export { getTypographyClasses } from './get-typography-classes'
 
 /**
@@ -171,5 +171,5 @@ Typography.InspectorControls = Edit
 
 Typography.addAttributes = addAttributes
 
-Typography.Style = Style
+Typography.addStyles = addStyles
 
diff --git a/src/block-components/typography/style.js b/src/block-components/typography/style.js
index e789002d8..f40bc0f88 100644
--- a/src/block-components/typography/style.js
+++ b/src/block-components/typography/style.js
@@ -2,9 +2,8 @@
  * Internal dependencies
  */
 import { getFontFamily, clampInheritedStyle } from '~stackable/util'
-import { BlockCss } from '~stackable/components'
 
-const Styles = props => {
+export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -13,6 +12,8 @@ const Styles = props => {
 	}
 	const {
 		selector = '',
+		editSelector = '',
+		saveSelector = '',
 		selectorCallback = null,
 		attrNameTemplate = '%s',
 		inherit = true,
@@ -20,181 +21,350 @@ const Styles = props => {
 		inheritMax = 50,
 		hoverSelector = '',
 		hoverSelectorCallback = null,
+		editHoverSelectorCallback = null,
+		saveHoverSelectorCallback = null,
 		dependencies = [],
 	} = props
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				selectorCallback={ selectorCallback }
-				attrNameTemplate={ attrNameTemplate }
-				styleRule="textShadow"
-				attrName="textShadow"
-				key="textShadow"
-				hover="all"
-				hoverSelector={ hoverSelector }
-				hoverSelectorCallback={ hoverSelectorCallback }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				selectorCallback={ selectorCallback }
-				attrNameTemplate={ attrNameTemplate }
-				styleRule="fontSize"
-				attrName="fontSize"
-				key="fontSize"
-				hasUnits="px"
-				responsive="all"
-				clampCallback={ ( _value, getAttribute, device, state ) => {
-					const currentValue = getAttribute( 'fontSize', device, state )
-					const isMobile = device === 'mobile'
-
-					let value = _value
-					const clampedValue = inherit && clampInheritedStyle(
-						_value,
-						{
-							min: inheritMin, max: inheritMax,
-						}
-					)
-
-					/**
-					 * When clamping values in mobile, make sure to get the
-					 * clamped desktop value first before checking the clamped
-					 * tablet value.
-					 *
-					 * When the tablet is already clamped, the fallback value should
-					 * be undefined already to avoid generating 2 identical styles.
-					 */
-					if ( isMobile ) {
-						const clampedDesktopValue = inherit && clampInheritedStyle(
-							getAttribute( 'fontSize', 'desktop', state ),
-							{
-								min: inheritMin, max: inheritMax,
-							}
-						)
-						value = clampedDesktopValue ? clampedDesktopValue : value
-					}
+	blockStyleGenerator.addBlockStyles( 'textShadow', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: editSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'textShadow',
+		attrName: 'textShadow',
+		key: 'textShadow',
+		hover: 'all',
+		hoverSelector,
+		hoverSelectorCallback: editHoverSelectorCallback || hoverSelectorCallback,
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: saveSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'textShadow',
+		attrName: 'textShadow',
+		key: 'textShadow',
+		hover: 'all',
+		hoverSelector,
+		hoverSelectorCallback: saveHoverSelectorCallback || hoverSelectorCallback,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'fontSize', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: editSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontSize',
+		attrName: 'fontSize',
+		key: 'fontSize',
+		hasUnits: 'px',
+		responsive: 'all',
+		clampCallback: ( _value, getAttribute, device, state ) => {
+			const currentValue = getAttribute( 'fontSize', device, state )
+			const isMobile = device === 'mobile'
 
-					value = clampedValue ? clampedValue : value
-					value = typeof currentValue !== 'undefined' && currentValue !== ''
-						? currentValue
-						: isMobile ? undefined : value
-					return value
-				} }
-				dependencies={ [ 'fontSizeUnit', 'fontSize', ...dependencies ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				selectorCallback={ selectorCallback }
-				attrNameTemplate={ attrNameTemplate }
-				styleRuleCallback={ getAttribute => {
-					const textColorType = getAttribute( 'textColorType' )
-					return textColorType === 'gradient' ? 'backgroundImage' : 'color'
-				} }
-				hover="all"
-				hoverSelector={ hoverSelector }
-				hoverSelectorCallback={ hoverSelectorCallback }
-				attrName="textColor1"
-				key="textColor1-color"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( ! value && getAttribute( 'textColorType', 'desktop', state ) === 'gradient' ) {
-						return 'currentColor'
+			let value = _value
+			const clampedValue = inherit && clampInheritedStyle(
+				_value,
+				{
+					min: inheritMin, max: inheritMax,
+				}
+			)
+
+			/**
+			 * When clamping values in mobile, make sure to get the
+			 * clamped desktop value first before checking the clamped
+			 * tablet value.
+			 *
+			 * When the tablet is already clamped, the fallback value should
+			 * be undefined already to avoid generating 2 identical styles.
+			 */
+			if ( isMobile ) {
+				const clampedDesktopValue = inherit && clampInheritedStyle(
+					getAttribute( 'fontSize', 'desktop', state ),
+					{
+						min: inheritMin, max: inheritMax,
 					}
-					return value
-				} }
-				valueCallback={ ( value, getAttribute ) => {
-					const textColorType = getAttribute( 'textColorType' )
-					const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
-
-					// If the type was switched, adjust the value so that gradient will show up.
-					if ( textColorType === 'gradient' && ! isGradient ) {
-						return `linear-gradient(${ value } 0%, ${ value } 100%)`
-					} else if ( textColorType !== 'gradient' && isGradient ) {
-						const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
-						if ( color ) {
-							return color[ 0 ]
-						}
+				)
+				value = clampedDesktopValue ? clampedDesktopValue : value
+			}
+
+			value = clampedValue ? clampedValue : value
+			value = typeof currentValue !== 'undefined' && currentValue !== ''
+				? currentValue
+				: isMobile ? undefined : value
+			return value
+		},
+		dependencies: [ 'fontSizeUnit', 'fontSize', ...dependencies ],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: saveSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontSize',
+		attrName: 'fontSize',
+		key: 'fontSize',
+		hasUnits: 'px',
+		responsive: 'all',
+		clampCallback: ( _value, getAttribute, device, state ) => {
+			const currentValue = getAttribute( 'fontSize', device, state )
+			const isMobile = device === 'mobile'
+
+			let value = _value
+			const clampedValue = inherit && clampInheritedStyle(
+				_value,
+				{
+					min: inheritMin, max: inheritMax,
+				}
+			)
+
+			/**
+			 * When clamping values in mobile, make sure to get the
+			 * clamped desktop value first before checking the clamped
+			 * tablet value.
+			 *
+			 * When the tablet is already clamped, the fallback value should
+			 * be undefined already to avoid generating 2 identical styles.
+			 */
+			if ( isMobile ) {
+				const clampedDesktopValue = inherit && clampInheritedStyle(
+					getAttribute( 'fontSize', 'desktop', state ),
+					{
+						min: inheritMin, max: inheritMax,
 					}
-					return value
-				} }
-				dependencies={ [ 'textColorType', ...dependencies ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				selectorCallback={ selectorCallback }
-				attrNameTemplate={ attrNameTemplate }
-				styleRule="lineHeight"
-				attrName="lineHeight"
-				key="lineHeight"
-				responsive="all"
-				hasUnits="em"
-				dependencies={ dependencies }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				selectorCallback={ selectorCallback }
-				attrNameTemplate={ attrNameTemplate }
-				styleRule="fontWeight"
-				attrName="fontWeight"
-				key="fontWeight"
-				dependencies={ dependencies }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				selectorCallback={ selectorCallback }
-				attrNameTemplate={ attrNameTemplate }
-				styleRule="textTransform"
-				attrName="textTransform"
-				key="textTransform"
-				dependencies={ dependencies }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				selectorCallback={ selectorCallback }
-				attrNameTemplate={ attrNameTemplate }
-				styleRule="fontStyle"
-				attrName="fontStyle"
-				key="fontStyle"
-				dependencies={ dependencies }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				selectorCallback={ selectorCallback }
-				attrNameTemplate={ attrNameTemplate }
-				styleRule="fontFamily"
-				attrName="fontFamily"
-				key="fontFamily"
-				valueCallback={ value => getFontFamily( value ) }
-				dependencies={ dependencies }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ selector }
-				selectorCallback={ selectorCallback }
-				attrNameTemplate={ attrNameTemplate }
-				styleRule="letterSpacing"
-				attrName="letterSpacing"
-				key="letterSpacing"
-				format="%spx"
-				responsive="all"
-				dependencies={ dependencies }
-			/>
-		</>
-	)
-}
+				)
+				value = clampedDesktopValue ? clampedDesktopValue : value
+			}
 
-export const Style = props => {
-	return <Styles { ...props } />
-}
+			value = clampedValue ? clampedValue : value
+			value = typeof currentValue !== 'undefined' && currentValue !== ''
+				? currentValue
+				: isMobile ? undefined : value
+			return value
+		},
+		dependencies: [ 'fontSizeUnit', 'fontSize', ...dependencies ],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'textColor1', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: editSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRuleCallback: getAttribute => {
+			const textColorType = getAttribute( 'textColorType' )
+			return textColorType === 'gradient' ? 'backgroundImage' : 'color'
+		},
+		hover: 'all',
+		hoverSelector,
+		hoverSelectorCallback: editHoverSelectorCallback || hoverSelectorCallback,
+		attrName: 'textColor1',
+		key: 'textColor1-color',
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			if ( ! value && getAttribute( 'textColorType', 'desktop', state ) === 'gradient' ) {
+				return 'currentColor'
+			}
+			return value
+		},
+		valueCallback: ( value, getAttribute ) => {
+			const textColorType = getAttribute( 'textColorType' )
+			const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
+
+			// If the type was switched, adjust the value so that gradient will show up.
+			if ( textColorType === 'gradient' && ! isGradient ) {
+				return `linear-gradient(${ value } 0%, ${ value } 100%)`
+			} else if ( textColorType !== 'gradient' && isGradient ) {
+				const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
+				if ( color ) {
+					return color[ 0 ]
+				}
+			}
+			return value
+		},
+		dependencies: [ 'textColorType', ...dependencies ],
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: saveSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRuleCallback: getAttribute => {
+			const textColorType = getAttribute( 'textColorType' )
+			return textColorType === 'gradient' ? 'backgroundImage' : 'color'
+		},
+		hover: 'all',
+		hoverSelector,
+		hoverSelectorCallback: saveHoverSelectorCallback || hoverSelectorCallback,
+		attrName: 'textColor1',
+		key: 'textColor1-color',
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			if ( ! value && getAttribute( 'textColorType', 'desktop', state ) === 'gradient' ) {
+				return 'currentColor'
+			}
+			return value
+		},
+		valueCallback: ( value, getAttribute ) => {
+			const textColorType = getAttribute( 'textColorType' )
+			const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
+
+			// If the type was switched, adjust the value so that gradient will show up.
+			if ( textColorType === 'gradient' && ! isGradient ) {
+				return `linear-gradient(${ value } 0%, ${ value } 100%)`
+			} else if ( textColorType !== 'gradient' && isGradient ) {
+				const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
+				if ( color ) {
+					return color[ 0 ]
+				}
+			}
+			return value
+		},
+		dependencies: [ 'textColorType', ...dependencies ],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'lineHeight', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: editSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'lineHeight',
+		attrName: 'lineHeight',
+		key: 'lineHeight',
+		responsive: 'all',
+		hasUnits: 'em',
+		dependencies,
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: saveSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'lineHeight',
+		attrName: 'lineHeight',
+		key: 'lineHeight',
+		responsive: 'all',
+		hasUnits: 'em',
+		dependencies,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'fontWeight', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: editSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontWeight',
+		attrName: 'fontWeight',
+		key: 'fontWeight',
+		dependencies,
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: saveSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontWeight',
+		attrName: 'fontWeight',
+		key: 'fontWeight',
+		dependencies,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'textTransform', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: editSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'textTransform',
+		attrName: 'textTransform',
+		key: 'textTransform',
+		dependencies,
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: saveSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'textTransform',
+		attrName: 'textTransform',
+		key: 'textTransform',
+		dependencies,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'fontStyle', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: editSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontStyle',
+		attrName: 'fontStyle',
+		key: 'fontStyle',
+		dependencies,
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: saveSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontStyle',
+		attrName: 'fontStyle',
+		key: 'fontStyle',
+		dependencies,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'fontFamily', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: editSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontFamily',
+		attrName: 'fontFamily',
+		key: 'fontFamily',
+		valueCallback: value => getFontFamily( value ),
+		dependencies,
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: saveSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontFamily',
+		attrName: 'fontFamily',
+		key: 'fontFamily',
+		valueCallback: value => getFontFamily( value ),
+		dependencies,
+	} ] )
 
-Style.Content = props => {
-	return <Styles { ...props } />
+	blockStyleGenerator.addBlockStyles( 'letterSpacing', [ {
+		...propsToPass,
+		renderIn: 'edit',
+		selector: editSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'letterSpacing',
+		attrName: 'letterSpacing',
+		key: 'letterSpacing',
+		format: '%spx',
+		responsive: 'all',
+		dependencies,
+	}, {
+		...propsToPass,
+		renderIn: 'save',
+		selector: saveSelector || selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'letterSpacing',
+		attrName: 'letterSpacing',
+		key: 'letterSpacing',
+		format: '%spx',
+		responsive: 'all',
+		dependencies,
+	} ] )
 }
diff --git a/src/block/accordion/edit.js b/src/block/accordion/edit.js
index a5c7b427d..b5f6d4dbc 100644
--- a/src/block/accordion/edit.js
+++ b/src/block/accordion/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -16,10 +16,10 @@ import {
 	InspectorTabs,
 	PanelAdvancedSettings,
 	InspectorAdvancedControls,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	getAlignmentClasses,
 	Alignment,
 	Advanced,
@@ -50,7 +50,7 @@ import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { compose } from '@wordpress/compose'
 import { useSelect } from '@wordpress/data'
-import { useState, useEffect } from '@wordpress/element'
+import { useState, useEffect, memo } from '@wordpress/element'
 import { addFilter, applyFilters } from '@wordpress/hooks'
 import { findLast } from 'lodash'
 
@@ -61,11 +61,8 @@ const Edit = props => {
 	const {
 		clientId,
 		className,
-		isSelected,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const [ isOpen, setIsOpen ] = useState( props.attributes.startOpen )
 	const { hasInnerBlocks } = useBlockContext()
 	const [ hasInitClickHandler, setHasInitClickHandler ] = useState( false )
@@ -123,57 +120,22 @@ const Edit = props => {
 		'stk--is-open': isOpen, // This opens the accordion in the editor.
 	} )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'General', i18n ) }
-						id="general"
-						initialOpen={ true }
-					>
-						<AdvancedToggleControl
-							label={ __( 'Open at the start', i18n ) }
-							attribute="startOpen"
-						/>
-						<AdvancedToggleControl
-							label={ __( 'Close adjacent on open', i18n ) }
-							attribute="onlyOnePanelOpen"
-							helpTooltip={ {
-								video: 'accordion-adjacent-open',
-								title: __( 'Close adjacent on open', i18n ),
-								description: __( 'Automatically closes adjacent accordion panels when clicked.', i18n ),
-							} }
-						/>
-						<AdvancedToggleControl
-							label={ __( 'Enable FAQ Schema', i18n ) }
-							attribute="enableFAQ"
-						/>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<Alignment.InspectorControls />
-				<BlockDiv.InspectorControls backgroundMediaAllowVideo={ false } />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-accordion" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
+			<InspectorControls />
 
-			<BlockStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-accordion" />
 
 			<BlockDiv
@@ -194,6 +156,54 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'General', i18n ) }
+					id="general"
+					initialOpen={ true }
+				>
+					<AdvancedToggleControl
+						label={ __( 'Open at the start', i18n ) }
+						attribute="startOpen"
+					/>
+					<AdvancedToggleControl
+						label={ __( 'Close adjacent on open', i18n ) }
+						attribute="onlyOnePanelOpen"
+						helpTooltip={ {
+							video: 'accordion-adjacent-open',
+							title: __( 'Close adjacent on open', i18n ),
+							description: __( 'Automatically closes adjacent accordion panels when clicked.', i18n ),
+						} }
+					/>
+					<AdvancedToggleControl
+						label={ __( 'Enable FAQ Schema', i18n ) }
+						attribute="enableFAQ"
+					/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+
+			<Alignment.InspectorControls />
+			<BlockDiv.InspectorControls backgroundMediaAllowVideo={ false } />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-accordion" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/accordion/save.js b/src/block/accordion/save.js
index a6ad73308..81e54c4ba 100644
--- a/src/block/accordion/save.js
+++ b/src/block/accordion/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -49,7 +44,7 @@ export const Save = props => {
 			open={ attributes.startOpen || undefined }
 			version={ props.version }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<InnerBlocks.Content />
 		</BlockDiv.Content>
diff --git a/src/block/accordion/style.js b/src/block/accordion/style.js
index 8a8c270db..345c590d4 100644
--- a/src/block/accordion/style.js
+++ b/src/block/accordion/style.js
@@ -9,50 +9,18 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-const BlockStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Column.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
-
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Column.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Column.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
 
-export default BlockStyles
+export default blockStyles
diff --git a/src/block/blockquote/edit.js b/src/block/blockquote/edit.js
index 2373417c6..6db7dcb26 100644
--- a/src/block/blockquote/edit.js
+++ b/src/block/blockquote/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { ContainerStyles } from './style'
+import blockStyles from './style'
 import SVGDefaultQuote from './images/round-thin.svg'
 import { QUOTE_ICONS } from './quotes'
 import variations from './variations'
@@ -16,10 +16,10 @@ import {
 	InspectorBottomTip,
 	InspectorStyleControls,
 	InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	ContainerDiv,
 	ConditionalDisplay,
 	Alignment,
@@ -44,7 +44,7 @@ import {
  */
 import { InnerBlocks } from '@wordpress/block-editor'
 import { compose } from '@wordpress/compose'
-import { renderToString } from '@wordpress/element'
+import { renderToString, memo } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
 
@@ -54,12 +54,9 @@ const TEMPLATE = variations[ 0 ].innerBlocks
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	const { hasInnerBlocks } = useBlockContext()
 
@@ -75,30 +72,19 @@ const Edit = props => {
 		'stk-block-blockquote__content',
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<Alignment.InspectorControls />
-				<BlockDiv.InspectorControls />
-				<ContainerDiv.InspectorControls
-					sizeSelector=".stk-block-content"
-					hasContentVerticalAlign={ true }
-				/>
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-blockquote" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
-
+			<InspectorControls />
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
 				clientId={ props.clientId }
@@ -106,11 +92,7 @@ const Edit = props => {
 				className={ blockClassNames }
 				enableVariationPicker={ true }
 			>
-				<ContainerStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-blockquote" />
 
 				<ContainerDiv className={ contentClassNames }>
@@ -125,6 +107,32 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Alignment.InspectorControls />
+			<BlockDiv.InspectorControls />
+			<ContainerDiv.InspectorControls
+				sizeSelector=".stk-block-content"
+				hasContentVerticalAlign={ true }
+			/>
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-blockquote" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/blockquote/save.js b/src/block/blockquote/save.js
index 66c0eb9e1..45e2ce608 100644
--- a/src/block/blockquote/save.js
+++ b/src/block/blockquote/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { ContainerStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -55,7 +50,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<ContainerStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<ContainerDiv.Content
 				className={ contentClassNames }
diff --git a/src/block/blockquote/style.js b/src/block/blockquote/style.js
index f29f909ab..8a5be7a67 100644
--- a/src/block/blockquote/style.js
+++ b/src/block/blockquote/style.js
@@ -11,55 +11,23 @@ import {
 	Transform,
 } from '~stackable/block-components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
+
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const containerDivOptions = {
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles, {
 	sizeSelector: '.stk-block-blockquote__content',
 	sizeVerticalAlignRule: 'alignItems',
 	sizeHorizontalAlignRule: 'margin',
-}
-
-export const ContainerStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ContainerDiv.Style { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style { ...props } />
-		</>
-	)
 } )
+MarginBottom.addStyles( blockStyles )
 
-ContainerStyles.defaultProps = {
-	version: '',
-}
-
-ContainerStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-ContainerStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/button-group/edit.js b/src/block/button-group/edit.js
index ff903d470..b718591d9 100644
--- a/src/block/button-group/edit.js
+++ b/src/block/button-group/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { ButtonGroupStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -17,10 +17,10 @@ import {
 	AlignButtonsControl,
 	advancedToolbarControlControls,
 	AdvancedToolbarControl,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	MarginBottom,
 	getRowClasses,
 	getAlignmentClasses,
@@ -48,6 +48,7 @@ import {
 	AlignmentToolbar, BlockControls, InnerBlocks,
 } from '@wordpress/block-editor'
 import { sprintf, __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const ALLOWED_INNER_BLOCKS = [ 'stackable/button', 'stackable/icon-button' ]
 
@@ -98,12 +99,9 @@ const Edit = props => {
 	const {
 		className,
 		attributes,
-		clientId,
 		setAttributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const {
 		collapseOn = '',
 	} = attributes
@@ -148,67 +146,25 @@ const Edit = props => {
 		}
 	}
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<BlockDiv.InspectorControls />
-
-				<BlockControls>
-					<AlignmentToolbar
-						value={ attributes.contentAlign }
-						onChange={ contentAlign => setAttributes( { contentAlign } ) }
-						alignmentControls={ TOOLBAR_ALIGN_OPTIONS }
-					/>
-				</BlockControls>
-				<InspectorLayoutControls>
-					<AlignButtonsControl
-						label={ sprintf( __( '%s Alignment', i18n ), __( 'Content', i18n ) ) }
-						attribute="contentAlign"
-						responsive="all"
-						controls={ contentAlignControls }
-					/>
-					<AdvancedToolbarControl
-						label={ sprintf( __( '%s Alignment', i18n ), __( 'Button', i18n ) ) }
-						controls={ deviceType === 'Desktop' ? ALIGNMENT_CONTROLS_DESKTOP : ALIGNMENT_CONTROLS_TABLET_MOBILE }
-						attribute="buttonAlign"
-						responsive="all"
-					/>
-					<AdvancedToggleControl
-						label={ __( 'Full Width Buttons', i18n ) }
-						attribute="buttonFullWidth"
-						defaultValue={ false }
-					/>
-					<FlexGapControls />
-					<AdvancedSelectControl
-						label={ __( 'Flex Wrap', i18n ) }
-						attribute="flexWrap"
-						options={ [
-							{
-								label: __( 'No Wrap', i18n ),
-								value: '',
-							},
-							{
-								label: __( 'Wrap', i18n ),
-								value: 'wrap',
-							},
-							{
-								label: __( 'Wrap Reverse', i18n ),
-								value: 'wrap-reverse',
-							},
-						] }
-						responsive="all"
-					/>
-				</InspectorLayoutControls>
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-button-group" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
+			<InspectorControls
+				contentAlign={ attributes.contentAlign }
+				setAttributes={ setAttributes }
+				contentAlignControls={ contentAlignControls }
+				deviceType={ deviceType }
+			/>
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -216,15 +172,11 @@ const Edit = props => {
 				attributes={ props.attributes }
 				className={ blockClassNames }
 			>
-				<ButtonGroupStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-button-group" />
 
-				{ ! hasInnerBlocks && <GroupPlaceholder /> }
-				<>
+				{ ! hasInnerBlocks && <GroupPlaceholder blockName="stackable/button" /> }
+				{ hasInnerBlocks &&
 					<div className={ contentClassNames }>
 						<InnerBlocks
 							orientation="horizontal"
@@ -233,13 +185,77 @@ const Edit = props => {
 							templateInsertUpdatesSelection={ true }
 						/>
 					</div>
-				</>
+				}
 			</BlockDiv>
 			{ props.isHovered && hasInnerBlocks && <MarginBottom /> }
 		</>
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<BlockDiv.InspectorControls />
+
+			<BlockControls>
+				<AlignmentToolbar
+					value={ props.contentAlign }
+					onChange={ contentAlign => props.setAttributes( { contentAlign } ) }
+					alignmentControls={ TOOLBAR_ALIGN_OPTIONS }
+				/>
+			</BlockControls>
+			<InspectorLayoutControls>
+				<AlignButtonsControl
+					label={ sprintf( __( '%s Alignment', i18n ), __( 'Content', i18n ) ) }
+					attribute="contentAlign"
+					responsive="all"
+					controls={ props.contentAlignControls }
+				/>
+				<AdvancedToolbarControl
+					label={ sprintf( __( '%s Alignment', i18n ), __( 'Button', i18n ) ) }
+					controls={ props.deviceType === 'Desktop' ? ALIGNMENT_CONTROLS_DESKTOP : ALIGNMENT_CONTROLS_TABLET_MOBILE }
+					attribute="buttonAlign"
+					responsive="all"
+				/>
+				<AdvancedToggleControl
+					label={ __( 'Full Width Buttons', i18n ) }
+					attribute="buttonFullWidth"
+					defaultValue={ false }
+				/>
+				<FlexGapControls />
+				<AdvancedSelectControl
+					label={ __( 'Flex Wrap', i18n ) }
+					attribute="flexWrap"
+					options={ [
+						{
+							label: __( 'No Wrap', i18n ),
+							value: '',
+						},
+						{
+							label: __( 'Wrap', i18n ),
+							value: 'wrap',
+						},
+						{
+							label: __( 'Wrap Reverse', i18n ),
+							value: 'wrap-reverse',
+						},
+					] }
+					responsive="all"
+				/>
+			</InspectorLayoutControls>
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-button-group" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/button-group/save.js b/src/block/button-group/save.js
index dae8b9d57..cf4409329 100644
--- a/src/block/button-group/save.js
+++ b/src/block/button-group/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { ButtonGroupStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -58,7 +53,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<ButtonGroupStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<div className={ contentClassNames }>
 				<InnerBlocks.Content />
diff --git a/src/block/button-group/style.js b/src/block/button-group/style.js
index 5ac0c3880..7e807f244 100644
--- a/src/block/button-group/style.js
+++ b/src/block/button-group/style.js
@@ -7,277 +7,209 @@ import {
 	BlockDiv,
 	EffectsAnimations,
 	MarginBottom,
-	FlexGapStyles,
+	addFlexGapStyles,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const flexGapOptionsEdit = {
-	selector: '.block-editor-block-list__layout',
-}
+blockStyles.addBlockStyles( 'flexWrap', [ {
+	renderIn: 'save',
+	selector: '.stk-button-group',
+	styleRule: 'flexWrap',
+	attrName: 'flexWrap',
+	key: 'flexWrap-save',
+	responsive: 'all',
+}, {
+	renderIn: 'edit',
+	selector: '.stk-button-group .block-editor-block-list__layout',
+	styleRule: 'flexWrap',
+	attrName: 'flexWrap',
+	key: 'flexWrap',
+	responsive: 'all',
+	valuePreCallback: ( value, getAttribute, device ) => {
+	// In the editor, it should correctly wrap in mobile.
+		if ( device === 'mobile' ) {
+			return 'wrap'
+		}
+		return value || 'nowrap'
+	},
+} ] )
 
-const flexGapOptionsSave = {
-	selector: '.stk-inner-blocks',
-}
+blockStyles.addBlockStyles( 'buttonAlign', [ {
+	renderIn: 'save',
+	selector: '.stk-button-group',
+	styleRule: 'flexDirection',
+	attrName: 'buttonAlign',
+	key: 'buttonAlign-save-group',
+	responsive: 'all',
+	valuePreCallback: value => {
+		if ( value === 'vertical' ) {
+			return 'column'
+		}
 
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
+		return 'row'
+	},
+}, {
+	renderIn: 'edit',
+	selector: '.stk-button-group .block-editor-block-list__layout',
+	styleRule: 'flexDirection',
+	attrName: 'buttonAlign',
+	key: 'buttonAlign-list-layout',
+	responsive: 'all',
+	valuePreCallback: value => {
+		if ( value === 'vertical' ) {
+			return 'column'
+		} else if ( value === 'horizontal' ) {
+			return 'row'
+		}
+		return value
+	},
+}, {
+// If the buttons are set to vertical, we also need to reset the flex
+// basis or else full-width buttons (set per button block) will overlap
+// each other vertically.
+	renderIn: 'save',
+	selector: '.stk-block',
+	styleRule: 'flexBasis',
+	attrName: 'buttonAlign',
+	key: 'buttonAlign-save-block',
+	responsive: 'all',
+	valuePreCallback: value => {
+		return value === 'vertical' ? 'auto'
+			: value === 'horizontal' ? 0
+				: undefined
+	},
+}, {
+	renderIn: 'save',
+	selector: '.stk-button-group',
+	styleRule: 'alignItems',
+	attrName: 'buttonAlign',
+	key: 'buttonAlign-save-button-group',
+	responsive: 'all',
+	valuePreCallback: ( value, getAttribute, device ) => {
+		const getInherited = true
+		const contentAlign = getAttribute( 'contentAlign', device, 'normal', getInherited )
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-button-group"
-				styleRule="flexWrap"
-				attrName="flexWrap"
-				key="flexWrap-save"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".stk-button-group .block-editor-block-list__layout"
-				styleRule="flexWrap"
-				attrName="flexWrap"
-				key="flexWrap"
-				responsive="all"
-				valuePreCallback={ ( value, getAttribute, device ) => {
-				// In the editor, it should correctly wrap in mobile.
-					if ( device === 'mobile' ) {
-						return 'wrap'
-					}
-					return value || 'nowrap'
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-button-group"
-				styleRule="flexDirection"
-				attrName="buttonAlign"
-				key="buttonAlign-save-group"
-				responsive="all"
-				valuePreCallback={ value => {
-					if ( value === 'vertical' ) {
-						return 'column'
-					} else if ( value === 'horizontal' ) {
-						return 'row'
-					}
-					return value
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".stk-button-group .block-editor-block-list__layout"
-				styleRule="flexDirection"
-				attrName="buttonAlign"
-				key="buttonAlign-list-layout"
-				responsive="all"
-				valuePreCallback={ value => {
-					if ( value === 'vertical' ) {
-						return 'column'
-					} else if ( value === 'horizontal' ) {
-						return 'row'
-					}
-					return value
-				} }
-			/>
+		if ( value === 'vertical' ) {
+			const buttonFullWidth = getAttribute( 'buttonFullWidth' )
+			if ( buttonFullWidth ) {
+				return 'stretch'
+			}
+			if ( contentAlign === 'center' ) {
+				return 'center'
+			} else if ( contentAlign === 'right' ) {
+				return 'flex-end'
+			}
+			return 'flex-start'
+		} else if ( value === 'horizontal' ) {
+			return 'center'
+		}
+		return value
+	},
+	dependencies: [ 'contentAlign', 'buttonFullWidth' ],
+}, {
+	renderIn: 'edit',
+	selector: '.stk-button-group .block-editor-block-list__layout',
+	styleRule: 'alignItems',
+	attrName: 'buttonAlign',
+	key: 'buttonAlign-group-list-layout',
+	responsive: 'all',
+	valuePreCallback: ( value, getAttribute, device ) => {
+		const getInherited = true
+		const contentAlign = getAttribute( 'contentAlign', device, 'normal', getInherited )
 
-			{
-			// If the buttons are set to vertical, we also need to reset the flex
-			// basis or else full-width buttons (set per button block) will overlap
-			// each other vertically.
+		if ( value === 'vertical' ) {
+			const buttonFullWidth = getAttribute( 'buttonFullWidth' )
+			if ( buttonFullWidth ) {
+				return 'stretch'
+			}
+			if ( contentAlign === 'center' ) {
+				return 'center'
+			} else if ( contentAlign === 'right' ) {
+				return 'flex-end'
 			}
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-block"
-				styleRule="flexBasis"
-				attrName="buttonAlign"
-				key="buttonAlign-save-block"
-				responsive="all"
-				valuePreCallback={ value => {
-					return value === 'vertical' ? 'auto'
-						: value === 'horizontal' ? 0
-							: undefined
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-button-group"
-				styleRule="alignItems"
-				attrName="buttonAlign"
-				key="buttonAlign-save-button-group"
-				responsive="all"
-				valuePreCallback={ ( value, getAttribute, device ) => {
-					const getInherited = true
-					const contentAlign = getAttribute( 'contentAlign', device, 'normal', getInherited )
+			return 'flex-start'
+		} else if ( value === 'horizontal' ) {
+			return 'center'
+		}
+		return value
+	},
+	dependencies: [ 'contentAlign', 'buttonFullWidth' ],
+} ] )
 
-					if ( value === 'vertical' ) {
-						const buttonFullWidth = getAttribute( 'buttonFullWidth' )
-						if ( buttonFullWidth ) {
-							return 'stretch'
-						}
-						if ( contentAlign === 'center' ) {
-							return 'center'
-						} else if ( contentAlign === 'right' ) {
-							return 'flex-end'
-						}
-						return 'flex-start'
-					} else if ( value === 'horizontal' ) {
-						return 'center'
-					}
-					return value
-				} }
-				dependencies={ [ 'contentAlign', 'buttonFullWidth' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".stk-button-group .block-editor-block-list__layout"
-				styleRule="alignItems"
-				attrName="buttonAlign"
-				key="buttonAlign-group-list-layout"
-				responsive="all"
-				valuePreCallback={ ( value, getAttribute, device ) => {
-					const getInherited = true
-					const contentAlign = getAttribute( 'contentAlign', device, 'normal', getInherited )
+blockStyles.addBlockStyles( 'buttonFullWidth', [ {
+	renderIn: 'save',
+	selector: '.stk-block-button, .stk-block-icon-button',
+	styleRule: 'flex',
+	attrName: 'buttonFullWidth',
+	key: 'buttonFullWidth-save',
+	valueCallback: ( value, getAttribute ) => {
+		let basis = '0%' // This is the default value of flex-basis
+		// If we're wrapping, we need to set flex-basis to auto so
+		// that it will wrap and go full-width.
+		if ( getAttribute( 'flexWrap' ) ) {
+			basis = 'auto'
+		}
+		return value ? ( '1 0 ' + basis ) : undefined
+	},
+	dependencies: [ 'flexWrap' ],
+}, {
+	renderIn: 'edit',
+	selector: `.stk-block-button, .stk-block-icon-button, [data-type^="stackable/"]`,
+	styleRule: 'flex',
+	attrName: 'buttonFullWidth',
+	key: 'buttonFullWidth',
+	valueCallback: ( value, getAttribute ) => {
+		let basis = '0%' // This is the default value of flex-basis
+		// If we're wrapping, we need to set flex-basis to auto so
+		// that it will wrap and go full-width.
+		if ( getAttribute( 'flexWrap' ) ) {
+			basis = 'auto'
+		}
+		return value ? ( '1 0 ' + basis ) : undefined
+	},
+	dependencies: [ 'flexWrap' ],
+} ] )
 
-					if ( value === 'vertical' ) {
-						const buttonFullWidth = getAttribute( 'buttonFullWidth' )
-						if ( buttonFullWidth ) {
-							return 'stretch'
-						}
-						if ( contentAlign === 'center' ) {
-							return 'center'
-						} else if ( contentAlign === 'right' ) {
-							return 'flex-end'
-						}
-						return 'flex-start'
-					} else if ( value === 'horizontal' ) {
-						return 'center'
-					}
-					return value
-				} }
-				dependencies={ [ 'contentAlign', 'buttonFullWidth' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-block-button, .stk-block-icon-button"
-				styleRule="flex"
-				attrName="buttonFullWidth"
-				key="buttonFullWidth-save"
-				valueCallback={ ( value, getAttribute ) => {
-					let basis = '0%' // This is the default value of flex-basis
-					// If we're wrapping, we need to set flex-basis to auto so
-					// that it will wrap and go full-width.
-					if ( getAttribute( 'flexWrap' ) ) {
-						basis = 'auto'
-					}
-					return value ? ( '1 0 ' + basis ) : undefined
-				} }
-				dependencies={ [ 'flexWrap' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector={ `.stk-block-button, .stk-block-icon-button, [data-type^="stackable/"]` }
-				styleRule="flex"
-				attrName="buttonFullWidth"
-				key="buttonFullWidth"
-				valueCallback={ ( value, getAttribute ) => {
-					let basis = '0%' // This is the default value of flex-basis
-					// If we're wrapping, we need to set flex-basis to auto so
-					// that it will wrap and go full-width.
-					if ( getAttribute( 'flexWrap' ) ) {
-						basis = 'auto'
-					}
-					return value ? ( '1 0 ' + basis ) : undefined
-				} }
-				dependencies={ [ 'flexWrap' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-button-group"
-				styleRule="--stk-button-group-flex-wrap"
-				attrName="flexWrap"
-				key="flexWrap-save-button-group"
-				responsive="all"
-				valueCallback={ value => {
-					return value ? 'auto' : undefined
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-button-group .stk-block-button"
-				styleRule="width"
-				attrName="flexWrap"
-				key="flexWrap-save-button-group-unset-width"
-				responsive="all"
-				valueCallback={ value => {
-					return value ? 'unset' : undefined
-				} }
-			/>
-		</>
-	)
-}
+blockStyles.addBlockStyles( 'flexWrap', [ {
+	renderIn: 'save',
+	selector: '.stk-button-group',
+	styleRule: '--stk-button-group-flex-wrap',
+	attrName: 'flexWrap',
+	key: 'flexWrap-save-button-group',
+	responsive: 'all',
+	valueCallback: value => {
+		return value ? 'auto' : undefined
+	},
+}, {
+	renderIn: 'save',
+	selector: '.stk-button-group .stk-block-button',
+	styleRule: 'width',
+	attrName: 'flexWrap',
+	key: 'flexWrap-save-button-group-unset-width',
+	responsive: 'all',
+	valueCallback: value => {
+		return value ? 'unset' : undefined
+	},
+} ] )
 
-export const ButtonGroupStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } verticalAlignSelector=".stk-button-group > .block-editor-inner-blocks > .block-editor-block-list__layout" />
-			<MarginBottom.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<FlexGapStyles { ...props } { ...flexGapOptionsEdit } />
-			<Styles { ...props } />
-		</>
-	)
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles, {
+	verticalAlignSelectorEdit: '.stk-button-group > .block-editor-inner-blocks > .block-editor-block-list__layout',
+	verticalAlignSelectorSave: '.stk-button-group',
+} )
+MarginBottom.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+addFlexGapStyles( blockStyles, {
+	editSelector: '.block-editor-block-list__layout',
+	saveSelector: '.stk-inner-blocks',
 } )
 
-ButtonGroupStyles.defaultProps = {
-	version: '',
-}
-
-ButtonGroupStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } verticalAlignSelector=".stk-button-group" />
-			<MarginBottom.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<FlexGapStyles.Content { ...props } { ...flexGapOptionsSave } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-ButtonGroupStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
+export default blockStyles
diff --git a/src/block/button-group/variations.js b/src/block/button-group/variations.js
index f341e34aa..8753be419 100644
--- a/src/block/button-group/variations.js
+++ b/src/block/button-group/variations.js
@@ -31,6 +31,12 @@ const variations = [
 		'stk-type': 'essential',
 		'stk-demo': 'https://wpstackable.com/button-block/?utm_source=welcome&utm_medium=settings&utm_campaign=view_demo&utm_content=demolink',
 		isDefault: true,
+		innerBlocks: [
+			[
+				'stackable/button',
+				{},
+			],
+		],
 		example: buttonExample,
 	},
 	{
diff --git a/src/block/button/edit.js b/src/block/button/edit.js
index 23e3dcf0a..8fc08c1c0 100644
--- a/src/block/button/edit.js
+++ b/src/block/button/edit.js
@@ -3,11 +3,10 @@
  */
 import classnames from 'classnames'
 import { version as VERSION, i18n } from 'stackable'
-import { InspectorTabs } from '~stackable/components'
+import { InspectorTabs, useBlockCssGenerator } from '~stackable/components'
 import {
 	getTypographyClasses,
 	BlockDiv,
-	useGeneratedCss,
 	Advanced,
 	CustomCSS,
 	Responsive,
@@ -34,11 +33,12 @@ import { __ } from '@wordpress/i18n'
 import { compose } from '@wordpress/compose'
 import { createBlock } from '@wordpress/blocks'
 import { AlignmentToolbar, BlockControls } from '@wordpress/block-editor'
+import { memo } from '@wordpress/element'
 
 /**
  * Internal dependencies
  */
-import { ButtonStyles } from './style'
+import buttonStyles from './style'
 import { blockStyles } from './block-styles'
 
 const Edit = props => {
@@ -47,11 +47,8 @@ const Edit = props => {
 		onReplace,
 		attributes,
 		setAttributes,
-		clientId,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const typographyInnerClasses = getTypographyClasses( props.attributes )
 	const customAttributes = CustomAttributes.getCustomAttributes( props.attributes )
 
@@ -75,49 +72,25 @@ const Edit = props => {
 		'stk-button__inner-text',
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles: buttonStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<BlockControls>
-					<AlignmentToolbar
-						value={ attributes.contentAlign }
-						onChange={ contentAlign => setAttributes( { contentAlign } ) }
-					/>
-				</BlockControls>
-
-				<InspectorTabs hasLayoutPanel={ false } />
-
-				<BlockStyle.InspectorControls styles={ blockStyles }>
-					<Button.InspectorControls.HoverEffects />
-				</BlockStyle.InspectorControls>
-				<Button.InspectorControls
-					blockState={ props.blockState }
-					borderSelector=".stk-button"
-					hasFullWidth={ true }
-				/>
-				<Typography.InspectorControls
-					{ ...props }
-					hasTextTag={ false }
-					initialOpen={ false }
-					hasColor={ false }
-				/>
-
-				<BlockDiv.InspectorControls initialOpen="spacing" />
-
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-button" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<ButtonStyles
-				version={ VERSION }
+			<InspectorControls
+				contentAlign={ attributes.contentAlign }
+				setAttributes={ setAttributes }
 				blockState={ props.blockState }
-				clientId={ clientId }
 			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-button" />
 
 			<BlockDiv
@@ -154,6 +127,46 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ props.contentAlign }
+					onChange={ contentAlign => props.setAttributes( { contentAlign } ) }
+				/>
+			</BlockControls>
+
+			<InspectorTabs hasLayoutPanel={ false } />
+
+			<BlockStyle.InspectorControls styles={ blockStyles }>
+				<Button.InspectorControls.HoverEffects />
+			</BlockStyle.InspectorControls>
+			<Button.InspectorControls
+				blockState={ props.blockState }
+				borderSelector=".stk-button"
+				hasFullWidth={ true }
+			/>
+			<Typography.InspectorControls
+				{ ...props }
+				hasTextTag={ false }
+				initialOpen={ false }
+				hasColor={ false }
+			/>
+
+			<BlockDiv.InspectorControls initialOpen="spacing" />
+
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-button" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapper,
 	withQueryLoopContext,
diff --git a/src/block/button/save.js b/src/block/button/save.js
index a3f836c04..65c965e5d 100644
--- a/src/block/button/save.js
+++ b/src/block/button/save.js
@@ -21,11 +21,6 @@ import {
 import { compose } from '@wordpress/compose'
 import { useBlockProps } from '@wordpress/block-editor'
 
-/**
- * Internal dependencies
- */
-import { ButtonStyles } from './style'
-
 export const Save = props => {
 	const {
 		className,
@@ -57,7 +52,7 @@ export const Save = props => {
 			applyCustomAttributes={ false }
 			version={ props.version }
 		>
-			<ButtonStyles.Content { ...propsToPass } />
+			{ props.attributes.generatedCss && <style>{ props.attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ props.attributes } />
 			<Button.Content
 				{ ...propsToPass }
diff --git a/src/block/button/style.js b/src/block/button/style.js
index 4513bc46b..0d50b0a3f 100644
--- a/src/block/button/style.js
+++ b/src/block/button/style.js
@@ -10,85 +10,34 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const buttonOptions = {
+blockStyles.addBlockStyles( 'buttonFullWidth', [ {
+	renderIn: 'edit',
+	selectorCallback: ( getAttributes, attributes, clientId ) => `.editor-styles-wrapper [data-block="${ clientId }"]`,
+	styleRule: 'width',
+	attrName: 'buttonFullWidth',
+	key: 'buttonFullWidth',
+	valueCallback: value => {
+		return value ? '100%' : undefined
+	},
+} ] )
+
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Button.addStyles( blockStyles, {
 	selector: '.stk-button',
-}
-
-const typographyOptions = {
+} )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-button__inner-text',
 	hoverSelector: '.stk-button:hover .stk-button__inner-text',
-}
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				// This makes the block fullwidth inside the editor.
-				renderIn="edit"
-				selectorCallback={ ( getAttributes, attributes, clientId ) => `.editor-styles-wrapper [data-block="${ clientId }"]` }
-				styleRule="width"
-				attrName="buttonFullWidth"
-				key="buttonFullWidth"
-				valueCallback={ value => {
-					return value ? '100%' : undefined
-				} }
-			/>
-		</>
-	)
-}
-
-export const ButtonStyles = memo( props => {
-	return (
-		<>
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Button.Style { ...props } { ...buttonOptions } />
-			<Typography.Style { ...props } { ...typographyOptions } />
-			<EffectsAnimations.Style { ...props } />
-			<Styles { ...props } />
-		</>
-	)
 } )
+EffectsAnimations.addStyles( blockStyles )
 
-ButtonStyles.defaultProps = {
-	version: '',
-}
-
-ButtonStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Button.Style.Content { ...props } { ...buttonOptions } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-ButtonStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/call-to-action/edit.js b/src/block/call-to-action/edit.js
index 450686e7b..83062f94d 100644
--- a/src/block/call-to-action/edit.js
+++ b/src/block/call-to-action/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { ContainerStyles } from './style'
+import blockStyles from './style'
 import variations from './variations'
 
 /**
@@ -14,10 +14,10 @@ import {
 	InspectorBottomTip,
 	InspectorStyleControls,
 	InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	ContainerDiv,
 	ConditionalDisplay,
 	Alignment,
@@ -46,17 +46,15 @@ import {
 import { InnerBlocks } from '@wordpress/block-editor'
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const TEMPLATE = variations[ 0 ].innerBlocks
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const { hasInnerBlocks, innerBlocks } = useBlockContext()
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	const separatorClass = getSeparatorClasses( props.attributes )
@@ -78,30 +76,20 @@ const Edit = props => {
 	const lastBlockName = last( innerBlocks )?.name
 	const renderAppender = hasInnerBlocks ? ( [ 'stackable/text', 'core/paragraph' ].includes( lastBlockName ) ? () => <></> : InnerBlocks.DefaultBlockAppender ) : InnerBlocks.ButtonBlockAppender
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<ContentAlign.InspectorControls />
-				<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
-				<BlockDiv.InspectorControls />
-				<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
-				<BlockLink.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<Separator.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-call-to-action" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
-
+			<InspectorControls />
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
 				clientId={ props.clientId }
@@ -109,11 +97,7 @@ const Edit = props => {
 				className={ blockClassNames }
 				enableVariationPicker={ true }
 			>
-				<ContainerStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-call-to-action" />
 
 				<Separator>
@@ -131,6 +115,32 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<ContentAlign.InspectorControls />
+			<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
+			<BlockDiv.InspectorControls />
+			<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
+			<BlockLink.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<Separator.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-call-to-action" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/call-to-action/save.js b/src/block/call-to-action/save.js
index 1d62c520e..961fd3333 100644
--- a/src/block/call-to-action/save.js
+++ b/src/block/call-to-action/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { ContainerStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -66,7 +61,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<ContainerStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Separator.Content attributes={ attributes }>
 				<ContainerDiv.Content
diff --git a/src/block/call-to-action/style.js b/src/block/call-to-action/style.js
index 3d499ed10..218f08de2 100644
--- a/src/block/call-to-action/style.js
+++ b/src/block/call-to-action/style.js
@@ -11,57 +11,23 @@ import {
 	Separator,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const containerDivOptions = {
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles, {
 	sizeSelector: '.stk-block-call-to-action__content',
 	sizeHorizontalAlignRule: 'margin',
-}
-
-export const ContainerStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ContainerDiv.Style { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style { ...props } />
-			<Separator.Style { ...props } />
-		</>
-	)
 } )
+MarginBottom.addStyles( blockStyles )
+Separator.addStyles( blockStyles )
 
-ContainerStyles.defaultProps = {
-	version: '',
-}
-
-ContainerStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style.Content { ...props } />
-			<Separator.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-ContainerStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/card/edit.js b/src/block/card/edit.js
index 6cdb8b3ff..e83140bd7 100644
--- a/src/block/card/edit.js
+++ b/src/block/card/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { CardStyles } from './style'
+import blockStyles from './style'
 import variations from './variations'
 
 /**
@@ -14,6 +14,7 @@ import {
 	InspectorBottomTip,
 	InspectorStyleControls,
 	InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	useBlockContext, useBlockStyle, useDeviceType,
@@ -25,7 +26,6 @@ import {
 } from '~stackable/higher-order'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	Image,
 	getAlignmentClasses,
 	Alignment,
@@ -48,6 +48,7 @@ import {
 import { InnerBlocks } from '@wordpress/block-editor'
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const TEMPLATE = variations[ 0 ].innerBlocks
 
@@ -63,10 +64,7 @@ const Edit = props => {
 		hasContainer,
 	} = props.attributes
 
-	useGeneratedCss( props.attributes )
-
 	const {
-		clientId,
 		className, //isHovered,
 	} = props
 
@@ -106,45 +104,25 @@ const Edit = props => {
 	const imageWidthUnit = props.attributes.imageWidthUnit || 'px'
 	const imageHeightUnit = props.attributes.imageHeightUnit || 'px'
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<Image.InspectorControls
-					{ ...props }
-					initialOpen={ true }
-					hasWidth={ blockStyle === 'horizontal' }
-					hasHeight={ hasHeight }
-					widthUnits={ widthUnit }
-					heightUnits={ heightUnit }
-					hasBorderRadius={ false }
-					hasShape={ false }
-					hasShadow={ false }
-					hasAspectRatio={ ! [ 'horizontal', 'full', 'faded' ].includes( blockStyle ) }
-				/>
-				<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
-				<BlockDiv.InspectorControls />
-				<ContainerDiv.InspectorControls sizeSelector=".stk-block-card__content" />
-				<BlockLink.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-card" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
-
-			<CardStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
+			<InspectorControls
+				blockStyle={ blockStyle }
+				hasHeight={ hasHeight }
 			/>
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-card" />
 
 			<BlockDiv
@@ -184,6 +162,42 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Image.InspectorControls
+				// { ...props }
+				initialOpen={ true }
+				hasWidth={ props.blockStyle === 'horizontal' }
+				hasHeight={ props.hasHeight }
+				widthUnits={ widthUnit }
+				heightUnits={ heightUnit }
+				hasBorderRadius={ false }
+				hasShape={ false }
+				hasShadow={ false }
+				hasAspectRatio={ ! [ 'horizontal', 'full', 'faded' ].includes( props.blockStyle ) }
+			/>
+			<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
+			<BlockDiv.InspectorControls />
+			<ContainerDiv.InspectorControls sizeSelector=".stk-block-card__content" />
+			<BlockLink.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-card" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/card/save.js b/src/block/card/save.js
index e6feb4420..75a5005d2 100644
--- a/src/block/card/save.js
+++ b/src/block/card/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { CardStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -72,7 +67,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<CardStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			{ attributes.uniqueId && <ContainerDiv.Content
 				className={ contentClassNames }
diff --git a/src/block/card/style.js b/src/block/card/style.js
index a279cec1a..a755084af 100644
--- a/src/block/card/style.js
+++ b/src/block/card/style.js
@@ -15,82 +15,47 @@ import {
 	Image,
 	Transform,
 } from '~stackable/block-components'
-import { getBlockStyle, useBlockAttributesContext } from '~stackable/hooks'
-import { BlockCssCompiler } from '~stackable/components'
+import { getBlockStyle } from '~stackable/hooks'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const containerDivOptions = {
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Column.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles, {
 	sizeSelector: '.stk-block-card__content',
 	sizeHorizontalAlignRule: 'margin',
 	wrapperSelector: '.%s-container',
-}
-
-export const CardStyles = memo( props => {
-	const className = useBlockAttributesContext( attributes => attributes.className )
-	const blockStyle = getBlockStyle( variations, className )
-
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Column.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ContainerDiv.Style { ...props } { ...containerDivOptions } />
-			<Image.Style
-				{ ...props }
-				enableWidth={ blockStyle.name === 'horizontal' }
-				widthUnitCallback={ ( unit, device ) => {
-					if ( blockStyle.name === 'horizontal' ) {
-						if ( device === 'tablet' ) {
-							return 'px'
-						}
-					}
-					return unit
-				} }
-				enableAspectRatio={ ! [ 'horizontal', 'full', 'faded' ].includes( blockStyle.name ) }
-				selector=".stk-block-card__image"
-			/>
-		</>
-	)
+} )
+Image.addStyles( blockStyles, {
+	enableWidthCallback: getAttribute => {
+		const className = getAttribute( 'className' )
+		const blockStyle = getBlockStyle( variations, className )
+		return blockStyle.name === 'horizontal'
+	},
+	editorWidthUnitCallback: ( unit, device, state, getAttribute ) => {
+		const className = getAttribute( 'className' )
+		const blockStyle = getBlockStyle( variations, className )
+		if ( blockStyle.name === 'horizontal' ) {
+			if ( device === 'tablet' ) {
+				return 'px'
+			}
+		}
+		return unit
+	},
+	enableAspectRatio: getAttribute => {
+		const className = getAttribute( 'className' )
+		const blockStyle = getBlockStyle( variations, className )
+		return ! [ 'horizontal', 'full', 'faded' ].includes( blockStyle.name )
+	},
+	selector: '.stk-block-card__image',
 } )
 
-CardStyles.defaultProps = {
-	version: '',
-}
-
-CardStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	const blockStyle = getBlockStyle( variations, props.attributes.className )
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Column.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } { ...containerDivOptions } />
-			<Image.Style.Content
-				{ ...props }
-				enableWidth={ blockStyle.name === 'horizontal' }
-				enableAspectRatio={ ! [ 'horizontal', 'full', 'faded' ].includes( blockStyle.name ) }
-				selector=".stk-block-card__image"
-			/>
-		</BlockCssCompiler>
-	)
-}
-
-CardStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/carousel/edit.js b/src/block/carousel/edit.js
index a7fc614db..4f11b1035 100644
--- a/src/block/carousel/edit.js
+++ b/src/block/carousel/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -24,10 +24,10 @@ import {
 	ColorPaletteControl,
 	InspectorAdvancedControls,
 	AdvancedTextControl,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	MarginBottom,
 	getRowClasses,
 	Alignment,
@@ -55,7 +55,7 @@ import {
  * WordPress dependencies
  */
 import {
-	useState, useRef, useEffect,
+	useState, useRef, useEffect, memo,
 } from '@wordpress/element'
 import { compose } from '@wordpress/compose'
 import { __, sprintf } from '@wordpress/i18n'
@@ -73,13 +73,10 @@ const TEMPLATE = [
 const Edit = props => {
 	const {
 		className,
-		clientId,
 		attributes,
 		setAttributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const rowClass = getRowClasses( props.attributes )
 	const separatorClass = getSeparatorClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
@@ -252,401 +249,38 @@ const Edit = props => {
 		}
 	}, [ maxSlides, activeSlide ] )
 
-	const sizeControlSpacingProps = {
-		enableMargin: false,
-	}
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<InspectorLayoutControls>
-					<ColumnsControl
-						label={ __( 'Slides', i18n ) }
-						sliderMax={ 10 }
-					/>
-					<AdvancedToolbarControl
-						label={ __( 'Carousel Type', i18n ) }
-						controls={ [
-							{
-								value: '',
-								title: __( 'Slide', i18n ),
-							},
-							{
-								value: 'fade',
-								title: __( 'Fade', i18n ),
-							},
-						] }
-						attribute="carouselType"
-					/>
-					{ carouselType === 'slide' &&
-						<AdvancedToggleControl
-							label={ __( 'Infinite Scrolling', i18n ) }
-							checked={ attributes.infiniteScroll }
-							onChange={ infiniteScroll => setAttributes( { infiniteScroll } ) }
-							defaultValue={ false }
-							help={ __( 'Only visible in the frontend.', i18n ) }
-						/>
-					}
-					{ carouselType === 'slide' && (
-						<>
-							<AdvancedRangeControl
-								label={ __( 'Slides to Show', i18n ) }
-								sliderMax={ 4 }
-								min={ 1 }
-								attribute="slidesToShow"
-								placeholder="1"
-								responsive="all"
-							/>
-							<AdvancedRangeControl
-								label={ __( 'Slide Gap', i18n ) }
-								sliderMax={ 100 }
-								min={ 0 }
-								attribute="slideColumnGap"
-								placeholder="30"
-								responsive="all"
-							/>
-						</>
-					) }
-					{ carouselType === 'fade' && (
-						<AdvancedRangeControl
-							label={ __( 'Fade duration', i18n ) }
-							attribute="fadeDuration"
-							sliderMax={ 2 }
-							min={ 0 }
-							step={ 0.1 }
-							placeholder="0.3"
-						/>
-					) }
-					<ControlSeparator />
-
-					<AdvancedToggleControl
-						label={ __( 'Autoplay', i18n ) }
-						checked={ attributes.autoplay }
-						onChange={ autoplay => setAttributes( { autoplay } ) }
-						defaultValue={ true }
-					/>
-					{ attributes.autoplay && (
-						<AdvancedRangeControl
-							label={ __( 'Speed (ms)', i18n ) }
-							attribute="autoplaySpeed"
-							sliderMax={ 6000 }
-							sliderMin={ 1000 }
-							min={ 0 }
-							step={ 100 }
-							placeholder="4000"
-						/>
-					) }
-					<ControlSeparator />
-				</InspectorLayoutControls>
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'Arrows', i18n ) }
-						id="arrows"
-						hasToggle={ true }
-						checked={ attributes.showArrows }
-						onChange={ showArrows => setAttributes( { showArrows } ) }
-					>
-						<IconControl
-							label={ __( 'Previous Slide Icon', i18n ) }
-							value={ attributes.arrowIconPrev || defaultIcon.prev }
-							defaultValue={ defaultIcon.prev }
-							onChange={ arrowIconPrev => {
-								if ( arrowIconPrev === defaultIcon.prev ) {
-									setAttributes( { arrowIconPrev: '' } )
-								} else {
-									setAttributes( { arrowIconPrev } )
-								}
-								 } }
-						/>
-						<IconControl
-							label={ __( 'Next Slide Icon', i18n ) }
-							value={ attributes.arrowIconNext || defaultIcon.next }
-							defaultValue={ defaultIcon.next }
-							onChange={ arrowIconNext => {
-								if ( arrowIconNext === defaultIcon.next ) {
-									setAttributes( { arrowIconNext: '' } )
-								} else {
-									setAttributes( { arrowIconNext } )
-								}
-								 } }
-						/>
-						<AdvancedToolbarControl
-							label={ __( 'Arrow Position', i18n ) }
-							attribute="arrowPosition"
-							controls={ [
-								{ value: '', title: __( 'Inside', i18n ) },
-								{ value: 'outside', title: __( 'Outside', i18n ) },
-							] }
-							onChange={ arrowPosition => {
-								setAttributes( {
-									arrowPosition,
-									arrowJustify: '',
-									arrowAlign: '',
-								} )
-							} }
-						/>
-						<AdvancedToolbarControl
-							label={ sprintf( __( '%s Justify', i18n ), __( 'Button', i18n ) ) }
-							attribute="arrowJustify"
-							controls="flex-horizontal-alt"
-							placeholder="space-between"
-							disabled={ attributes.arrowPosition === 'outside' && [ '', 'center' ].includes( attributes.arrowAlign ) ? [ 'flex-start', 'center', 'flex-end' ] : [] }
-						/>
-						<AdvancedToolbarControl
-							label={ sprintf( __( '%s Alignment', i18n ), __( 'Button', i18n ) ) }
-							attribute="arrowAlign"
-							controls="vertical"
-							placeholder="center"
-							disabled={ attributes.arrowPosition === 'outside' && [ 'flex-start', 'center', 'flex-end' ].includes( attributes.arrowJustify ) ? [ 'center' ] : [] }
-							onChange={ arrowAlign => {
-								if ( ! arrowAlign && attributes.arrowPosition === 'outside' ) {
-									setAttributes( {
-										arrowAlign,
-										arrowJustify: '',
-									} )
-								} else {
-									setAttributes( { arrowAlign } )
-								}
-							} }
-						/>
-						<AdvancedRangeControl
-							label={ sprintf( __( '%s Offset', i18n ), __( 'Button', i18n ) ) }
-							attribute="arrowButtonOffset"
-							sliderMin={ attributes.arrowPosition === 'outside' ? 0 : -100 }
-							sliderMax={ 100 }
-							responsive="all"
-							placeholder="12"
-						/>
-						{ [ 'flex-start', 'center', 'flex-end' ].includes( attributes.arrowJustify ) &&
-							<AdvancedRangeControl
-								label={ __( 'Button Gap', i18n ) }
-								attribute="arrowButtonGap"
-								min={ 0 }
-								sliderMax={ 100 }
-								responsive="all"
-								placeholder="12"
-							/>
-						}
-						<ControlSeparator />
-						<ColorPaletteControl
-							label={ sprintf( __( '%s Color', i18n ), __( 'Button', i18n ) ) }
-							attribute="arrowButtonColor"
-							hover="all"
-						/>
-						<ColorPaletteControl
-							label={ sprintf( __( '%s Color', i18n ), __( 'Icon', i18n ) ) }
-							attribute="arrowIconColor"
-							hover="all"
-						/>
-						<AdvancedRangeControl
-							label={ sprintf( __( '%s Width', i18n ), __( 'Button', i18n ) ) }
-							attribute="arrowWidth"
-							units={ [ 'px', '%' ] }
-							sliderMax={ [ 200, 100 ] }
-							min={ [ 0, 0 ] }
-							responsive="all"
-							placeholder="40"
-						/>
-						<AdvancedRangeControl
-							label={ sprintf( __( '%s Height', i18n ), __( 'Button', i18n ) ) }
-							attribute="arrowHeight"
-							units={ [ 'px', '%' ] }
-							sliderMax={ [ 200, 100 ] }
-							min={ [ 0, 0 ] }
-							responsive="all"
-							placeholder="40"
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Border Radius', i18n ) }
-							attribute="arrowBorderRadius"
-							sliderMax={ Math.max( attributes.arrowHeight, attributes.arrowWidth, 40 ) }
-							min={ 0 }
-							placeholder="40"
-						/>
-						<AdvancedRangeControl
-							label={ sprintf( __( '%s Size', i18n ), __( 'Icon', i18n ) ) }
-							attribute="arrowIconSize"
-							sliderMax={ 100 }
-							min={ 0 }
-							responsive="all"
-							placeholder="16"
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Opacity', i18n ) }
-							attribute="arrowOpacity"
-							hover="all"
-							min={ 0 }
-							max={ 1 }
-							step={ 0.01 }
-							placeholder="0.9"
-						/>
-						<AdvancedToggleControl
-							label={ sprintf(
-								// Translators: %s is the name of the setting. e.g. "Show arrows on mobile".
-								__( 'Show %s on mobile', i18n ),
-								// Translators: lower caps "arrows" is the name of the setting.
-								__( 'arrows', i18n )
-							) }
-							checked={ attributes.showArrowsOnMobile }
-							onChange={ showArrowsOnMobile => setAttributes( { showArrowsOnMobile } ) }
-							defaultValue={ true }
-						/>
-					</PanelAdvancedSettings>
-
-					<PanelAdvancedSettings
-						title={ __( 'Dots', i18n ) }
-						id="dots"
-						hasToggle={ true }
-						checked={ attributes.showDots }
-						onChange={ showDots => setAttributes( { showDots } ) }
-					>
-
-						<AdvancedToolbarControl
-							label={ sprintf( __( '%s Justify', i18n ), __( 'Dots', i18n ) ) }
-							attribute="dotsJustify"
-							controls="horizontal"
-							placeholder="center"
-						/>
-						<AdvancedRangeControl
-							label={ sprintf( __( '%s Offset', i18n ), __( 'Dots', i18n ) ) }
-							attribute="dotsOffset"
-							sliderMin={ -100 }
-							sliderMax={ 100 }
-							responsive="all"
-							placeholder="12"
-						/>
-						<ControlSeparator />
-						<AdvancedToolbarControl
-							label={ __( 'Dot Style', i18n ) }
-							attribute="dotsStyle"
-							controls={ [
-								{ value: '', title: __( 'Solid', i18n ) },
-								{ value: 'outline', title: __( 'Outline', i18n ) },
-							] }
-							isSmall
-						/>
-						<ColorPaletteControl
-							label={ sprintf( __( '%s Color', i18n ), __( 'Dot', i18n ) ) }
-							attribute="dotsColor"
-							hover="all"
-						/>
-						<ColorPaletteControl
-							label={ sprintf( __( '%s Color', i18n ), __( 'Active Dot', i18n ) ) }
-							attribute="dotsActiveColor"
-						/>
-						<AdvancedRangeControl
-							label={ sprintf( __( '%s Size', i18n ), __( 'Dot', i18n ) ) }
-							attribute="dotsSize"
-							sliderMin={ 1 }
-							sliderMax={ 40 }
-							placeholder="8"
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Border Radius', i18n ) }
-							attribute="dotsBorderRadius"
-							sliderMax={ attributes.dotsSize || 8 }
-							min={ 0 }
-							placeholder={ attributes.dotsSize || '8' }
-						/>
-						<AdvancedRangeControl
-							label={ sprintf( __( '%s Gap', i18n ), __( 'Dots', i18n ) ) }
-							attribute="dotsGap"
-							sliderMin={ 0 }
-							sliderMax={ 40 }
-							placeholder="16"
-							help={ ( attributes.dotsSize || 8 ) + ( attributes.dotsGap || 16 ) < 24 ? sprintf( __( 'To improve accessibility, the clickable area of the dots will not go below %s.', i18n ), '24px' ) : undefined }
-						/>
-						<ControlSeparator />
-						<AdvancedRangeControl
-							label={ sprintf( __( '%s Width', i18n ), __( 'Active Dot', i18n ) ) }
-							attribute="dotsActiveWidth"
-							sliderMin={ 1 }
-							sliderMax={ 40 }
-							placeholder="30"
-						/>
-						<AdvancedRangeControl
-							label={ sprintf( __( '%s Height', i18n ), __( 'Active Dot', i18n ) ) }
-							attribute="dotsActiveHeight"
-							sliderMin={ 1 }
-							sliderMax={ 40 }
-							placeholder={ attributes.dotsSize || '8' }
-						/>
-
-						<AdvancedToggleControl
-							label={ sprintf(
-								// Translators: %s is the name of the setting. e.g. "Show arrows on mobile".
-								__( 'Show %s on mobile', i18n ),
-								// Translators: lower caps "dots" is the name of the setting.
-								__( 'dots', i18n )
-							) }
-							checked={ attributes.showDotsOnMobile }
-							onChange={ showDotsOnMobile => setAttributes( { showDotsOnMobile } ) }
-							defaultValue={ true }
-						/>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<ContentAlign.InspectorControls />
-				<Alignment.InspectorControls />
-				<BlockDiv.InspectorControls sizeControlSpacingProps={ sizeControlSpacingProps } />
-				<Separator.InspectorControls />
-				<Advanced.InspectorControls />
-
-				<InspectorAdvancedControls>
-					<PanelAdvancedSettings
-						title={ __( 'Accessibility', i18n ) }
-						id="accessibility"
-					>
-						<AdvancedTextControl
-							label={ sprintf(
-								// Translators: %s is the name of the setting. e.g. "Previous Slide".
-								__( '%s label', i18n ),
-								__( 'Previous slide', i18n )
-							) }
-							attribute="ariaLabelPrev"
-							placeholder="Previous slide"
-						/>
-						<AdvancedTextControl
-							label={ sprintf(
-								// Translators: %s is the name of the setting. e.g. "Previous Slide".
-								__( '%s label', i18n ),
-								__( 'Next slide', i18n )
-							) }
-							attribute="ariaLabelNext"
-							placeholder="Next slide"
-						/>
-						<AdvancedTextControl
-							label={ sprintf(
-								// Translators: %s is the name of the setting. e.g. "Previous Slide".
-								__( '%s label', i18n ),
-								__( 'Slide', i18n )
-							) }
-							attribute="ariaLabelSlide"
-							placeholder="Slide %%d"
-							help={ __( 'Use %%d to show the slide number.', i18n ) }
-						/>
-						<AdvancedTextControl
-							label={ sprintf(
-								// Translators: %s is the name of the setting. e.g. "Previous Slide".
-								__( '%s label', i18n ),
-								// Translators: This is for the "Slide 1 of 3" option label.
-								__( 'Slide N of N', i18n )
-							) }
-							attribute="ariaLabelSlideOf"
-							placeholder="Slide %%d of %%d"
-							help={ __( 'Use two %%d to show the slide number and the total slides. e.g. Slide 1 of 3.', i18n ) }
-						/>
-					</PanelAdvancedSettings>
-				</InspectorAdvancedControls>
-
-				<Transform.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-carousel" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
+			<InspectorControls
+				carouselType={ carouselType }
+				setAttributes={ setAttributes }
+				infiniteScroll={ attributes.infiniteScroll }
+				autoplay={ attributes.autoplay }
+				showArrows={ attributes.showArrows }
+				arrowIconPrev={ attributes.arrowIconPrev }
+				arrowIconNext={ attributes.arrowIconNext }
+				arrowPosition={ attributes.arrowPosition }
+				arrowJustify={ attributes.arrowJustify }
+				arrowHeight={ attributes.arrowHeight }
+				arrowWidth={ attributes.arrowWidth }
+				showArrowsOnMobile={ attributes.showArrowsOnMobile }
+				showDots={ attributes.showDots }
+				dotsSize={ attributes.dotsSize }
+				dotsGap={ attributes.dotsGap }
+				showDotsOnMobile={ attributes.showDotsOnMobile }
+				defaultIcon={ defaultIcon }
+			/>
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -654,11 +288,7 @@ const Edit = props => {
 				attributes={ props.attributes }
 				className={ blockClassNames }
 			>
-				<BlockStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-carousel" />
 
 				{ ! hasInnerBlocks && <GroupPlaceholder /> }
@@ -753,6 +383,404 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	const sizeControlSpacingProps = {
+		enableMargin: false,
+	}
+	return (
+		<>
+			<InspectorTabs />
+
+			<InspectorLayoutControls>
+				<ColumnsControl
+					label={ __( 'Slides', i18n ) }
+					sliderMax={ 10 }
+				/>
+				<AdvancedToolbarControl
+					label={ __( 'Carousel Type', i18n ) }
+					controls={ [
+						{
+							value: '',
+							title: __( 'Slide', i18n ),
+						},
+						{
+							value: 'fade',
+							title: __( 'Fade', i18n ),
+						},
+					] }
+					attribute="carouselType"
+				/>
+				{ props.carouselType === 'slide' &&
+					<AdvancedToggleControl
+						label={ __( 'Infinite Scrolling', i18n ) }
+						checked={ props.infiniteScroll }
+						onChange={ infiniteScroll => props.setAttributes( { infiniteScroll } ) }
+						defaultValue={ false }
+						help={ __( 'Only visible in the frontend.', i18n ) }
+					/>
+				}
+				{ props.carouselType === 'slide' && (
+					<>
+						<AdvancedRangeControl
+							label={ __( 'Slides to Show', i18n ) }
+							sliderMax={ 4 }
+							min={ 1 }
+							attribute="slidesToShow"
+							placeholder="1"
+							responsive="all"
+						/>
+						<AdvancedRangeControl
+							label={ __( 'Slide Gap', i18n ) }
+							sliderMax={ 100 }
+							min={ 0 }
+							attribute="slideColumnGap"
+							placeholder="30"
+							responsive="all"
+						/>
+					</>
+				) }
+				{ props.carouselType === 'fade' && (
+					<AdvancedRangeControl
+						label={ __( 'Fade duration', i18n ) }
+						attribute="fadeDuration"
+						sliderMax={ 2 }
+						min={ 0 }
+						step={ 0.1 }
+						placeholder="0.3"
+					/>
+				) }
+				<ControlSeparator />
+
+				<AdvancedToggleControl
+					label={ __( 'Autoplay', i18n ) }
+					checked={ props.autoplay }
+					onChange={ autoplay => props.setAttributes( { autoplay } ) }
+					defaultValue={ true }
+				/>
+				{ props.autoplay && (
+					<AdvancedRangeControl
+						label={ __( 'Speed (ms)', i18n ) }
+						attribute="autoplaySpeed"
+						sliderMax={ 6000 }
+						sliderMin={ 1000 }
+						min={ 0 }
+						step={ 100 }
+						placeholder="4000"
+					/>
+				) }
+				<ControlSeparator />
+			</InspectorLayoutControls>
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'Arrows', i18n ) }
+					id="arrows"
+					hasToggle={ true }
+					checked={ props.showArrows }
+					onChange={ showArrows => props.setAttributes( { showArrows } ) }
+				>
+					<IconControl
+						label={ __( 'Previous Slide Icon', i18n ) }
+						value={ props.arrowIconPrev || props.defaultIcon.prev }
+						defaultValue={ props.defaultIcon.prev }
+						onChange={ arrowIconPrev => {
+							if ( arrowIconPrev === props.defaultIcon.prev ) {
+								props.setAttributes( { arrowIconPrev: '' } )
+							} else {
+								props.setAttributes( { arrowIconPrev } )
+							}
+								 } }
+					/>
+					<IconControl
+						label={ __( 'Next Slide Icon', i18n ) }
+						value={ props.arrowIconNext || props.defaultIcon.next }
+						defaultValue={ props.defaultIcon.next }
+						onChange={ arrowIconNext => {
+							if ( arrowIconNext === props.defaultIcon.next ) {
+								props.setAttributes( { arrowIconNext: '' } )
+							} else {
+								props.setAttributes( { arrowIconNext } )
+							}
+								 } }
+					/>
+					<AdvancedToolbarControl
+						label={ __( 'Arrow Position', i18n ) }
+						attribute="arrowPosition"
+						controls={ [
+							{ value: '', title: __( 'Inside', i18n ) },
+							{ value: 'outside', title: __( 'Outside', i18n ) },
+						] }
+						onChange={ arrowPosition => {
+							props.setAttributes( {
+								arrowPosition,
+								arrowJustify: '',
+								arrowAlign: '',
+							} )
+						} }
+					/>
+					<AdvancedToolbarControl
+						label={ sprintf( __( '%s Justify', i18n ), __( 'Button', i18n ) ) }
+						attribute="arrowJustify"
+						controls="flex-horizontal-alt"
+						placeholder="space-between"
+						disabled={ props.arrowPosition === 'outside' && [ '', 'center' ].includes( props.arrowAlign ) ? [ 'flex-start', 'center', 'flex-end' ] : [] }
+					/>
+					<AdvancedToolbarControl
+						label={ sprintf( __( '%s Alignment', i18n ), __( 'Button', i18n ) ) }
+						attribute="arrowAlign"
+						controls="vertical"
+						placeholder="center"
+						disabled={ props.arrowPosition === 'outside' && [ 'flex-start', 'center', 'flex-end' ].includes( props.arrowJustify ) ? [ 'center' ] : [] }
+						onChange={ arrowAlign => {
+							if ( ! arrowAlign && props.arrowPosition === 'outside' ) {
+								props.setAttributes( {
+									arrowAlign,
+									arrowJustify: '',
+								} )
+							} else {
+								props.setAttributes( { arrowAlign } )
+							}
+						} }
+					/>
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Offset', i18n ), __( 'Button', i18n ) ) }
+						attribute="arrowButtonOffset"
+						sliderMin={ props.arrowPosition === 'outside' ? 0 : -100 }
+						sliderMax={ 100 }
+						responsive="all"
+						placeholder="12"
+					/>
+					{ [ 'flex-start', 'center', 'flex-end' ].includes( props.arrowJustify ) &&
+						<AdvancedRangeControl
+							label={ __( 'Button Gap', i18n ) }
+							attribute="arrowButtonGap"
+							min={ 0 }
+							sliderMax={ 100 }
+							responsive="all"
+							placeholder="12"
+						/>
+					}
+					<ControlSeparator />
+					<ColorPaletteControl
+						label={ sprintf( __( '%s Color', i18n ), __( 'Button', i18n ) ) }
+						attribute="arrowButtonColor"
+						hover="all"
+					/>
+					<ColorPaletteControl
+						label={ sprintf( __( '%s Color', i18n ), __( 'Icon', i18n ) ) }
+						attribute="arrowIconColor"
+						hover="all"
+					/>
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Width', i18n ), __( 'Button', i18n ) ) }
+						attribute="arrowWidth"
+						units={ [ 'px', '%' ] }
+						sliderMax={ [ 200, 100 ] }
+						min={ [ 0, 0 ] }
+						responsive="all"
+						placeholder="40"
+					/>
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Height', i18n ), __( 'Button', i18n ) ) }
+						attribute="arrowHeight"
+						units={ [ 'px', '%' ] }
+						sliderMax={ [ 200, 100 ] }
+						min={ [ 0, 0 ] }
+						responsive="all"
+						placeholder="40"
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Border Radius', i18n ) }
+						attribute="arrowBorderRadius"
+						sliderMax={ Math.max( props.arrowHeight, props.arrowWidth, 40 ) }
+						min={ 0 }
+						placeholder="40"
+					/>
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Size', i18n ), __( 'Icon', i18n ) ) }
+						attribute="arrowIconSize"
+						sliderMax={ 100 }
+						min={ 0 }
+						responsive="all"
+						placeholder="16"
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Opacity', i18n ) }
+						attribute="arrowOpacity"
+						hover="all"
+						min={ 0 }
+						max={ 1 }
+						step={ 0.01 }
+						placeholder="0.9"
+					/>
+					<AdvancedToggleControl
+						label={ sprintf(
+							// Translators: %s is the name of the setting. e.g. "Show arrows on mobile".
+							__( 'Show %s on mobile', i18n ),
+							// Translators: lower caps "arrows" is the name of the setting.
+							__( 'arrows', i18n )
+						) }
+						checked={ props.showArrowsOnMobile }
+						onChange={ showArrowsOnMobile => props.setAttributes( { showArrowsOnMobile } ) }
+						defaultValue={ true }
+					/>
+				</PanelAdvancedSettings>
+
+				<PanelAdvancedSettings
+					title={ __( 'Dots', i18n ) }
+					id="dots"
+					hasToggle={ true }
+					checked={ props.showDots }
+					onChange={ showDots => props.setAttributes( { showDots } ) }
+				>
+
+					<AdvancedToolbarControl
+						label={ sprintf( __( '%s Justify', i18n ), __( 'Dots', i18n ) ) }
+						attribute="dotsJustify"
+						controls="horizontal"
+						placeholder="center"
+					/>
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Offset', i18n ), __( 'Dots', i18n ) ) }
+						attribute="dotsOffset"
+						sliderMin={ -100 }
+						sliderMax={ 100 }
+						responsive="all"
+						placeholder="12"
+					/>
+					<ControlSeparator />
+					<AdvancedToolbarControl
+						label={ __( 'Dot Style', i18n ) }
+						attribute="dotsStyle"
+						controls={ [
+							{ value: '', title: __( 'Solid', i18n ) },
+							{ value: 'outline', title: __( 'Outline', i18n ) },
+						] }
+						isSmall
+					/>
+					<ColorPaletteControl
+						label={ sprintf( __( '%s Color', i18n ), __( 'Dot', i18n ) ) }
+						attribute="dotsColor"
+						hover="all"
+					/>
+					<ColorPaletteControl
+						label={ sprintf( __( '%s Color', i18n ), __( 'Active Dot', i18n ) ) }
+						attribute="dotsActiveColor"
+					/>
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Size', i18n ), __( 'Dot', i18n ) ) }
+						attribute="dotsSize"
+						sliderMin={ 1 }
+						sliderMax={ 40 }
+						placeholder="8"
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Border Radius', i18n ) }
+						attribute="dotsBorderRadius"
+						sliderMax={ props.dotsSize || 8 }
+						min={ 0 }
+						placeholder={ props.dotsSize || '8' }
+					/>
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Gap', i18n ), __( 'Dots', i18n ) ) }
+						attribute="dotsGap"
+						sliderMin={ 0 }
+						sliderMax={ 40 }
+						placeholder="16"
+						help={ ( props.dotsSize || 8 ) + ( props.dotsGap || 16 ) < 24 ? sprintf( __( 'To improve accessibility, the clickable area of the dots will not go below %s.', i18n ), '24px' ) : undefined }
+					/>
+					<ControlSeparator />
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Width', i18n ), __( 'Active Dot', i18n ) ) }
+						attribute="dotsActiveWidth"
+						sliderMin={ 1 }
+						sliderMax={ 40 }
+						placeholder="30"
+					/>
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Height', i18n ), __( 'Active Dot', i18n ) ) }
+						attribute="dotsActiveHeight"
+						sliderMin={ 1 }
+						sliderMax={ 40 }
+						placeholder={ props.dotsSize || '8' }
+					/>
+
+					<AdvancedToggleControl
+						label={ sprintf(
+							// Translators: %s is the name of the setting. e.g. "Show arrows on mobile".
+							__( 'Show %s on mobile', i18n ),
+							// Translators: lower caps "dots" is the name of the setting.
+							__( 'dots', i18n )
+						) }
+						checked={ props.showDotsOnMobile }
+						onChange={ showDotsOnMobile => props.setAttributes( { showDotsOnMobile } ) }
+						defaultValue={ true }
+					/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+
+			<ContentAlign.InspectorControls />
+			<Alignment.InspectorControls />
+			<BlockDiv.InspectorControls sizeControlSpacingProps={ sizeControlSpacingProps } />
+			<Separator.InspectorControls />
+			<Advanced.InspectorControls />
+
+			<InspectorAdvancedControls>
+				<PanelAdvancedSettings
+					title={ __( 'Accessibility', i18n ) }
+					id="accessibility"
+				>
+					<AdvancedTextControl
+						label={ sprintf(
+							// Translators: %s is the name of the setting. e.g. "Previous Slide".
+							__( '%s label', i18n ),
+							__( 'Previous slide', i18n )
+						) }
+						attribute="ariaLabelPrev"
+						placeholder="Previous slide"
+					/>
+					<AdvancedTextControl
+						label={ sprintf(
+							// Translators: %s is the name of the setting. e.g. "Previous Slide".
+							__( '%s label', i18n ),
+							__( 'Next slide', i18n )
+						) }
+						attribute="ariaLabelNext"
+						placeholder="Next slide"
+					/>
+					<AdvancedTextControl
+						label={ sprintf(
+							// Translators: %s is the name of the setting. e.g. "Previous Slide".
+							__( '%s label', i18n ),
+							__( 'Slide', i18n )
+						) }
+						attribute="ariaLabelSlide"
+						placeholder="Slide %%d"
+						help={ __( 'Use %%d to show the slide number.', i18n ) }
+					/>
+					<AdvancedTextControl
+						label={ sprintf(
+							// Translators: %s is the name of the setting. e.g. "Previous Slide".
+							__( '%s label', i18n ),
+							// Translators: This is for the "Slide 1 of 3" option label.
+							__( 'Slide N of N', i18n )
+						) }
+						attribute="ariaLabelSlideOf"
+						placeholder="Slide %%d of %%d"
+						help={ __( 'Use two %%d to show the slide number and the total slides. e.g. Slide 1 of 3.', i18n ) }
+					/>
+				</PanelAdvancedSettings>
+			</InspectorAdvancedControls>
+
+			<Transform.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-carousel" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/carousel/save.js b/src/block/carousel/save.js
index a58d22ec3..39ce16570 100644
--- a/src/block/carousel/save.js
+++ b/src/block/carousel/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -76,7 +71,7 @@ export const Save = props => {
 			version={ props.version }
 			data-slides-to-show={ attributes.slidesToShow }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Separator.Content attributes={ attributes }>
 				<div className="stk-block-carousel__content-wrapper">
diff --git a/src/block/carousel/style.js b/src/block/carousel/style.js
index 0e5f52c47..753053e5c 100644
--- a/src/block/carousel/style.js
+++ b/src/block/carousel/style.js
@@ -10,289 +10,222 @@ import {
 	Separator,
 	Transform,
 } from '~stackable/block-components'
-import { useBlockAttributesContext } from '~stackable/hooks'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+// import { useBlockAttributesContext } from '~stackable/hooks'
+// import { applyFilters } from '@wordpress/hooks'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-import { applyFilters } from '@wordpress/hooks'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const alignmentOptions = {
-	editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`,
-}
+blockStyles.addBlockStyles( 'slidesToShow', [ {
+	styleRule: '--slides-to-show',
+	attrName: 'slidesToShow',
+	key: 'slidesToShow',
+	responsive: 'all',
+} ] )
 
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.8.0',
-		versionDeprecated: '',
-	}
+blockStyles.addBlockStyles( 'slideColumnGap', [ {
+	styleRule: '--gap',
+	attrName: 'slideColumnGap',
+	key: 'slideColumnGap',
+	format: '%spx',
+	responsive: 'all',
+} ] )
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				styleRule="--slides-to-show"
-				attrName="slidesToShow"
-				key="slidesToShow"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				styleRule="--gap"
-				attrName="slideColumnGap"
-				key="slideColumnGap"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				styleRule="--transition-duration"
-				attrName="fadeDuration"
-				key="fadeDuration"
-				format="%ss"
-			/>
+blockStyles.addBlockStyles( 'fadeDuration', [ {
+	styleRule: '--transition-duration',
+	attrName: 'fadeDuration',
+	key: 'fadeDuration',
+	format: '%ss',
+} ] )
 
-			{ /* Arrows */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__buttons"
-				styleRule="justifyContent"
-				attrName="arrowJustify"
-				key="arrowJustify"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__buttons"
-				styleRule="alignItems"
-				attrName="arrowAlign"
-				key="arrowAlign"
-				enabledCallback={ getAttribute => getAttribute( 'arrowPosition' ) !== 'outside' }
-				dependencies={ [ 'arrowPosition' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				styleRule="--button-offset"
-				attrName="arrowButtonOffset"
-				key="arrowButtonOffset"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				styleRule="--button-gap"
-				attrName="arrowButtonGap"
-				key="arrowButtonGap"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__button"
-				hoverSelector=".stk-block-carousel__button:hover"
-				styleRule="background"
-				attrName="arrowButtonColor"
-				key="arrowButtonColor"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__button"
-				hoverSelector=".stk-block-carousel__button:hover"
-				styleRule="fill"
-				attrName="arrowIconColor"
-				key="arrowIconColor"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__button svg.ugb-custom-icon :is(g,path,rect,polygon,ellipse)"
-				hoverSelector=".stk-block-carousel__button svg.ugb-custom-icon :is(g,path,rect,polygon,ellipse):hover"
-				styleRule="fill"
-				attrName="arrowIconColor"
-				key="arrowIconColor"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				styleRule="--button-width"
-				attrName="arrowWidth"
-				key="arrowWidth"
-				hasUnits="px"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				styleRule="--button-height"
-				attrName="arrowHeight"
-				key="arrowHeight"
-				hasUnits="px"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__button"
-				styleRule="borderRadius"
-				attrName="arrowBorderRadius"
-				key="arrowBorderRadius"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__button svg"
-				styleRule="width"
-				attrName="arrowIconSize"
-				key="arrowIconSize-width"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__button svg"
-				styleRule="height"
-				attrName="arrowIconSize"
-				key="arrowIconSize-height"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__button"
-				hoverSelector=".stk-block-carousel__button:hover"
-				styleRule="opacity"
-				attrName="arrowOpacity"
-				key="arrowOpacity"
-				hover="all"
-			/>
+{ /* Arrows */ }
+blockStyles.addBlockStyles( 'arrowJustify', [ {
+	selector: '.stk-block-carousel__buttons',
+	styleRule: 'justifyContent',
+	attrName: 'arrowJustify',
+	key: 'arrowJustify',
+} ] )
 
-			{ /* Dots */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__dots"
-				styleRule="justifyContent"
-				attrName="dotsJustify"
-				key="dotsJustify"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__dots"
-				styleRule="--dot-offset"
-				attrName="dotsOffset"
-				key="dotsOffset"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				styleRule="--dot-gap"
-				attrName="dotsGap"
-				key="dotsGap"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__dot"
-				hoverSelector=".stk-block-carousel__dot"
-				styleRule="--dot-color"
-				hoverStyleRule="--dot-color-hover"
-				attrName="dotsColor"
-				key="dotsColor"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__dot.stk-block-carousel__dot--active:before"
-				styleRule="backgroundColor"
-				attrName="dotsActiveColor"
-				key="dotsActiveColor"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				styleRule="--dot-size"
-				attrName="dotsSize"
-				key="dotsSize"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-carousel__dot:before"
-				styleRule="borderRadius"
-				attrName="dotsBorderRadius"
-				key="dotsBorderRadius"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				styleRule="--dot-active-width"
-				attrName="dotsActiveWidth"
-				key="dotsActiveWidth"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				styleRule="--dot-active-height"
-				attrName="dotsActiveHeight"
-				key="dotsActiveHeight"
-				format="%spx"
-			/>
-		</>
-	)
-}
+blockStyles.addBlockStyles( 'arrowAlign', [ {
+	selector: '.stk-block-carousel__buttons',
+	styleRule: 'alignItems',
+	attrName: 'arrowAlign',
+	key: 'arrowAlign',
+	enabledCallback: getAttribute => getAttribute( 'arrowPosition' ) !== 'outside',
+	dependencies: [ 'arrowPosition' ],
+} ] )
 
-const BlockStyles = memo( props => {
-	const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
-	const numColumns = ( columnArrangement || '' ).split( ',' ).length
+blockStyles.addBlockStyles( 'arrowButtonOffset', [ {
+	styleRule: '--button-offset',
+	attrName: 'arrowButtonOffset',
+	key: 'arrowButtonOffset',
+	format: '%spx',
+	responsive: 'all',
+} ] )
 
-	const ColumnOrderStyle = applyFilters( 'stackable.block-component.columns.column-order-style', null )
+blockStyles.addBlockStyles( 'arrowButtonGap', [ {
+	styleRule: '--button-gap',
+	attrName: 'arrowButtonGap',
+	key: 'arrowButtonGap',
+	format: '%spx',
+	responsive: 'all',
+} ] )
 
-	return (
-		<>
-			<Alignment.Style { ...props } { ...alignmentOptions } />
-			<BlockDiv.Style { ...props } />
-			<MarginBottom.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Separator.Style { ...props } />
-			<Styles { ...props } />
-			{ ColumnOrderStyle && <ColumnOrderStyle { ...props } numColumns={ numColumns } /> }
-		</>
-	)
-} )
+blockStyles.addBlockStyles( 'arrowButtonColor', [ {
+	selector: '.stk-block-carousel__button',
+	hoverSelector: '.stk-block-carousel__button:hover',
+	styleRule: 'background',
+	attrName: 'arrowButtonColor',
+	key: 'arrowButtonColor',
+	hover: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'arrowIconColor', [ {
+	selector: '.stk-block-carousel__button',
+	hoverSelector: '.stk-block-carousel__button:hover',
+	styleRule: 'fill',
+	attrName: 'arrowIconColor',
+	key: 'arrowIconColor',
+	hover: 'all',
+}, {
+	selector: '.stk-block-carousel__button svg.ugb-custom-icon :is(g,path,rect,polygon,ellipse)',
+	hoverSelector: '.stk-block-carousel__button svg.ugb-custom-icon :is(g,path,rect,polygon,ellipse):hover',
+	styleRule: 'fill',
+	attrName: 'arrowIconColor',
+	key: 'arrowIconColor',
+	hover: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'arrowWidth', [ {
+	styleRule: '--button-width',
+	attrName: 'arrowWidth',
+	key: 'arrowWidth',
+	hasUnits: 'px',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'arrowHeight', [ {
+	styleRule: '--button-height',
+	attrName: 'arrowHeight',
+	key: 'arrowHeight',
+	hasUnits: 'px',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'arrowBorderRadius', [ {
+	selector: '.stk-block-carousel__button',
+	styleRule: 'borderRadius',
+	attrName: 'arrowBorderRadius',
+	key: 'arrowBorderRadius',
+	format: '%spx',
+} ] )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
+blockStyles.addBlockStyles( 'arrowIconSize', [ {
+	selector: '.stk-block-carousel__button svg',
+	styleRule: 'width',
+	attrName: 'arrowIconSize',
+	key: 'arrowIconSize-width',
+	format: '%spx',
+	responsive: 'all',
+}, {
+	selector: '.stk-block-carousel__button svg',
+	styleRule: 'height',
+	attrName: 'arrowIconSize',
+	key: 'arrowIconSize-height',
+	format: '%spx',
+	responsive: 'all',
+} ] )
 
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
+blockStyles.addBlockStyles( 'arrowOpacity', [ {
+	selector: '.stk-block-carousel__button',
+	hoverSelector: '.stk-block-carousel__button:hover',
+	styleRule: 'opacity',
+	attrName: 'arrowOpacity',
+	key: 'arrowOpacity',
+	hover: 'all',
+} ] )
 
-	const numColumns = ( props.attributes.columnArrangementMobile || props.attributes.columnArrangementTablet || '' ).split( ',' ).length
-	const ColumnOrderStyle = applyFilters( 'stackable.block-component.columns.column-order-style', null )
+{ /* Dots */ }
+blockStyles.addBlockStyles( 'dotsJustify', [ {
+	selector: '.stk-block-carousel__dots',
+	styleRule: 'justifyContent',
+	attrName: 'dotsJustify',
+	key: 'dotsJustify',
+} ] )
 
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } { ...alignmentOptions } />
-			<BlockDiv.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Separator.Style.Content { ...props } />
-			<Styles { ...props } />
-			{ ColumnOrderStyle && <ColumnOrderStyle { ...props } numColumns={ numColumns } /> }
-		</BlockCssCompiler>
-	)
-}
+blockStyles.addBlockStyles( 'dotsOffset', [ {
+	selector: '.stk-block-carousel__dots',
+	styleRule: '--dot-offset',
+	attrName: 'dotsOffset',
+	key: 'dotsOffset',
+	format: '%spx',
+	responsive: 'all',
+} ] )
 
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+blockStyles.addBlockStyles( 'dotsGap', [ {
+	styleRule: '--dot-gap',
+	attrName: 'dotsGap',
+	key: 'dotsGap',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'dotsColor', [ {
+	selector: '.stk-block-carousel__dot',
+	hoverSelector: '.stk-block-carousel__dot',
+	styleRule: '--dot-color',
+	hoverStyleRule: '--dot-color-hover',
+	attrName: 'dotsColor',
+	key: 'dotsColor',
+	hover: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'dotsActiveColor', [ {
+	selector: '.stk-block-carousel__dot.stk-block-carousel__dot--active:before',
+	styleRule: 'backgroundColor',
+	attrName: 'dotsActiveColor',
+	key: 'dotsActiveColor',
+} ] )
+
+blockStyles.addBlockStyles( 'dotsSize', [ {
+	styleRule: '--dot-size',
+	attrName: 'dotsSize',
+	key: 'dotsSize',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'dotsBorderRadius', [ {
+	selector: '.stk-block-carousel__dot:before',
+	styleRule: 'borderRadius',
+	attrName: 'dotsBorderRadius',
+	key: 'dotsBorderRadius',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'dotsActiveWidth', [ {
+	styleRule: '--dot-active-width',
+	attrName: 'dotsActiveWidth',
+	key: 'dotsActiveWidth',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'dotsActiveHeight', [ {
+	styleRule: '--dot-active-height',
+	attrName: 'dotsActiveHeight',
+	key: 'dotsActiveHeight',
+	format: '%spx',
+} ] )
+
+Alignment.addStyles( blockStyles, {
+	editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`,
+} )
+BlockDiv.addStyles( blockStyles )
+MarginBottom.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+Separator.addStyles( blockStyles )
 
-export default BlockStyles
+export default blockStyles
diff --git a/src/block/column/edit.js b/src/block/column/edit.js
index 77cacedda..e42354432 100644
--- a/src/block/column/edit.js
+++ b/src/block/column/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -13,8 +13,8 @@ import {
 	FourRangeControl,
 	InspectorLayoutControls,
 	InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
-import { useBlockContext } from '~stackable/hooks'
 import {
 	withBlockAttributeContext,
 	withBlockWrapperIsHovered,
@@ -24,7 +24,6 @@ import {
 	Column,
 	getColumnClasses,
 	BlockDiv,
-	useGeneratedCss,
 	getAlignmentClasses,
 	Alignment,
 	Advanced,
@@ -47,27 +46,47 @@ import { compose } from '@wordpress/compose'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { applyFilters } from '@wordpress/hooks'
+import { useSelect } from '@wordpress/data'
+import { memo } from '@wordpress/element'
 
-const Edit = props => {
-	const {
-		hasInnerBlocks, isOnlyBlock, parentBlock,
-	} = useBlockContext()
+const ButtonBlockAppender = memo( props => {
+	return <InnerBlocks.ButtonBlockAppender { ...props } />
+} )
 
+const Edit = props => {
 	const {
+		clientId,
 		className,
 		isHovered,
-		clientId,
 	} = props
 
-	useGeneratedCss( props.attributes )
+	const {
+		hasInnerBlocks, isOnlyBlock, useZeroColumnSpacing, parentBlock,
+	} = useSelect(
+		select => {
+			const {
+				getBlockOrder, getBlockRootClientId, getBlock,
+			} =
+				select( 'core/block-editor' )
+
+			const rootClientId = getBlockRootClientId( clientId )
+			const parentBlock = getBlock( rootClientId )
+
+			return {
+				hasInnerBlocks: getBlockOrder( clientId ).length > 0,
+				rootClientId,
+				isOnlyBlock: getBlockOrder( rootClientId ).length === 1,
+				parentBlock,
+				useZeroColumnSpacing: ! [ 'stackable/timeline' ].includes( parentBlock.name ),
+			}
+		},
+		[ clientId ]
+	)
 
 	const blockOrientation = getBlockOrientation( props.attributes )
 	const [ columnClass, columnWrapperClass ] = getColumnClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 
-	const nonZeroColumnSpacingBlocks = [ 'stackable/timeline' ]
-	const useZeroColumnSpacing = parentBlock ? ! nonZeroColumnSpacingBlocks.includes( parentBlock.name ) : false
-
 	const ALLOWED_INNER_BLOCKS = applyFilters( 'stackable.block.column.allowed-inner-blocks', undefined, props )
 
 	const blockClassNames = classnames( [
@@ -86,64 +105,38 @@ const Edit = props => {
 		{ 'stk--align-last-block-to-bottom': props.attributes.alignLastBlockToBottom },
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-
-			<>
-				<InspectorTabs />
-
-				<InspectorLayoutControls>
-					<FourRangeControl
-						label={ __( 'Column Spacing', i18n ) }
-						attribute="columnSpacing"
-						responsive="all"
-						units={ [ 'px', 'em', 'vw' ] }
-						defaultLocked={ true }
-						min={ [ 0, 0 ] }
-						sliderMax={ [ 200, 30 ] }
-						placeholder={ isOnlyBlock && useZeroColumnSpacing ? '0' : '12' }
-						helpTooltip={ {
-							video: 'inner-block-padding',
-							description: __( 'Sets the paddings between the column content and the border.', i18n ),
-						} }
-						visualGuide={ {
-							selector: '.stk-%s-container',
-							highlight: 'column-spacing',
-							defaultValue: '12px',
-						} }
-					/>
-				</InspectorLayoutControls>
-
-				<Alignment.InspectorControls hasContainerSize={ true } hasColumnAlignment={ true } />
-				<BlockDiv.InspectorControls />
-				<BlockLink.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-column" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorLayoutControls>
-					<AdvancedToggleControl
-						label={ __( 'Align Last Block to Bottom', i18n ) }
-						checked={ props.attributes.alignLastBlockToBottom }
-						onChange={ alignLastBlockToBottom => props.setAttributes( { alignLastBlockToBottom } ) }
-					/>
-				</InspectorLayoutControls>
-
-				<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
-			</>
-
-			<BlockStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
+			<InspectorControls
+				isOnlyBlock={ isOnlyBlock }
+				useZeroColumnSpacing={ useZeroColumnSpacing }
+				alignLastBlockToBottom={ props.attributes.alignLastBlockToBottom }
+				setAttributes={ props.setAttributes }
 			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-column" />
 
-			<Column isHovered={ isHovered } showHandle={ isHovered } context={ props.context }>
+			<Column
+				clientId={ clientId }
+				parentBlock={ parentBlock }
+				isHovered={ isHovered }
+				showHandle={ isHovered }
+				context={ props.context }
+				columnWidth={ props.attributes.columnWidth }
+				columnWidthTablet={ props.attributes.columnWidthTablet }
+				columnWidthMobile={ props.attributes.columnWidthMobile }
+			>
 				<Linking show={ isHovered } />
 				<BlockDiv
 					blockHoverClass={ props.blockHoverClass }
@@ -157,7 +150,7 @@ const Edit = props => {
 							allowedBlocks={ ALLOWED_INNER_BLOCKS }
 							templateLock={ props.attributes.templateLock || false }
 							orientation={ blockOrientation }
-							renderAppender={ ! hasInnerBlocks ? InnerBlocks.ButtonBlockAppender : InnerBlocks.DefaultBlockAppender }
+							renderAppender={ hasInnerBlocks ? undefined : ButtonBlockAppender }
 						/>
 					</ContainerDiv>
 				</BlockDiv>
@@ -166,6 +159,59 @@ const Edit = props => {
 	)
 }
 
+// Inspector controls for the block, it's important that we only pass only the
+// props used by controls to prevent rerenders of all the inspector controls.
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<InspectorLayoutControls>
+				<FourRangeControl
+					label={ __( 'Column Spacing', i18n ) }
+					attribute="columnSpacing"
+					responsive="all"
+					units={ [ 'px', 'em', 'vw' ] }
+					defaultLocked={ true }
+					min={ [ 0, 0 ] }
+					sliderMax={ [ 200, 30 ] }
+					placeholder={ props.isOnlyBlock && props.useZeroColumnSpacing ? '0' : '12' }
+					helpTooltip={ {
+						video: 'inner-block-padding',
+						description: __( 'Sets the paddings between the column content and the border.', i18n ),
+					} }
+					visualGuide={ {
+						selector: '.stk-%s-container',
+						highlight: 'column-spacing',
+						defaultValue: '12px',
+					} }
+				/>
+			</InspectorLayoutControls>
+
+			<Alignment.InspectorControls hasContainerSize={ true } hasColumnAlignment={ true } />
+			<BlockDiv.InspectorControls />
+			<BlockLink.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-column" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorLayoutControls>
+				<AdvancedToggleControl
+					label={ __( 'Align Last Block to Bottom', i18n ) }
+					checked={ props.alignLastBlockToBottom }
+					onChange={ alignLastBlockToBottom => props.setAttributes( { alignLastBlockToBottom } ) }
+				/>
+			</InspectorLayoutControls>
+
+			<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/column/save.js b/src/block/column/save.js
index 9f08d1bf9..0b1dca47c 100644
--- a/src/block/column/save.js
+++ b/src/block/column/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -65,7 +60,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<ContainerDiv.Content
 				className={ contentClassNames }
diff --git a/src/block/column/style.js b/src/block/column/style.js
index 02331ef62..b39cfe8c3 100644
--- a/src/block/column/style.js
+++ b/src/block/column/style.js
@@ -10,21 +10,7 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
-
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-const containerDivOptions = {
-	sizeSelector: '.%s-container',
-	sizeHorizontalAlignRule: 'margin',
-	sizeVerticalAlignRule: 'justifyContent',
-	sizeVerticalAlignSelector: '.%s-inner-blocks',
-	// sizeVerticalAlignSelectorEdit: '.%s-inner-blocks > .block-editor-inner-blocks > .block-editor-block-list__layout',
-	// sizeVerticalAlignSelectorEdit: '.%s-inner-blocks',
-}
+import { BlockStyleGenerator } from '~stackable/components'
 
 const callbacks = {
 	marginTop: {
@@ -41,154 +27,108 @@ const callbacks = {
 	},
 }
 
-const ColumnStyles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-container"
-				styleRule="marginTop"
-				attrName="columnSpacing"
-				key="columnSpacing-top"
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ callbacks.marginTop.valuePreCallback }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-container"
-				styleRule="marginRight"
-				attrName="columnSpacing"
-				key="columnSpacing-right"
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ callbacks.marginRight.valuePreCallback }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-container"
-				styleRule="marginBottom"
-				attrName="columnSpacing"
-				key="columnSpacing-bottom"
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ callbacks.marginBottom.valuePreCallback }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-container"
-				styleRule="marginLeft"
-				attrName="columnSpacing"
-				key="columnSpacing-left"
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ callbacks.marginLeft.valuePreCallback }
-			/>
-
-			{
-			// The styles below are used purely for the block highligher feature
-			// where the edges of the element where the padding will be applied
-			// is highlighted.
-			}
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".%s-container"
-				styleRule="--column-spacing-top"
-				attrName="columnSpacing"
-				key="columnSpacing-top-edit-for-highlight"
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ callbacks.marginTop.valuePreCallback }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".%s-container"
-				styleRule="--column-spacing-right"
-				attrName="columnSpacing"
-				key="columnSpacing-right-edit-for-highlight"
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ callbacks.marginRight.valuePreCallback }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".%s-container"
-				styleRule="--column-spacing-bottom"
-				attrName="columnSpacing"
-				key="columnSpacing-bottom-edit-for-highlight"
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ callbacks.marginBottom.valuePreCallback }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".%s-container"
-				styleRule="--column-spacing-left"
-				attrName="columnSpacing"
-				key="columnSpacing-left-edit-for-highlight"
-				responsive="all"
-				hasUnits="px"
-				valuePreCallback={ callbacks.marginLeft.valuePreCallback }
-			/>
-		</>
-	)
-}
-
-const BlockStyles = memo( props => {
-	return (
-		<>
-			<ColumnStyles { ...props } />
-			<Alignment.Style
-				{ ...props }
-				columnAlignSelectorCallback={ ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]` }
-			/>
-			<BlockDiv.Style { ...props } />
-			<Column.Style { ...props } />
-			<ContainerDiv.Style { ...props } { ...containerDivOptions } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
+blockStyles.addBlockStyles( 'columnSpacing', [ {
+	selector: '.%s-container',
+	styleRule: 'marginTop',
+	attrName: 'columnSpacing',
+	key: 'columnSpacing-top',
+	responsive: 'all',
+	hasUnits: 'px',
+	valuePreCallback: callbacks.marginTop.valuePreCallback,
+},
+{
+	selector: '.%s-container',
+	styleRule: 'marginRight',
+	attrName: 'columnSpacing',
+	key: 'columnSpacing-right',
+	responsive: 'all',
+	hasUnits: 'px',
+	valuePreCallback: callbacks.marginRight.valuePreCallback,
+},
+{
+	selector: '.%s-container',
+	styleRule: 'marginBottom',
+	attrName: 'columnSpacing',
+	key: 'columnSpacing-bottom',
+	responsive: 'all',
+	hasUnits: 'px',
+	valuePreCallback: callbacks.marginBottom.valuePreCallback,
+},
+{
+	selector: '.%s-container',
+	styleRule: 'marginLeft',
+	attrName: 'columnSpacing',
+	key: 'columnSpacing-left',
+	responsive: 'all',
+	hasUnits: 'px',
+	valuePreCallback: callbacks.marginLeft.valuePreCallback,
+},
 
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
+// The styles below are used purely for the block highligher feature
+// where the edges of the element where the padding will be applied
+// is highlighted.
 
-	return (
-		<BlockCssCompiler>
-			<ColumnStyles { ...props } />
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Column.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } { ...containerDivOptions } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
+{
+	renderIn: 'edit',
+	selector: '.%s-container',
+	styleRule: '--column-spacing-top',
+	attrName: 'columnSpacing',
+	key: 'columnSpacing-top-edit-for-highlight',
+	responsive: 'all',
+	hasUnits: 'px',
+	valuePreCallback: callbacks.marginTop.valuePreCallback,
+},
+{
+	renderIn: 'edit',
+	selector: '.%s-container',
+	styleRule: '--column-spacing-right',
+	attrName: 'columnSpacing',
+	key: 'columnSpacing-right-edit-for-highlight',
+	responsive: 'all',
+	hasUnits: 'px',
+	valuePreCallback: callbacks.marginRight.valuePreCallback,
+},
+{
+	renderIn: 'edit',
+	selector: '.%s-container',
+	styleRule: '--column-spacing-bottom',
+	attrName: 'columnSpacing',
+	key: 'columnSpacing-bottom-edit-for-highlight',
+	responsive: 'all',
+	hasUnits: 'px',
+	valuePreCallback: callbacks.marginBottom.valuePreCallback,
+},
+{
+	renderIn: 'edit',
+	selector: '.%s-container',
+	styleRule: '--column-spacing-left',
+	attrName: 'columnSpacing',
+	key: 'columnSpacing-left-edit-for-highlight',
+	responsive: 'all',
+	hasUnits: 'px',
+	valuePreCallback: callbacks.marginLeft.valuePreCallback,
+} ] )
 
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+Alignment.addStyles( blockStyles, {
+	columnAlignSelectorEditCallback: ( getAttributes, attributes, clientId ) => `[data-block="${ clientId }"]`,
+} )
+BlockDiv.addStyles( blockStyles )
+Column.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles, {
+	sizeSelector: '.%s-container',
+	sizeHorizontalAlignRule: 'margin',
+	sizeVerticalAlignRule: 'justifyContent',
+	sizeVerticalAlignSelector: '.%s-inner-blocks',
+	// sizeVerticalAlignSelectorEdit: '.%s-inner-blocks > .block-editor-inner-blocks > .block-editor-block-list__layout',
+	// sizeVerticalAlignSelectorEdit: '.%s-inner-blocks',
+} )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
 
-export default BlockStyles
+export default blockStyles
diff --git a/src/block/columns/edit.js b/src/block/columns/edit.js
index bc251baad..c2653d923 100644
--- a/src/block/columns/edit.js
+++ b/src/block/columns/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -14,10 +14,10 @@ import {
 	GroupPlaceholder,
 	InspectorLayoutControls,
 	InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	MarginBottom,
 	getRowClasses,
 	Alignment,
@@ -35,7 +35,6 @@ import {
 	getContentAlignmentClasses,
 	Columns,
 } from '~stackable/block-components'
-import { useBlockContext } from '~stackable/hooks'
 import {
 	withBlockAttributeContext,
 	withBlockWrapperIsHovered,
@@ -49,23 +48,33 @@ import { useQueryLoopInstanceId } from '~stackable/util'
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
 import { addFilter, applyFilters } from '@wordpress/hooks'
+import { useSelect } from '@wordpress/data'
+import { memo } from '@wordpress/element'
 
 const ALLOWED_INNER_BLOCKS = [ 'stackable/column' ]
 
 const Edit = props => {
 	const {
-		className,
 		clientId,
+		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const rowClass = getRowClasses( props.attributes )
 	const separatorClass = getSeparatorClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
-	const { hasInnerBlocks } = useBlockContext()
 	const [ columnProviderValue, columnTooltipClass ] = ColumnInnerBlocks.useContext()
 
+	const { hasInnerBlocks } = useSelect(
+		select => {
+			const { getBlockOrder } = select( 'core/block-editor' )
+
+			return {
+				hasInnerBlocks: getBlockOrder( clientId ).length > 0,
+			}
+		},
+		[ clientId ]
+	)
+
 	const blockClassNames = classnames( applyFilters( 'stackable.columns.edit.blockClassNames',
 		[
 			className,
@@ -83,35 +92,21 @@ const Edit = props => {
 		'stk-block-content',
 	], getContentAlignmentClasses( props.attributes, 'column', instanceId ) )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
 
-			<>
-				<InspectorTabs />
-
-				<Columns.InspectorControls />
-				<InspectorLayoutControls>
-					<ControlSeparator />
-				</InspectorLayoutControls>
-				<ContentAlign.InspectorControls />
-				<Alignment.InspectorControls
-					hasContainerSize={ true }
-					containerSizePriority={ 1 }
-					hasContainerHeight={ false }
-					hasColumnJustify={ true }
-					hasRowAlignment={ true }
-				/>
-				<BlockDiv.InspectorControls />
-				<Separator.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-columns" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
+			<InspectorControls />
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
 				clientId={ props.clientId }
@@ -119,11 +114,7 @@ const Edit = props => {
 				className={ blockClassNames }
 				enableVariationPicker={ true }
 			>
-				<BlockStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-columns" />
 
 				{ ! hasInnerBlocks && <GroupPlaceholder /> }
@@ -152,8 +143,17 @@ const Edit = props => {
 // Load the polyfill for columns block :has() selector for Firefox
 const userAgent = navigator?.userAgent
 if ( userAgent && userAgent.indexOf( 'Firefox' ) !== -1 ) {
-	addFilter( 'stackable.columns.edit.blockClassNames', 'stackable/columns-has-single-block-polyfill', classes => {
-		const { numInnerBlocks } = useBlockContext()
+	addFilter( 'stackable.columns.edit.blockClassNames', 'stackable/columns-has-single-block-polyfill', ( classes, props ) => {
+		const { numInnerBlocks } = useSelect(
+			select => {
+				const { getBlockOrder } = select( 'core/block-editor' )
+
+				return {
+					numInnerBlocks: getBlockOrder( props.clientId ).length,
+				}
+			},
+			[ props.clientId ]
+		)
 
 		if ( numInnerBlocks === 1 ) {
 			classes.push( 'stk-block-columns--has-single-block-polyfill' )
@@ -163,6 +163,38 @@ if ( userAgent && userAgent.indexOf( 'Firefox' ) !== -1 ) {
 	} )
 }
 
+// Inspector controls for the block, it's important that we only pass only the
+// props used by controls to prevent rerenders of all the inspector controls.
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Columns.InspectorControls />
+			<InspectorLayoutControls>
+				<ControlSeparator />
+			</InspectorLayoutControls>
+			<ContentAlign.InspectorControls />
+			<Alignment.InspectorControls
+				hasContainerSize={ true }
+				containerSizePriority={ 1 }
+				hasContainerHeight={ false }
+				hasColumnJustify={ true }
+				hasRowAlignment={ true }
+			/>
+			<BlockDiv.InspectorControls />
+			<Separator.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-columns" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/columns/save.js b/src/block/columns/save.js
index ff6ff56e4..18a13b9a8 100644
--- a/src/block/columns/save.js
+++ b/src/block/columns/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -59,7 +54,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Separator.Content attributes={ attributes }>
 				<div className={ contentClassNames }>
diff --git a/src/block/columns/style.js b/src/block/columns/style.js
index f5bf3944a..f9fdb692c 100644
--- a/src/block/columns/style.js
+++ b/src/block/columns/style.js
@@ -12,78 +12,27 @@ import {
 	Columns,
 	ContainerDiv,
 } from '~stackable/block-components'
-import { useBlockAttributesContext } from '~stackable/hooks'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-import { applyFilters } from '@wordpress/hooks'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const alignmentOptions = {
+Alignment.addStyles( blockStyles, {
 	editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`,
-}
-
-const containerDivOptions = {
+} )
+BlockDiv.addStyles( blockStyles )
+MarginBottom.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles, {
 	sizeSelector: '.%s-column',
 	sizeVerticalAlignRule: 'justifyContent',
 	sizeVerticalAlignSelector: '.%s-column',
-}
-
-const BlockStyles = memo( props => {
-	const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
-	const numColumns = ( columnArrangement || '' ).split( ',' ).length
-
-	const ColumnOrderStyle = applyFilters( 'stackable.block-component.columns.column-order-style', null )
-
-	return (
-		<>
-			<Alignment.Style { ...props } { ...alignmentOptions } />
-			<BlockDiv.Style { ...props } />
-			<MarginBottom.Style { ...props } />
-			<ContainerDiv.Style { ...props } { ...containerDivOptions } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Separator.Style { ...props } />
-			<Columns.Style { ...props } />
-			{ ColumnOrderStyle && <ColumnOrderStyle { ...props } numColumns={ numColumns } /> }
-		</>
-	)
 } )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+Separator.addStyles( blockStyles )
+Columns.addStyles( blockStyles )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
-
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	const numColumns = ( props.attributes.columnArrangementMobile || props.attributes.columnArrangementTablet || '' ).split( ',' ).length
-	const ColumnOrderStyle = applyFilters( 'stackable.block-component.columns.column-order-style', null )
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } { ...alignmentOptions } />
-			<BlockDiv.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } { ...containerDivOptions } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Separator.Style.Content { ...props } />
-			<Columns.Style.Content { ...props } />
-			{ ColumnOrderStyle && <ColumnOrderStyle { ...props } numColumns={ numColumns } /> }
-		</BlockCssCompiler>
-	)
-}
-
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
-export default BlockStyles
+export default blockStyles
diff --git a/src/block/count-up/edit.js b/src/block/count-up/edit.js
index 982061d7d..28e4672a8 100644
--- a/src/block/count-up/edit.js
+++ b/src/block/count-up/edit.js
@@ -1,14 +1,13 @@
 /**
  * Internal dependencies
  */
-import { HeadingStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
  */
 import {
 	BlockDiv,
-	useGeneratedCss,
 	CustomCSS,
 	Responsive,
 	Advanced,
@@ -25,7 +24,7 @@ import {
 import { version as VERSION, i18n } from 'stackable'
 import classnames from 'classnames'
 import {
-	InspectorTabs, InspectorStyleControls, PanelAdvancedSettings, AdvancedRangeControl,
+	InspectorTabs, InspectorStyleControls, PanelAdvancedSettings, AdvancedRangeControl, useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	withBlockAttributeContext, withBlockWrapperIsHovered, withQueryLoopContext,
@@ -36,15 +35,13 @@ import {
  */
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
+import { memo }	from '@wordpress/element'
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const textClasses = getTypographyClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	const blockClassNames = classnames( [
@@ -58,50 +55,22 @@ const Edit = props => {
 		blockAlignmentClass,
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'Counter', i18n ) }
-						id="count-up"
-						initialOpen={ true }
-					>
-						<AdvancedRangeControl
-							label={ __( 'Duration (ms)', i18n ) }
-							attribute="duration"
-							min={ 100 }
-							sliderMax={ 5000 }
-							step={ 100 }
-							placeholder="1000"
-						>
 
-						</AdvancedRangeControl>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-				<Typography.InspectorControls
-					{ ...props }
-					hasTextTag={ false }
-					hasTextShadow={ true }
-					initialOpen={ false }
-				/>
-				<Alignment.InspectorControls />
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-count-up" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<HeadingStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			<InspectorControls blockState={ props.blockState } />
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-count-up" />
 
 			<BlockDiv
@@ -121,6 +90,47 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'Counter', i18n ) }
+					id="count-up"
+					initialOpen={ true }
+				>
+					<AdvancedRangeControl
+						label={ __( 'Duration (ms)', i18n ) }
+						attribute="duration"
+						min={ 100 }
+						sliderMax={ 5000 }
+						step={ 100 }
+						placeholder="1000"
+					>
+
+					</AdvancedRangeControl>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+			<Typography.InspectorControls
+				{ ...props }
+				hasTextTag={ false }
+				hasTextShadow={ true }
+				initialOpen={ false }
+			/>
+			<Alignment.InspectorControls />
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-count-up" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/count-up/save.js b/src/block/count-up/save.js
index db15422e2..9ff334c35 100644
--- a/src/block/count-up/save.js
+++ b/src/block/count-up/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { HeadingStyles } from './style'
-
 import {
 	BlockDiv,
 	CustomCSS,
@@ -50,7 +45,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<HeadingStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Typography.Content
 				tagName="div"
diff --git a/src/block/count-up/style.js b/src/block/count-up/style.js
index c8f15821a..81e8d4c57 100644
--- a/src/block/count-up/style.js
+++ b/src/block/count-up/style.js
@@ -6,7 +6,6 @@ import {
 	Advanced,
 	Typography,
 	Alignment,
-	MarginBottom,
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
@@ -14,45 +13,21 @@ import {
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-export const HeadingStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Typography.Style { ...props } selector=".stk-block-count-up__text" />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-HeadingStyles.defaultProps = {
-	version: '',
-}
-
-HeadingStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } selector=".stk-block-count-up__text" />
-			<EffectsAnimations.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
+	selector: '.stk-block-count-up__text',
+	hoverSelector: '.stk-block-count-up__text:hover',
+} )
+EffectsAnimations.addStyles( blockStyles )
 
-HeadingStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/countdown/divider.js b/src/block/countdown/divider.js
index 3af2686f0..0ee6f47c6 100644
--- a/src/block/countdown/divider.js
+++ b/src/block/countdown/divider.js
@@ -6,7 +6,6 @@ import {
 	 useBlockSetAttributesContext,
 } from '~stackable/hooks'
 import {
-	BlockCss,
 	InspectorStyleControls,
 	PanelAdvancedSettings,
 	AdvancedToolbarControl,
@@ -146,7 +145,7 @@ Divider.Content = props => {
 	)
 }
 
-const Styles = props => {
+const addStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
 		version: props.version,
@@ -154,59 +153,49 @@ const Styles = props => {
 		versionDeprecated: '',
 	}
 
-	return (
-		<>
-			{ <BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => getAttribute( 'dividerType' ) === ':' ? '.stk-block-countdown__divider-colon' : '.stk-block-countdown__divider-line' }
-				styleRuleCallback={ getAttribute => getAttribute( 'dividerType' ) === ':' ? 'color' : 'backgroundColor' }
-				attrName="dividerColor"
-				key="dividerColor"
-				responsive="all"
-				dependencies={ [ 'dividerType' ] }
-			/> }
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-countdown__divider-line"
-				styleRule="height"
-				attrName="dividerSizeLine"
-				key="dividerSizeLine"
-				hasUnits="%"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-countdown__divider-colon"
-				styleRule="fontSize"
-				attrName="dividerSizeColon"
-				key="dividerSizeColon"
-				hasUnits="px"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-countdown__divider-colon"
-				styleRule="top"
-				attrName="dividerTopOffset"
-				key="dividerTopOffset"
-				hasUnits="px"
-				responsive="all"
-			/>
-		</>
-	)
-}
-
-const Style = props => {
-	return <Styles { ...props } />
-}
-
-Style.Content = props => {
-	return <Styles { ...props } />
+	blockStyleGenerator.addBlockStyles( 'dividerColor', [ {
+		...propsToPass,
+		selectorCallback: getAttribute => getAttribute( 'dividerType' ) === ':' ? '.stk-block-countdown__divider-colon' : '.stk-block-countdown__divider-line',
+		styleRuleCallback: getAttribute => getAttribute( 'dividerType' ) === ':' ? 'color' : 'backgroundColor',
+		attrName: 'dividerColor',
+		key: 'dividerColor',
+		responsive: 'all',
+		dependencies: [ 'dividerType' ],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'dividerSizeLine', [ {
+		...propsToPass,
+		selector: '.stk-block-countdown__divider-line',
+		styleRule: 'height',
+		attrName: 'dividerSizeLine',
+		key: 'dividerSizeLine',
+		hasUnits: '%',
+		responsive: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'dividerSizeColon', [ {
+		...propsToPass,
+		selector: '.stk-block-countdown__divider-colon',
+		styleRule: 'fontSize',
+		attrName: 'dividerSizeColon',
+		key: 'dividerSizeColon',
+		hasUnits: 'px',
+		responsive: 'all',
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'dividerTopOffset', [ {
+		...propsToPass,
+		selector: '.stk-block-countdown__divider-colon',
+		styleRule: 'top',
+		attrName: 'dividerTopOffset',
+		key: 'dividerTopOffset',
+		hasUnits: 'px',
+		responsive: 'all',
+	} ] )
 }
 
 Divider.InspectorControls = Edit
 
 Divider.addAttributes = addAttributes
 
-Divider.Style = Style
-
+Divider.addStyles = addStyles
diff --git a/src/block/countdown/edit.js b/src/block/countdown/edit.js
index 4232d77dc..2f4c2c040 100644
--- a/src/block/countdown/edit.js
+++ b/src/block/countdown/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { CountdownStyles } from './style'
+import blockStyles from './style'
 import { CountdownNumber } from './countdown-number'
 import { Divider } from './divider'
 import { timezones as TIMEZONE_OPTIONS } from './timezones'
@@ -12,7 +12,6 @@ import { timezones as TIMEZONE_OPTIONS } from './timezones'
 import {
 	BlockDiv,
 	ContainerDiv,
-	useGeneratedCss,
 	CustomCSS,
 	Responsive,
 	Advanced,
@@ -29,6 +28,7 @@ import classnames from 'classnames'
 import {
 	InspectorStyleControls, InspectorTabs, PanelAdvancedSettings, AdvancedSelectControl, AdvancedToolbarControl,
 	AdvancedRangeControl, AdvancedToggleControl, AdvancedTextControl, AlignButtonsControl, ControlSeparator, InspectorLayoutControls,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	 withBlockAttributeContext,
@@ -40,7 +40,7 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n'
-import { Fragment } from '@wordpress/element'
+import { Fragment, memo } from '@wordpress/element'
 import { compose } from '@wordpress/compose'
 import { DateTimePicker } from '@wordpress/components'
 import { useBlockEditContext } from '@wordpress/block-editor'
@@ -84,11 +84,8 @@ const Edit = props => {
 		className,
 		setAttributes,
 		attributes,
-		clientId,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const digitTextClasses = getTypographyClasses( attributes, 'digit%s' )
 
 	const labelTextClasses = getTypographyClasses( attributes, 'label%s' )
@@ -158,170 +155,26 @@ const Edit = props => {
 		messageTextClasses,
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
 	return (
 		<>
-			<>
-				<InspectorTabs />
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'General', i18n ) }
-						id="countdown"
-						initialOpen={ true }
-					>
-						<AdvancedToolbarControl
-							controls={ COUNTDOWN_TYPE_OPTIONS }
-							attribute="countdownType"
-							fullwidth={ true }
-							isSmall={ false }
-							allowReset={ false }
-							onChange={ value => {
-								if ( value === 'recurring' ) {
-									setAttributes( {
-										countdownType: 'recurring', actionOnExpiration: '', timezone: '',
-									} )
-								} else {
-									setAttributes( {
-										countdownType: 'dueDate', daysLeft: '', hoursLeft: '', minutesLeft: '', secondsLeft: '', restartInterval: '', timezone: '',
-									} )
-								}
-							} }
-						/>
-						<h3 className="components-base-control__label">
-							{ attributes.countdownType === 'dueDate' ? __( 'End Date', i18n ) : __( 'Start Date', i18n ) }
-						</h3>
-						<DateTimePicker
-							currentDate={ attributes.date }
-							is12Hour={ true }
-							onChange={ currentDate => {
-								// Do not include seconds
-								setAttributes( { date: currentDate.slice( 0, currentDate.length - 3 ) } )
-							} }
-							__nextRemoveResetButton={ true }
-						/>
-						<AdvancedSelectControl
-							label={ __( 'Timezone', i18n ) }
-							options={ TIMEZONE_OPTIONS }
-							attribute="timezone"
-							allowReset={ false }
-						/>
-						{	attributes.countdownType === 'dueDate' && (
-							<>
-								<AdvancedSelectControl
-									label={ __( 'Action on Expiration', i18n ) }
-									options={ ACTION_ON_EXPIRATION_OPTIONS }
-									defaultValue=""
-									attribute="actionOnExpiration"
-								/>
-								{ attributes.actionOnExpiration === 'showMessage' }
-							</>
-						) }
-						{ attributes.countdownType === 'recurring' && (
-							<Fragment>
-								<ControlSeparator />
-								<h3 className="components-base-control__label">{ __( 'Countdown Duration', i18n ) }</h3>
-								<AdvancedRangeControl
-									label={ __( 'Days', i18n ) }
-									min={ 0 }
-									max={ 364 }
-									attribute="daysLeft"
-								/>
-								<AdvancedRangeControl
-									label={ __( 'Hours', i18n ) }
-									min={ 0 }
-									max={ 23 }
-									attribute="hoursLeft"
-								/>
-								<AdvancedRangeControl
-									label={ __( 'Minutes', i18n ) }
-									min={ 0 }
-									max={ 59 }
-									attribute="minutesLeft"
-								/>
-								<AdvancedRangeControl
-									label={ __( 'Seconds', i18n ) }
-									min={ 0 }
-									max={ 59 }
-									attribute="secondsLeft"
-								/>
-								<ControlSeparator />
-								<AdvancedRangeControl
-									label={ __( 'Restart Countdown After no. of Hours', i18n ) }
-									min={ 0 }
-									maxSlider={ 10 }
-									attribute="restartInterval"
-								/>
-							</Fragment>
-						) }
-						<AdvancedToggleControl
-							label={ __( 'Enable Double Digit', i18n ) }
-							attribute="isDoubleDigitHidden"
-							defaultValue={ false }
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Box Gap', i18n ) }
-							min={ 0 }
-							sliderMax={ 50 }
-							attribute="boxGap"
-							placeholder="16"
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Label Top Margin', i18n ) }
-							min={ 0 }
-							sliderMax={ 50 }
-							attribute="labelMarginTop"
-							placeholder="8"
-						/>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-				<Typography.InspectorControls
-					label={ __( 'Digits', i18n ) }
-					attrNameTemplate="digit%s"
-					hasTextTag={ false }
-					hasTextContent={ false }
-					initialOpen={ false }
-				/>
-				<Typography.InspectorControls
-					label={ __( 'Labels', i18n ) }
-					attrNameTemplate="label%s"
-					hasTextTag={ false }
-					hasTextContent={ false }
-					initialOpen={ false }
-				/>
-				<InspectorLayoutControls>
-					<AlignButtonsControl
-						label={ __( 'Content Alignment', i18n ) }
-						responsive="all"
-						attribute="contentAlignment"
-					/>
-				</InspectorLayoutControls>
-				<Divider.InspectorControls />
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<ContainerDiv.InspectorControls
-					hasContentVerticalAlign={ true }
-					sizeSelector=".stk-block-countdown__content"
-				/>
-				{ attributes.actionOnExpiration === 'showMessage' &&
-					<Typography.InspectorControls
-						label={ __( 'Expired Message', i18n ) }
-						attrNameTemplate="message%s"
-						hasTextTag={ true }
-						hasTextContent={ true }
-						initialOpen={ false }
-					/> }
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-countdown" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<CountdownStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
+			<InspectorControls
+				setAttributes={ setAttributes }
+				countdownType={ attributes.countdownType }
+				date={ attributes.date }
+				actionOnExpiration={ attributes.actionOnExpiration }
 			/>
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-countdown" />
 
 			<BlockDiv
@@ -454,6 +307,167 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'General', i18n ) }
+					id="countdown"
+					initialOpen={ true }
+				>
+					<AdvancedToolbarControl
+						controls={ COUNTDOWN_TYPE_OPTIONS }
+						attribute="countdownType"
+						fullwidth={ true }
+						isSmall={ false }
+						allowReset={ false }
+						onChange={ value => {
+							if ( value === 'recurring' ) {
+								props.setAttributes( {
+									countdownType: 'recurring', actionOnExpiration: '', timezone: '',
+								} )
+							} else {
+								props.setAttributes( {
+									countdownType: 'dueDate', daysLeft: '', hoursLeft: '', minutesLeft: '', secondsLeft: '', restartInterval: '', timezone: '',
+								} )
+							}
+						} }
+					/>
+					<h3 className="components-base-control__label">
+						{ props.countdownType === 'dueDate' ? __( 'End Date', i18n ) : __( 'Start Date', i18n ) }
+					</h3>
+					<DateTimePicker
+						currentDate={ props.date }
+						is12Hour={ true }
+						onChange={ currentDate => {
+							// Do not include seconds
+							props.setAttributes( { date: currentDate.slice( 0, currentDate.length - 3 ) } )
+						} }
+						__nextRemoveResetButton={ true }
+					/>
+					<AdvancedSelectControl
+						label={ __( 'Timezone', i18n ) }
+						options={ TIMEZONE_OPTIONS }
+						attribute="timezone"
+						allowReset={ false }
+					/>
+					{	props.countdownType === 'dueDate' && (
+						<>
+							<AdvancedSelectControl
+								label={ __( 'Action on Expiration', i18n ) }
+								options={ ACTION_ON_EXPIRATION_OPTIONS }
+								defaultValue=""
+								attribute="actionOnExpiration"
+							/>
+							{ props.actionOnExpiration === 'showMessage' }
+						</>
+					) }
+					{ props.countdownType === 'recurring' && (
+						<Fragment>
+							<ControlSeparator />
+							<h3 className="components-base-control__label">{ __( 'Countdown Duration', i18n ) }</h3>
+							<AdvancedRangeControl
+								label={ __( 'Days', i18n ) }
+								min={ 0 }
+								max={ 364 }
+								attribute="daysLeft"
+							/>
+							<AdvancedRangeControl
+								label={ __( 'Hours', i18n ) }
+								min={ 0 }
+								max={ 23 }
+								attribute="hoursLeft"
+							/>
+							<AdvancedRangeControl
+								label={ __( 'Minutes', i18n ) }
+								min={ 0 }
+								max={ 59 }
+								attribute="minutesLeft"
+							/>
+							<AdvancedRangeControl
+								label={ __( 'Seconds', i18n ) }
+								min={ 0 }
+								max={ 59 }
+								attribute="secondsLeft"
+							/>
+							<ControlSeparator />
+							<AdvancedRangeControl
+								label={ __( 'Restart Countdown After no. of Hours', i18n ) }
+								min={ 0 }
+								maxSlider={ 10 }
+								attribute="restartInterval"
+							/>
+						</Fragment>
+					) }
+					<AdvancedToggleControl
+						label={ __( 'Enable Double Digit', i18n ) }
+						attribute="isDoubleDigitHidden"
+						defaultValue={ false }
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Box Gap', i18n ) }
+						min={ 0 }
+						sliderMax={ 50 }
+						attribute="boxGap"
+						placeholder="16"
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Label Top Margin', i18n ) }
+						min={ 0 }
+						sliderMax={ 50 }
+						attribute="labelMarginTop"
+						placeholder="8"
+					/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+			<Typography.InspectorControls
+				label={ __( 'Digits', i18n ) }
+				attrNameTemplate="digit%s"
+				hasTextTag={ false }
+				hasTextContent={ false }
+				initialOpen={ false }
+			/>
+			<Typography.InspectorControls
+				label={ __( 'Labels', i18n ) }
+				attrNameTemplate="label%s"
+				hasTextTag={ false }
+				hasTextContent={ false }
+				initialOpen={ false }
+			/>
+			<InspectorLayoutControls>
+				<AlignButtonsControl
+					label={ __( 'Content Alignment', i18n ) }
+					responsive="all"
+					attribute="contentAlignment"
+				/>
+			</InspectorLayoutControls>
+			<Divider.InspectorControls />
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<ContainerDiv.InspectorControls
+				hasContentVerticalAlign={ true }
+				sizeSelector=".stk-block-countdown__content"
+			/>
+			{ props.actionOnExpiration === 'showMessage' &&
+				<Typography.InspectorControls
+					label={ __( 'Expired Message', i18n ) }
+					attrNameTemplate="message%s"
+					hasTextTag={ true }
+					hasTextContent={ true }
+					initialOpen={ false }
+				/> }
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-countdown" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/countdown/save.js b/src/block/countdown/save.js
index e75c374fa..de517fcf4 100644
--- a/src/block/countdown/save.js
+++ b/src/block/countdown/save.js
@@ -1,4 +1,3 @@
-import { CountdownStyles } from './style'
 import { CountdownNumber } from './countdown-number'
 import { Divider } from './divider'
 import { getCountdownAlignment } from './edit'
@@ -130,7 +129,7 @@ export const Save = props => {
 		>
 			<CustomCSS.Content attributes={ attributes } />
 			<div className="stk-block-countdown__container">
-				<CountdownStyles.Content version={ props.version } attributes={ attributes } />
+				{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 				{ attributes.dayShow &&
 					<ContainerDiv.Content className={ contentClassNames } attributes={ attributes }>
 						<div className="stk-block-countdown__container-wrapper">
diff --git a/src/block/countdown/style.js b/src/block/countdown/style.js
index 95dd42c12..e0c813630 100644
--- a/src/block/countdown/style.js
+++ b/src/block/countdown/style.js
@@ -8,133 +8,72 @@ import {
 	ContainerDiv,
 	Advanced,
 	Alignment,
-	MarginBottom,
 	EffectsAnimations,
 	Transform,
 	Typography,
 } from '~stackable/block-components'
-import { BlockCssCompiler, BlockCss } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
+
+blockStyles.addBlockStyles( 'contentAlignment', [ {
+	selector: '.%s.stk-block-countdown .stk-block-countdown__container',
+	styleRule: 'display',
+	responsive: 'all',
+	attrName: 'contentAlignment',
+	valueCallback: () => {
+		return 'flex'
+	},
+}, {
+	selector: '.%s.stk-block-countdown .stk-block-countdown__container',
+	styleRule: 'justifyContent',
+	attrName: 'contentAlignment',
+	key: 'contentAlignment',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'boxGap', [ {
+	selector: '.%s.stk-block-countdown .stk-block-countdown__container',
+	styleRule: 'gap',
+	attrName: 'boxGap',
+	key: 'boxGap',
+	responsive: 'all',
+	hasUnits: 'px',
+} ] )
 
-const digitTypographyOptions = {
+blockStyles.addBlockStyles( 'labelMarginTop', [ {
+	selector: '.stk-block-countdown__label',
+	styleRule: 'marginTop',
+	attrName: 'labelMarginTop',
+	key: 'labelMarginTop',
+	responsive: 'all',
+	hasUnits: 'px',
+} ] )
+
+Divider.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles )
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-block-countdown__digit',
 	hoverSelector: '.stk-block-countdown__digit:hover',
 	attrNameTemplate: 'digit%s',
-}
-
-const labelTypographyOptions = {
+} )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-block-countdown__label',
 	hoverSelector: '.stk-block-countdown__label:hover',
 	attrNameTemplate: 'label%s',
-}
-
-const messageTypographyOptions = {
+} )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-block-countdown__message',
 	hoverSelector: '.stk-block-countdown__message:hover',
 	attrNameTemplate: 'message%s',
-}
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s.stk-block-countdown .stk-block-countdown__container"
-				styleRule="display"
-				responsive="all"
-				attrName="contentAlignment"
-				valueCallback={ () => {
-					return 'flex'
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s.stk-block-countdown .stk-block-countdown__container"
-				styleRule="justifyContent"
-				attrName="contentAlignment"
-				key="contentAlignment"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s.stk-block-countdown .stk-block-countdown__container"
-				styleRule="gap"
-				attrName="boxGap"
-				key="boxGap"
-				responsive="all"
-				hasUnits="px"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-countdown__label"
-				styleRule="marginTop"
-				attrName="labelMarginTop"
-				key="labelMarginTop"
-				responsive="all"
-				hasUnits="px"
-			/>
-		</>
-	)
-}
-
-export const CountdownStyles = memo( props => {
-	return (
-		<>
-			<Divider.Style { ...props } />
-			<ContainerDiv.Style { ...props } />
-			<Typography.Style { ...props } { ...digitTypographyOptions } />
-			<Typography.Style { ...props } { ...labelTypographyOptions } />
-			<Typography.Style { ...props } { ...messageTypographyOptions } />
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Styles { ...props } />
-		</>
-	)
 } )
+EffectsAnimations.addStyles( blockStyles )
 
-CountdownStyles.defaultProps = {
-	version: '',
-}
-
-CountdownStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Divider.Style.Content { ...props } />
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } { ...digitTypographyOptions } />
-			<Typography.Style.Content { ...props } { ...labelTypographyOptions } />
-			<Typography.Style.Content { ...props } { ...messageTypographyOptions } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-CountdownStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
+export default blockStyles
diff --git a/src/block/divider/edit.js b/src/block/divider/edit.js
index 34ab9db71..0c39f9ed8 100644
--- a/src/block/divider/edit.js
+++ b/src/block/divider/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { DividerStyles } from './style'
+import dividerStyles from './style'
 import { blockStyles } from './block-styles'
 
 /**
@@ -10,7 +10,6 @@ k*/
 import {
 	BlockStyle,
 	BlockDiv,
-	useGeneratedCss,
 	CustomCSS,
 	Responsive,
 	Advanced,
@@ -28,6 +27,7 @@ import {
 	InspectorTabs,
 	AdvancedRangeControl,
 	ColorPaletteControl,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import { useBlockStyle } from '~stackable/hooks'
 import {
@@ -39,15 +39,13 @@ import {
  */
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	const blockStyle = useBlockStyle( blockStyles )
 
@@ -57,51 +55,21 @@ const Edit = props => {
 		blockAlignmentClass,
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles: dividerStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<BlockStyle.InspectorControls styles={ blockStyles } >
-					<ColorPaletteControl
-						label={ __( 'Color', i18n ) }
-						attribute="color"
-					/>
-					<AdvancedRangeControl
-						label={ __( 'Width', i18n ) + ' (%)' }
-						responsive="all"
-						attribute="width"
-						min={ 1 }
-						max={ 100 }
-						placeholder=""
-					/>
-					<AdvancedRangeControl
-						label={ __( 'Height / Size', i18n ) }
-						responsive="all"
-						attribute="height"
-						min={ 1 }
-						sliderMax={ 100 }
-						placeholder=""
-					/>
-				</BlockStyle.InspectorControls>
-
-				<Alignment.InspectorControls />
-				<BlockDiv.InspectorControls />
-
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-divider" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<DividerStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			<InspectorControls />
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-divider" />
 
 			<BlockDiv
@@ -123,6 +91,47 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<BlockStyle.InspectorControls styles={ blockStyles } >
+				<ColorPaletteControl
+					label={ __( 'Color', i18n ) }
+					attribute="color"
+				/>
+				<AdvancedRangeControl
+					label={ __( 'Width', i18n ) + ' (%)' }
+					responsive="all"
+					attribute="width"
+					min={ 1 }
+					max={ 100 }
+					placeholder=""
+				/>
+				<AdvancedRangeControl
+					label={ __( 'Height / Size', i18n ) }
+					responsive="all"
+					attribute="height"
+					min={ 1 }
+					sliderMax={ 100 }
+					placeholder=""
+				/>
+			</BlockStyle.InspectorControls>
+
+			<Alignment.InspectorControls />
+			<BlockDiv.InspectorControls />
+
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-divider" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/divider/save.js b/src/block/divider/save.js
index f4ac1595d..7c4399908 100644
--- a/src/block/divider/save.js
+++ b/src/block/divider/save.js
@@ -1,7 +1,6 @@
 /**
  * Internal dependencies
  */
-import { DividerStyles } from './style'
 import { blockStyles } from './block-styles'
 
 import {
@@ -43,7 +42,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<DividerStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			{ [ 'dots', 'asterisks' ].includes( blockStyle ) ? (
 				<div className="stk-block-divider__dots" aria-hidden="true">
diff --git a/src/block/divider/style.js b/src/block/divider/style.js
index dbcdf8f97..ea9256121 100644
--- a/src/block/divider/style.js
+++ b/src/block/divider/style.js
@@ -5,177 +5,130 @@ import {
 	BlockDiv,
 	Advanced,
 	Alignment,
-	MarginBottom,
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
 import { getBlockStyle } from '~stackable/hooks'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
 /**
  * Internal dependencies
  */
 import { blockStyles } from './block-styles'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => {
-					const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
-
-					if ( blockStyle === 'dots' ) {
-						return '.stk-block-divider__dot'
-					}
-
-					if ( blockStyle === 'asterisks' ) {
-						return '.stk-block-divider__dot:before'
-					}
-
-					return 'hr.stk-block-divider__hr'
-				} }
-				styleRuleCallback={ getAttribute => {
-					const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
-
-					if ( blockStyle === 'asterisks' ) {
-						return 'color'
-					}
-
-					return 'background'
-				} }
-				attrName="color"
-				key="color"
-				dependencies={ [ 'className' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-divider__dot:before"
-				styleRule="fontSize"
-				attrName="height"
-				key="height-dot"
-				responsive="all"
-				format="calc(%spx * 1.8)"
-				enabledCallback={ getAttribute => {
-					const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
-					return blockStyle === 'asterisks'
-				} }
-				dependencies={ [ 'className' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector="hr.stk-block-divider__hr"
-				styleRule="borderRadius"
-				attrName="height"
-				key="height-hr"
-				responsive="all"
-				format="calc(%spx / 2)"
-				enabledCallback={ getAttribute => {
-					const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
-					return blockStyle === 'bar'
-				} }
-				dependencies={ [ 'className' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-divider__dot"
-				styleRule="width"
-				attrName="height"
-				key="height-dot-width"
-				responsive="all"
-				format="%spx"
-				enabledCallback={ getAttribute => {
-					const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
-					return [ 'asterisks', 'dots' ].includes( blockStyle )
-				} }
-				dependencies={ [ 'className' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => {
-					const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
-					if ( [ 'dots', 'asterisks' ].includes( blockStyle ) ) {
-						return '.stk-block-divider__dot'
-					}
-
-					return 'hr.stk-block-divider__hr'
-				} }
-				styleRule="height"
-				attrName="height"
-				key="height-hr-height"
-				format="%spx"
-				responsive="all"
-				dependencies={ [ 'className' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selectorCallback={ getAttribute => {
-					const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
-					if ( [ 'dots', 'asterisks' ].includes( blockStyle ) ) {
-						return '.stk-block-divider__dots'
-					}
-
-					return 'hr.stk-block-divider__hr'
-				} }
-				styleRule="width"
-				attrName="width"
-				key="width"
-				format="%s%"
-				responsive="all"
-				dependencies={ [ 'className' ] }
-			/>
-		</>
-	)
-}
-
-export const DividerStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Styles { ...props } />
-		</>
-	)
+const dividerStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-DividerStyles.defaultProps = {
-	version: '',
-}
-
-DividerStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-DividerStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+dividerStyles.addBlockStyles( 'color', [ {
+	selectorCallback: getAttribute => {
+		const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
+
+		if ( blockStyle === 'dots' ) {
+			return '.stk-block-divider__dot'
+		}
+
+		if ( blockStyle === 'asterisks' ) {
+			return '.stk-block-divider__dot:before'
+		}
+
+		return 'hr.stk-block-divider__hr'
+	},
+	styleRuleCallback: getAttribute => {
+		const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
+
+		if ( blockStyle === 'asterisks' ) {
+			return 'color'
+		}
+
+		return 'background'
+	},
+	attrName: 'color',
+	key: 'color',
+	dependencies: [ 'className' ],
+} ] )
+
+dividerStyles.addBlockStyles( 'height', [ {
+	selector: '.stk-block-divider__dot:before',
+	styleRule: 'fontSize',
+	attrName: 'height',
+	key: 'height-dot',
+	responsive: 'all',
+	format: 'calc(%spx * 1.8)',
+	enabledCallback: getAttribute => {
+		const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
+		return blockStyle === 'asterisks'
+	},
+	dependencies: [ 'className' ],
+} ] )
+
+dividerStyles.addBlockStyles( 'height', [ {
+	selector: 'hr.stk-block-divider__hr',
+	styleRule: 'borderRadius',
+	attrName: 'height',
+	key: 'height-hr',
+	responsive: 'all',
+	format: 'calc(%spx / 2)',
+	enabledCallback: getAttribute => {
+		const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
+		return blockStyle === 'bar'
+	},
+	dependencies: [ 'className' ],
+} ] )
+
+dividerStyles.addBlockStyles( 'height', [ {
+	selector: '.stk-block-divider__dot',
+	styleRule: 'width',
+	attrName: 'height',
+	key: 'height-dot-width',
+	responsive: 'all',
+	format: '%spx',
+	enabledCallback: getAttribute => {
+		const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
+		return [ 'dots', 'asterisks' ].includes( blockStyle )
+	},
+	dependencies: [ 'className' ],
+} ] )
+
+dividerStyles.addBlockStyles( 'height', [ {
+	selectorCallback: getAttribute => {
+		const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
+		if ( [ 'dots', 'asterisks' ].includes( blockStyle ) ) {
+			return '.stk-block-divider__dot'
+		}
+
+		return 'hr.stk-block-divider__hr'
+	},
+	styleRule: 'height',
+	attrName: 'height',
+	key: 'height-hr-height',
+	format: '%spx',
+	responsive: 'all',
+	dependencies: [ 'className' ],
+} ] )
+
+dividerStyles.addBlockStyles( 'width', [ {
+	selectorCallback: getAttribute => {
+		const blockStyle = getBlockStyle( blockStyles, getAttribute( 'className' ) || '' )?.name
+		if ( [ 'dots', 'asterisks' ].includes( blockStyle ) ) {
+			return '.stk-block-divider__dots'
+		}
+
+		return 'hr.stk-block-divider__hr'
+	},
+	styleRule: 'width',
+	attrName: 'width',
+	key: 'width',
+	format: '%s%',
+	responsive: 'all',
+	dependencies: [ 'className' ],
+} ] )
+
+Alignment.addStyles( dividerStyles )
+BlockDiv.addStyles( dividerStyles )
+Advanced.addStyles( dividerStyles )
+Transform.addStyles( dividerStyles )
+EffectsAnimations.addStyles( dividerStyles )
+
+export default dividerStyles
diff --git a/src/block/expand/edit.js b/src/block/expand/edit.js
index 8af8f2e42..b945daba3 100644
--- a/src/block/expand/edit.js
+++ b/src/block/expand/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -10,10 +10,10 @@ import classnames from 'classnames'
 import { version as VERSION, i18n } from 'stackable'
 import {
 	InspectorBlockControls, InspectorBottomTip, InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	getAlignmentClasses,
 	Alignment,
 	Advanced,
@@ -36,6 +36,7 @@ import { compose } from '@wordpress/compose'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
+import { memo } from '@wordpress/element'
 
 const TEMPLATE = [
 	[ 'stackable/text', {
@@ -64,12 +65,9 @@ const TEMPLATE = [
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 
 	const blockClassNames = classnames( [
@@ -83,31 +81,22 @@ const Edit = props => {
 		'stk-block-content',
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<Alignment.InspectorControls />
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-expand" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorBlockControls>
-					<InspectorBottomTip />
-				</InspectorBlockControls>
-			</>
-
-			<BlockStyles
-				version={ VERSION }
-				clientId={ clientId }
-				blockState={ props.blockState }
-			/>
+			<InspectorControls />
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-expand" />
 
 			<style>{ `.stk-block.stk-block-expand .stk-block-expand__short-text::before { content: "${ __( 'Less text', i18n ) }" !important; }` }</style>
@@ -131,6 +120,28 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Alignment.InspectorControls />
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-expand" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorBlockControls>
+				<InspectorBottomTip />
+			</InspectorBlockControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/expand/save.js b/src/block/expand/save.js
index 9d21bcdaf..8bdf60b19 100644
--- a/src/block/expand/save.js
+++ b/src/block/expand/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -49,8 +44,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
-			<CustomCSS.Content attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }<CustomCSS.Content attributes={ attributes } />
 			<div className={ contentClassNames }>
 				<InnerBlocks.Content />
 			</div>
diff --git a/src/block/expand/style.js b/src/block/expand/style.js
index 8a8c270db..345c590d4 100644
--- a/src/block/expand/style.js
+++ b/src/block/expand/style.js
@@ -9,50 +9,18 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-const BlockStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Column.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
-
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Column.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Column.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
 
-export default BlockStyles
+export default blockStyles
diff --git a/src/block/feature-grid/edit.js b/src/block/feature-grid/edit.js
index 1d4817664..f8e4e5858 100644
--- a/src/block/feature-grid/edit.js
+++ b/src/block/feature-grid/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 import variations from './variations'
 
 /**
@@ -11,10 +11,10 @@ import classnames from 'classnames'
 import { version as VERSION } from 'stackable'
 import {
 	ColumnInnerBlocks, ControlSeparator, InspectorBottomTip, InspectorLayoutControls, InspectorStyleControls, InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	getAlignmentClasses,
 	Alignment,
 	Advanced,
@@ -42,18 +42,16 @@ import {
  */
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const ALLOWED_BLOCKS = [ 'stackable/column' ]
 const TEMPLATE = variations[ 0 ].innerBlocks
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const { hasInnerBlocks } = useBlockContext()
 	const rowClass = getRowClasses( props.attributes )
 	const separatorClass = getSeparatorClasses( props.attributes )
@@ -77,37 +75,22 @@ const Edit = props => {
 		'stk-block-content',
 	], getContentAlignmentClasses( props.attributes ) )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
+			<InspectorControls />
 
-				<Columns.InspectorControls />
-				<InspectorLayoutControls>
-					<ControlSeparator />
-				</InspectorLayoutControls>
-				<ContentAlign.InspectorControls />
-				<Alignment.InspectorControls hasColumnJustify={ true } hasRowAlignment={ true } />
-				<BlockDiv.InspectorControls />
-				<Separator.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-feature-grid" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
-
-			<BlockStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-feature-grid" />
 
 			<BlockDiv
@@ -135,6 +118,34 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Columns.InspectorControls />
+			<InspectorLayoutControls>
+				<ControlSeparator />
+			</InspectorLayoutControls>
+			<ContentAlign.InspectorControls />
+			<Alignment.InspectorControls hasColumnJustify={ true } hasRowAlignment={ true } />
+			<BlockDiv.InspectorControls />
+			<Separator.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-feature-grid" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/feature-grid/save.js b/src/block/feature-grid/save.js
index 632a75da9..59fa40a83 100644
--- a/src/block/feature-grid/save.js
+++ b/src/block/feature-grid/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -65,7 +60,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Separator.Content attributes={ attributes }>
 				<div className={ contentClassNames }>
diff --git a/src/block/feature-grid/style.js b/src/block/feature-grid/style.js
index b4ee255d2..87e9c160e 100644
--- a/src/block/feature-grid/style.js
+++ b/src/block/feature-grid/style.js
@@ -11,58 +11,22 @@ import {
 	Transform,
 	Columns,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const alignmentOptions = {
+Alignment.addStyles( blockStyles, {
 	editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`,
-}
-
-const BlockStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } { ...alignmentOptions } />
-			<BlockDiv.Style { ...props } />
-			<Column.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Separator.Style { ...props } />
-			<Columns.Style { ...props } />
-		</>
-	)
 } )
-
-BlockStyles.defaultProps = {
-	version: '',
-}
-
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } { ...alignmentOptions } />
-			<BlockDiv.Style.Content { ...props } />
-			<Column.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Separator.Style.Content { ...props } />
-			<Columns.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
-export default BlockStyles
+BlockDiv.addStyles( blockStyles )
+Column.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+Separator.addStyles( blockStyles )
+Columns.addStyles( blockStyles )
+
+export default blockStyles
diff --git a/src/block/feature/edit.js b/src/block/feature/edit.js
index 98bb6d518..0ccf30280 100644
--- a/src/block/feature/edit.js
+++ b/src/block/feature/edit.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import variations from './variations'
-import BlockStyles from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -11,10 +11,10 @@ import { version as VERSION } from 'stackable'
 import classnames from 'classnames'
 import {
 	ColumnInnerBlocks, InspectorBottomTip, InspectorStyleControls, InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	getAlignmentClasses,
 	Alignment,
 	Advanced,
@@ -43,17 +43,15 @@ import {
  */
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const TEMPLATE = variations[ 0 ].innerBlocks
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const rowClass = props.attributes.alignVertical ? undefined : getRowClasses( props.attributes )
 	const separatorClass = getSeparatorClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
@@ -74,35 +72,22 @@ const Edit = props => {
 		'stk-block-content',
 	], getContentAlignmentClasses( props.attributes ) )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<Columns.InspectorControls hasColumnsControl={ false } />
-				<ContentAlign.InspectorControls />
-				<Alignment.InspectorControls />
-				<BlockDiv.InspectorControls />
-				<ContainerDiv.InspectorControls hasContentVerticalAlign={ true } />
-				<Separator.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-feature" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
+			<InspectorControls />
 
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
-
-			<BlockStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-feature" />
 
 			<BlockDiv
@@ -128,6 +113,32 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Columns.InspectorControls hasColumnsControl={ false } />
+			<ContentAlign.InspectorControls />
+			<Alignment.InspectorControls />
+			<BlockDiv.InspectorControls />
+			<ContainerDiv.InspectorControls hasContentVerticalAlign={ true } />
+			<Separator.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-feature" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/feature/save.js b/src/block/feature/save.js
index 2743a2f3b..7f9d7935e 100644
--- a/src/block/feature/save.js
+++ b/src/block/feature/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -67,7 +62,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Separator.Content attributes={ attributes }>
 				<ContainerDiv.Content className={ contentClassNames } attributes={ attributes }>
diff --git a/src/block/feature/style.js b/src/block/feature/style.js
index d2c7c676c..e3e9a0700 100644
--- a/src/block/feature/style.js
+++ b/src/block/feature/style.js
@@ -12,110 +12,54 @@ import {
 	ContainerDiv,
 	Columns,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
-import { useBlockAttributesContext } from '~stackable/hooks'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-import { applyFilters } from '@wordpress/hooks'
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".%s-column"
-				styleRule="--stk-row-gap"
-				attrName="rowGap"
-				key="rowGap-save"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout"
-				styleRule="--stk-row-gap"
-				attrName="rowGap"
-				key="rowGap"
-				format="%spx"
-				responsive="all"
-			/>
-		</>
-	)
-}
-
-const BlockStyles = memo( props => {
-	const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
-	const numColumns = ( columnArrangement || '' ).split( ',' ).length
+// import { useBlockAttributesContext } from '~stackable/hooks'
+// import { applyFilters } from '@wordpress/hooks'
 
-	const ColumnOrderStyle = applyFilters( 'stackable.block-component.columns.column-order-style', null )
-
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<ContainerDiv.Style { ...props } />
-			<Column.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Separator.Style { ...props } />
-			<Columns.Style { ...props } hasRowGap={ false } />
-			{ ColumnOrderStyle && <ColumnOrderStyle { ...props } numColumns={ numColumns } /> }
-			<Styles { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
-
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
+blockStyles.addBlockStyles( 'rowGap', [ {
+	renderIn: 'save',
+	selector: '.%s-column',
+	styleRule: '--stk-row-gap',
+	attrName: 'rowGap',
+	key: 'rowGap-save',
+	format: '%spx',
+	responsive: 'all',
+}, {
+	renderIn: 'edit',
+	selector: '.%s-column > .block-editor-inner-blocks > .block-editor-block-list__layout',
+	styleRule: '--stk-row-gap',
+	attrName: 'rowGap',
+	key: 'rowGap',
+	format: '%spx',
+	responsive: 'all',
+} ] )
 
-	const numColumns = ( props.attributes.columnArrangementMobile || props.attributes.columnArrangementTablet || '' ).split( ',' ).length
-	const ColumnOrderStyle = applyFilters( 'stackable.block-component.columns.column-order-style', null )
+blockStyles.addBlockStyles( 'columnWrapDesktop', [ {
+	renderIn: 'save',
+	styleRule: '--stk-feature-flex-wrap',
+	attrName: 'columnWrapDesktop',
+	key: 'columnWrapDesktop-save',
+	valueCallback: value => {
+		return value ? 'wrap' : 'nowrap'
+	},
+} ] )
 
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } />
-			<Column.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Separator.Style.Content { ...props } />
-			<Columns.Style.Content
-				{ ...props }
-				hasRowGap={ false }
-				// Override the column desktop wrap rule because the feature has
-				// an extra element that we cannot target
-				columnWrapDesktopSaveStyleRule="--stk-feature-flex-wrap"
-			/>
-			{ ColumnOrderStyle && <ColumnOrderStyle { ...props } numColumns={ numColumns } /> }
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles )
+Column.addStyles( blockStyles )
+Columns.addStyles( blockStyles, {
+	hasRowGap: false,
+} )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+Separator.addStyles( blockStyles )
 
-export default BlockStyles
+export default blockStyles
diff --git a/src/block/heading/edit.js b/src/block/heading/edit.js
index 977fba7e6..3b0a4624d 100644
--- a/src/block/heading/edit.js
+++ b/src/block/heading/edit.js
@@ -1,14 +1,13 @@
 /**
  * Internal dependencies
  */
-import { HeadingStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
  */
 import {
 	BlockDiv,
-	useGeneratedCss,
 	CustomCSS,
 	Responsive,
 	Advanced,
@@ -33,6 +32,7 @@ import {
 	ColorPaletteControl,
 	AdvancedRangeControl,
 	AlignButtonsControl,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import { useBlockContext } from '~stackable/hooks'
 import { createBlockCompleter } from '~stackable/util'
@@ -47,7 +47,7 @@ import {
  */
 import { compose } from '@wordpress/compose'
 import {
-	useEffect, useState, useRef,
+	useEffect, useState, useRef, memo,
 } from '@wordpress/element'
 import { sprintf, __ } from '@wordpress/i18n'
 import { dispatch } from '@wordpress/data'
@@ -69,15 +69,12 @@ const Edit = props => {
 	const {
 		className,
 		onReplace,
-		clientId,
 		setAttributes,
 		onRemove,
 		mergeBlocks,
 		attributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const { parentBlock } = useBlockContext()
 	const textClasses = getTypographyClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
@@ -115,131 +112,26 @@ const Edit = props => {
 		}, 300 )
 	}, [ props.attributes.anchor, props.attributes.text ] )
 
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<Typography.InspectorControls
-					{ ...props }
-					hasRemoveMargins={ true }
-					initialOpen={ true }
-					hasTextShadow={ true }
-				/>
-
-				<Alignment.InspectorControls labelContentAlign={ sprintf( __( '%s Alignment', i18n ), __( 'Text', i18n ) ) } />
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-
-				{ !! applyFilters( 'stackable.heading.edit.top-bottom-line.enable-handlers', true, parentBlock ) && (
-					<InspectorStyleControls>
-						<PanelAdvancedSettings
-							title={ __( 'Top Line', i18n ) }
-							id="top-line"
-							hasToggle={ true }
-							checked={ props.attributes.showTopLine }
-							onChange={ value => setAttributes( { showTopLine: value } ) }
-						>
-							<ColorPaletteControl
-								label={ __( 'Line Color', i18n ) }
-								attribute="topLineColor"
-								hover="all"
-							/>
-
-							<AdvancedRangeControl
-								label={ __( 'Width', i18n ) }
-								units={ [ 'px', '%', 'vw' ] }
-								attribute="topLineWidth"
-								min="0"
-								sliderMax={ [ 200, 100 ] }
-								hover="all"
-							/>
-
-							<AdvancedRangeControl
-								label={ __( 'Height', i18n ) }
-								attribute="topLineHeight"
-								min="0"
-								sliderMax="20"
-								placeholder="4"
-							/>
-
-							<AdvancedRangeControl
-								label={ __( 'Margin', i18n ) }
-								attribute="topLineMargin"
-								responsive="all"
-								sliderMin="0"
-								sliderMax="100"
-							/>
-
-							<AlignButtonsControl
-								label={ __( 'Align', i18n ) }
-								attribute="topLineAlign"
-								responsive="all"
-							/>
-
-						</PanelAdvancedSettings>
-						<PanelAdvancedSettings
-							title={ __( 'Bottom Line', i18n ) }
-							id="bottom-line"
-							hasToggle={ true }
-							checked={ props.attributes.showBottomLine }
-							onChange={ value => setAttributes( { showBottomLine: value } ) }
-						>
-
-							<ColorPaletteControl
-								label={ __( 'Line Color', i18n ) }
-								attribute="bottomLineColor"
-								hover="all"
-							/>
-
-							<AdvancedRangeControl
-								label={ __( 'Width', i18n ) }
-								units={ [ 'px', '%', 'vw' ] }
-								attribute="bottomLineWidth"
-								min={ 0 }
-								sliderMax={ [ 200, 100 ] }
-								hover="all"
-							/>
-
-							<AdvancedRangeControl
-								label={ __( 'Height', i18n ) }
-								attribute="bottomLineHeight"
-								min="0"
-								sliderMax="20"
-								placeholder="4"
-							/>
-
-							<AdvancedRangeControl
-								label={ __( 'Margin', i18n ) }
-								attribute="bottomLineMargin"
-								responsive="all"
-								sliderMin="0"
-								sliderMax="100"
-							/>
-
-							<AlignButtonsControl
-								label={ __( 'Align', i18n ) }
-								attribute="bottomLineAlign"
-								responsive="all"
-							/>
-
-						</PanelAdvancedSettings>
-					</InspectorStyleControls>
-				) }
-
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-heading" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<HeadingStyles
-				version={ VERSION }
+			<InspectorControls
+				showTopLine={ props.attributes.showTopLine }
+				showBottomLine={ props.attributes.showBottomLine }
+				setAttributes={ setAttributes }
+				parentBlock={ parentBlock }
 				blockState={ props.blockState }
-				clientId={ clientId }
 			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-heading" />
 
 			<BlockDiv
@@ -264,6 +156,128 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Typography.InspectorControls
+				{ ...props }
+				hasRemoveMargins={ true }
+				initialOpen={ true }
+				hasTextShadow={ true }
+			/>
+
+			<Alignment.InspectorControls labelContentAlign={ sprintf( __( '%s Alignment', i18n ), __( 'Text', i18n ) ) } />
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+
+			{ !! applyFilters( 'stackable.heading.edit.top-bottom-line.enable-handlers', true, props.parentBlock ) && (
+				<InspectorStyleControls>
+					<PanelAdvancedSettings
+						title={ __( 'Top Line', i18n ) }
+						id="top-line"
+						hasToggle={ true }
+						checked={ props.showTopLine }
+						onChange={ value => props.setAttributes( { showTopLine: value } ) }
+					>
+						<ColorPaletteControl
+							label={ __( 'Line Color', i18n ) }
+							attribute="topLineColor"
+							hover="all"
+						/>
+
+						<AdvancedRangeControl
+							label={ __( 'Width', i18n ) }
+							units={ [ 'px', '%', 'vw' ] }
+							attribute="topLineWidth"
+							min="0"
+							sliderMax={ [ 200, 100 ] }
+							hover="all"
+						/>
+
+						<AdvancedRangeControl
+							label={ __( 'Height', i18n ) }
+							attribute="topLineHeight"
+							min="0"
+							sliderMax="20"
+							placeholder="4"
+						/>
+
+						<AdvancedRangeControl
+							label={ __( 'Margin', i18n ) }
+							attribute="topLineMargin"
+							responsive="all"
+							sliderMin="0"
+							sliderMax="100"
+						/>
+
+						<AlignButtonsControl
+							label={ __( 'Align', i18n ) }
+							attribute="topLineAlign"
+							responsive="all"
+						/>
+
+					</PanelAdvancedSettings>
+					<PanelAdvancedSettings
+						title={ __( 'Bottom Line', i18n ) }
+						id="bottom-line"
+						hasToggle={ true }
+						checked={ props.showBottomLine }
+						onChange={ value => props.setAttributes( { showBottomLine: value } ) }
+					>
+
+						<ColorPaletteControl
+							label={ __( 'Line Color', i18n ) }
+							attribute="bottomLineColor"
+							hover="all"
+						/>
+
+						<AdvancedRangeControl
+							label={ __( 'Width', i18n ) }
+							units={ [ 'px', '%', 'vw' ] }
+							attribute="bottomLineWidth"
+							min={ 0 }
+							sliderMax={ [ 200, 100 ] }
+							hover="all"
+						/>
+
+						<AdvancedRangeControl
+							label={ __( 'Height', i18n ) }
+							attribute="bottomLineHeight"
+							min="0"
+							sliderMax="20"
+							placeholder="4"
+						/>
+
+						<AdvancedRangeControl
+							label={ __( 'Margin', i18n ) }
+							attribute="bottomLineMargin"
+							responsive="all"
+							sliderMin="0"
+							sliderMax="100"
+						/>
+
+						<AlignButtonsControl
+							label={ __( 'Align', i18n ) }
+							attribute="bottomLineAlign"
+							responsive="all"
+						/>
+
+					</PanelAdvancedSettings>
+				</InspectorStyleControls>
+			) }
+
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-heading" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/heading/save.js b/src/block/heading/save.js
index aba8062fc..b5c9a632c 100644
--- a/src/block/heading/save.js
+++ b/src/block/heading/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { HeadingStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -55,7 +50,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<HeadingStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			{ props.attributes.showTopLine && <div className="stk-block-heading__top-line" /> }
 			<Typography.Content
diff --git a/src/block/heading/style.js b/src/block/heading/style.js
index 2ad58d1c2..9a44df9cf 100644
--- a/src/block/heading/style.js
+++ b/src/block/heading/style.js
@@ -6,173 +6,124 @@ import {
 	Advanced,
 	Typography,
 	Alignment,
-	MarginBottom,
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
+blockStyles.addBlockStyles( 'topLineHeight', [ {
+	selector: '.stk-block-heading__top-line',
+	styleRule: 'height',
+	attrName: 'topLineHeight',
+	key: 'topLineHeight',
+	format: '%spx',
+} ] )
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__top-line"
-				styleRule="height"
-				attrName="topLineHeight"
-				key="topLineHeight"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__top-line"
-				styleRule="width"
-				attrName="topLineWidth"
-				key="topLineWidth"
-				hasUnits="px"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__top-line"
-				styleRule="backgroundColor"
-				attrName="topLineColor"
-				key="topLineColor"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__top-line"
-				styleRule="marginBottom"
-				attrName="topLineMargin"
-				key="topLineMargin"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__top-line"
-				styleRule="marginLeft"
-				attrName="topLineAlign"
-				key="topLineAlign-left"
-				responsive="all"
-				valueCallback={ value => value === 'center' || value === 'right' ? 'auto' : '0' }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__top-line"
-				styleRule="marginRight"
-				attrName="topLineAlign"
-				key="topLineAlign"
-				responsive="all"
-				valueCallback={ value => value === 'center' || value === 'left' ? 'auto' : '0' }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__bottom-line"
-				styleRule="height"
-				attrName="bottomLineHeight"
-				key="bottomLineHeight"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__bottom-line"
-				styleRule="width"
-				attrName="bottomLineWidth"
-				key="bottomLineWidth"
-				hasUnits="px"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__bottom-line"
-				styleRule="backgroundColor"
-				attrName="bottomLineColor"
-				key="bottomLineColor"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__bottom-line"
-				styleRule="marginTop"
-				attrName="bottomLineMargin"
-				key="bottomLineMargin"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__bottom-line"
-				styleRule="marginLeft"
-				attrName="bottomLineAlign"
-				key="bottomLineAlign"
-				responsive="all"
-				valueCallback={ value => value === 'center' || value === 'right' ? 'auto' : undefined }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-heading__bottom-line"
-				styleRule="marginRight"
-				attrName="bottomLineAlign"
-				key="bottomLineAlign-right"
-				responsive="all"
-				valueCallback={ value => value === 'center' || value === 'left' ? 'auto' : undefined }
-			/>
-		</>
-	)
-}
+blockStyles.addBlockStyles( 'topLineWidth', [ {
+	selector: '.stk-block-heading__top-line',
+	styleRule: 'width',
+	attrName: 'topLineWidth',
+	key: 'topLineWidth',
+	hasUnits: 'px',
+	hover: 'all',
+} ] )
 
-export const HeadingStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Typography.Style { ...props } selector=".stk-block-heading__text" />
-			<Styles { ...props } />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
-} )
+blockStyles.addBlockStyles( 'topLineColor', [ {
+	selector: '.stk-block-heading__top-line',
+	styleRule: 'backgroundColor',
+	attrName: 'topLineColor',
+	key: 'topLineColor',
+	hover: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'topLineMargin', [ {
+	selector: '.stk-block-heading__top-line',
+	styleRule: 'marginBottom',
+	attrName: 'topLineMargin',
+	key: 'topLineMargin',
+	responsive: 'all',
+	format: '%spx',
+} ] )
 
-HeadingStyles.defaultProps = {
-	version: '',
-}
+blockStyles.addBlockStyles( 'topLineAlign', [ {
+	selector: '.stk-block-heading__top-line',
+	styleRule: 'marginLeft',
+	attrName: 'topLineAlign',
+	key: 'topLineAlign-left',
+	responsive: 'all',
+	valueCallback: value => value === 'center' || value === 'right' ? 'auto' : '0',
+}, {
+	selector: '.stk-block-heading__top-line',
+	styleRule: 'marginRight',
+	attrName: 'topLineAlign',
+	key: 'topLineAlign',
+	responsive: 'all',
+	valueCallback: value => value === 'center' || value === 'left' ? 'auto' : '0',
+} ] )
 
-HeadingStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
+blockStyles.addBlockStyles( 'bottomLineHeight', [ {
+	selector: '.stk-block-heading__bottom-line',
+	styleRule: 'height',
+	attrName: 'bottomLineHeight',
+	key: 'bottomLineHeight',
+	format: '%spx',
+} ] )
 
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } selector=".stk-block-heading__text" />
-			<EffectsAnimations.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
+blockStyles.addBlockStyles( 'bottomLineWidth', [ {
+	selector: '.stk-block-heading__bottom-line',
+	styleRule: 'width',
+	attrName: 'bottomLineWidth',
+	key: 'bottomLineWidth',
+	hasUnits: 'px',
+	hover: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'bottomLineColor', [ {
+	selector: '.stk-block-heading__bottom-line',
+	styleRule: 'backgroundColor',
+	attrName: 'bottomLineColor',
+	key: 'bottomLineColor',
+	hover: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'bottomLineMargin', [ {
+	selector: '.stk-block-heading__bottom-line',
+	styleRule: 'marginTop',
+	attrName: 'bottomLineMargin',
+	key: 'bottomLineMargin',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'bottomLineAlign', [ {
+	selector: '.stk-block-heading__bottom-line',
+	styleRule: 'marginLeft',
+	attrName: 'bottomLineAlign',
+	key: 'bottomLineAlign',
+	responsive: 'all',
+	valueCallback: value => value === 'center' || value === 'right' ? 'auto' : 0,
+}, {
+	selector: '.stk-block-heading__bottom-line',
+	styleRule: 'marginRight',
+	attrName: 'bottomLineAlign',
+	key: 'bottomLineAlign-right',
+	responsive: 'all',
+	valueCallback: value => value === 'center' || value === 'left' ? 'auto' : 0,
+} ] )
+
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
+	selector: '.stk-block-heading__text',
+	hoverSelector: '.stk-block-heading__text:hover',
+} )
+EffectsAnimations.addStyles( blockStyles )
 
-HeadingStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/hero/edit.js b/src/block/hero/edit.js
index 24caabedd..b18e0d55d 100644
--- a/src/block/hero/edit.js
+++ b/src/block/hero/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { ContainerStyles } from './style'
+import blockStyles from './style'
 import variations from './variations'
 
 /**
@@ -14,10 +14,10 @@ import {
 	InspectorBottomTip,
 	InspectorStyleControls,
 	InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	ContainerDiv,
 	ConditionalDisplay,
 	Alignment,
@@ -45,18 +45,16 @@ import {
 import { compose } from '@wordpress/compose'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const TEMPLATE = variations[ 0 ].innerBlocks
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const { hasInnerBlocks, innerBlocks } = useBlockContext()
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	const separatorClass = getSeparatorClasses( props.attributes )
@@ -79,28 +77,20 @@ const Edit = props => {
 	const lastBlockName = last( innerBlocks )?.name
 	const renderAppender = hasInnerBlocks ? ( [ 'stackable/text', 'core/paragraph' ].includes( lastBlockName ) ? () => <></> : InnerBlocks.DefaultBlockAppender ) : InnerBlocks.ButtonBlockAppender
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<ContentAlign.InspectorControls />
-				<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
-				<BlockDiv.InspectorControls />
-				<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
-				<Separator.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-hero" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
+			<InspectorControls />
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -109,11 +99,7 @@ const Edit = props => {
 				className={ blockClassNames }
 				enableVariationPicker={ true }
 			>
-				<ContainerStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-hero" />
 
 				<Separator>
@@ -131,6 +117,31 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<ContentAlign.InspectorControls />
+			<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
+			<BlockDiv.InspectorControls />
+			<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
+			<Separator.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-hero" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/hero/save.js b/src/block/hero/save.js
index e085cf833..a5c5fc5ec 100644
--- a/src/block/hero/save.js
+++ b/src/block/hero/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { ContainerStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -65,7 +60,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<ContainerStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Separator.Content attributes={ attributes }>
 				<ContainerDiv.Content
diff --git a/src/block/hero/style.js b/src/block/hero/style.js
index 64fe89e8e..415b0a8c0 100644
--- a/src/block/hero/style.js
+++ b/src/block/hero/style.js
@@ -11,57 +11,24 @@ import {
 	Separator,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const containerDivOptions = {
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles, {
 	sizeSelector: '.stk-block-hero__content',
 	sizeHorizontalAlignRule: 'margin',
-}
-
-export const ContainerStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ContainerDiv.Style { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style { ...props } />
-			<Separator.Style { ...props } />
-		</>
-	)
 } )
 
-ContainerStyles.defaultProps = {
-	veersion: '',
-}
-
-ContainerStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style.Content { ...props } />
-			<Separator.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
+MarginBottom.addStyles( blockStyles )
+Separator.addStyles( blockStyles )
 
-ContainerStyles.Content.defaultProps = {
-	veersion: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/horizontal-scroller/edit.js b/src/block/horizontal-scroller/edit.js
index 081dc0b3b..409dbcde3 100644
--- a/src/block/horizontal-scroller/edit.js
+++ b/src/block/horizontal-scroller/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -19,12 +19,12 @@ import {
 	ColorPaletteControl,
 	InspectorLayoutControls,
 	ControlSeparator,
+	useBlockCssGenerator,
 } from '~stackable/components'
 
 import {
 	BlockDiv,
 	ColumnsControl,
-	useGeneratedCss,
 	MarginBottom,
 	Alignment,
 	getAlignmentClasses,
@@ -50,6 +50,7 @@ import { useQueryLoopInstanceId } from '~stackable/util'
  */
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const ALLOWED_INNER_BLOCKS = [ 'stackable/column' ]
 const TEMPLATE = [
@@ -61,7 +62,6 @@ const TEMPLATE = [
 const Edit = props => {
 	 const {
 		 className,
-		 clientId,
 		 setAttributes,
 	 } = props
 
@@ -70,8 +70,6 @@ const Edit = props => {
 		scrollbarHeight,
 	 } = props.attributes
 
-	 useGeneratedCss( props.attributes )
-
 	 const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	 const { hasInnerBlocks } = useBlockContext()
 	 const [ columnProviderValue, columnTooltipClass ] = ColumnInnerBlocks.useContext()
@@ -92,121 +90,24 @@ const Edit = props => {
 		'stk--with-scrollbar': showScrollbar,
 	 } )
 
+	 // Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	 return (
 		 <>
-			<>
-				<InspectorTabs />
-
-				<InspectorLayoutControls>
-					<ColumnsControl sliderMax={ 10 } />
-					<AdvancedSelectControl
-						label={ __( 'Snapping', i18n ) }
-						attribute="horizontalScrollerSnap"
-						options={ [
-							{ value: 'start', label: __( 'Snap to Start', i18n ) },
-							{ value: 'center', label: __( 'Snap to Center', i18n ) },
-							{ value: 'none', label: __( 'No Snapping', i18n ) },
-						] }
-						default="center"
-					/>
-					<ControlSeparator />
-					<AdvancedRangeControl
-						label={ __( 'Item Width', i18n ) }
-						attribute="horizontalScrollerColumnWidth"
-						responsive="all"
-						units={ [ 'px', 'em', '%', 'vw' ] }
-						min={ [ 0, 0, 0 ] }
-						sliderMax={ [ 500, 40, 100 ] }
-						step={ [ 1, 0.1, 1 ] }
-						placeholder={ 300 }
-					/>
-					<AdvancedRangeControl
-						label={ __( 'Height', i18n ) }
-						attribute="horizontalScrollerHeight"
-						min="0"
-						sliderMin={ 0 }
-						sliderMax={ 500 }
-						step="1"
-						placeholder="auto"
-					/>
-					<AdvancedRangeControl
-						label={ __( 'Inner Column Spacing', i18n ) }
-						attribute="columnSpacing"
-						responsive="all"
-						units={ [ 'px', 'em', 'vw' ] }
-						defaultLocked={ true }
-						min={ [ 0, 0 ] }
-						sliderMax={ [ 200, 30 ] }
-						placeholder="12"
-					/>
-					<AdvancedRangeControl
-						label={ __( 'Gap', i18n ) }
-						attribute="horizontalScrollerColumnGap"
-						responsive="all"
-						min={ 0 }
-						sliderMax={ 100 }
-						placeholder="0"
-					/>
-					<AdvancedRangeControl
-						label={ __( 'Left Offset', i18n ) }
-						attribute="horizontalScrollerLeftOffset"
-						responsive="all"
-						units={ [ 'px', 'em', '%' ] }
-						min={ [ 0, 0, 0 ] }
-						sliderMax={ [ 500, 40, 50 ] }
-						step={ [ 1, 0.1, 1 ] }
-					/>
-					<ControlSeparator />
-				</InspectorLayoutControls>
-				<Alignment.InspectorControls hasRowAlignment={ true } />
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'Scrollbar', i18n ) }
-						initialOpen={ false }
-						hasToggle
-						checked={ showScrollbar }
-						onChange={ showScrollbar => setAttributes( { showScrollbar } ) }
-					>
-						<AdvancedRangeControl
-							label={ __( 'Height', i18n ) }
-							attribute="scrollbarHeight"
-							min="0"
-							sliderMin={ 0 }
-							sliderMax={ 25 }
-							step="1"
-							placeholder="10"
-						/>
-						<ColorPaletteControl
-							label={ __( 'Track Color', i18n ) }
-							attribute="scrollbarTrackColor"
-						/>
-						<ColorPaletteControl
-							label={ __( 'Thumb Color', i18n ) }
-							attribute="scrollbarThumbColor"
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Thumb Radius', i18n ) }
-							attribute="scrollbarThumbRadius"
-							allowReset={ true }
-							min="0"
-							units={ [ 'px', '%', 'rem' ] }
-							step="1"
-							sliderMax={ Math.ceil( ( scrollbarHeight || 10 ) / 2 ) }
-						/>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-horizontal-scroller" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-			</>
+			<InspectorControls
+				setAttributes={ setAttributes }
+				showScrollbar={ showScrollbar }
+				scrollbarHeight={ scrollbarHeight }
+			/>
 
 			 <BlockDiv
 				 blockHoverClass={ props.blockHoverClass }
@@ -214,11 +115,7 @@ const Edit = props => {
 				 attributes={ props.attributes }
 				 className={ blockClassNames }
 			 >
-				 <BlockStyles
-					 version={ VERSION }
-					 blockState={ props.blockState }
-					 clientId={ clientId }
-				 />
+				 { blockCss && <style key="block-css">{ blockCss }</style> }
 				 <CustomCSS mainBlockClass="stk-block-horizontal-scroller" />
 
 				 { ! hasInnerBlocks && <GroupPlaceholder /> }
@@ -243,6 +140,124 @@ const Edit = props => {
 	 )
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<InspectorLayoutControls>
+				<ColumnsControl sliderMax={ 10 } />
+				<AdvancedSelectControl
+					label={ __( 'Snapping', i18n ) }
+					attribute="horizontalScrollerSnap"
+					options={ [
+						{ value: 'start', label: __( 'Snap to Start', i18n ) },
+						{ value: 'center', label: __( 'Snap to Center', i18n ) },
+						{ value: 'none', label: __( 'No Snapping', i18n ) },
+					] }
+					default="center"
+				/>
+				<ControlSeparator />
+				<AdvancedRangeControl
+					label={ __( 'Item Width', i18n ) }
+					attribute="horizontalScrollerColumnWidth"
+					responsive="all"
+					units={ [ 'px', 'em', '%', 'vw' ] }
+					min={ [ 0, 0, 0 ] }
+					sliderMax={ [ 500, 40, 100 ] }
+					step={ [ 1, 0.1, 1 ] }
+					placeholder={ 300 }
+				/>
+				<AdvancedRangeControl
+					label={ __( 'Height', i18n ) }
+					attribute="horizontalScrollerHeight"
+					min="0"
+					sliderMin={ 0 }
+					sliderMax={ 500 }
+					step="1"
+					placeholder="auto"
+				/>
+				<AdvancedRangeControl
+					label={ __( 'Inner Column Spacing', i18n ) }
+					attribute="columnSpacing"
+					responsive="all"
+					units={ [ 'px', 'em', 'vw' ] }
+					defaultLocked={ true }
+					min={ [ 0, 0 ] }
+					sliderMax={ [ 200, 30 ] }
+					placeholder="12"
+				/>
+				<AdvancedRangeControl
+					label={ __( 'Gap', i18n ) }
+					attribute="horizontalScrollerColumnGap"
+					responsive="all"
+					min={ 0 }
+					sliderMax={ 100 }
+					placeholder="0"
+				/>
+				<AdvancedRangeControl
+					label={ __( 'Left Offset', i18n ) }
+					attribute="horizontalScrollerLeftOffset"
+					responsive="all"
+					units={ [ 'px', 'em', '%' ] }
+					min={ [ 0, 0, 0 ] }
+					sliderMax={ [ 500, 40, 50 ] }
+					step={ [ 1, 0.1, 1 ] }
+				/>
+				<ControlSeparator />
+			</InspectorLayoutControls>
+			<Alignment.InspectorControls hasRowAlignment={ true } />
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'Scrollbar', i18n ) }
+					initialOpen={ false }
+					hasToggle
+					checked={ props.showScrollbar }
+					onChange={ showScrollbar => props.setAttributes( { showScrollbar } ) }
+				>
+					<AdvancedRangeControl
+						label={ __( 'Height', i18n ) }
+						attribute="scrollbarHeight"
+						min="0"
+						sliderMin={ 0 }
+						sliderMax={ 25 }
+						step="1"
+						placeholder="10"
+					/>
+					<ColorPaletteControl
+						label={ __( 'Track Color', i18n ) }
+						attribute="scrollbarTrackColor"
+					/>
+					<ColorPaletteControl
+						label={ __( 'Thumb Color', i18n ) }
+						attribute="scrollbarThumbColor"
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Thumb Radius', i18n ) }
+						attribute="scrollbarThumbRadius"
+						allowReset={ true }
+						min="0"
+						units={ [ 'px', '%', 'rem' ] }
+						step="1"
+						sliderMax={ Math.ceil( ( props.scrollbarHeight || 10 ) / 2 ) }
+					/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-horizontal-scroller" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+		</>
+	)
+} )
+
 export default compose(
 	 withBlockWrapperIsHovered,
 	 withQueryLoopContext,
diff --git a/src/block/horizontal-scroller/save.js b/src/block/horizontal-scroller/save.js
index f38b6c68a..a1fe72042 100644
--- a/src/block/horizontal-scroller/save.js
+++ b/src/block/horizontal-scroller/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -57,7 +52,7 @@ export const Save = props => {
 			 attributes={ attributes }
 			 version={ props.version }
 		 >
-			 <BlockStyles.Content version={ props.version } attributes={ attributes } />
+			 { attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			 <CustomCSS.Content attributes={ attributes } />
 			<div className={ contentClassNames }>
 				<InnerBlocks.Content />
diff --git a/src/block/horizontal-scroller/style.js b/src/block/horizontal-scroller/style.js
index 5aeccd85a..ba46a77f7 100644
--- a/src/block/horizontal-scroller/style.js
+++ b/src/block/horizontal-scroller/style.js
@@ -9,184 +9,125 @@ import {
 	MarginBottom,
 	Transform,
 } from '~stackable/block-components'
-import { useBlockAttributesContext } from '~stackable/hooks'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+// import { useBlockAttributesContext } from '~stackable/hooks'
+import { BlockStyleGenerator } from '~stackable/components'
 
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element'
-import { applyFilters } from '@wordpress/hooks'
+// import { applyFilters } from '@wordpress/hooks'
 
-const alignmentOptions = {
-	editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`,
-}
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.6.4',
-		versionDeprecated: '',
-	}
+blockStyles.addBlockStyles( 'columnSpacing', [ {
+	selector: '.%s-horizontal-scroller',
+	styleRule: '--stk-columns-spacing',
+	attrName: 'columnSpacing',
+	key: 'columnSpacing',
+	hasUnits: 'px',
+	responsive: 'all',
+} ] )
 
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-horizontal-scroller"
-				styleRule="--stk-columns-spacing"
-				attrName="columnSpacing"
-				key="columnSpacing"
-				hasUnits="px"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-horizontal-scroller"
-				styleRule="--stk-column-gap"
-				attrName="horizontalScrollerColumnGap"
-				key="horizontalScrollerColumnGap-save"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-horizontal-scroller"
-				styleRule="--stk-column-width"
-				attrName="horizontalScrollerColumnWidth"
-				key="horizontalScrollerColumnWidth-save"
-				hasUnits="px"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-horizontal-scroller"
-				styleRule="--stk-column-height"
-				attrName="horizontalScrollerHeight"
-				key="horizontalScrollerHeight-save"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-horizontal-scroller"
-				styleRule="--stk-left-offset"
-				attrName="horizontalScrollerLeftOffset"
-				key="horizontalScrollerLeftOffset-save"
-				hasUnits="px"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-horizontal-scroller"
-				styleRule="--stk-snapping"
-				attrName="horizontalScrollerSnap"
-				key="horizontalScrollerSnap-save"
-			/>
+blockStyles.addBlockStyles( 'horizontalScrollerColumnGap', [ {
+	selector: '.%s-horizontal-scroller',
+	styleRule: '--stk-column-gap',
+	attrName: 'horizontalScrollerColumnGap',
+	key: 'horizontalScrollerColumnGap-save',
+	format: '%spx',
+	responsive: 'all',
+} ] )
 
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-horizontal-scroller"
-				styleRule="--stk-scrollbar-height"
-				attrName="scrollbarHeight"
-				key="scrollbarHeight"
-				format="%spx"
-				enabledCallback={ getAttribute => getAttribute( 'showScrollbar' ) }
-				dependencies={ [ 'showScrollbar' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-horizontal-scroller"
-				styleRule="--stk-scrollbar-height-firefox"
-				attrName="scrollbarHeight"
-				key="scrollbarHeightFirefox"
-				valueCallback={ value => {
-					return value === 0 ? 'none' : ( value < 10 ? 'thin' : 'auto' )
-				} }
-				enabledCallback={ getAttribute => getAttribute( 'showScrollbar' ) }
-				dependencies={ [ 'showScrollbar' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-horizontal-scroller"
-				styleRule="--stk-scrollbar-track-color"
-				attrName="scrollbarTrackColor"
-				key="scrollbarTrackColor"
-				enabledCallback={ getAttribute => getAttribute( 'showScrollbar' ) }
-				dependencies={ [ 'showScrollbar' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-horizontal-scroller"
-				styleRule="--stk-scrollbar-thumb-color"
-				attrName="scrollbarThumbColor"
-				key="scrollbarThumbColor"
-				enabledCallback={ getAttribute => getAttribute( 'showScrollbar' ) }
-				dependencies={ [ 'showScrollbar' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s-horizontal-scroller"
-				styleRule="--stk-scrollbar-thumb-radius"
-				attrName="scrollbarThumbRadius"
-				key="scrollbarThumbRadius"
-				hasUnits="px"
-				enabledCallback={ getAttribute => getAttribute( 'showScrollbar' ) }
-				dependencies={ [ 'showScrollbar' ] }
-			/>
-		</>
-	)
-}
+blockStyles.addBlockStyles( 'horizontalScrollerColumnWidth', [ {
+	selector: '.%s-horizontal-scroller',
+	styleRule: '--stk-column-width',
+	attrName: 'horizontalScrollerColumnWidth',
+	key: 'horizontalScrollerColumnWidth-save',
+	hasUnits: 'px',
+	responsive: 'all',
+} ] )
 
-const BlockStyles = memo( props => {
-	const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
-	const numColumns = ( columnArrangement || '' ).split( ',' ).length
+blockStyles.addBlockStyles( 'horizontalScrollerHeight', [ {
+	selector: '.%s-horizontal-scroller',
+	styleRule: '--stk-column-height',
+	attrName: 'horizontalScrollerHeight',
+	key: 'horizontalScrollerHeight-save',
+	format: '%spx',
+} ] )
 
-	const ColumnOrderStyle = applyFilters( 'stackable.block-component.columns.column-order-style', null )
+blockStyles.addBlockStyles( 'horizontalScrollerLeftOffset', [ {
+	selector: '.%s-horizontal-scroller',
+	styleRule: '--stk-left-offset',
+	attrName: 'horizontalScrollerLeftOffset',
+	key: 'horizontalScrollerLeftOffset-save',
+	hasUnits: 'px',
+	responsive: 'all',
+} ] )
 
-	return (
-		<>
-			<Alignment.Style { ...props } { ...alignmentOptions } />
-			<BlockDiv.Style { ...props } />
-			<MarginBottom.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Styles { ...props } />
-			{ ColumnOrderStyle && <ColumnOrderStyle { ...props } numColumns={ numColumns } /> }
-		</>
-	)
-} )
+blockStyles.addBlockStyles( 'horizontalScrollerSnap', [ {
+	selector: '.%s-horizontal-scroller',
+	styleRule: '--stk-snapping',
+	attrName: 'horizontalScrollerSnap',
+	key: 'horizontalScrollerSnap-save',
+} ] )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
+blockStyles.addBlockStyles( 'scrollbarHeight', [ {
+	selector: '.%s-horizontal-scroller',
+	styleRule: '--stk-scrollbar-height',
+	attrName: 'scrollbarHeight',
+	key: 'scrollbarHeight',
+	format: '%spx',
+	enabledCallback: getAttribute => getAttribute( 'showScrollbar' ),
+	dependencies: [ 'showScrollbar' ],
+}, {
+	selector: '.%s-horizontal-scroller',
+	styleRule: '--stk-scrollbar-height-firefox',
+	attrName: 'scrollbarHeight',
+	key: 'scrollbarHeightFirefox',
+	valueCallback: value => {
+		return value === 0 ? 'none' : ( value < 10 ? 'thin' : 'auto' )
+	},
+	enabledCallback: getAttribute => getAttribute( 'showScrollbar' ),
+	dependencies: [ 'showScrollbar' ],
+} ] )
 
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
+blockStyles.addBlockStyles( 'scrollbarTrackColor', [ {
+	selector: '.%s-horizontal-scroller',
+	styleRule: '--stk-scrollbar-track-color',
+	attrName: 'scrollbarTrackColor',
+	key: 'scrollbarTrackColor',
+	enabledCallback: getAttribute => getAttribute( 'showScrollbar' ),
+	dependencies: [ 'showScrollbar' ],
+} ] )
 
-	const numColumns = ( props.attributes.columnArrangementMobile || props.attributes.columnArrangementTablet || '' ).split( ',' ).length
-	const ColumnOrderStyle = applyFilters( 'stackable.block-component.columns.column-order-style', null )
+blockStyles.addBlockStyles( 'scrollbarThumbColor', [ {
+	selector: '.%s-horizontal-scroller',
+	styleRule: '--stk-scrollbar-thumb-color',
+	attrName: 'scrollbarThumbColor',
+	key: 'scrollbarThumbColor',
+	enabledCallback: getAttribute => getAttribute( 'showScrollbar' ),
+	dependencies: [ 'showScrollbar' ],
+} ] )
 
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } { ...alignmentOptions } />
-			<BlockDiv.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Styles { ...props } />
-			{ ColumnOrderStyle && <ColumnOrderStyle { ...props } numColumns={ numColumns } selector={ '.%s-horizontal-scroller' } /> }
-		</BlockCssCompiler>
-	)
-}
+blockStyles.addBlockStyles( 'scrollbarThumbRadius', [ {
+	selector: '.%s-horizontal-scroller',
+	styleRule: '--stk-scrollbar-thumb-radius',
+	attrName: 'scrollbarThumbRadius',
+	key: 'scrollbarThumbRadius',
+	hasUnits: 'px',
+	enabledCallback: getAttribute => getAttribute( 'showScrollbar' ),
+	dependencies: [ 'showScrollbar' ],
+} ] )
 
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+Alignment.addStyles( blockStyles, {
+	editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`,
+} )
+BlockDiv.addStyles( blockStyles )
+MarginBottom.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
 
-export default BlockStyles
+export default blockStyles
diff --git a/src/block/icon-box/edit.js b/src/block/icon-box/edit.js
index 05f75beca..bbc3f1613 100644
--- a/src/block/icon-box/edit.js
+++ b/src/block/icon-box/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { ContainerStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -13,10 +13,10 @@ import {
 	InspectorBottomTip,
 	InspectorStyleControls,
 	InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	ContainerDiv,
 	ConditionalDisplay,
 	getAlignmentClasses,
@@ -40,6 +40,7 @@ import {
 import { compose } from '@wordpress/compose'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 export const TEMPLATE = [
 	[ 'stackable/icon-label', { blockMargin: { bottom: 0 } }, [
@@ -55,12 +56,9 @@ export const TEMPLATE = [
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const { hasInnerBlocks, innerBlocks } = useBlockContext()
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 
@@ -79,30 +77,20 @@ const Edit = props => {
 	const lastBlockName = last( innerBlocks )?.name
 	const renderAppender = hasInnerBlocks ? ( [ 'stackable/text', 'core/paragraph' ].includes( lastBlockName ) ? () => <></> : InnerBlocks.DefaultBlockAppender ) : InnerBlocks.ButtonBlockAppender
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs hasLayoutPanel={ false } />
-
-				<BlockDiv.InspectorControls />
-				<BlockLink.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-icon-box" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<ContainerDiv.InspectorControls
-					sizeSelector=".stk-block-content"
-					hasContentVerticalAlign={ true }
-				/>
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
+			<InspectorControls />
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -110,11 +98,7 @@ const Edit = props => {
 				attributes={ props.attributes }
 				className={ blockClassNames }
 			>
-				<ContainerStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-icon-box" />
 
 				<ContainerDiv className={ contentClassNames }>
@@ -130,6 +114,33 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs hasLayoutPanel={ false } />
+
+			<BlockDiv.InspectorControls />
+			<BlockLink.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-icon-box" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<ContainerDiv.InspectorControls
+				sizeSelector=".stk-block-content"
+				hasContentVerticalAlign={ true }
+			/>
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/icon-box/save.js b/src/block/icon-box/save.js
index 1f6f3bde1..a8b28d006 100644
--- a/src/block/icon-box/save.js
+++ b/src/block/icon-box/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { ContainerStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -53,7 +48,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<ContainerStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<ContainerDiv.Content
 				className={ contentClassNames }
diff --git a/src/block/icon-box/style.js b/src/block/icon-box/style.js
index 71035d309..90e6a6817 100644
--- a/src/block/icon-box/style.js
+++ b/src/block/icon-box/style.js
@@ -10,56 +10,23 @@ import {
 	MarginBottom,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const containerDivOptions = {
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles, {
 	sizeSelector: '.stk-block-icon-box__content',
 	sizeHorizontalAlignRule: 'margin',
 	sizeVerticalAlignRule: 'justifyContent',
-}
-
-export const ContainerStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ContainerDiv.Style { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style { ...props } />
-		</>
-	)
 } )
+MarginBottom.addStyles( blockStyles )
 
-ContainerStyles.defaultProps = {
-	version: '',
-}
-
-ContainerStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-ContainerStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/icon-button/edit.js b/src/block/icon-button/edit.js
index e70ef56d0..ce3d131fa 100644
--- a/src/block/icon-button/edit.js
+++ b/src/block/icon-button/edit.js
@@ -3,10 +3,9 @@
  */
 import classnames from 'classnames'
 import { version as VERSION } from 'stackable'
-import { InspectorTabs } from '~stackable/components'
+import { InspectorTabs, useBlockCssGenerator } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	Advanced, CustomCSS,
 	Responsive,
 	Button,
@@ -25,22 +24,20 @@ import {
  */
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 /**
  * Internal dependencies
  */
 import { defaultIcon } from './schema'
-import { IconButtonStyles } from './style'
+import iconButtonStyles from './style'
 import { blockStyles } from './block-styles'
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const customAttributes = CustomAttributes.getCustomAttributes( props.attributes )
 
 	const blockClassNames = classnames( [
@@ -48,42 +45,22 @@ const Edit = props => {
 		'stk-block-icon-button',
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles: iconButtonStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs hasLayoutPanel={ false } />
-
-				<BlockStyle.InspectorControls styles={ blockStyles }>
-					<Button.InspectorControls.HoverEffects />
-				</BlockStyle.InspectorControls>
-				<Button.InspectorControls.Link />
-				<Button.InspectorControls.Colors
-					hasTextColor={ false }
-					hasIconColor={ true }
-				/>
-				<Button.InspectorControls.Icon hasColor={ false } defaultValue={ defaultIcon } />
-				<Button.InspectorControls.Size hasWidth={ true } />
-				<Button.InspectorControls.Borders
-					borderSelector=".stk-button"
-					placeholder="24"
-				/>
+			<InspectorControls />
 
-				<BlockDiv.InspectorControls initialOpen="spacing" />
-
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-icon-button" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<IconButtonStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-icon-button" />
 
 			<BlockDiv
@@ -105,6 +82,40 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs hasLayoutPanel={ false } />
+
+			<BlockStyle.InspectorControls styles={ blockStyles }>
+				<Button.InspectorControls.HoverEffects />
+			</BlockStyle.InspectorControls>
+			<Button.InspectorControls.Link />
+			<Button.InspectorControls.Colors
+				hasTextColor={ false }
+				hasIconColor={ true }
+			/>
+			<Button.InspectorControls.Icon hasColor={ false } defaultValue={ defaultIcon } />
+			<Button.InspectorControls.Size hasWidth={ true } />
+			<Button.InspectorControls.Borders
+				borderSelector=".stk-button"
+				placeholder="24"
+			/>
+
+			<BlockDiv.InspectorControls initialOpen="spacing" />
+
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-icon-button" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+
+	)
+} )
+
 export default compose(
 	withBlockWrapper,
 	withQueryLoopContext,
diff --git a/src/block/icon-button/save.js b/src/block/icon-button/save.js
index 132b0f1bc..992dc7374 100644
--- a/src/block/icon-button/save.js
+++ b/src/block/icon-button/save.js
@@ -17,11 +17,6 @@ import {
  */
 import { compose } from '@wordpress/compose'
 
-/**
- * Internal dependencies
- */
-import { IconButtonStyles } from './style'
-
 export const Save = props => {
 	const {
 		className,
@@ -44,7 +39,7 @@ export const Save = props => {
 			applyCustomAttributes={ false }
 			version={ props.version }
 		>
-			<IconButtonStyles.Content { ...propsToPass } />
+			{ props.attributes.generatedCss && <style>{ props.attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ props.attributes } />
 			<Button.Content
 				{ ...propsToPass }
diff --git a/src/block/icon-button/style.js b/src/block/icon-button/style.js
index 97365206b..042d3cfd7 100644
--- a/src/block/icon-button/style.js
+++ b/src/block/icon-button/style.js
@@ -9,53 +9,22 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const buttonOptions = {
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Button.addStyles( blockStyles, {
 	selector: '.stk-button',
 	hoverSelector: '.stk-button:hover',
 	textSelector: '.stk-button__inner-text',
 	textHoverSelector: '.stk-button:hover .stk-button__inner-text',
-}
-
-export const IconButtonStyles = memo( props => {
-	return (
-		<>
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Button.Style { ...props } { ...buttonOptions } />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
 } )
+EffectsAnimations.addStyles( blockStyles )
 
-IconButtonStyles.defaultProps = {
-	version: '',
-}
-
-IconButtonStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Button.Style.Content { ...props } { ...buttonOptions } />
-			<EffectsAnimations.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-IconButtonStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/icon-label/edit.js b/src/block/icon-label/edit.js
index 347d4f884..af07d0836 100644
--- a/src/block/icon-label/edit.js
+++ b/src/block/icon-label/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { IconLabelStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -14,10 +14,10 @@ import {
 	PanelAdvancedSettings,
 	AdvancedRangeControl,
 	InspectorBottomTip,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	MarginBottom,
 	getRowClasses,
 	getAlignmentClasses,
@@ -38,7 +38,7 @@ import {
  */
 import { compose } from '@wordpress/compose'
 import { InnerBlocks } from '@wordpress/block-editor'
-import { Fragment } from '@wordpress/element'
+import { memo } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
 
@@ -56,8 +56,6 @@ const Edit = props => {
 		clientId,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const rowClass = getRowClasses( attributes )
 	const blockAlignmentClass = getAlignmentClasses( attributes )
 
@@ -73,47 +71,22 @@ const Edit = props => {
 		'stk-block-content',
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs hasLayoutPanel={ false } />
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'General', i18n ) }
-						id="general"
-						initialOpen={ true }
-					>
-						<AdvancedRangeControl
-							label={ __( 'Icon Gap', i18n ) }
-							attribute="iconGap2"
-							responsive="all"
-							min={ 0 }
-							sliderMax={ 300 }
-							placeholder="28"
-						/>
-					</PanelAdvancedSettings>
-
-				</InspectorStyleControls>
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-icon-label" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
-
-			<IconLabelStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			<InspectorControls />
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-icon-label" />
 
 			<BlockDiv
@@ -137,6 +110,44 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs hasLayoutPanel={ false } />
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'General', i18n ) }
+					id="general"
+					initialOpen={ true }
+				>
+					<AdvancedRangeControl
+						label={ __( 'Icon Gap', i18n ) }
+						attribute="iconGap2"
+						responsive="all"
+						min={ 0 }
+						sliderMax={ 300 }
+						placeholder="28"
+					/>
+				</PanelAdvancedSettings>
+
+			</InspectorStyleControls>
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-icon-label" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/icon-label/save.js b/src/block/icon-label/save.js
index 168ba6034..bd18b8f1a 100644
--- a/src/block/icon-label/save.js
+++ b/src/block/icon-label/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { IconLabelStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -51,7 +46,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<IconLabelStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<div className={ contentClassNames }>
 				<InnerBlocks.Content />
diff --git a/src/block/icon-label/style.js b/src/block/icon-label/style.js
index 2310be452..27d59dfa2 100644
--- a/src/block/icon-label/style.js
+++ b/src/block/icon-label/style.js
@@ -9,86 +9,36 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-inner-blocks"
-				attrName="iconGap2"
-				key="iconGap-save"
-				styleRule="gap"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".stk-inner-blocks .block-editor-block-list__layout"
-				attrName="iconGap2"
-				key="iconGap"
-				styleRule="gap"
-				format="%spx"
-				responsive="all"
-			/>
-		</>
-	)
-}
-
-export const IconLabelStyles = memo( props => {
-	return (
-		<>
-			{ /* Alignment has been removed in 3.3.0, but retained here to prevent block errors */ }
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Column.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Styles { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-IconLabelStyles.defaultProps = {
-	version: '',
-}
-
-IconLabelStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			{ /* Alignment has been removed in 3.3.0, but retained here to prevent block errors */ }
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Column.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-IconLabelStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+blockStyles.addBlockStyles( 'iconGap2', [ {
+	renderIn: 'save',
+	selector: '.stk-inner-blocks',
+	attrName: 'iconGap2',
+	key: 'iconGap-save',
+	styleRule: 'gap',
+	format: '%spx',
+	responsive: 'all',
+}, {
+	renderIn: 'edit',
+	selector: '.stk-inner-blocks .block-editor-block-list__layout',
+	attrName: 'iconGap2',
+	key: 'iconGap',
+	styleRule: 'gap',
+	format: '%spx',
+	responsive: 'all',
+} ] )
+
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Column.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+
+export default blockStyles
diff --git a/src/block/icon-list-item/edit.js b/src/block/icon-list-item/edit.js
index 734017929..656e4b847 100644
--- a/src/block/icon-list-item/edit.js
+++ b/src/block/icon-list-item/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { TextStyles } from './style'
+import blockStyles from './style'
 import { getUseSvgDef } from '../icon-list/util'
 import {
 	convertToListItems,
@@ -15,7 +15,6 @@ import {
  */
 import {
 	BlockDiv,
-	useGeneratedCss,
 	CustomCSS,
 	Responsive,
 	Advanced,
@@ -30,7 +29,7 @@ import {
 } from '~stackable/block-components'
 import { version as VERSION } from 'stackable'
 import classnames from 'classnames'
-import { InspectorTabs } from '~stackable/components'
+import { InspectorTabs, useBlockCssGenerator } from '~stackable/components'
 import {
 	withBlockAttributeContext,
 	withQueryLoopContext,
@@ -44,7 +43,7 @@ import { useBlockContext } from '~stackable/hooks'
 import { __ } from '@wordpress/i18n'
 import { compose, createHigherOrderComponent } from '@wordpress/compose'
 import { dispatch } from '@wordpress/data'
-import { useEffect } from '@wordpress/element'
+import { useEffect, memo } from '@wordpress/element'
 
 const TABS = [ 'style', 'advanced' ]
 
@@ -59,8 +58,6 @@ const Edit = props => {
 		setAttributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const { icon, text } = attributes
 	const textClasses = getTypographyClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
@@ -108,26 +105,20 @@ const Edit = props => {
 		}
 	}
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs tabs={ TABS } hasLayoutPanel={ false } />
-
-				<Typography.InspectorControls
-					{ ...props }
-					hasTextTag={ false }
-					initialOpen={ true }
-					hasTextShadow={ true }
-				/>
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-icon-list-item" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
+			<InspectorControls blockState={ props.blockState } />
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -138,11 +129,8 @@ const Edit = props => {
 				renderHtmlTag={ false }
 				tabIndex={ -1 } // We need this since navigating up/down selects the wrapper.
 			>
-				<TextStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
+
 				<CustomCSS mainBlockClass="stk-block-icon-list-item" />
 				<div className="stk-block-icon-list-item__content">
 					{ ! ordered && icon &&
@@ -185,6 +173,29 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs tabs={ TABS } hasLayoutPanel={ false } />
+
+			<Typography.InspectorControls
+				{ ...props }
+				hasTextTag={ false }
+				initialOpen={ true }
+				hasTextShadow={ true }
+			/>
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-icon-list-item" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/icon-list-item/save.js b/src/block/icon-list-item/save.js
index 6ee5837cd..73ad4ad70 100644
--- a/src/block/icon-list-item/save.js
+++ b/src/block/icon-list-item/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { TextStyles } from './style'
-
 import {
 	BlockDiv,
 	CustomCSS,
@@ -53,7 +48,7 @@ export const Save = props => {
 			blockTag="li"
 			renderHtmlTag={ false }
 		>
-			<TextStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<div className="stk-block-icon-list-item__content">
 				{ ! attributes.ordered && attributes.icon &&
diff --git a/src/block/icon-list-item/style.js b/src/block/icon-list-item/style.js
index c2c8522bf..88bc88459 100644
--- a/src/block/icon-list-item/style.js
+++ b/src/block/icon-list-item/style.js
@@ -5,56 +5,23 @@ import {
 	Advanced,
 	Typography,
 	Alignment,
-	MarginBottom,
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const typographyOptions = {
+Alignment.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-block-icon-list-item__text',
 	hoverSelector: '.stk-block-icon-list-item__text:hover',
-}
-
-export const TextStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Typography.Style { ...props } { ...typographyOptions } />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
 } )
+EffectsAnimations.addStyles( blockStyles )
 
-TextStyles.defaultProps = {
-	version: '',
-}
-
-TextStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-TextStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/icon-list/deprecated/save.js b/src/block/icon-list/deprecated/save.js
index e74c2700e..8ba91c52a 100644
--- a/src/block/icon-list/deprecated/save.js
+++ b/src/block/icon-list/deprecated/save.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { IconListStyles } from '../style'
+import { IconListStyles } from './style'
 
 /**
  * External dependencies
diff --git a/src/block/icon-list/deprecated/style.js b/src/block/icon-list/deprecated/style.js
new file mode 100644
index 000000000..1a805a17e
--- /dev/null
+++ b/src/block/icon-list/deprecated/style.js
@@ -0,0 +1,274 @@
+/**
+ * Internal dependencies
+ */
+// import { convertSVGStringToBase64 } from './util'
+
+/**
+ * External dependencies
+ */
+import {
+	Typography, MarginBottom, BlockDiv, Advanced, EffectsAnimations, Alignment, Transform,
+} from '~stackable/block-components'
+import { useBlockAttributesContext } from '~stackable/hooks'
+import { BlockCss, BlockCssCompiler } from '~stackable/components'
+
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element'
+
+const typographyOptions = {
+	selector: [
+		'ul li',
+		'ol li',
+	],
+	hoverSelector: [
+		'.%s:hover ul li',
+		'.%s:hover ol li',
+	],
+}
+
+const Styles = props => {
+	const propsToPass = {
+		...props,
+		version: props.version,
+		versionAdded: '3.0.0',
+		versionDeprecated: '',
+	}
+
+	const columns = props.columns ? props.columns : 1
+	const unborderedItems = props.listDisplayStyle === 'grid' ? columns : 1
+
+	return (
+		<>
+			<BlockCss
+				{ ...propsToPass }
+				selector=".stk-block-icon-list-item__content"
+				styleRule="gap"
+				attrName="iconGap"
+				key="iconGap"
+				responsive="all"
+				format="%spx"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector="ol"
+				styleRule="--stk-list-style-type"
+				attrName="listType"
+				key="listType"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=""
+				styleRule="--stk-icon-list-column-count"
+				attrName="columns"
+				key="columns"
+				responsive="all"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=""
+				styleRule="--stk-icon-list-column-gap"
+				attrName="columnGap"
+				key="columnGap"
+				responsive="all"
+				format="%spx"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=""
+				styleRule="--stk-icon-list-row-gap"
+				attrName="rowGap"
+				key="rowGap"
+				responsive="all"
+				format="%spx"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector={ [ 'ul', 'ol' ] }
+				styleRule="paddingLeft"
+				attrName="indentation"
+				key="indentation"
+				responsive="all"
+				format="%spx"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=""
+				hover="all"
+				hoverSelector=".%s:hover"
+				styleRule="--stk-icon-list-marker-color"
+				attrName="markerColor"
+				key="markerColor"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=""
+				hover="all"
+				hoverSelector=".%s:hover"
+				styleRule="--stk-icon-list-icon-opacity"
+				attrName="iconOpacity"
+				key="iconOpacity"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=""
+				hover="all"
+				hoverSelector=".%s:hover"
+				styleRule="--stk-icon-list-icon-rotation"
+				attrName="iconRotation"
+				key="iconRotation"
+				valueCallback={ value => value + 'deg' }
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=""
+				styleRule="--stk-icon-height"
+				attrName="iconSize"
+				key="iconSize"
+				responsive="all"
+				format="%spx"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector="ul .stk-block-icon-list-item__content .stk--svg-wrapper"
+				styleRule="marginRight"
+				attrName="iconSize"
+				key="iconMarginRight"
+				responsive="all"
+				valueCallback={ value => value === 0 ? '0px' : undefined }
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=".stk-block-icon-list-item__content"
+				styleRule="alignItems"
+				attrName="iconVerticalAlignment"
+				key="iconVerticalAlignment"
+				responsive="all"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector={ [ 'ul .stk-block-icon-list-item__content .stk--inner-svg', 'ol .stk-block-icon-list-item__content .stk-block-icon-list-item__marker' ] }
+				styleRule="transform"
+				attrName="iconVerticalOffset"
+				key="iconVerticalOffset"
+				responsive="all"
+				format="translateY(%spx)"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=".stk-block-icon-list-item__marker::before"
+				styleRule="content"
+				attrName="hasPeriod"
+				key="hasPeriod"
+				valueCallback={ value => ! value ? `counter(stk-icon-list-counter, var(--stk-list-style-type, decimal))` : undefined }
+				enabledCallback={ getAttribute => getAttribute( 'ordered' ) }
+				dependencies={ [ 'ordered' ] }
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=".stk-block-icon-list-item__content"
+				styleRule="marginInline"
+				attrName="listAlignment"
+				key="listAlignment-marginInline"
+				responsive="all"
+				valueCallback={ value => value === 'center' ? 'auto' : value === 'right' ? 'auto 0' : value === 'left' ? '0 auto' : '' }
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector={ [ 'ul', 'ol' ] }
+				responsive="all"
+				styleRule="width"
+				attrName="listFullWidth"
+				key="listFullWidth"
+				valueCallback={ value => ! value ? 'fit-content' : undefined }
+				enabledCallback={ getAttribute => getAttribute( 'listDisplayStyle' ) === 'grid' }
+				dependencies={ [ 'listDisplayStyle' ] }
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=".stk-block-icon-list__group"
+				responsive="all"
+				styleRule="marginInline"
+				attrName="contentAlign"
+				key="contentAlign-group"
+				valueCallback={ value => value === 'center' ? 'auto' : value === 'right' ? 'auto 0' : value === 'left' ? '0 auto' : '' }
+				enabledCallback={ getAttribute => getAttribute( 'listDisplayStyle' ) !== 'grid' }
+				dependencies={ [ 'listDisplayStyle' ] }
+			/>
+
+			<BlockCss
+				{ ...propsToPass }
+				selector={ [ `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after` ] }
+				styleRule="borderBottomStyle"
+				attrName="listItemBorderStyle"
+				key="listItemBorderStyle"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector={ [ `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after` ] }
+				styleRule="borderWidth"
+				attrName="listItemBorderWidth"
+				key="listItemBorderWidth"
+				responsive="all"
+				format="%spx"
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector={ [ `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after` ] }
+				styleRule="borderColor"
+				attrName="listItemBorderColor"
+				key="listItemBorderColor"
+			/>
+		</>
+	)
+}
+
+export const IconListStyles = memo( props => {
+	const { columns, listDisplayStyle } = useBlockAttributesContext( attributes => ( {
+		columns: attributes.columns,
+		listDisplayStyle: attributes.listDisplayStyle,
+	} ) )
+
+	return (
+		<>
+			<Alignment.Style { ...props } />
+			<Typography.Style { ...props } { ...typographyOptions } />
+			<MarginBottom.Style { ...props } />
+			<BlockDiv.Style { ...props } />
+			<EffectsAnimations.Style { ...props } />
+			<Advanced.Style { ...props } />
+			<Transform.Style { ...props } />
+			<Styles { ...props } columns={ columns } listDisplayStyle={ listDisplayStyle } />
+		</>
+	)
+} )
+
+IconListStyles.defaultProps = {
+	version: '',
+}
+
+IconListStyles.Content = props => {
+	if ( props.attributes.generatedCss ) {
+		return <style>{ props.attributes.generatedCss }</style>
+	}
+	const columns = props.attributes.columns
+	const listDisplayStyle = props.attributes.listDisplayStyle
+	return (
+		<BlockCssCompiler>
+			<Alignment.Style.Content { ...props } />
+			<Typography.Style.Content { ...props } { ...typographyOptions } />
+			<MarginBottom.Style.Content { ...props } />
+			<BlockDiv.Style.Content { ...props } />
+			<EffectsAnimations.Style.Content { ...props } />
+			<Advanced.Style.Content { ...props } />
+			<Transform.Style.Content { ...props } />
+			<Styles { ...props } columns={ columns } listDisplayStyle={ listDisplayStyle } />
+		</BlockCssCompiler>
+	)
+}
+
+IconListStyles.Content.defaultProps = {
+	version: '',
+	attributes: {},
+}
diff --git a/src/block/icon-list/edit.js b/src/block/icon-list/edit.js
index 9aaa05f2a..586c6f2c2 100644
--- a/src/block/icon-list/edit.js
+++ b/src/block/icon-list/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { IconListStyles } from './style'
+import blockStyles from './style'
 
 /***
  * External dependencies
@@ -19,6 +19,7 @@ import {
 	AdvancedToolbarControl,
 	AdvancedSelectControl,
 	AlignButtonsControl,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	withBlockAttributeContext, withBlockWrapperIsHovered, withQueryLoopContext,
@@ -26,7 +27,6 @@ import {
 import {
 	Typography,
 	BlockDiv,
-	useGeneratedCss,
 	Advanced,
 	CustomCSS,
 	Responsive,
@@ -50,6 +50,7 @@ import { compose } from '@wordpress/compose'
 import { useInnerBlocksProps } from '@wordpress/block-editor'
 import { dispatch } from '@wordpress/data'
 import { addFilter } from '@wordpress/hooks'
+import { memo } from '@wordpress/element'
 
 const ALLOWED_INNER_BLOCKS = [ 'stackable/icon-list-item' ]
 
@@ -129,14 +130,11 @@ const ICON_VERTICAL_ALIGN_OMIT = [ 'stretch' ]
 
 const Edit = props => {
 	const {
-		clientId,
 		attributes,
 		setAttributes,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const {
 		ordered,
 		icon,
@@ -182,286 +180,309 @@ const Edit = props => {
 		__experimentalCaptureToolbars: true,
 	} )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs hasLayoutPanel={ false } />
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'General', i18n ) }
-						initialOpen={ true }
-						id="general"
-					>
-						<AlignButtonsControl
-							label={ sprintf( __( '%s Alignment', i18n ), __( 'List Item', i18n ) ) }
-							attribute="listAlignment"
-							responsive="all"
-						/>
-						<AdvancedToggleControl
-							label={ __( 'Full Width', i18n ) }
-							attribute="listFullWidth"
-							defaultValue={ true }
-							help={ __( 'More noticeable when using wide layouts or list item borders', i18n ) }
-						/>
-						{ ! listFullWidth && (
-							<AlignButtonsControl
-								label={ sprintf( __( '%s Alignment', i18n ), __( 'List', i18n ) ) }
-								attribute="contentAlign"
-								responsive="all"
-								justified={ false }
-							/>
-						) }
+			<InspectorControls
+				blockState={ props.blockState }
+				setAttributes={ setAttributes }
+				columns={ attributes.columns }
+				ordered={ ordered }
+				icon={ icon }
+				listFullWidth={ listFullWidth }
+				listItemBorderStyle={ listItemBorderStyle }
+				listItemBorderColor={ listItemBorderColor }
+				resetCustomIcons={ resetCustomIcons }
+			/>
 
-						<AdvancedRangeControl
-							label={ __( 'Columns', i18n ) }
-							attribute="columns"
-							min="1"
-							sliderMax="4"
-							step="1"
-							placeholder="1"
-							responsive="all"
-						/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
+			<CustomCSS mainBlockClass="stk-block-icon-list" />
 
-						{ attributes.columns > 1 && (
-							<AdvancedSelectControl
-								label={ __( 'List Display Style', i18n ) }
-								options={ listDisplayOptions }
-								attribute="listDisplayStyle"
-							/>
-						) }
-
-						{ attributes.columns > 1 && (
-							<AdvancedRangeControl
-								label={ __( 'Column Gap', i18n ) }
-								attribute="columnGap"
-								min="0"
-								sliderMax="50"
-								responsive="all"
-								placeholder="16"
-							/>
-						) }
+			<BlockDiv
+				blockHoverClass={ props.blockHoverClass }
+				clientId={ props.clientId }
+				attributes={ props.attributes }
+				className={ blockClassNames }
+			>
+				{ ! ordered && <IconSvgDef icon={ icon } uniqueId={ attributes.uniqueId } /> }
+				<ParentTagName { ...innerBlocksProps } >
+					{ wrapList &&
+						<TagName className="stk-block-icon-list__group">
+							{ innerBlocksProps.children }
+						</TagName>
+					}
+					{ ! wrapList && innerBlocksProps.children }
+				</ParentTagName>
+			</BlockDiv>
+			{ props.isHovered && <MarginBottom /> }
+		</>
+	)
+}
 
-						<AdvancedRangeControl
-							label={ __( 'Row Gap', i18n ) }
-							attribute="rowGap"
-							min="0"
-							sliderMax="50"
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs hasLayoutPanel={ false } />
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'General', i18n ) }
+					initialOpen={ true }
+					id="general"
+				>
+					<AlignButtonsControl
+						label={ sprintf( __( '%s Alignment', i18n ), __( 'List Item', i18n ) ) }
+						attribute="listAlignment"
+						responsive="all"
+					/>
+					<AdvancedToggleControl
+						label={ __( 'Full Width', i18n ) }
+						attribute="listFullWidth"
+						defaultValue={ true }
+						help={ __( 'More noticeable when using wide layouts or list item borders', i18n ) }
+					/>
+					{ ! props.listFullWidth && (
+						<AlignButtonsControl
+							label={ sprintf( __( '%s Alignment', i18n ), __( 'List', i18n ) ) }
+							attribute="contentAlign"
 							responsive="all"
+							justified={ false }
 						/>
-
-						<AdvancedRangeControl
-							label={ __( 'Icon Gap', i18n ) }
-							attribute="iconGap"
-							min="0"
-							sliderMax="20"
-							responsive="all"
-							placeholder="8"
+					) }
+
+					<AdvancedRangeControl
+						label={ __( 'Columns', i18n ) }
+						attribute="columns"
+						min="1"
+						sliderMax="4"
+						step="1"
+						placeholder="1"
+						responsive="all"
+					/>
+
+					{ props.columns > 1 && (
+						<AdvancedSelectControl
+							label={ __( 'List Display Style', i18n ) }
+							options={ listDisplayOptions }
+							attribute="listDisplayStyle"
 						/>
+					) }
 
+					{ props.columns > 1 && (
 						<AdvancedRangeControl
-							label={ __( 'Indentation', i18n ) }
-							attribute="indentation"
+							label={ __( 'Column Gap', i18n ) }
+							attribute="columnGap"
 							min="0"
 							sliderMax="50"
 							responsive="all"
-							placeholder=""
+							placeholder="16"
 						/>
+					) }
+
+					<AdvancedRangeControl
+						label={ __( 'Row Gap', i18n ) }
+						attribute="rowGap"
+						min="0"
+						sliderMax="50"
+						responsive="all"
+					/>
+
+					<AdvancedRangeControl
+						label={ __( 'Icon Gap', i18n ) }
+						attribute="iconGap"
+						min="0"
+						sliderMax="20"
+						responsive="all"
+						placeholder="8"
+					/>
+
+					<AdvancedRangeControl
+						label={ __( 'Indentation', i18n ) }
+						attribute="indentation"
+						min="0"
+						sliderMax="50"
+						responsive="all"
+						placeholder=""
+					/>
+
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'Icons & Numbers', i18n ) }
+					initialOpen={ false }
+					id="icon-and-markers"
+				>
+					<AdvancedSelectControl
+						label={ __( 'List Type', i18n ) }
+						options={ listTypeOptions }
+						value={ props.ordered ? 'ordered' : 'unordered' }
+						onChange={ v => props.setAttributes( { ordered: v === 'ordered' } ) }
+						default="unordered"
+					/>
+
+					{ ! props.ordered && (
+						<IconControl
+							label={ __( 'Icon', i18n ) }
+							value={ props.icon }
+							onChange={ icon => {
+								props.setAttributes( { icon } )
+								// Reset custom individual icons.
+								props.resetCustomIcons()
+							} }
+							defaultValue={ DEFAULT_SVG }
+						/>
+					) }
 
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'Icons & Numbers', i18n ) }
-						initialOpen={ false }
-						id="icon-and-markers"
-					>
+					{ props.ordered && (
 						<AdvancedSelectControl
 							label={ __( 'List Type', i18n ) }
-							options={ listTypeOptions }
-							value={ ordered ? 'ordered' : 'unordered' }
-							onChange={ v => setAttributes( { ordered: v === 'ordered' } ) }
-							default="unordered"
+							attribute="listType"
+							options={ listStyleTypeOptions }
 						/>
+					) }
 
-						{ ! attributes.ordered && (
-							<IconControl
-								label={ __( 'Icon', i18n ) }
-								value={ attributes.icon }
-								onChange={ icon => {
-									setAttributes( { icon } )
-									// Reset custom individual icons.
-									resetCustomIcons()
-								} }
-								defaultValue={ DEFAULT_SVG }
-							/>
-						) }
-
-						{ attributes.ordered && (
-							<AdvancedSelectControl
-								label={ __( 'List Type', i18n ) }
-								attribute="listType"
-								options={ listStyleTypeOptions }
-							/>
-						) }
-
-						{ attributes.ordered && (
-							<AdvancedToggleControl
-								label={ __( 'With Period', i18n ) }
-								attribute="hasPeriod"
-								defaultValue={ true }
-							/>
-						) }
-
-						<ColorPaletteControl
-							label={ __( 'Color', i18n ) }
-							attribute="markerColor"
-							hover="all"
+					{ props.ordered && (
+						<AdvancedToggleControl
+							label={ __( 'With Period', i18n ) }
+							attribute="hasPeriod"
+							defaultValue={ true }
 						/>
-
+					) }
+
+					<ColorPaletteControl
+						label={ __( 'Color', i18n ) }
+						attribute="markerColor"
+						hover="all"
+					/>
+
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Size', i18n ), ! props.ordered ? __( 'Icon', i18n ) : __( 'Number', i18n ) ) }
+						attribute="iconSize"
+						min={ 0 }
+						max={ 50 }
+						step={ 1 }
+						allowReset={ true }
+						responsive="all"
+						placeholder="16"
+					/>
+
+					<AdvancedRangeControl
+						label={ __( 'Icon Opacity', i18n ) }
+						attribute="iconOpacity"
+						min={ 0 }
+						max={ 1 }
+						step={ 0.1 }
+						allowReset={ true }
+						placeholder="1.0"
+						hover="all"
+					/>
+
+					<AdvancedRangeControl
+						label={ __( 'Icon Rotation', i18n ) }
+						attribute="iconRotation"
+						min={ 0 }
+						max={ 360 }
+						allowReset={ true }
+						placeholder="0"
+					/>
+
+					<AdvancedToolbarControl
+						label={ __( 'Icon Vertical Alignment', i18n ) }
+						controls="flex-vertical"
+						omit={ ICON_VERTICAL_ALIGN_OMIT }
+						attribute="iconVerticalAlignment"
+						fullwidth={ true }
+						responsive="all"
+						help={ __( 'This is more visible if you have long text in your list.', i18n ) }
+						placeholder="center"
+					/>
+
+					<AdvancedRangeControl
+						label={ __( 'Icon Vertical Offset', i18n ) }
+						attribute="iconVerticalOffset"
+						min={ -1000 }
+						sliderMin={ -50 }
+						sliderMax={ 50 }
+						step={ 1 }
+						allowReset={ true }
+						responsive="all"
+						placeholder="0"
+					/>
+				</PanelAdvancedSettings>
+
+				<PanelAdvancedSettings
+					title={ __( 'Icon List Item Borders', i18n ) }
+					initialOpen={ false }
+					id="icon-list-item-borders"
+				>
+					<AdvancedToolbarControl
+						label={ __( 'Borders', i18n ) }
+						controls={ BORDER_CONTROLS }
+						className="ugb-border-controls__border-type-toolbar"
+						attribute="listItemBorderStyle"
+						fullwidth={ true }
+						isSmall={ true }
+					/>
+
+					{ props.listItemBorderStyle &&
 						<AdvancedRangeControl
-							label={ sprintf( __( '%s Size', i18n ), ! attributes.ordered ? __( 'Icon', i18n ) : __( 'Number', i18n ) ) }
-							attribute="iconSize"
-							min={ 0 }
-							max={ 50 }
-							step={ 1 }
-							allowReset={ true }
+							label={ __( 'Border Width', i18n ) }
+							attribute="listItemBorderWidth"
 							responsive="all"
-							placeholder="16"
-						/>
-
-						<AdvancedRangeControl
-							label={ __( 'Icon Opacity', i18n ) }
-							attribute="iconOpacity"
 							min={ 0 }
-							max={ 1 }
-							step={ 0.1 }
-							allowReset={ true }
-							placeholder="1.0"
-							hover="all"
-						/>
-
-						<AdvancedRangeControl
-							label={ __( 'Icon Rotation', i18n ) }
-							attribute="iconRotation"
-							min={ 0 }
-							max={ 360 }
-							allowReset={ true }
-							placeholder="0"
+							max={ 99 }
+							step={ 1 }
+							sliderMax={ 5 }
+							defaultLocked={ true }
+							placeholder="1"
 						/>
+					}
 
-						<AdvancedToolbarControl
-							label={ __( 'Icon Vertical Alignment', i18n ) }
-							controls="flex-vertical"
-							omit={ ICON_VERTICAL_ALIGN_OMIT }
-							attribute="iconVerticalAlignment"
-							fullwidth={ true }
-							responsive="all"
-							help={ __( 'This is more visible if you have long text in your list.', i18n ) }
-							placeholder="center"
+					{ props.listItemBorderStyle &&
+						<ColorPaletteControl
+							label={ __( 'Border Color', i18n ) }
+							attribute="listItemBorderColor"
+							value={ props.listItemBorderColor ? props.listItemBorderColor : '#00000066' }
+							default="#00000066"
 						/>
+					}
 
-						<AdvancedRangeControl
-							label={ __( 'Icon Vertical Offset', i18n ) }
-							attribute="iconVerticalOffset"
-							min={ -1000 }
-							sliderMin={ -50 }
-							sliderMax={ 50 }
-							step={ 1 }
-							allowReset={ true }
-							responsive="all"
-							placeholder="0"
-						/>
-					</PanelAdvancedSettings>
-
-					<PanelAdvancedSettings
-						title={ __( 'Icon List Item Borders', i18n ) }
-						initialOpen={ false }
-						id="icon-list-item-borders"
-					>
-						<AdvancedToolbarControl
-							label={ __( 'Borders', i18n ) }
-							controls={ BORDER_CONTROLS }
-							className="ugb-border-controls__border-type-toolbar"
-							attribute="listItemBorderStyle"
-							fullwidth={ true }
-							isSmall={ true }
-						/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
 
-						{ listItemBorderStyle &&
-							<AdvancedRangeControl
-								label={ __( 'Border Width', i18n ) }
-								attribute="listItemBorderWidth"
-								responsive="all"
-								min={ 0 }
-								max={ 99 }
-								step={ 1 }
-								sliderMax={ 5 }
-								defaultLocked={ true }
-								placeholder="1"
-							/>
-						}
-
-						{ listItemBorderStyle &&
-							<ColorPaletteControl
-								label={ __( 'Border Color', i18n ) }
-								attribute="listItemBorderColor"
-								value={ listItemBorderColor ? listItemBorderColor : '#00000066' }
-								default="#00000066"
-							/>
-						}
-
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<Typography.InspectorControls
-					{ ...props }
-					isMultiline={ true }
-					initialOpen={ false }
-					hasTextTag={ false }
-					hasTextContent={ false }
-				/>
-
-				<Alignment.InspectorControls
-					enableContentAlign={ false }
-				/>
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-icon-list" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<IconListStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
+			<Typography.InspectorControls
+				{ ...props }
+				isMultiline={ true }
+				initialOpen={ false }
+				hasTextTag={ false }
+				hasTextContent={ false }
 			/>
-			<CustomCSS mainBlockClass="stk-block-icon-list" />
 
-			<BlockDiv
-				blockHoverClass={ props.blockHoverClass }
-				clientId={ props.clientId }
-				attributes={ props.attributes }
-				className={ blockClassNames }
-			>
-				{ ! ordered && <IconSvgDef icon={ icon } uniqueId={ attributes.uniqueId } /> }
-				<ParentTagName { ...innerBlocksProps } >
-					{ wrapList &&
-						<TagName className="stk-block-icon-list__group">
-							{ innerBlocksProps.children }
-						</TagName>
-					}
-					{ ! wrapList && innerBlocksProps.children }
-				</ParentTagName>
-			</BlockDiv>
-			{ props.isHovered && <MarginBottom /> }
+			<Alignment.InspectorControls
+				enableContentAlign={ false }
+			/>
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-icon-list" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
 		</>
 	)
-}
+} )
 
 export default compose(
 	withBlockWrapperIsHovered,
diff --git a/src/block/icon-list/save.js b/src/block/icon-list/save.js
index db9d96509..3c936fcac 100644
--- a/src/block/icon-list/save.js
+++ b/src/block/icon-list/save.js
@@ -1,7 +1,6 @@
 /**
  * Internal dependencies
  */
-import { IconListStyles } from './style'
 import { IconSvgDef } from './util'
 
 /**
@@ -52,7 +51,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<IconListStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			{ ! attributes.ordered && <IconSvgDef icon={ attributes.icon } uniqueId={ attributes.uniqueId } /> }
 			<ParentTagName className={ tagNameClassNames } >
diff --git a/src/block/icon-list/style.js b/src/block/icon-list/style.js
index 1a805a17e..5777f93b3 100644
--- a/src/block/icon-list/style.js
+++ b/src/block/icon-list/style.js
@@ -9,15 +9,206 @@
 import {
 	Typography, MarginBottom, BlockDiv, Advanced, EffectsAnimations, Alignment, Transform,
 } from '~stackable/block-components'
-import { useBlockAttributesContext } from '~stackable/hooks'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
+
+blockStyles.addBlockStyles( 'iconGap', [ {
+	selector: '.stk-block-icon-list-item__content',
+	styleRule: 'gap',
+	attrName: 'iconGap',
+	key: 'iconGap',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'listType', [ {
+	selector: 'ol',
+	styleRule: '--stk-list-style-type',
+	attrName: 'listType',
+	key: 'listType',
+} ] )
+
+blockStyles.addBlockStyles( 'columns', [ {
+	selector: '',
+	styleRule: '--stk-icon-list-column-count',
+	attrName: 'columns',
+	key: 'columns',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'columnGap', [ {
+	selector: '',
+	styleRule: '--stk-icon-list-column-gap',
+	attrName: 'columnGap',
+	key: 'columnGap',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'rowGap', [ {
+	selector: '',
+	styleRule: '--stk-icon-list-row-gap',
+	attrName: 'rowGap',
+	key: 'rowGap',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'indentation', [ {
+	selector: [ 'ul', 'ol' ],
+	styleRule: 'paddingLeft',
+	attrName: 'indentation',
+	key: 'indentation',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'markerColor', [ {
+	selector: '',
+	hover: 'all',
+	hoverSelector: '.%s:hover',
+	styleRule: '--stk-icon-list-marker-color',
+	attrName: 'markerColor',
+	key: 'markerColor',
+} ] )
+
+blockStyles.addBlockStyles( 'iconOpacity', [ {
+	selector: '',
+	hover: 'all',
+	hoverSelector: '.%s:hover',
+	styleRule: '--stk-icon-list-icon-opacity',
+	attrName: 'iconOpacity',
+	key: 'iconOpacity',
+} ] )
+
+blockStyles.addBlockStyles( 'iconRotation', [ {
+	selector: '',
+	hover: 'all',
+	hoverSelector: '.%s:hover',
+	styleRule: '--stk-icon-list-icon-rotation',
+	attrName: 'iconRotation',
+	key: 'iconRotation',
+	valueCallback: value => value + 'deg',
+} ] )
+
+blockStyles.addBlockStyles( 'iconSize', [ {
+	selector: '',
+	styleRule: '--stk-icon-height',
+	attrName: 'iconSize',
+	key: 'iconSize',
+	responsive: 'all',
+	format: '%spx',
+}, {
+	selector: 'ul .stk-block-icon-list-item__content .stk--svg-wrapper',
+	styleRule: 'marginRight',
+	attrName: 'iconSize',
+	key: 'iconMarginRight',
+	responsive: 'all',
+	valueCallback: value => value === 0 ? '0px' : undefined,
+} ] )
+
+blockStyles.addBlockStyles( 'iconVerticalAlignment', [ {
+	selector: '.stk-block-icon-list-item__content',
+	styleRule: 'alignItems',
+	attrName: 'iconVerticalAlignment',
+	key: 'iconVerticalAlignment',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'iconVerticalOffset', [ {
+	selector: [ 'ul .stk-block-icon-list-item__content .stk--inner-svg', 'ol .stk-block-icon-list-item__content .stk-block-icon-list-item__marker' ],
+	styleRule: 'transform',
+	attrName: 'iconVerticalOffset',
+	key: 'iconVerticalOffset',
+	responsive: 'all',
+	format: 'translateY(%spx)',
+} ] )
+
+blockStyles.addBlockStyles( 'hasPeriod', [ {
+	selector: '.stk-block-icon-list-item__marker::before',
+	styleRule: 'content',
+	attrName: 'hasPeriod',
+	key: 'hasPeriod',
+	valueCallback: value => ! value ? `counter(stk-icon-list-counter, var(--stk-list-style-type, decimal))` : undefined,
+	enabledCallback: getAttribute => getAttribute( 'ordered' ),
+	dependencies: [ 'ordered' ],
+} ] )
+
+blockStyles.addBlockStyles( 'listAlignment', [ {
+	selector: '.stk-block-icon-list-item__content',
+	styleRule: 'marginInline',
+	attrName: 'listAlignment',
+	key: 'listAlignment-marginInline',
+	responsive: 'all',
+	valueCallback: value => value === 'center' ? 'auto' : value === 'right' ? 'auto 0' : value === 'left' ? '0 auto' : '',
+} ] )
 
-const typographyOptions = {
+blockStyles.addBlockStyles( 'listFullWidth', [ {
+	selector: [ 'ul', 'ol' ],
+	responsive: 'all',
+	styleRule: 'width',
+	attrName: 'listFullWidth',
+	key: 'listFullWidth',
+	valueCallback: value => ! value ? 'fit-content' : undefined,
+	enabledCallback: getAttribute => getAttribute( 'listDisplayStyle' ) === 'grid',
+	dependencies: [ 'listDisplayStyle' ],
+} ] )
+
+blockStyles.addBlockStyles( 'contentAlign', [ {
+	selector: '.stk-block-icon-list__group',
+	responsive: 'all',
+	styleRule: 'marginInline',
+	attrName: 'contentAlign',
+	key: 'contentAlign-group',
+	valueCallback: value => value === 'center' ? 'auto' : value === 'right' ? 'auto 0' : value === 'left' ? '0 auto' : '',
+	enabledCallback: getAttribute => getAttribute( 'listDisplayStyle' ) !== 'grid',
+	dependencies: [ 'listDisplayStyle' ],
+} ] )
+
+blockStyles.addBlockStyles( 'listItemBorderStyle', [ {
+	selectorCallback: getAttribute => {
+		const columns = getAttribute( 'columns' ) || 1
+		const unborderedItems = getAttribute( 'listDisplayStyle' ) === 'grid' ? columns : 1
+
+		return `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after`
+	},
+	styleRule: 'borderBottomStyle',
+	attrName: 'listItemBorderStyle',
+	key: 'listItemBorderStyle',
+} ] )
+
+blockStyles.addBlockStyles( 'listItemBorderWidth', [ {
+	selectorCallback: getAttribute => {
+		const columns = getAttribute( 'columns' ) || 1
+		const unborderedItems = getAttribute( 'listDisplayStyle' ) === 'grid' ? columns : 1
+
+		return `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after`
+	},
+	styleRule: 'borderWidth',
+	attrName: 'listItemBorderWidth',
+	key: 'listItemBorderWidth',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'listItemBorderColor', [ {
+	selectorCallback: getAttribute => {
+		const columns = getAttribute( 'columns' ) || 1
+		const unborderedItems = getAttribute( 'listDisplayStyle' ) === 'grid' ? columns : 1
+
+		return `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after`
+	},
+	styleRule: 'borderColor',
+	attrName: 'listItemBorderColor',
+	key: 'listItemBorderColor',
+} ] )
+
+Alignment.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
 	selector: [
 		'ul li',
 		'ol li',
@@ -26,249 +217,11 @@ const typographyOptions = {
 		'.%s:hover ul li',
 		'.%s:hover ol li',
 	],
-}
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	const columns = props.columns ? props.columns : 1
-	const unborderedItems = props.listDisplayStyle === 'grid' ? columns : 1
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-icon-list-item__content"
-				styleRule="gap"
-				attrName="iconGap"
-				key="iconGap"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector="ol"
-				styleRule="--stk-list-style-type"
-				attrName="listType"
-				key="listType"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--stk-icon-list-column-count"
-				attrName="columns"
-				key="columns"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--stk-icon-list-column-gap"
-				attrName="columnGap"
-				key="columnGap"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--stk-icon-list-row-gap"
-				attrName="rowGap"
-				key="rowGap"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ 'ul', 'ol' ] }
-				styleRule="paddingLeft"
-				attrName="indentation"
-				key="indentation"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				hover="all"
-				hoverSelector=".%s:hover"
-				styleRule="--stk-icon-list-marker-color"
-				attrName="markerColor"
-				key="markerColor"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				hover="all"
-				hoverSelector=".%s:hover"
-				styleRule="--stk-icon-list-icon-opacity"
-				attrName="iconOpacity"
-				key="iconOpacity"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				hover="all"
-				hoverSelector=".%s:hover"
-				styleRule="--stk-icon-list-icon-rotation"
-				attrName="iconRotation"
-				key="iconRotation"
-				valueCallback={ value => value + 'deg' }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--stk-icon-height"
-				attrName="iconSize"
-				key="iconSize"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector="ul .stk-block-icon-list-item__content .stk--svg-wrapper"
-				styleRule="marginRight"
-				attrName="iconSize"
-				key="iconMarginRight"
-				responsive="all"
-				valueCallback={ value => value === 0 ? '0px' : undefined }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-icon-list-item__content"
-				styleRule="alignItems"
-				attrName="iconVerticalAlignment"
-				key="iconVerticalAlignment"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ 'ul .stk-block-icon-list-item__content .stk--inner-svg', 'ol .stk-block-icon-list-item__content .stk-block-icon-list-item__marker' ] }
-				styleRule="transform"
-				attrName="iconVerticalOffset"
-				key="iconVerticalOffset"
-				responsive="all"
-				format="translateY(%spx)"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-icon-list-item__marker::before"
-				styleRule="content"
-				attrName="hasPeriod"
-				key="hasPeriod"
-				valueCallback={ value => ! value ? `counter(stk-icon-list-counter, var(--stk-list-style-type, decimal))` : undefined }
-				enabledCallback={ getAttribute => getAttribute( 'ordered' ) }
-				dependencies={ [ 'ordered' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-icon-list-item__content"
-				styleRule="marginInline"
-				attrName="listAlignment"
-				key="listAlignment-marginInline"
-				responsive="all"
-				valueCallback={ value => value === 'center' ? 'auto' : value === 'right' ? 'auto 0' : value === 'left' ? '0 auto' : '' }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ 'ul', 'ol' ] }
-				responsive="all"
-				styleRule="width"
-				attrName="listFullWidth"
-				key="listFullWidth"
-				valueCallback={ value => ! value ? 'fit-content' : undefined }
-				enabledCallback={ getAttribute => getAttribute( 'listDisplayStyle' ) === 'grid' }
-				dependencies={ [ 'listDisplayStyle' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-icon-list__group"
-				responsive="all"
-				styleRule="marginInline"
-				attrName="contentAlign"
-				key="contentAlign-group"
-				valueCallback={ value => value === 'center' ? 'auto' : value === 'right' ? 'auto 0' : value === 'left' ? '0 auto' : '' }
-				enabledCallback={ getAttribute => getAttribute( 'listDisplayStyle' ) !== 'grid' }
-				dependencies={ [ 'listDisplayStyle' ] }
-			/>
-
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after` ] }
-				styleRule="borderBottomStyle"
-				attrName="listItemBorderStyle"
-				key="listItemBorderStyle"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after` ] }
-				styleRule="borderWidth"
-				attrName="listItemBorderWidth"
-				key="listItemBorderWidth"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after` ] }
-				styleRule="borderColor"
-				attrName="listItemBorderColor"
-				key="listItemBorderColor"
-			/>
-		</>
-	)
-}
-
-export const IconListStyles = memo( props => {
-	const { columns, listDisplayStyle } = useBlockAttributesContext( attributes => ( {
-		columns: attributes.columns,
-		listDisplayStyle: attributes.listDisplayStyle,
-	} ) )
-
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<Typography.Style { ...props } { ...typographyOptions } />
-			<MarginBottom.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Styles { ...props } columns={ columns } listDisplayStyle={ listDisplayStyle } />
-		</>
-	)
 } )
+MarginBottom.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
 
-IconListStyles.defaultProps = {
-	version: '',
-}
-
-IconListStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-	const columns = props.attributes.columns
-	const listDisplayStyle = props.attributes.listDisplayStyle
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } />
-			<MarginBottom.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Styles { ...props } columns={ columns } listDisplayStyle={ listDisplayStyle } />
-		</BlockCssCompiler>
-	)
-}
-
-IconListStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/icon/edit.js b/src/block/icon/edit.js
index cd395605d..f8c4cfd4f 100644
--- a/src/block/icon/edit.js
+++ b/src/block/icon/edit.js
@@ -1,6 +1,6 @@
 /** Internal dependencies
  */
-import { IconStyles } from './style'
+import blockStyles from './style'
 /**
  * External dependencies
  */
@@ -12,13 +12,13 @@ import {
 	InspectorAdvancedControls,
 	PanelAdvancedSettings,
 	AdvancedTextControl,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	withBlockAttributeContext, withBlockWrapperIsHovered, withQueryLoopContext,
 } from '~stackable/higher-order'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	Icon,
 	getAlignmentClasses,
 	Advanced,
@@ -40,16 +40,14 @@ import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
 import { addFilter, applyFilters } from '@wordpress/hooks'
 import { defaultIcon } from './schema'
+import { memo } from '@wordpress/element'
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const blockAlignmentClass = getAlignmentClasses( attributes )
 
 	const blockClassNames = classnames( [
@@ -60,44 +58,24 @@ const Edit = props => {
 
 	const derivedIcon = applyFilters( 'stackable.block-component.icon.default', defaultIcon )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<Alignment.InspectorControls />
-				<Icon.InspectorControls initialOpen={ true } hasMultiColor={ true } defaultValue={ derivedIcon } />
-				<BlockDiv.InspectorControls />
-				<Link.InspectorControls hasToggle={ true } isAdvancedTab={ true } />
-
-				<InspectorAdvancedControls>
-					<PanelAdvancedSettings
-						title={ __( 'Accessibility', i18n ) }
-						id="accessibility"
-					>
-						<AdvancedTextControl
-							isDynamic={ false }
-							label={ __( 'Icon Label', i18n ) }
-							attribute="ariaLabel"
-						/>
-					</PanelAdvancedSettings>
-				</InspectorAdvancedControls>
-
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-icon" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<IconStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
+			<InspectorControls
+				derivedIcon={ derivedIcon }
 			/>
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-icon" />
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -114,6 +92,41 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Alignment.InspectorControls />
+			<Icon.InspectorControls initialOpen={ true } hasMultiColor={ true } defaultValue={ props.derivedIcon } />
+			<BlockDiv.InspectorControls />
+			<Link.InspectorControls hasToggle={ true } isAdvancedTab={ true } />
+
+			<InspectorAdvancedControls>
+				<PanelAdvancedSettings
+					title={ __( 'Accessibility', i18n ) }
+					id="accessibility"
+				>
+					<AdvancedTextControl
+						isDynamic={ false }
+						label={ __( 'Icon Label', i18n ) }
+						attribute="ariaLabel"
+					/>
+				</PanelAdvancedSettings>
+			</InspectorAdvancedControls>
+
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-icon" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/icon/save.js b/src/block/icon/save.js
index f0f23c58e..33e5e514d 100644
--- a/src/block/icon/save.js
+++ b/src/block/icon/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { IconStyles } from './style'
-
 import classnames from 'classnames'
 import { withVersion } from '~stackable/higher-order'
 import { version as VERSION } from 'stackable'
@@ -42,7 +37,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<IconStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			{ /** Don't add an `a` tag if linkUrl is not defined. **/ }
 			{ attributes.linkUrl ? (
diff --git a/src/block/icon/style.js b/src/block/icon/style.js
index 002405019..ee353afe0 100644
--- a/src/block/icon/style.js
+++ b/src/block/icon/style.js
@@ -9,53 +9,21 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const iconStyleOptions = {
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+Icon.addStyles( blockStyles, {
 	selector: '.stk--svg-wrapper',
 	hoverSelector: '.stk--svg-wrapper:hover',
-}
-
-export const IconStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Icon.Style { ...props } { ...iconStyleOptions } />
-		</>
-	)
 } )
 
-IconStyles.defaultProps = {
-	version: '',
-}
-
-IconStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Icon.Style.Content { ...props } { ...iconStyleOptions } />
-		</BlockCssCompiler>
-	)
-}
-
-IconStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/image-box/edit.js b/src/block/image-box/edit.js
index 76cf2476c..e5f944c18 100644
--- a/src/block/image-box/edit.js
+++ b/src/block/image-box/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { ImageBoxStyles } from './style'
+import blockStyles from './style'
 import variations from './variations'
 
 /**
@@ -14,6 +14,7 @@ import {
 	InspectorBlockControls,
 	InspectorBottomTip,
 	InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import { useBlockContext } from '~stackable/hooks'
 import {
@@ -21,7 +22,6 @@ import {
 } from '~stackable/higher-order'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	getAlignmentClasses,
 	Alignment,
 	Advanced,
@@ -42,7 +42,7 @@ import {
  */
 import { compose } from '@wordpress/compose'
 import { InnerBlocks } from '@wordpress/block-editor'
-import { Fragment } from '@wordpress/element'
+import { Fragment, memo } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
 
@@ -52,12 +52,9 @@ const Edit = props => {
 	const { hasInnerBlocks, innerBlocks } = useBlockContext()
 
 	const {
-		clientId,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const blockOrientation = getBlockOrientation( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	const rowClass = getRowClasses( props.attributes )
@@ -79,31 +76,23 @@ const Edit = props => {
 	const lastBlockName = last( innerBlocks )?.name
 	const renderAppender = hasInnerBlocks ? ( [ 'stackable/text', 'core/paragraph' ].includes( lastBlockName ) ? () => <></> : InnerBlocks.DefaultBlockAppender ) : InnerBlocks.ButtonBlockAppender
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<Fragment>
 
-			<InspectorTabs />
+			<InspectorControls />
 
-			<Alignment.InspectorControls />
-			<BlockDiv.InspectorControls />
-			<BlockLink.InspectorControls />
-			<Advanced.InspectorControls />
-			<Transform.InspectorControls />
-			<EffectsAnimations.InspectorControls />
-			<CustomAttributes.InspectorControls />
-			<CustomCSS.InspectorControls mainBlockClass="stk-block-image-box" />
-			<Responsive.InspectorControls />
-			<ConditionalDisplay.InspectorControls />
-
-			<InspectorBlockControls>
-				<InspectorBottomTip />
-			</InspectorBlockControls>
-
-			<ImageBoxStyles
-				version={ VERSION }
-				clientId={ clientId }
-				blockState={ props.blockState }
-			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-image-box" />
 
 			<BlockDiv
@@ -127,6 +116,29 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Alignment.InspectorControls />
+			<BlockDiv.InspectorControls />
+			<BlockLink.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-image-box" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorBlockControls>
+				<InspectorBottomTip />
+			</InspectorBlockControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/image-box/save.js b/src/block/image-box/save.js
index 96a05587d..af657c3b2 100644
--- a/src/block/image-box/save.js
+++ b/src/block/image-box/save.js
@@ -1,7 +1,3 @@
-/** Internal dependencies
- */
-import { ImageBoxStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -53,7 +49,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<ImageBoxStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<div className={ contentClassNames }>
 				<InnerBlocks.Content />
diff --git a/src/block/image-box/style.js b/src/block/image-box/style.js
index cd633f721..5c4829048 100644
--- a/src/block/image-box/style.js
+++ b/src/block/image-box/style.js
@@ -8,46 +8,17 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-export const ImageBoxStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-ImageBoxStyles.defaultProps = {
-	version: '',
-}
-
-ImageBoxStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
 
-ImageBoxStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/image/edit.js b/src/block/image/edit.js
index 733d8316b..6c66e54b4 100644
--- a/src/block/image/edit.js
+++ b/src/block/image/edit.js
@@ -1,18 +1,19 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
  */
 import classnames from 'classnames'
 import { version as VERSION, i18n } from 'stackable'
-import { InspectorTabs, AlignButtonsControl } from '~stackable/components'
+import {
+	InspectorTabs, AlignButtonsControl, useBlockCssGenerator,
+} from '~stackable/components'
 import { useBlockContext } from '~stackable/hooks'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	Image,
 	Advanced,
 	CustomCSS,
@@ -41,6 +42,7 @@ import { __ } from '@wordpress/i18n'
 import { compose } from '@wordpress/compose'
 import { useBlockEditContext } from '@wordpress/block-editor'
 import { applyFilters, addFilter } from '@wordpress/hooks'
+import { memo } from '@wordpress/element'
 
 const heightUnit = [ 'px', 'vh', '%' ]
 
@@ -50,8 +52,6 @@ const Edit = props => {
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const figcaptionClassnames = classnames(
 		getTypographyClasses( props.attributes, 'figcaption%s' ),
 		'stk-img-figcaption'
@@ -72,42 +72,22 @@ const Edit = props => {
 		blockAlignmentClass,
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<Alignment.InspectorControls />
-				<Image.InspectorControls
-					{ ...props }
-					initialOpen={ true }
-					heightUnits={ heightUnit }
-					hasLightbox
-				/>
-				{ enableLink && <Link.InspectorControls hasTitle={ true } isAdvancedTab={ true } /> }
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-image" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-				<Typography.InspectorControls
-					label={ __( 'Caption', i18n ) }
-					attrNameTemplate="figcaption%s"
-					hasToggle={ true }
-					hasTextTag={ false }
-					hasTextContent={ true }
-					initialOpen={ false }
-				/>
-			</>
+			<InspectorControls enableLink={ enableLink } />
 
-			<BlockStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-image" />
 
 			<BlockDiv
@@ -135,6 +115,39 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Alignment.InspectorControls />
+			<Image.InspectorControls
+				// { ...props }
+				initialOpen={ true }
+				heightUnits={ heightUnit }
+				hasLightbox
+			/>
+			{ props.enableLink && <Link.InspectorControls hasTitle={ true } isAdvancedTab={ true } /> }
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-image" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+			<Typography.InspectorControls
+				label={ __( 'Caption', i18n ) }
+				attrNameTemplate="figcaption%s"
+				hasToggle={ true }
+				hasTextTag={ false }
+				hasTextContent={ true }
+				initialOpen={ false }
+			/>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/image/save.js b/src/block/image/save.js
index 9d6479a59..d36dbf24b 100644
--- a/src/block/image/save.js
+++ b/src/block/image/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -47,7 +42,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			{ ( props.attributes.imageUrl || props.attributes.imageExternalUrl ) &&
 				<Image.Content
diff --git a/src/block/image/style.js b/src/block/image/style.js
index aa2a18016..6361ae22b 100644
--- a/src/block/image/style.js
+++ b/src/block/image/style.js
@@ -10,80 +10,29 @@ import {
 	Transform,
 	Typography,
 } from '~stackable/block-components'
-import { BlockCssCompiler, BlockCss } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const figcaptionTypographyOptions = {
+blockStyles.addBlockStyles( 'figcaptionAlignment', [ {
+	selector: '.%s .stk-img-figcaption',
+	styleRule: 'textAlign',
+	attrName: 'figcaptionAlignment',
+} ] )
+
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-img-figcaption',
 	hoverSelector: '.stk-img-figcaption:hover',
 	attrNameTemplate: 'figcaption%s',
-}
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s .stk-img-figcaption"
-				styleRule="textAlign"
-				attrName="figcaptionAlignment"
-			/>
-		</>
-	)
-}
-
-const BlockStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Image.Style { ...props } />
-			<Typography.Style { ...figcaptionTypographyOptions } { ...props } />
-			<Styles { ...props } />
-		</>
-	)
 } )
+EffectsAnimations.addStyles( blockStyles )
+Image.addStyles( blockStyles )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
-
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Image.Style.Content { ...props } />
-			<Typography.Style.Content { ...figcaptionTypographyOptions } { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
-export default BlockStyles
+export default blockStyles
diff --git a/src/block/map/edit.js b/src/block/map/edit.js
index 756e2aec8..30675304b 100644
--- a/src/block/map/edit.js
+++ b/src/block/map/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 import mapStyleOptions from './map-styles'
 import LocationControl from './location-control'
 import {
@@ -23,11 +23,11 @@ import {
 	PanelAdvancedSettings,
 	ResizerTooltip,
 	StyleControl,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import { useDeviceType } from '~stackable/hooks'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	Advanced,
 	CustomCSS,
 	Icon,
@@ -64,7 +64,7 @@ import {
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
 import {
-	Fragment, useEffect, useRef, useState, useMemo, useCallback,
+	Fragment, useEffect, useRef, useState, useMemo, useCallback, memo,
 } from '@wordpress/element'
 import { dispatch } from '@wordpress/data'
 
@@ -77,7 +77,6 @@ const Edit = props => {
 		isHovered,
 		isSelected,
 		setAttributes,
-		clientId,
 	} = props
 
 	const {
@@ -114,8 +113,6 @@ const Edit = props => {
 		initMapLibrary( apiKey, initMap )
 	}, [] )
 
-	useGeneratedCss( attributes )
-
 	// Always keep note whether this block uses the Google API Key.
 	useEffect( () => {
 		dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
@@ -259,224 +256,31 @@ const Edit = props => {
 		}
 	}, 400 ), [ geocoderRef.current, setAttributes, useGeocoding ] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs tabs={ TABS } hasLayoutPanel={ false } />
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'General', i18n ) }
-						className={ classnames( { 'stk--uses-api-key': apiKey } ) }
-						initialOpen={ true }
-						id="general"
-					>
-						{ userCanManageApiKey && ! apiKey && (
-							<Notice className="stk-block-map__api-key-notice" status="info" isDismissible={ false }>
-								{ __( 'Some map features require a Google API Key.', i18n ) }
-							&nbsp;
-								<ExternalLink
-									type="link"
-									href={ settingsUrl + '#editor-settings' }
-									rel="next"
-								>
-									{ __( 'Add API key here.', i18n ) }
-								</ExternalLink>
-							</Notice>
-						) }
-						{ ! apiKey ? (
-							<>
-								<AdvancedTextControl
-									label={ __( 'Location', i18n ) }
-									attribute="address"
-									placeholder={ __( 'Enter an address or location', i18n ) }
-								/>
-							</>
-						) : (
-							<LocationControl
-								value={ address }
-								onTextChange={ address => {
-									if ( ! address ) {
-										return setAttributes( { address } )
-									}
-
-									// If the typed in value is a lat lng string, split it and set the lat and lng values.
-									let	 location = ''
-									if ( address.match( /^\s*[-\d.]+(.*?)[, ][-\d.]+/ ) ) { // Check if there's a number comma/space number.
-										const [ , lat, , lng ] = address.match( /^\s*([-\d.]+)(.*?)([-\d.]+)/ )
-										location = {
-											lat: parseFloat( lat ),
-											lng: parseFloat( lng ),
-										}
-									} else {
-										// Try Geocoding.
-										geocodeAddress( address )
-									}
-									setAttributes( {
-										address,
-										location,
-									} )
-								} }
-								onPlaceChange={ place => {
-									setAttributes( {
-										address: place.formatted_address,
-										location: { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() },
-									} )
-							 } }
-							/>
-						) }
-						<AdvancedRangeControl
-							label={ __( 'Height', i18n ) }
-							attribute="height"
-							min={ 0 }
-							sliderMin={ 200 }
-							sliderMax={ 500 }
-							step={ 1 }
-							allowReset={ true }
-							placeholder={ DEFAULT_HEIGHT }
-							responsive="all"
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Zoom', i18n ) }
-							attribute="zoom"
-							min={ 1 }
-							max={ 24 }
-							step={ 1 }
-							allowReset={ true }
-							placeholder={ DEFAULT_ZOOM }
-						/>
-						<AdvancedToggleControl
-							label={ __( 'Enable Dragging', i18n ) }
-							className="stk--needs-api-key"
-							attribute="isDraggable"
-							defaultValue={ true }
-						/>
-						<AdvancedToggleControl
-							label={ __( 'Full Screen Button', i18n ) }
-							className="stk--needs-api-key"
-							attribute="showFullScreenButton"
-							defaultValue={ true }
-						/>
-						<AdvancedToggleControl
-							label={ __( 'Map Type Buttons', i18n ) }
-							className="stk--needs-api-key"
-							attribute="showMapTypeButtons"
-							defaultValue={ true }
-						/>
-						<AdvancedToggleControl
-							label={ __( 'Street View Button', i18n ) }
-							className="stk--needs-api-key"
-							attribute="showStreetViewButton"
-							defaultValue={ true }
-						/>
-						<AdvancedToggleControl
-							label={ __( 'Zoom Buttons', i18n ) }
-							className="stk--needs-api-key"
-							attribute="showZoomButtons"
-							defaultValue={ true }
-						/>
-					</PanelAdvancedSettings>
-					<PanelAdvancedSettings
-						title={ __( 'Map Style', i18n ) }
-						className={ classnames( { 'stk--uses-api-key': apiKey } ) }
-						initialOpen={ false }
-						id="map-style"
-					>
-						<StyleControl
-							className="stk--needs-api-key"
-							options={ mapStyleOptions }
-							value={ mapStyle }
-							onSelect={ style => {
-								setAttributes( {
-									mapStyle: style.value,
-									customMapStyle: '',
-								} )
-							} }
-						/>
-						<AdvancedTextControl
-							className="stk--needs-api-key"
-							label={ __( 'Custom Map Style (Paste JSON here)', i18n ) }
-							isMultiline
-							attribute="customMapStyle"
-							onChange={ value => {
-								setAttributes( {
-									mapStyle: '',
-									customMapStyle: value,
-								} )
-							} }
-							help={
-								<Fragment>
-									<ExternalLink href="https://docs.wpstackable.com/article/483-how-to-use-stackable-map-block#style">
-										{ __( 'Learn how to use Custom Map Styles', i18n ) }
-									</ExternalLink>
-								</Fragment>
-							}
-						/>
-					</PanelAdvancedSettings>
-					<PanelAdvancedSettings
-						className={ classnames( 'stk--needs-api-key', { 'stk--uses-api-key': apiKey } ) }
-						title={ __( 'Map Marker', i18n ) }
-						initialOpen={ false }
-						hasToggle={ true }
-						checked={ apiKey ? showMarker : false }
-						onChange={ showMarker => setAttributes( { showMarker } ) }
-						id="map-marker"
-					>
-						<div className="stk--needs-api-key">
-							<Icon.InspectorControls
-								hideControlsIfIconIsNotSet={ true }
-								hasShape={ false }
-								wrapInPanels={ false }
-								hasBackgroundShape={ false }
-								responsive=""
-								hover=""
-								hasGradient={ false }
-								iconSizeProps={ {
-									sliderMin: 20,
-									sliderMax: 100,
-									placeholder: DEFAULT_ICON_SIZE,
-								} }
-								iconControlHelp={ __( 'Uploaded Icon and Icon Color settings are not fully compatible.', i18n ) }
-							/>
-						</div>
-						{ icon && <AdvancedRangeControl
-							label={ __( 'Horizontal Icon Anchor Point', i18n ) }
-							className="stk--needs-api-key"
-							attribute="iconAnchorPositionX"
-							sliderMin={ -100 }
-							sliderMax={ 100 }
-							step={ 1 }
-							allowReset={ true }
-							placeholder="0"
-						/> }
-						{ icon && <AdvancedRangeControl
-							label={ __( 'Vertical Icon Anchor Point', i18n ) }
-							className="stk--needs-api-key"
-							attribute="iconAnchorPositionY"
-							sliderMin={ -100 }
-							sliderMax={ 100 }
-							step={ 1 }
-							allowReset={ true }
-							placeholder="0"
-						/> }
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<BlockDiv.InspectorControls hasSizeSpacing={ false } />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-map" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<BlockStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
+			<InspectorControls
+				apiKey={ apiKey }
+				userCanManageApiKey={ userCanManageApiKey }
+				setAttributes={ setAttributes }
+				geocodeAddress={ geocodeAddress }
+				address={ address }
+				mapStyle={ mapStyle }
+				showMarker={ showMarker }
+				icon={ icon }
 			/>
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-map" />
 
 			<BlockDiv
@@ -546,6 +350,221 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs tabs={ TABS } hasLayoutPanel={ false } />
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'General', i18n ) }
+					className={ classnames( { 'stk--uses-api-key': props.apiKey } ) }
+					initialOpen={ true }
+					id="general"
+				>
+					{ props.userCanManageApiKey && ! props.apiKey && (
+						<Notice className="stk-block-map__api-key-notice" status="info" isDismissible={ false }>
+							{ __( 'Some map features require a Google API Key.', i18n ) }
+							&nbsp;
+							<ExternalLink
+								type="link"
+								href={ settingsUrl + '#editor-settings' }
+								rel="next"
+							>
+								{ __( 'Add API key here.', i18n ) }
+							</ExternalLink>
+						</Notice>
+					) }
+					{ ! props.apiKey ? (
+						<>
+							<AdvancedTextControl
+								label={ __( 'Location', i18n ) }
+								attribute="address"
+								placeholder={ __( 'Enter an address or location', i18n ) }
+							/>
+						</>
+					) : (
+						<LocationControl
+							value={ props.address }
+							onTextChange={ address => {
+								if ( ! address ) {
+									return props.setAttributes( { address } )
+								}
+
+								// If the typed in value is a lat lng string, split it and set the lat and lng values.
+								let	 location = ''
+								if ( address.match( /^\s*[-\d.]+(.*?)[, ][-\d.]+/ ) ) { // Check if there's a number comma/space number.
+									const [ , lat, , lng ] = address.match( /^\s*([-\d.]+)(.*?)([-\d.]+)/ )
+									location = {
+										lat: parseFloat( lat ),
+										lng: parseFloat( lng ),
+									}
+								} else {
+									// Try Geocoding.
+									props.geocodeAddress( address )
+								}
+								props.setAttributes( {
+									address,
+									location,
+								} )
+							} }
+							onPlaceChange={ place => {
+								props.setAttributes( {
+									address: place.formatted_address,
+									location: { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() },
+								} )
+							 } }
+						/>
+					) }
+					<AdvancedRangeControl
+						label={ __( 'Height', i18n ) }
+						attribute="height"
+						min={ 0 }
+						sliderMin={ 200 }
+						sliderMax={ 500 }
+						step={ 1 }
+						allowReset={ true }
+						placeholder={ DEFAULT_HEIGHT }
+						responsive="all"
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Zoom', i18n ) }
+						attribute="zoom"
+						min={ 1 }
+						max={ 24 }
+						step={ 1 }
+						allowReset={ true }
+						placeholder={ DEFAULT_ZOOM }
+					/>
+					<AdvancedToggleControl
+						label={ __( 'Enable Dragging', i18n ) }
+						className="stk--needs-api-key"
+						attribute="isDraggable"
+						defaultValue={ true }
+					/>
+					<AdvancedToggleControl
+						label={ __( 'Full Screen Button', i18n ) }
+						className="stk--needs-api-key"
+						attribute="showFullScreenButton"
+						defaultValue={ true }
+					/>
+					<AdvancedToggleControl
+						label={ __( 'Map Type Buttons', i18n ) }
+						className="stk--needs-api-key"
+						attribute="showMapTypeButtons"
+						defaultValue={ true }
+					/>
+					<AdvancedToggleControl
+						label={ __( 'Street View Button', i18n ) }
+						className="stk--needs-api-key"
+						attribute="showStreetViewButton"
+						defaultValue={ true }
+					/>
+					<AdvancedToggleControl
+						label={ __( 'Zoom Buttons', i18n ) }
+						className="stk--needs-api-key"
+						attribute="showZoomButtons"
+						defaultValue={ true }
+					/>
+				</PanelAdvancedSettings>
+				<PanelAdvancedSettings
+					title={ __( 'Map Style', i18n ) }
+					className={ classnames( { 'stk--uses-api-key': props.apiKey } ) }
+					initialOpen={ false }
+					id="map-style"
+				>
+					<StyleControl
+						className="stk--needs-api-key"
+						options={ mapStyleOptions }
+						value={ props.mapStyle }
+						onSelect={ style => {
+							props.setAttributes( {
+								mapStyle: style.value,
+								customMapStyle: '',
+							} )
+						} }
+					/>
+					<AdvancedTextControl
+						className="stk--needs-api-key"
+						label={ __( 'Custom Map Style (Paste JSON here)', i18n ) }
+						isMultiline
+						attribute="customMapStyle"
+						onChange={ value => {
+							props.setAttributes( {
+								mapStyle: '',
+								customMapStyle: value,
+							} )
+						} }
+						help={
+							<Fragment>
+								<ExternalLink href="https://docs.wpstackable.com/article/483-how-to-use-stackable-map-block#style">
+									{ __( 'Learn how to use Custom Map Styles', i18n ) }
+								</ExternalLink>
+							</Fragment>
+						}
+					/>
+				</PanelAdvancedSettings>
+				<PanelAdvancedSettings
+					className={ classnames( 'stk--needs-api-key', { 'stk--uses-api-key': props.apiKey } ) }
+					title={ __( 'Map Marker', i18n ) }
+					initialOpen={ false }
+					hasToggle={ true }
+					checked={ props.apiKey ? props.showMarker : false }
+					onChange={ showMarker => props.setAttributes( { showMarker } ) }
+					id="map-marker"
+				>
+					<div className="stk--needs-api-key">
+						<Icon.InspectorControls
+							hideControlsIfIconIsNotSet={ true }
+							hasShape={ false }
+							wrapInPanels={ false }
+							hasBackgroundShape={ false }
+							responsive=""
+							hover=""
+							hasGradient={ false }
+							iconSizeProps={ {
+								sliderMin: 20,
+								sliderMax: 100,
+								placeholder: DEFAULT_ICON_SIZE,
+							} }
+							iconControlHelp={ __( 'Uploaded Icon and Icon Color settings are not fully compatible.', i18n ) }
+						/>
+					</div>
+					{ props.icon && <AdvancedRangeControl
+						label={ __( 'Horizontal Icon Anchor Point', i18n ) }
+						className="stk--needs-api-key"
+						attribute="iconAnchorPositionX"
+						sliderMin={ -100 }
+						sliderMax={ 100 }
+						step={ 1 }
+						allowReset={ true }
+						placeholder="0"
+					/> }
+					{ props.icon && <AdvancedRangeControl
+						label={ __( 'Vertical Icon Anchor Point', i18n ) }
+						className="stk--needs-api-key"
+						attribute="iconAnchorPositionY"
+						sliderMin={ -100 }
+						sliderMax={ 100 }
+						step={ 1 }
+						allowReset={ true }
+						placeholder="0"
+					/> }
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+
+			<BlockDiv.InspectorControls hasSizeSpacing={ false } />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-map" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/map/save.js b/src/block/map/save.js
index aea5aecdc..566b5944e 100644
--- a/src/block/map/save.js
+++ b/src/block/map/save.js
@@ -8,7 +8,6 @@ import {
 	DEFAULT_LOCATION,
 	DEFAULT_ADDRESS,
 } from './util'
-import BlockStyles from './style'
 import { withVersion } from '~stackable/higher-order'
 import {
 	BlockDiv,
@@ -84,7 +83,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			{ usesApiKey
 				? (
diff --git a/src/block/map/style.js b/src/block/map/style.js
index 2a1fac0f4..0211f51a3 100644
--- a/src/block/map/style.js
+++ b/src/block/map/style.js
@@ -7,82 +7,35 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".stk-block-map__canvas"
-				styleRule="height"
-				attrName="height"
-				key="height"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-block-map__canvas, iframe"
-				styleRule="height"
-				attrName="height"
-				key="height-save"
-				format="%spx"
-				responsive="all"
-			/>
-		</>
-	)
-}
+import { BlockStyleGenerator } from '~stackable/components'
 
-const BlockStyles = memo( props => {
-	return (
-		<>
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Styles { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
-
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
-export default BlockStyles
+blockStyles.addBlockStyles( 'height', [ {
+	renderIn: 'edit',
+	selector: '.stk-block-map__canvas',
+	styleRule: 'height',
+	attrName: 'height',
+	key: 'height',
+	format: '%spx',
+	responsive: 'all',
+}, {
+	renderIn: 'save',
+	selector: '.stk-block-map__canvas, iframe',
+	styleRule: 'height',
+	attrName: 'height',
+	key: 'height-save',
+	format: '%spx',
+	responsive: 'all',
+} ] )
+
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+
+export default blockStyles
diff --git a/src/block/notification/edit.js b/src/block/notification/edit.js
index 8bdf82da6..b655144eb 100644
--- a/src/block/notification/edit.js
+++ b/src/block/notification/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { ContainerStyles } from './style'
+import blockStyles from './style'
 import SVGCloseIcon from './images/close-icon.svg'
 import variations from './variations'
 
@@ -19,10 +19,10 @@ import {
 	PanelAdvancedSettings,
 	AdvancedSelectControl,
 	InspectorBottomTip,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	ContainerDiv,
 	ConditionalDisplay,
 	Alignment,
@@ -50,19 +50,17 @@ import { compose } from '@wordpress/compose'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
+import { memo } from '@wordpress/element'
 
 const TEMPLATE = variations[ 0 ].innerBlocks
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
 		setAttributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const { hasInnerBlocks, innerBlocks } = useBlockContext()
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 
@@ -85,80 +83,20 @@ const Edit = props => {
 	const lastBlockName = last( innerBlocks )?.name
 	const renderAppender = hasInnerBlocks ? ( [ 'stackable/text', 'core/paragraph' ].includes( lastBlockName ) ? () => <></> : InnerBlocks.DefaultBlockAppender ) : InnerBlocks.ButtonBlockAppender
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<ContentAlign.InspectorControls />
-				<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'General', i18n ) }
-						id="general"
-						initialOpen={ true }
-					>
-						<AdvancedSelectControl
-							label={ __( 'Notification Type', i18n ) }
-							attribute="notificationType"
-							options={ [
-								{
-									label: __( 'Success', i18n ),
-									value: '',
-								},
-								{
-									label: __( 'Error', i18n ),
-									value: 'error',
-								},
-								{
-									label: __( 'Warning', i18n ),
-									value: 'warning',
-								},
-								{
-									label: __( 'Information', i18n ),
-									value: 'info',
-								},
-							] }
-						/>
-					</PanelAdvancedSettings>
-					<PanelAdvancedSettings
-						title={ __( 'Dismissible', i18n ) }
-						id="dismissible"
-						hasToggle={ true }
-						checked={ props.attributes.isDismissible }
-						onChange={ value => setAttributes( { isDismissible: value } ) }
-					>
-						<AdvancedRangeControl
-							label={ __( 'Icon Size', i18n ) }
-							attribute="dismissibleSize"
-							min="0"
-							sliderMax="50"
-							step="1"
-							placeholder="16"
-						/>
-						<ColorPaletteControl
-							label={ __( 'Icon Color', i18n ) }
-							attribute="dismissibleColor"
-						/>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<BlockDiv.InspectorControls />
-				<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
-				<BlockLink.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-notification" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<InspectorStyleControls>
-				<InspectorBottomTip />
-			</InspectorStyleControls>
+			<InspectorControls setAttributes={ setAttributes } isDismissible={ attributes.isDismissible } />
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -167,11 +105,7 @@ const Edit = props => {
 				className={ blockClassNames }
 				enableVariationPicker={ true }
 			>
-				<ContainerStyles
-					version={ VERSION }
-					clientId={ clientId }
-					blockState={ props.blockState }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-notification" />
 
 				<ContainerDiv className={ contentClassNames }>
@@ -199,6 +133,84 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<ContentAlign.InspectorControls />
+			<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'General', i18n ) }
+					id="general"
+					initialOpen={ true }
+				>
+					<AdvancedSelectControl
+						label={ __( 'Notification Type', i18n ) }
+						attribute="notificationType"
+						options={ [
+							{
+								label: __( 'Success', i18n ),
+								value: '',
+							},
+							{
+								label: __( 'Error', i18n ),
+								value: 'error',
+							},
+							{
+								label: __( 'Warning', i18n ),
+								value: 'warning',
+							},
+							{
+								label: __( 'Information', i18n ),
+								value: 'info',
+							},
+						] }
+					/>
+				</PanelAdvancedSettings>
+				<PanelAdvancedSettings
+					title={ __( 'Dismissible', i18n ) }
+					id="dismissible"
+					hasToggle={ true }
+					checked={ props.isDismissible }
+					onChange={ value => props.setAttributes( { isDismissible: value } ) }
+				>
+					<AdvancedRangeControl
+						label={ __( 'Icon Size', i18n ) }
+						attribute="dismissibleSize"
+						min="0"
+						sliderMax="50"
+						step="1"
+						placeholder="16"
+					/>
+					<ColorPaletteControl
+						label={ __( 'Icon Color', i18n ) }
+						attribute="dismissibleColor"
+					/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+
+			<BlockDiv.InspectorControls />
+			<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
+			<BlockLink.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-notification" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/notification/save.js b/src/block/notification/save.js
index 012736f21..59e5d9b97 100644
--- a/src/block/notification/save.js
+++ b/src/block/notification/save.js
@@ -1,7 +1,6 @@
 /**
  * Internal dependencies
  */
-import { ContainerStyles } from './style'
 import SVGCloseIcon from './images/close-icon.svg'
 
 /**
@@ -66,7 +65,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<ContainerStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<ContainerDiv.Content
 				className={ contentClassNames }
diff --git a/src/block/notification/style.js b/src/block/notification/style.js
index 8d57171c9..2caa07358 100644
--- a/src/block/notification/style.js
+++ b/src/block/notification/style.js
@@ -10,91 +10,43 @@ import {
 	MarginBottom,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const containerDivOptions = {
+blockStyles.addBlockStyles( 'dismissibleSize', [ {
+	selector: '.stk-container',
+	attrName: 'dismissibleSize',
+	key: 'dismissibleSize',
+	styleRule: 'paddingInlineEnd',
+	enabledCallback: getAttribute => getAttribute( 'isDismissible' ) && getAttribute( 'dismissibleSize' ),
+	valuePreCallback: value => value + 44,
+	// 44 is an arbitrary number based on the size of the container paddings vs the close button size.
+	format: '%spx',
+	dependencies: [ 'isDismissible' ],
+} ] )
+
+blockStyles.addBlockStyles( 'dismissibleColor', [ {
+	selector: '.stk-block-notification__close-button svg',
+	attrName: 'dismissibleColor',
+	key: 'dismissibleColor',
+	styleRule: 'fill',
+	enabledCallback: getAttribute => getAttribute( 'isDismissible' ),
+	dependencies: [ 'isDismissible' ],
+} ] )
+
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles, {
 	sizeSelector: '.stk-block-notification__content',
 	sizeHorizontalAlignRule: 'margin',
-}
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-container"
-				attrName="dismissibleSize"
-				key="dismissibleSize"
-				styleRule="paddingInlineEnd"
-				enabledCallback={ getAttribute => getAttribute( 'isDismissible' ) && getAttribute( 'dismissibleSize' ) }
-				valuePreCallback={ value => value + 44 } // 44 is an arbitrary number based on the size of the container paddings vs the close button size.
-				format="%spx"
-				dependencies={ [ 'isDismissible' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-notification__close-button svg"
-				attrName="dismissibleColor"
-				key="dismissibleColor"
-				styleRule="fill"
-				enabledCallback={ getAttribute => getAttribute( 'isDismissible' ) }
-				dependencies={ [ 'isDismissible' ] }
-			/>
-		</>
-	)
-}
-
-export const ContainerStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ContainerDiv.Style { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style { ...props } />
-			<Styles { ...props } />
-		</>
-	)
 } )
+MarginBottom.addStyles( blockStyles )
 
-ContainerStyles.defaultProps = {
-	version: '',
-}
-
-ContainerStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style.Content { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-ContainerStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/number-box/edit.js b/src/block/number-box/edit.js
index 952c1adcc..2ddd82726 100644
--- a/src/block/number-box/edit.js
+++ b/src/block/number-box/edit.js
@@ -1,14 +1,13 @@
 /**
  * Internal dependencies
  */
-import { HeadingStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
  */
 import {
 	BlockDiv,
-	useGeneratedCss,
 	CustomCSS,
 	Responsive,
 	Advanced,
@@ -31,6 +30,7 @@ import {
 	InspectorStyleControls,
 	InspectorTabs,
 	PanelAdvancedSettings,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	withBlockAttributeContext, withBlockWrapperIsHovered, withQueryLoopContext,
@@ -40,19 +40,16 @@ import {
  * WordPress dependencies
  */
 import { compose } from '@wordpress/compose'
-import { } from '@wordpress/element'
+import { memo } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
 		setAttributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const textClasses = getTypographyClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	const blockClassNames = classnames( [
@@ -68,64 +65,27 @@ const Edit = props => {
 		textClasses,
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'Shape', i18n ) }
-						id="shape"
-						initialOpen={ true }
-						hasToggle={ true }
-						checked={ attributes.hasShape }
-						onChange={ hasShape => setAttributes( { hasShape } ) }
-					>
-						<AdvancedRangeControl
-							label={ __( 'Size', i18n ) }
-							attribute="shapeSize"
-							responsive="all"
-							min="0"
-							sliderMax="200"
-							placeholder="96"
-						/>
-						<BackgroundControls
-							attrNameTemplate="shape%s"
-							hasGradient={ false }
-							hasBackgroundImage={ false }
-							hasBackgroundGradientBlendMode={ false }
-						/>
-						<BorderControls
-							attrNameTemplate="shape%s"
-							borderSliderMax="100"
-						/>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-				<Typography.InspectorControls
-					{ ...props }
-					initialOpen={ false }
-					hasTextTag={ false }
-					sizePlaceholder="56"
-				/>
 
-				<Alignment.InspectorControls />
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-number-box" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-			</>
-
-			<HeadingStyles
-				version={ VERSION }
+			<InspectorControls
+				setAttributes={ setAttributes }
 				blockState={ props.blockState }
-				clientId={ clientId }
+				hasShape={ attributes.hasShape }
 			/>
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-number-box" />
 
 			<BlockDiv
@@ -145,6 +105,61 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'Shape', i18n ) }
+					id="shape"
+					initialOpen={ true }
+					hasToggle={ true }
+					checked={ props.hasShape }
+					onChange={ hasShape => props.setAttributes( { hasShape } ) }
+				>
+					<AdvancedRangeControl
+						label={ __( 'Size', i18n ) }
+						attribute="shapeSize"
+						responsive="all"
+						min="0"
+						sliderMax="200"
+						placeholder="96"
+					/>
+					<BackgroundControls
+						attrNameTemplate="shape%s"
+						hasGradient={ false }
+						hasBackgroundImage={ false }
+						hasBackgroundGradientBlendMode={ false }
+					/>
+					<BorderControls
+						attrNameTemplate="shape%s"
+						borderSliderMax="100"
+					/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+			<Typography.InspectorControls
+				{ ...props }
+				initialOpen={ false }
+				hasTextTag={ false }
+				sizePlaceholder="56"
+			/>
+
+			<Alignment.InspectorControls />
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-number-box" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/number-box/save.js b/src/block/number-box/save.js
index c3d087371..3c1fb0700 100644
--- a/src/block/number-box/save.js
+++ b/src/block/number-box/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { HeadingStyles } from './style'
-
 import {
 	BlockDiv,
 	CustomCSS,
@@ -50,7 +45,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<HeadingStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Typography.Content
 				tagName="div"
diff --git a/src/block/number-box/style.js b/src/block/number-box/style.js
index 6032f519a..fd73a5661 100644
--- a/src/block/number-box/style.js
+++ b/src/block/number-box/style.js
@@ -6,121 +6,56 @@ import {
 	Advanced,
 	Typography,
 	Alignment,
-	MarginBottom,
 	EffectsAnimations,
-	BackgroundStyle,
-	BorderStyle,
+	addBackgroundStyles,
+	addBorderStyles,
 	Transform,
 } from '~stackable/block-components'
-import { useBlockAttributesContext } from '~stackable/hooks'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-number-box__text"
-				styleRule="height"
-				attrName="shapeSize"
-				key="shapeSize"
-				responsive="all"
-				hasUnits="px"
-				enabledCallback={ getAttribute => getAttribute( 'hasShape' ) }
-				dependencies={ [ 'hasShape' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-number-box__text"
-				styleRule="width"
-				attrName="shapeSize"
-				key="shapeSize-width"
-				responsive="all"
-				hasUnits="px"
-				enabledCallback={ getAttribute => getAttribute( 'hasShape' ) }
-				dependencies={ [ 'hasShape' ] }
-			/>
-		</>
-	)
-}
-
-export const HeadingStyles = memo( props => {
-	const hasShape = useBlockAttributesContext( attributes => attributes.hasShape )
-
-	return (
-		<>
-			{ hasShape &&
-				<>
-					<BackgroundStyle
-						{ ...props }
-						attrNameTemplate="shape%s"
-						selector=".stk-block-number-box__text"
-						// backgroundFallbackColor="#000000"
-					/>
-					<BorderStyle
-						{ ...props }
-						attrNameTemplate="shape%s"
-						selector=".stk-block-number-box__text"
-					/>
-				</>
-			}
-			<Styles { ...props } />
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Typography.Style { ...props } selector=".stk-block-number-box__text" />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-HeadingStyles.defaultProps = {
-	version: '',
-}
-
-HeadingStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<BackgroundStyle.Content
-				{ ...props }
-				attrNameTemplate="shape%s"
-				selector=".stk-block-number-box__text"
-			/>
-			<BorderStyle.Content
-				{ ...props }
-				attrNameTemplate="shape%s"
-				selector=".stk-block-number-box__text"
-			/>
-			<Styles { ...props } />
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } selector=".stk-block-number-box__text" />
-			<EffectsAnimations.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
+blockStyles.addBlockStyles( 'shapeSize', [ {
+	selector: '.stk-block-number-box__text',
+	styleRule: 'height',
+	attrName: 'shapeSize',
+	key: 'shapeSize',
+	responsive: 'all',
+	hasUnits: 'px',
+	enabledCallback: getAttribute => getAttribute( 'hasShape' ),
+	dependencies: [ 'hasShape' ],
+}, {
+	selector: '.stk-block-number-box__text',
+	styleRule: 'width',
+	attrName: 'shapeSize',
+	key: 'shapeSize-width',
+	responsive: 'all',
+	hasUnits: 'px',
+	enabledCallback: getAttribute => getAttribute( 'hasShape' ),
+	dependencies: [ 'hasShape' ],
+} ] )
+
+addBackgroundStyles( blockStyles, {
+	attrNameTemplate: 'shape%s',
+	selector: '.stk-block-number-box__text',
+	renderCondition: 'hasShape',
+} )
+addBorderStyles( blockStyles, {
+	attrNameTemplate: 'shape%s',
+	selector: '.stk-block-number-box__text',
+	renderCondition: 'hasShape',
+} )
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
+	selector: '.stk-block-number-box__text',
+	hoverSelector: '.stk-block-number-box__text:hover',
+} )
+EffectsAnimations.addStyles( blockStyles )
 
-HeadingStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/posts/edit.js b/src/block/posts/edit.js
index 6927b06f7..1b6345c96 100644
--- a/src/block/posts/edit.js
+++ b/src/block/posts/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { PostsStyles } from './style'
+import blockStyles from './style'
 import { generateRenderPostItem, CONTENTS } from './util'
 import variations from './variations'
 
@@ -27,6 +27,7 @@ import {
 	InspectorStyleControls,
 	ControlSeparator,
 	ProControlButton,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	useBlockStyle,
@@ -42,7 +43,6 @@ import {
 import {
 	getAlignmentClasses,
 	BlockDiv,
-	useGeneratedCss,
 	Image,
 	Alignment,
 	Advanced,
@@ -68,7 +68,9 @@ import { Placeholder, Spinner } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
 import { applyFilters, addFilter } from '@wordpress/hooks'
 import { InnerBlocks, useBlockEditContext } from '@wordpress/block-editor'
-import { useMemo, useEffect } from '@wordpress/element'
+import {
+	useMemo, useEffect, memo,
+} from '@wordpress/element'
 import { useSelect } from '@wordpress/data'
 import { compose, useInstanceId } from '@wordpress/compose'
 
@@ -95,8 +97,6 @@ const Edit = props => {
 		setAttributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const {
 		stkQueryId,
 		imageSize,
@@ -163,230 +163,36 @@ const Edit = props => {
 	const activeVariation = getActiveBlockVariation( name, attributes )
 	const defaultContentOrder = activeVariation?.attributes?.contentOrder || DEFAULT_ORDER
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<InspectorLayoutControls>
-					<AdvancedRangeControl
-						label={ __( 'Columns', i18n ) }
-						attribute="columns"
-						responsive="all"
-						min={ 1 }
-						sliderMax={ 4 }
-						placeholder="2"
-					/>
-					<FlexGapControls />
-					<ControlSeparator />
-					<SortControl
-						label={ __( 'Content Arrangement', i18n ) }
-						axis="y"
-						values={ contentOrderOptions }
-						num={ contentOrderOptions.length }
-						allowReset={ ! isEqual( contentOrder, defaultContentOrder ) }
-						onChange={ order => {
-							if ( order ) {
-								setAttributes( { contentOrder: order.map( label => CONTENTS.find( content => content.label === label )?.value ) } )
-							} else {
-								setAttributes( { contentOrder: defaultContentOrder } )
-							}
-						} }
-						helpTooltip={ {
-							video: 'posts-content-order',
-							description: __( 'Sets the order of the items displayed (category, title, meta, excerpt, read more button, image) for each post', i18n ),
-						} }
-					/>
-					<ControlSeparator />
-				</InspectorLayoutControls>
-
-				<ContentAlign.InspectorControls />
-				<Alignment.InspectorControls />
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'Query', i18n ) }
-						id="query"
-						initialOpen={ true }
-					>
-						<AdvancedRangeControl
-							label={ __( 'Number of items', i18n ) }
-							min={ 1 }
-							max={ 100 }
-							allowReset={ true }
-							attribute="numberOfItems"
-							placeholder="6"
-							default={ 6 }
-						/>
-						<AdvancedSelectControl
-							label={ __( 'Order by', i18n ) }
-							options={ [
-								{ label: __( 'Newest to Oldest', i18n ), value: 'date,desc' },
-								{ label: __( 'Oldest to Newest', i18n ), value: 'date,asc' },
-								{ label: __( 'A → Z', i18n ), value: 'title,asc' },
-								{ label: __( 'Z → A', i18n ), value: 'title,desc' },
-								{ label: __( 'Last Modified to Oldest', i18n ), value: 'modified,desc' },
-								{ label: __( 'Oldest Modified to Last', i18n ), value: 'modified,asc' },
-								{ label: __( 'Menu Order', i18n ), value: 'menu_order,asc' },
-								{ label: __( 'Random', i18n ), value: 'rand,desc' },
-							] }
-							value={ `${ orderBy },${ order }` }
-							onChange={ value => {
-								const [ orderBy, order ] = value.split( ',' )
-								setAttributes( {
-									orderBy,
-									order,
-								} )
-							} }
-							default="date,desc"
-						/>
-						<TaxonomyControl
-							allowReset={ true }
-							postType={ type }
-							onChangePostType={ type => setAttributes( { type } ) }
-							taxonomyType={ taxonomyType }
-							onChangeTaxonomyType={ taxonomyType => setAttributes( { taxonomyType } ) }
-							taxonomy={ taxonomy }
-							onChangeTaxonomy={ taxonomy => setAttributes( { taxonomy } ) }
-							taxonomyFilterType={ taxonomyFilterType }
-							onChangeTaxonomyFilterType={ taxonomyFilterType => setAttributes( { taxonomyFilterType } ) }
-							stkVersion="3"
-						/>
-						{ showProNotice && <ProControlButton type="posts" /> }
-						{ applyFilters( 'stackable.posts.edit.inspector.style.query', null ) }
-					</PanelAdvancedSettings>
-					<PanelAdvancedSettings
-						title={ __( 'Spacing', i18n ) }
-						id="spacing"
-					>
-						<AdvancedRangeControl
-							label={ __( 'Featured Image', i18n ) }
-							attribute="imageSpacing"
-							responsive="all"
-							min={ 0 }
-							sliderMax={ 100 }
-							placeholder=""
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Title', i18n ) }
-							attribute="titleSpacing"
-							responsive="all"
-							min={ 0 }
-							sliderMax={ 100 }
-							placeholder=""
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Category', i18n ) }
-							attribute="categorySpacing"
-							responsive="all"
-							min={ 0 }
-							sliderMax={ 100 }
-							placeholder=""
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Excerpt', i18n ) }
-							attribute="excerptSpacing"
-							responsive="all"
-							min={ 0 }
-							sliderMax={ 100 }
-							placeholder=""
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Meta', i18n ) }
-							attribute="metaSpacing"
-							responsive="all"
-							min={ 0 }
-							sliderMax={ 100 }
-							placeholder=""
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Read More Link', i18n ) }
-							attribute="readmoreSpacing"
-							responsive="all"
-							min={ 0 }
-							sliderMax={ 100 }
-							placeholder=""
-						/>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<BlockDiv.InspectorControls />
-				<ContainerDiv.InspectorControls hasContentVerticalAlign={ true } />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<Image.InspectorControls
-					{ ...props }
-					label={ __( 'Featured Image', i18n ) }
-					hasHeight={ ! [ 'portfolio', 'portfolio-2', 'horizontal', 'horizontal-2' ].includes( blockStyle ) }
-					hasBorderRadius={ ! [ 'portfolio', 'portfolio-2', 'horizontal', 'horizontal-2' ].includes( blockStyle ) }
-					hasShape={ false }
-					hasWidth={ [ 'list', 'horizontal', 'horizontal-2' ].includes( blockStyle ) }
-					hasAlt={ false }
-					hasSelector={ false }
-					src={ focalPointPlaceholder }
-					hasToggle={ true }
-					hasAspectRatio={ ! [ 'list', 'horizontal', 'horizontal-2', 'portfolio', 'portfolio-2', 'vertical-card-2' ].includes( blockStyle ) }
-				/>
-				<Typography.InspectorControls
-					{ ...props }
-					label={ __( 'Title', i18n ) }
-					hasToggle={ true }
-					attrNameTemplate="title%s"
-					hasTextContent={ false }
-					hasAlign={ true }
-					initialOpen={ false }
-				/>
-				<Typography.InspectorControls
-					{ ...props }
-					label={ __( 'Category', i18n ) }
-					hasToggle={ true }
-					attrNameTemplate="category%s"
-					hasTextContent={ false }
-					hasAlign={ true }
-					hasTextTag={ false }
-					initialOpen={ false }
-				/>
-				<Typography.InspectorControls
-					{ ...props }
-					label={ __( 'Excerpt', i18n ) }
-					hasToggle={ true }
-					attrNameTemplate="excerpt%s"
-					hasTextTag={ false }
-					hasTextContent={ false }
-					hasAlign={ true }
-					initialOpen={ false }
-				/>
-				<Typography.InspectorControls
-					{ ...props }
-					label={ __( 'Meta', i18n ) }
-					hasToggle={ true }
-					attrNameTemplate="meta%s"
-					hasTextTag={ false }
-					hasTextContent={ false }
-					hasAlign={ true }
-					initialOpen={ false }
-				/>
-				<Typography.InspectorControls
-					{ ...props }
-					label={ __( 'Read More Link', i18n ) }
-					attrNameTemplate="readmore%s"
-					hasTextTag={ false }
-					hasToggle={ true }
-					hasAlign={ true }
-					initialOpen={ false }
-				/>
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-posts" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<PostsStyles
-				version={ VERSION }
+			<InspectorControls
+				setAttributes={ setAttributes }
 				blockState={ props.blockState }
-				clientId={ clientId }
+				contentOrderOptions={ contentOrderOptions }
+				contentOrder={ contentOrder }
+				DefaultContentOrder={ defaultContentOrder }
+				orderBy={ orderBy }
+				order={ order }
+				type={ type }
+				taxonomyType={ taxonomyType }
+				taxonomy={ taxonomy }
+				taxonomyFilterType={ taxonomyFilterType }
+				blockStyle={ blockStyle }
+				focalPointPlaceholder={ focalPointPlaceholder }
 			/>
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-posts" />
 
 			{ ( isRequesting || ! hasPosts ) ? (
@@ -425,6 +231,227 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<InspectorLayoutControls>
+				<AdvancedRangeControl
+					label={ __( 'Columns', i18n ) }
+					attribute="columns"
+					responsive="all"
+					min={ 1 }
+					sliderMax={ 4 }
+					placeholder="2"
+				/>
+				<FlexGapControls />
+				<ControlSeparator />
+				<SortControl
+					label={ __( 'Content Arrangement', i18n ) }
+					axis="y"
+					values={ props.contentOrderOptions }
+					num={ props.contentOrderOptions.length }
+					allowReset={ ! isEqual( props.contentOrder, props.defaultContentOrder ) }
+					onChange={ order => {
+						if ( order ) {
+							props.setAttributes( { contentOrder: order.map( label => CONTENTS.find( content => content.label === label )?.value ) } )
+						} else {
+							props.setAttributes( { contentOrder: props.defaultContentOrder } )
+						}
+					} }
+					helpTooltip={ {
+						video: 'posts-content-order',
+						description: __( 'Sets the order of the items displayed (category, title, meta, excerpt, read more button, image) for each post', i18n ),
+					} }
+				/>
+				<ControlSeparator />
+			</InspectorLayoutControls>
+
+			<ContentAlign.InspectorControls />
+			<Alignment.InspectorControls />
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'Query', i18n ) }
+					id="query"
+					initialOpen={ true }
+				>
+					<AdvancedRangeControl
+						label={ __( 'Number of items', i18n ) }
+						min={ 1 }
+						max={ 100 }
+						allowReset={ true }
+						attribute="numberOfItems"
+						placeholder="6"
+						default={ 6 }
+					/>
+					<AdvancedSelectControl
+						label={ __( 'Order by', i18n ) }
+						options={ [
+							{ label: __( 'Newest to Oldest', i18n ), value: 'date,desc' },
+							{ label: __( 'Oldest to Newest', i18n ), value: 'date,asc' },
+							{ label: __( 'A → Z', i18n ), value: 'title,asc' },
+							{ label: __( 'Z → A', i18n ), value: 'title,desc' },
+							{ label: __( 'Last Modified to Oldest', i18n ), value: 'modified,desc' },
+							{ label: __( 'Oldest Modified to Last', i18n ), value: 'modified,asc' },
+							{ label: __( 'Menu Order', i18n ), value: 'menu_order,asc' },
+							{ label: __( 'Random', i18n ), value: 'rand,desc' },
+						] }
+						value={ `${ props.orderBy },${ props.order }` }
+						onChange={ value => {
+							const [ orderBy, order ] = value.split( ',' )
+							props.setAttributes( {
+								orderBy,
+								order,
+							} )
+						} }
+						default="date,desc"
+					/>
+					<TaxonomyControl
+						allowReset={ true }
+						postType={ props.type }
+						onChangePostType={ type => props.setAttributes( { type } ) }
+						taxonomyType={ props.taxonomyType }
+						onChangeTaxonomyType={ taxonomyType => props.setAttributes( { taxonomyType } ) }
+						taxonomy={ props.taxonomy }
+						onChangeTaxonomy={ taxonomy => props.setAttributes( { taxonomy } ) }
+						taxonomyFilterType={ props.taxonomyFilterType }
+						onChangeTaxonomyFilterType={ taxonomyFilterType => props.setAttributes( { taxonomyFilterType } ) }
+						stkVersion="3"
+					/>
+					{ showProNotice && <ProControlButton type="posts" /> }
+					{ applyFilters( 'stackable.posts.edit.inspector.style.query', null ) }
+				</PanelAdvancedSettings>
+				<PanelAdvancedSettings
+					title={ __( 'Spacing', i18n ) }
+					id="spacing"
+				>
+					<AdvancedRangeControl
+						label={ __( 'Featured Image', i18n ) }
+						attribute="imageSpacing"
+						responsive="all"
+						min={ 0 }
+						sliderMax={ 100 }
+						placeholder=""
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Title', i18n ) }
+						attribute="titleSpacing"
+						responsive="all"
+						min={ 0 }
+						sliderMax={ 100 }
+						placeholder=""
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Category', i18n ) }
+						attribute="categorySpacing"
+						responsive="all"
+						min={ 0 }
+						sliderMax={ 100 }
+						placeholder=""
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Excerpt', i18n ) }
+						attribute="excerptSpacing"
+						responsive="all"
+						min={ 0 }
+						sliderMax={ 100 }
+						placeholder=""
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Meta', i18n ) }
+						attribute="metaSpacing"
+						responsive="all"
+						min={ 0 }
+						sliderMax={ 100 }
+						placeholder=""
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Read More Link', i18n ) }
+						attribute="readmoreSpacing"
+						responsive="all"
+						min={ 0 }
+						sliderMax={ 100 }
+						placeholder=""
+					/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+
+			<BlockDiv.InspectorControls />
+			<ContainerDiv.InspectorControls hasContentVerticalAlign={ true } />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<Image.InspectorControls
+				{ ...props }
+				label={ __( 'Featured Image', i18n ) }
+				hasHeight={ ! [ 'portfolio', 'portfolio-2', 'horizontal', 'horizontal-2' ].includes( props.blockStyle ) }
+				hasBorderRadius={ ! [ 'portfolio', 'portfolio-2', 'horizontal', 'horizontal-2' ].includes( props.blockStyle ) }
+				hasShape={ false }
+				hasWidth={ [ 'list', 'horizontal', 'horizontal-2' ].includes( props.blockStyle ) }
+				hasAlt={ false }
+				hasSelector={ false }
+				src={ props.focalPointPlaceholder }
+				hasToggle={ true }
+				hasAspectRatio={ ! [ 'list', 'horizontal', 'horizontal-2', 'portfolio', 'portfolio-2', 'vertical-card-2' ].includes( props.blockStyle ) }
+			/>
+			<Typography.InspectorControls
+				{ ...props }
+				label={ __( 'Title', i18n ) }
+				hasToggle={ true }
+				attrNameTemplate="title%s"
+				hasTextContent={ false }
+				hasAlign={ true }
+				initialOpen={ false }
+			/>
+			<Typography.InspectorControls
+				{ ...props }
+				label={ __( 'Category', i18n ) }
+				hasToggle={ true }
+				attrNameTemplate="category%s"
+				hasTextContent={ false }
+				hasAlign={ true }
+				hasTextTag={ false }
+				initialOpen={ false }
+			/>
+			<Typography.InspectorControls
+				{ ...props }
+				label={ __( 'Excerpt', i18n ) }
+				hasToggle={ true }
+				attrNameTemplate="excerpt%s"
+				hasTextTag={ false }
+				hasTextContent={ false }
+				hasAlign={ true }
+				initialOpen={ false }
+			/>
+			<Typography.InspectorControls
+				{ ...props }
+				label={ __( 'Meta', i18n ) }
+				hasToggle={ true }
+				attrNameTemplate="meta%s"
+				hasTextTag={ false }
+				hasTextContent={ false }
+				hasAlign={ true }
+				initialOpen={ false }
+			/>
+			<Typography.InspectorControls
+				{ ...props }
+				label={ __( 'Read More Link', i18n ) }
+				attrNameTemplate="readmore%s"
+				hasTextTag={ false }
+				hasToggle={ true }
+				hasAlign={ true }
+				initialOpen={ false }
+			/>
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-posts" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/posts/save.js b/src/block/posts/save.js
index 8caf10853..02ca98bb9 100644
--- a/src/block/posts/save.js
+++ b/src/block/posts/save.js
@@ -1,7 +1,6 @@
 /**
  * Internal dependencies
  */
-import { PostsStyles } from './style'
 import { generateRenderPostItem } from './util'
 
 /**
@@ -63,7 +62,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<PostsStyles.Content version={ version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<div className={ wrapperClassNames }>
 				<div className={ contentClassNames }>
diff --git a/src/block/posts/style.js b/src/block/posts/style.js
index cc5a4e910..a9c54883c 100644
--- a/src/block/posts/style.js
+++ b/src/block/posts/style.js
@@ -15,51 +15,318 @@ import {
 	EffectsAnimations,
 	Image,
 	Typography,
-	FlexGapStyles,
+	addFlexGapStyles,
 	Transform,
 } from '~stackable/block-components'
-import { useBlockStyle, getBlockStyle } from '~stackable/hooks'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { getBlockStyle } from '~stackable/hooks'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
 const itemSelector = ' .%s-container'
-
 const hoverSelectorCallback = append => getAttribute =>
 	getAttribute( 'hoverStateInContainer' )
 		? `${ itemSelector }:hover ${ append }`
 		: `${ itemSelector } ${ append }:hover`
 const dependencies = [ 'hoverStateInContainer' ]
 
-const flexGapOptions = {
-	selector: '.stk-block-posts__items',
-	enableColumnGap: false,
-}
+blockStyles.addBlockStyles( 'columns', [ {
+	selector: '',
+	styleRule: '--stk-columns',
+	attrName: 'columns',
+	key: 'columns',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'containerPadding', [ {
+	selector: '',
+	responsive: 'all',
+	styleRule: '--stk-container-padding-left',
+	attrName: 'containerPadding',
+	key: 'containerPadding',
+	hasUnits: 'px',
+	valueCallback: value => value?.left,
+}, {
+	selector: '',
+	responsive: 'all',
+	styleRule: '--stk-container-padding-right',
+	attrName: 'containerPadding',
+	key: 'containerPadding-right',
+	hasUnits: 'px',
+	valueCallback: value => value?.right,
+} ] )
+
+blockStyles.addBlockStyles( 'columnGap', [ {
+	selector: '',
+	styleRule: '--stk-column-gap',
+	attrName: 'columnGap',
+	key: 'columnGap',
+	format: '%spx',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'innerBlockContentWidth', [ {
+	selector: '.stk-content-align',
+	hasUnits: 'px',
+	responsive: 'all',
+	styleRule: 'maxWidth',
+	attrName: 'innerBlockContentWidth',
+	key: 'innerBlockContentWidth',
+} ] )
+
+blockStyles.addBlockStyles( 'innerBlockAlign', [ {
+	selector: '.stk-content-align',
+	responsive: 'all',
+	styleRule: 'marginLeft',
+	attrName: 'innerBlockAlign',
+	key: 'innerBlockAlign-margin-left',
+	valueCallback: ( value, getAttribute, device ) => {
+		if ( getAttribute( 'innerBlockContentWidth', device ) === undefined || getAttribute( 'innerBlockContentWidth', device ) === '' ) {
+			return undefined
+		}
+		if ( value === 'center' || value === 'flex-end' ) {
+			return 'auto'
+		}
+		return 0
+	},
+	dependencies: [ 'innerBlockContentWidth' ],
+}, {
+	selector: '.stk-content-align',
+	responsive: 'all',
+	styleRule: 'marginRight',
+	attrName: 'innerBlockAlign',
+	key: 'innerBlockAlign',
+	valueCallback: ( value, getAttribute, device ) => {
+		if ( getAttribute( 'innerBlockContentWidth', device ) === undefined || getAttribute( 'innerBlockContentWidth', device ) === '' ) {
+			return undefined
+		}
+		if ( value === 'center' || value === 'flex-start' ) {
+			return 'auto'
+		}
+		return 0
+	},
+	dependencies: [ 'innerBlockContentWidth' ],
+} ] )
+{ /** Category Highlight Color */ }
+
+blockStyles.addBlockStyles( 'categoryHighlightColor', [ {
+	selector: `${ itemSelector } .stk-button`,
+	styleRule: 'background',
+	attrName: 'categoryHighlightColor',
+	key: 'categoryHighlightColor-button',
+	enabledCallback: getAttribute => getAttribute( 'categoryHighlighted' ),
+	dependencies: [ 'categoryHighlighted' ],
+}, {
+	selector: `${ itemSelector } .stk-button:after`,
+	styleRule: 'background',
+	attrName: 'categoryHighlightColor',
+	key: 'categoryHighlightColor-button-after',
+	hoverSelectorCallback: getAttribute => getAttribute( 'categoryHoverStateInContainer' )
+		? `${ itemSelector }:hover .stk-button:after`
+		: `${ itemSelector } .stk-button:hover:after`,
+	hover: 'all',
+	valuePreCallback: ( value, getAttribute, device, state ) => {
+		if ( state === 'normal' ) {
+			return undefined
+		}
+
+		return value
+	},
+	enabledCallback: getAttribute => getAttribute( 'categoryHighlighted' ),
+	dependencies: [ 'categoryHighlighted', 'categoryHoverStateInContainer' ],
+}, {
+	selector: `${ itemSelector } .stk-button:after`,
+	styleRule: 'opacity',
+	attrName: 'categoryHighlightColor',
+	key: 'categoryHighlightColor-opacity',
+	hoverSelectorCallback: getAttribute => getAttribute( 'categoryHoverStateInContainer' )
+		? `${ itemSelector }:hover .stk-button:after`
+		: `${ itemSelector } .stk-button:hover:after`,
+	hover: 'all',
+	valuePreCallback: ( value, getAttribute, device, state ) => {
+		if ( state === 'normal' ) {
+			return undefined
+		}
+
+		return ( value !== undefined && value !== '' ) ? 1 : undefined
+	},
+	enabledCallback: getAttribute => getAttribute( 'categoryHighlighted' ),
+	dependencies: [ 'categoryHighlighted', 'categoryHoverStateInContainer' ],
+} ] )
+
+{ /** Spacing */ }
+blockStyles.addBlockStyles( 'imageSpacing', [ {
+	selector: `${ itemSelector } .stk-block-posts__image-link`,
+	styleRule: 'marginBottom',
+	attrName: 'imageSpacing',
+	key: 'imageSpacing',
+	format: '%spx',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'titleSpacing', [ {
+	selector: '.stk-block-posts__title',
+	styleRule: 'marginBottom',
+	attrName: 'titleSpacing',
+	key: 'titleSpacing',
+	format: '%spx',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'categorySpacing', [ {
+	selector: '.stk-block-posts__category',
+	styleRule: 'marginBottom',
+	attrName: 'categorySpacing',
+	key: 'categorySpacing',
+	format: '%spx',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'excerptSpacing', [ {
+	selector: '.stk-block-posts__excerpt',
+	styleRule: 'marginBottom',
+	attrName: 'excerptSpacing',
+	key: 'excerptSpacing',
+	format: '%spx',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'metaSpacing', [ {
+	selector: '.stk-block-posts__meta',
+	styleRule: 'marginBottom',
+	attrName: 'metaSpacing',
+	key: 'metaSpacing',
+	format: '%spx',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'readmoreSpacing', [ {
+	selector: '.stk-block-posts__readmore',
+	styleRule: 'marginBottom',
+	attrName: 'readmoreSpacing',
+	key: 'readmoreSpacing',
+	format: '%spx',
+	responsive: 'all',
+} ] )
 
-const containerDivOptions = {
+blockStyles.addBlockStyles( 'imageWidth', [ {
+	renderIn: 'save',
+	selector: '.stk-container-padding',
+	styleRule: 'width',
+	attrName: 'imageWidth',
+	key: 'imageWidth',
+	responsive: 'all',
+	valueCallback: ( value, getAttribute, device ) => {
+		if ( getAttribute( 'imageWidthUnit', device ) === '%' && value !== undefined && value !== '' ) {
+			return ( 100 - parseInt( value ) ) + '%'
+		}
+
+		return undefined
+	},
+	enabledCallback: getAttribute => {
+		const className = getAttribute( 'className' )
+		const blockStyle = getBlockStyle( variations, className )
+		return blockStyle?.name === 'list'
+	},
+	dependencies: [ 'imageWidthUnit', 'className' ],
+}, {
+	renderIn: 'save',
+	selector: '.stk-block-posts__image-link:not(:empty)',
+	styleRule: 'width',
+	attrName: 'imageWidth',
+	key: 'imageWidthHorizontalSave',
+	responsive: 'all',
+	hasUnits: '%',
+	enabledCallback: getAttribute => {
+		const className = getAttribute( 'className' )
+		const blockStyle = getBlockStyle( variations, className )
+
+		return ( getAttribute( 'imageWidthUnit' ) === '%' ||
+		getAttribute( 'imageWidthUnitTablet' ) === '%' ) &&
+		[ 'horizontal', 'horizontal-2' ].includes( blockStyle?.name ) &&
+		getAttribute( 'imageHasLink' )
+	},
+	dependencies: [
+		'imageWidthUnitTablet',
+		'imageWidthUnit',
+		'imageHasLink',
+		'className',
+	],
+} ] )
+
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Column.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles, {
 	backgroundSelector: itemSelector,
 	borderSelector: itemSelector,
 	sizeSelector: itemSelector,
-}
+} )
+Image.addStyles( blockStyles, {
+	dependencies: [ 'imageHoverStateInContainer', 'imageOverlayColorType' ],
+	enableHeightCallback: getAttribute => {
+		const className = getAttribute( 'className' )
+		const blockStyle = getBlockStyle( variations, className )
 
-const titleTypographyOptionsEditor = {
-	selector: `.stk-block-posts__title`,
-	hoverSelectorCallback: hoverSelectorCallback( '.stk-block-posts__title' ),
-	attrNameTemplate: 'title%s',
-	dependencies,
-}
+		return ! [ 'portfolio' ].includes( blockStyle?.name )
+	},
+	enableAspectRatioCallback: getAttribute => {
+		const className = getAttribute( 'className' )
+		const blockStyle = getBlockStyle( variations, className )
+		return ! [ 'list', 'horizontal', 'horizontal-2', 'portfolio', 'portfolio-2', 'vertical-card-2' ].includes( blockStyle?.name )
+	},
+	saveEnableWidthCallback: getAttribute => {
+		const className = getAttribute( 'className' )
+		const imageHasLink = getAttribute( 'imageHasLink' )
+		const blockStyle = getBlockStyle( variations, className )
 
-const titleTypographyOptions = {
-	selector: `.stk-block-posts__title a`,
-	hoverSelectorCallback: hoverSelectorCallback( '.stk-block-posts__title a' ),
+		if ( [ 'horizontal', 'horizontal-2' ].includes( blockStyle?.name ) ) {
+			if ( imageHasLink ) {
+				return false
+			}
+			return true
+		}
+		return true
+	},
+	selectorCallback: getAttribute => {
+		const className = getAttribute( 'className' )
+		const blockStyle = getBlockStyle( variations, className )
+		const imageHasLink = getAttribute( 'imageHasLink' )
+
+		if ( [ 'list' ].includes( blockStyle?.name ) && imageHasLink ) {
+			return `${ itemSelector } .stk-block-posts__image-link`
+		}
+		return '.stk-img-wrapper'
+	},
+	widthStyleRuleCallback: getAttribute => {
+		const className = getAttribute( 'className' )
+		const blockStyle = getBlockStyle( variations, className )
+		const imageHasLink = getAttribute( 'imageHasLink' )
+
+		if ( [ 'list' ].includes( blockStyle?.name ) && imageHasLink ) {
+			return 'flexBasis'
+		}
+		return 'width'
+	},
+
+} )
+
+Typography.addStyles( blockStyles, {
+	editSelector: '.stk-block-posts__title',
+	saveSelector: `.stk-block-posts__title a`,
+	editHoverSelectorCallback: hoverSelectorCallback( '.stk-block-posts__title' ),
+	saveHoverSelectorCallback: hoverSelectorCallback( '.stk-block-posts__title a' ),
 	attrNameTemplate: 'title%s',
 	dependencies,
-}
+} )
 
-const categoryTypographyOptions = {
+Typography.addStyles( blockStyles, {
 	selectorCallback: getAttribute => `.stk-block-posts__category a${ getAttribute( 'highlighted' )
 		? ' .stk-button__inner-text'
 		: '' }`,
@@ -71,363 +338,32 @@ const categoryTypographyOptions = {
 	},
 	attrNameTemplate: 'category%s',
 	dependencies: [ 'Highlighted', 'hoverStateInContainer', ...dependencies ],
-}
+} )
 
-const excerptTypographyOptions = {
+Typography.addStyles( blockStyles, {
 	selector: `.stk-block-posts__excerpt p`,
 	hoverSelectorCallback: hoverSelectorCallback( '.stk-block-posts__excerpt p' ),
 	attrNameTemplate: 'excerpt%s',
 	dependencies,
-}
+} )
 
-const metaTypographyOptions = {
+Typography.addStyles( blockStyles, {
 	selector: `.stk-block-posts__meta`,
 	hoverSelectorCallback: hoverSelectorCallback( '.stk-block-posts__meta' ),
 	attrNameTemplate: 'meta%s',
 	dependencies,
-}
+} )
 
-const readmoreTypographyOptions = {
+Typography.addStyles( blockStyles, {
 	selector: `.stk-block-posts__readmore`,
 	hoverSelectorCallback: hoverSelectorCallback( '.stk-block-posts__readmore' ),
 	attrNameTemplate: 'readmore%s',
 	dependencies,
-}
-
-const _imageOptions = {
-	dependencies: [ 'imageHoverStateInContainer', 'imageOverlayColorType' ],
-}
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-	const {
-		blockStyle,
-	} = props
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--stk-columns"
-				attrName="columns"
-				key="columns"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				responsive="all"
-				styleRule="--stk-container-padding-left"
-				attrName="containePadding"
-				key="containePadding"
-				hasUnits="px"
-				valueCallback={ value => value?.left }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				responsive="all"
-				styleRule="--stk-container-padding-right"
-				attrName="containePadding"
-				key="containePadding-right"
-				hasUnits="px"
-				valueCallback={ value => value?.right }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--stk-column-gap"
-				attrName="columnGap"
-				key="columnGap"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-content-align"
-				hasUnits="px"
-				responsive="all"
-				styleRule="maxWidth"
-				attrName="innerBlockContentWidth"
-				key="innerBlockContentWidth"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-content-align"
-				responsive="all"
-				styleRule="marginLeft"
-				attrName="innerBlockAlign"
-				key="innerBlockAlign-margin-left"
-				valueCallback={ ( value, getAttribute, device ) => {
-					if ( getAttribute( 'innerBlockContentWidth', device ) === undefined || getAttribute( 'innerBlockContentWidth', device ) === '' ) {
-						return undefined
-					}
-					if ( value === 'center' || value === 'flex-end' ) {
-						return 'auto'
-					}
-					return 0
-				} }
-				dependencies={ [ 'innerBlockContentWidth' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-content-align"
-				responsive="all"
-				styleRule="marginRight"
-				attrName="innerBlockAlign"
-				key="innerBlockAlign"
-				valueCallback={ ( value, getAttribute, device ) => {
-					if ( getAttribute( 'innerBlockContentWidth', device ) === undefined || getAttribute( 'innerBlockContentWidth', device ) === '' ) {
-						return undefined
-					}
-					if ( value === 'center' || value === 'flex-start' ) {
-						return 'auto'
-					}
-					return 0
-				} }
-				dependencies={ [ 'innerBlockContentWidth' ] }
-			/>
-
-			{ /** Category Highlight Color */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ itemSelector } .stk-button` }
-				styleRule="background"
-				attrName="categoryHighlightColor"
-				key="categoryHighlightColor-button"
-				enabledCallback={ getAttribute => getAttribute( 'categoryHighlighted' ) }
-				dependencies={ [ 'categoryHighlighted' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ itemSelector } .stk-button:after` }
-				styleRule="background"
-				attrName="categoryHighlightColor"
-				key="categoryHighlightColor-button-after"
-				hoverSelectorCallback={ getAttribute => getAttribute( 'categoryHoverStateInContainer' )
-					? `${ itemSelector }:hover .stk-button:after`
-					: `${ itemSelector } .stk-button:hover:after` }
-				hover="all"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( state === 'normal' ) {
-						return undefined
-					}
-
-					return value
-				} }
-				enabledCallback={ getAttribute => getAttribute( 'categoryHighlighted' ) }
-				dependencies={ [ 'categoryHighlighted', 'categoryHoverStateInContainer' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ itemSelector } .stk-button:after` }
-				styleRule="opacity"
-				attrName="categoryHighlightColor"
-				key="categoryHighlightColor-opacity"
-				hoverSelectorCallback={ getAttribute => getAttribute( 'categoryHoverStateInContainer' )
-					? `${ itemSelector }:hover .stk-button:after`
-					: `${ itemSelector } .stk-button:hover:after` }
-				hover="all"
-				valuePreCallback={ ( value, getAttribute, device, state ) => {
-					if ( state === 'normal' ) {
-						return undefined
-					}
-
-					return ( value !== undefined && value !== '' ) ? 1 : undefined
-				} }
-				enabledCallback={ getAttribute => getAttribute( 'categoryHighlighted' ) }
-				dependencies={ [ 'categoryHighlighted', 'categoryHoverStateInContainer' ] }
-			/>
-
-			{ /** Spacing */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector={ `${ itemSelector } .stk-block-posts__image-link` }
-				styleRule="marginBottom"
-				attrName="imageSpacing"
-				key="imageSpacing"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-posts__title"
-				styleRule="marginBottom"
-				attrName="titleSpacing"
-				key="titleSpacing"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-posts__category"
-				styleRule="marginBottom"
-				attrName="categorySpacing"
-				key="categorySpacing"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-posts__excerpt"
-				styleRule="marginBottom"
-				attrName="excerptSpacing"
-				key="excerptSpacing"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-posts__meta"
-				styleRule="marginBottom"
-				attrName="metaSpacing"
-				key="metaSpacing"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-posts__readmore"
-				styleRule="marginBottom"
-				attrName="readmoreSpacing"
-				key="readmoreSpacing"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-container-padding"
-				styleRule="width"
-				attrName="imageWidth"
-				key="imageWidth"
-				responsive="all"
-				valueCallback={ ( value, getAttribute, device ) => {
-					if ( getAttribute( 'imageWidthUnit', device ) === '%' && value !== undefined && value !== '' ) {
-						return ( 100 - parseInt( value ) ) + '%'
-					}
-
-					return undefined
-				} }
-				enabledCallback={ () => blockStyle === 'list' }
-				dependencies={ [ 'imageWidthUnit', 'className' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-block-posts__image-link:not(:empty)"
-				styleRule="width"
-				attrName="imageWidth"
-				key="imageWidthHorizontalSave"
-				responsive="all"
-				hasUnits="%"
-				enabledCallback={ getAttribute => {
-					return ( getAttribute( 'imageWidthUnit' ) === '%' ||
-					getAttribute( 'imageWidthUnitTablet' ) === '%' ) &&
-					[ 'horizontal', 'horizontal-2' ].includes( blockStyle ) &&
-					getAttribute( 'imageHasLink' )
-				} }
-				dependencies={ [
-					'imageWidthUnitTablet',
-					'imageWidthUnit',
-					'imageHasLink',
-					'className',
-				] }
-			/>
-		</>
-	)
-}
-
-export const PostsStyles = memo( props => {
-	const blockStyle = useBlockStyle( variations )
-
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Column.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ContainerDiv.Style { ...props } { ...containerDivOptions } />
-			<Image.Style
-				{ ...props }
-				{ ..._imageOptions }
-				enableHeight={ ! [ 'portfolio' ].includes( blockStyle ) }
-				enableAspectRatio={ ! [ 'list', 'horizontal', 'horizontal-2', 'portfolio', 'portfolio-2', 'vertical-card-2' ].includes( blockStyle ) }
-			/>
-			<Typography.Style { ...props } { ...titleTypographyOptionsEditor } />
-			<Typography.Style { ...props } { ...categoryTypographyOptions } />
-			<Typography.Style { ...props } { ...excerptTypographyOptions } />
-			<Typography.Style { ...props } { ...metaTypographyOptions } />
-			<Typography.Style { ...props } { ...readmoreTypographyOptions } />
-			<FlexGapStyles { ...props } { ...flexGapOptions } />
-			<Styles { ...props }
-				// TODO: Check, it seems that blockStyle is supposed to be passed here but it wasn't??
-			/>
-		</>
-	)
 } )
 
-PostsStyles.defaultProps = {
-	version: '',
-}
-
-// Note: Styles do not get rerendered on editor refresh. Rerender only happens when margin bottom is clicked on.
-// Ideally should rerender on editor refresh.
-PostsStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	const blockStyle = getBlockStyle( variations, props.attributes.className )
+addFlexGapStyles( blockStyles, {
+	selector: '.stk-block-posts__items',
+	enableColumnGap: false,
+} )
 
-	const enableWidth = () => {
-		if ( [ 'horizontal', 'horizontal-2' ].includes( blockStyle?.name ) ) {
-			if ( props.attributes.imageHasLink ) {
-				return false
-			}
-			return true
-		}
-		return true
-	}
-
-	const imageOptions = {
-		..._imageOptions,
-		enableHeight: ! [ 'portfolio' ].includes( blockStyle?.name ),
-		enableWidth: enableWidth(),
-		...( [ 'list' ].includes( blockStyle?.name ) && props.attributes.imageHasLink ? { selector: `${ itemSelector } .stk-block-posts__image-link`, widthStyleRule: 'flexBasis' } : {} ),
-		enableAspectRatio: ! [ 'list', 'horizontal', 'horizontal-2', 'portfolio', 'portfolio-2', 'vertical-card-2' ].includes( blockStyle?.name ),
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Column.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } { ...containerDivOptions } />
-			<Image.Style.Content { ...props } { ...imageOptions } />
-			<Typography.Style.Content { ...props } { ...titleTypographyOptions } />
-			<Typography.Style.Content { ...props } { ...categoryTypographyOptions } />
-			<Typography.Style.Content { ...props } { ...excerptTypographyOptions } />
-			<Typography.Style.Content { ...props } { ...metaTypographyOptions } />
-			<Typography.Style.Content { ...props } { ...readmoreTypographyOptions } />
-			<FlexGapStyles.Content { ...props } { ...flexGapOptions } />
-			<Styles { ...props } blockStyle={ blockStyle?.name } />
-		</BlockCssCompiler>
-	)
-}
-
-PostsStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/price/edit.js b/src/block/price/edit.js
index cbcb2b437..ece4f0642 100644
--- a/src/block/price/edit.js
+++ b/src/block/price/edit.js
@@ -1,17 +1,16 @@
 /**
  * Internal dependencies
  */
-import { PriceStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
  */
 import { version as VERSION } from 'stackable'
 import classnames from 'classnames'
-import { InspectorTabs } from '~stackable/components'
+import { InspectorTabs, useBlockCssGenerator } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	MarginBottom,
 	getRowClasses,
 	Alignment,
@@ -35,6 +34,7 @@ import { compose } from '@wordpress/compose'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
+import { memo } from '@wordpress/element'
 
 export const defaultIcon = '<svg data-prefix="fas" data-icon="play" class="svg-inline--fa fa-play fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true"><path fill="currentColor" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>'
 
@@ -52,13 +52,10 @@ const TEMPLATE = [
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const rowClass = getRowClasses( attributes )
 	const blockAlignmentClass = getAlignmentClasses( attributes )
 
@@ -69,25 +66,22 @@ const Edit = props => {
 		blockAlignmentClass,
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<InspectorTabs />
+			<InspectorControls />
 
-			<Alignment.InspectorControls />
-			<BlockDiv.InspectorControls />
-			<Advanced.InspectorControls />
-			<Transform.InspectorControls />
-			<EffectsAnimations.InspectorControls />
-			<CustomAttributes.InspectorControls />
-			<CustomCSS.InspectorControls mainBlockClass="stk-block-price" />
-			<Responsive.InspectorControls />
-			<ConditionalDisplay.InspectorControls />
-
-			<PriceStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-price" />
 
 			<BlockDiv
@@ -106,6 +100,24 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Alignment.InspectorControls />
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-price" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/price/save.js b/src/block/price/save.js
index 18506118b..abfdd2e3e 100644
--- a/src/block/price/save.js
+++ b/src/block/price/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { PriceStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -44,7 +39,7 @@ export const Save = props => {
 			data-video={ attributes.videoLink }
 			version={ props.version }
 		>
-			<PriceStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<InnerBlocks.Content />
 		</BlockDiv.Content>
diff --git a/src/block/price/style.js b/src/block/price/style.js
index 197ec1315..7b4da1bf6 100644
--- a/src/block/price/style.js
+++ b/src/block/price/style.js
@@ -10,47 +10,18 @@ import {
 	Transform,
 } from '~stackable/block-components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-export const PriceStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Column.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-PriceStyles.defaultProps = {
-	version: '',
-}
-
-PriceStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Column.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Column.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
 
-PriceStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/pricing-box/edit.js b/src/block/pricing-box/edit.js
index 3761e4779..4a66a3cdd 100644
--- a/src/block/pricing-box/edit.js
+++ b/src/block/pricing-box/edit.js
@@ -1,6 +1,6 @@
 /** Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 import variations from './variations'
 
 /**
@@ -11,10 +11,10 @@ import { version as VERSION } from 'stackable'
 import { last } from 'lodash'
 import {
 	ColumnInnerBlocks, InspectorBottomTip, InspectorStyleControls, InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	getAlignmentClasses,
 	Alignment,
 	Advanced,
@@ -41,17 +41,15 @@ import {
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
 import { InnerBlocks } from '@wordpress/block-editor'
+import { memo } from '@wordpress/element'
 
 const TEMPLATE = variations[ 0 ].innerBlocks
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const { hasInnerBlocks, innerBlocks } = useBlockContext()
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 
@@ -72,34 +70,22 @@ const Edit = props => {
 	const lastBlockName = last( innerBlocks )?.name
 	const renderAppender = hasInnerBlocks ? ( [ 'stackable/text', 'core/paragraph' ].includes( lastBlockName ) ? () => <></> : InnerBlocks.DefaultBlockAppender ) : InnerBlocks.ButtonBlockAppender
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<ContentAlign.InspectorControls />
-				<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
-				<BlockDiv.InspectorControls />
-				<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
-				<BlockLink.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-pricing-box" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
-
-			<BlockStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			<InspectorControls />
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-pricing-box" />
 
 			<BlockDiv
@@ -122,6 +108,31 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<ContentAlign.InspectorControls />
+			<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
+			<BlockDiv.InspectorControls />
+			<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
+			<BlockLink.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-pricing-box" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/pricing-box/save.js b/src/block/pricing-box/save.js
index 32069b41e..3f8ebca3c 100644
--- a/src/block/pricing-box/save.js
+++ b/src/block/pricing-box/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -61,7 +56,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<ContainerDiv.Content
 				className={ contentClassNames }
diff --git a/src/block/pricing-box/style.js b/src/block/pricing-box/style.js
index 8cbdb1f32..883f4817d 100644
--- a/src/block/pricing-box/style.js
+++ b/src/block/pricing-box/style.js
@@ -10,52 +10,19 @@ import {
 	MarginBottom,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-const BlockStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ContainerDiv.Style { ...props } />
-			<MarginBottom.Style { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
-
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles )
+MarginBottom.addStyles( blockStyles )
 
-export default BlockStyles
+export default blockStyles
diff --git a/src/block/progress-bar/edit.js b/src/block/progress-bar/edit.js
index ac2c837b4..d72d0290a 100644
--- a/src/block/progress-bar/edit.js
+++ b/src/block/progress-bar/edit.js
@@ -1,13 +1,15 @@
 /**
  * Internal dependencies
  */
-import ProgressBarStyles from './style'
+import blockStyles from './style'
 import { DEFAULT_PROGRESS } from './schema'
 
 /**
  * External dependencies
  */
-import { InspectorTabs, useDynamicContent } from '~stackable/components'
+import {
+	InspectorTabs, useDynamicContent, useBlockCssGenerator,
+} from '~stackable/components'
 import {
 	BlockDiv,
 	Advanced,
@@ -19,7 +21,6 @@ import {
 	CustomCSS,
 	ConditionalDisplay,
 	ProgressBar,
-	useGeneratedCss,
 	Typography,
 	getTypographyClasses,
 	getAlignmentClasses,
@@ -36,16 +37,14 @@ import classnames from 'classnames'
  */
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
 	} = props
 
-	useGeneratedCss( attributes )
-
 	const blockAlignmentClass = getAlignmentClasses( attributes )
 	const textClasses = getTypographyClasses( attributes )
 
@@ -75,33 +74,20 @@ const Edit = props => {
 	const derivedProgressValue = isNaN( parsedProgressValue ) ? DEFAULT_PROGRESS : parsedProgressValue
 	const derivedValue = `${ attributes.progressValuePrefix }${ derivedProgressValue }${ attributes.progressValueSuffix }`.trim()
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<Alignment.InspectorControls />
-				<ProgressBar.InspectorControls />
-				<Typography.InspectorControls
-					{ ...props }
-					initialOpen={ false }
-					hasTextTag={ false }
-					hasTextContent={ false }
-					hasTextShadow
-					hasToggle
-					label={ __( 'Label', i18n ) }
-				/>
-
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-progress-bar" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-			</>
+			<InspectorControls blockState={ props.blockState } />
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -109,11 +95,7 @@ const Edit = props => {
 				attributes={ props.attributes }
 				className={ blockClassNames }
 			>
-				<ProgressBarStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-progress-bar" />
 				<div className={ containerClassNames }>
 					<div className="stk-progress-bar stk-animate">
@@ -146,6 +128,36 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Alignment.InspectorControls />
+			<ProgressBar.InspectorControls />
+			<Typography.InspectorControls
+				{ ...props }
+				initialOpen={ false }
+				hasTextTag={ false }
+				hasTextContent={ false }
+				hasTextShadow
+				hasToggle
+				label={ __( 'Label', i18n ) }
+			/>
+
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-progress-bar" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/progress-bar/save.js b/src/block/progress-bar/save.js
index 6ad660f37..25b0cb5fe 100644
--- a/src/block/progress-bar/save.js
+++ b/src/block/progress-bar/save.js
@@ -1,4 +1,3 @@
-import ProgressBarStyles from './style'
 import { DEFAULT_PROGRESS } from './schema'
 
 import {
@@ -66,7 +65,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<ProgressBarStyles.Content { ...props } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<div className={ containerClassNames }>
 				<div
diff --git a/src/block/progress-bar/style.js b/src/block/progress-bar/style.js
index 985a5196e..b02e67340 100644
--- a/src/block/progress-bar/style.js
+++ b/src/block/progress-bar/style.js
@@ -10,56 +10,22 @@ import {
 	ProgressBar,
 	Typography,
 } from '~stackable/block-components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-import { BlockCssCompiler } from '~stackable/components'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const typographyOptions = {
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ProgressBar.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-progress-bar__inner-text',
-}
-
-const ProgressBarStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ProgressBar.Style { ...props } />
-			<Typography.Style { ...props } { ...typographyOptions } />
-		</>
-	)
+	hoverSelector: '.stk-progress-bar__inner-text:hover',
 } )
 
-ProgressBarStyles.defaultProps = {
-	version: '',
-}
-
-ProgressBarStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<ProgressBar.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } />
-		</BlockCssCompiler>
-	)
-}
-
-ProgressBarStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
-export default ProgressBarStyles
+export default blockStyles
diff --git a/src/block/progress-circle/edit.js b/src/block/progress-circle/edit.js
index d4478074e..ce29590f5 100644
--- a/src/block/progress-circle/edit.js
+++ b/src/block/progress-circle/edit.js
@@ -1,13 +1,15 @@
 /**
  * Internal dependencies
  */
-import ProgressCircleStyles from './style'
+import blockStyles from './style'
 import { DEFAULT_PROGRESS } from './schema'
 
 /**
  * External dependencies
  */
-import { InspectorTabs, useDynamicContent } from '~stackable/components'
+import {
+	InspectorTabs, useDynamicContent, useBlockCssGenerator,
+} from '~stackable/components'
 import {
 	BlockDiv,
 	Alignment,
@@ -20,7 +22,6 @@ import {
 	CustomCSS,
 	ConditionalDisplay,
 	ProgressBar,
-	useGeneratedCss,
 	Typography,
 	getTypographyClasses,
 	getAlignmentClasses,
@@ -36,16 +37,14 @@ import classnames from 'classnames'
  */
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
 	} = props
 
-	useGeneratedCss( attributes )
-
 	const blockAlignmentClass = getAlignmentClasses( attributes )
 	const textClasses = getTypographyClasses( attributes )
 
@@ -79,34 +78,20 @@ const Edit = props => {
 	const direction = attributes.progressColorGradientDirection || ''
 	const customGradientId = ( color1 + color2 + direction ).replace( /[^0-9A-Z]+/gi, '' )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<Alignment.InspectorControls />
-
-				<ProgressBar.InspectorControls isCircle />
-				<Typography.InspectorControls
-					{ ...props }
-					initialOpen={ false }
-					hasTextTag={ false }
-					hasTextContent={ false }
-					hasTextShadow
-					hasToggle
-					label={ __( 'Label', i18n ) }
-				/>
-
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-progress-circle" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-			</>
+			<InspectorControls blockState={ props.blockState } />
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -114,11 +99,7 @@ const Edit = props => {
 				attributes={ props.attributes }
 				className={ blockClassNames }
 			>
-				<ProgressCircleStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-progress-circle" />
 				<div className={ containerClassNames }>
 					<div className="stk-progress-circle stk-animate">
@@ -159,6 +140,37 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Alignment.InspectorControls />
+
+			<ProgressBar.InspectorControls isCircle />
+			<Typography.InspectorControls
+				{ ...props }
+				initialOpen={ false }
+				hasTextTag={ false }
+				hasTextContent={ false }
+				hasTextShadow
+				hasToggle
+				label={ __( 'Label', i18n ) }
+			/>
+
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-progress-circle" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/progress-circle/save.js b/src/block/progress-circle/save.js
index cbcd8fec2..009f85992 100644
--- a/src/block/progress-circle/save.js
+++ b/src/block/progress-circle/save.js
@@ -1,4 +1,3 @@
-import ProgressCircleStyles from './style'
 import { DEFAULT_PROGRESS } from './schema'
 
 import {
@@ -62,7 +61,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<ProgressCircleStyles.Content { ...props } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<div className={ containerClassNames }>
 				<div
diff --git a/src/block/progress-circle/style.js b/src/block/progress-circle/style.js
index 6ceb3bd1a..4c6d31cd2 100644
--- a/src/block/progress-circle/style.js
+++ b/src/block/progress-circle/style.js
@@ -10,56 +10,24 @@ import {
 	ProgressBar,
 	Typography,
 } from '~stackable/block-components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-import { BlockCssCompiler } from '~stackable/components'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const typographyOptions = {
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ProgressBar.addStyles( blockStyles, {
+	isCircle: true,
+} )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-progress-circle__inner-text',
-}
-
-const ProgressCircleStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ProgressBar.Style { ...props } isCircle={ true } />
-			<Typography.Style { ...props } { ...typographyOptions } />
-		</>
-	)
+	hoverSelector: '.stk-progress-circle__inner-text:hover',
 } )
 
-ProgressCircleStyles.defaultProps = {
-	version: '',
-}
-
-ProgressCircleStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<ProgressBar.Style.Content { ...props } isCircle={ true } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } />
-		</BlockCssCompiler>
-	)
-}
-
-ProgressCircleStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
-export default ProgressCircleStyles
+export default blockStyles
diff --git a/src/block/separator/edit.js b/src/block/separator/edit.js
index eb922aaaf..234e6bc36 100644
--- a/src/block/separator/edit.js
+++ b/src/block/separator/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { SeparatorStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -15,13 +15,13 @@ import {
 	Separator2,
 	AdvancedRangeControl,
 	AdvancedToggleControl,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	withBlockAttributeContext, withBlockWrapperIsHovered, withQueryLoopContext,
 } from '~stackable/higher-order'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	Advanced,
 	CustomCSS,
 	Responsive,
@@ -37,26 +37,26 @@ import {
  * WordPress dependencies
  */
 import { compose } from '@wordpress/compose'
-import { useMemo } from '@wordpress/element'
+import { useMemo, memo } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { applyFilters } from '@wordpress/hooks'
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
+		setAttributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
-	const PremiumSeparatorControls = useMemo( () => applyFilters( 'stackable.block.separator.edit.after', null ), [] )
-
 	const {
 		separatorDesign,
 		separatorInverted,
 	} = attributes
 
+	const attributesToPass = {
+		separatorLayer2Show: attributes.separatorLayer2Show,
+		separatorLayer3Show: attributes.separatorLayer3Show,
+	}
 	const blockClassNames = classnames( [
 		className,
 		'stk-block-separator',
@@ -67,58 +67,22 @@ const Edit = props => {
 		'stk-block-separator__inner',
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs hasLayoutPanel={ false } />
+			<InspectorControls attributes={ attributesToPass } setAttributes={ setAttributes } />
 
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'General', i18n ) }
-						id="general"
-						initialOpen={ true }
-					>
-						<AdvancedRangeControl
-							label={ __( 'Height', i18n ) }
-							min={ 30 }
-							sliderMax={ 400 }
-							placeholder=""
-							attribute="separatorHeight"
-							responsive="all"
-						/>
-						<AdvancedToggleControl
-							label={ __( 'Flip Horizontally', i18n ) }
-							attribute="separatorFlipHorizontally"
-						/>
-						<AdvancedToggleControl
-							label={ __( 'Flip Vertically', i18n ) }
-							attribute="separatorFlipVertically"
-						/>
-					</PanelAdvancedSettings>
-					<PanelAdvancedSettings
-						title={ __( 'Separator', i18n ) }
-						id="separator"
-					>
-						<Separator.InspectorControls.SeparatorControls hasFlipVertically={ true } />
-					</PanelAdvancedSettings>
-					{ PremiumSeparatorControls && <PremiumSeparatorControls { ...props } /> }
-				</InspectorStyleControls>
-
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-separator" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<SeparatorStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-separator" />
 
 			<BlockDiv
@@ -140,6 +104,55 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	const PremiumSeparatorControls = useMemo( () => applyFilters( 'stackable.block.separator.edit.after', null ), [] )
+	return (
+		<>
+			<InspectorTabs hasLayoutPanel={ false } />
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'General', i18n ) }
+					id="general"
+					initialOpen={ true }
+				>
+					<AdvancedRangeControl
+						label={ __( 'Height', i18n ) }
+						min={ 30 }
+						sliderMax={ 400 }
+						placeholder=""
+						attribute="separatorHeight"
+						responsive="all"
+					/>
+					<AdvancedToggleControl
+						label={ __( 'Flip Horizontally', i18n ) }
+						attribute="separatorFlipHorizontally"
+					/>
+					<AdvancedToggleControl
+						label={ __( 'Flip Vertically', i18n ) }
+						attribute="separatorFlipVertically"
+					/>
+				</PanelAdvancedSettings>
+				<PanelAdvancedSettings
+					title={ __( 'Separator', i18n ) }
+					id="separator"
+				>
+					<Separator.InspectorControls.SeparatorControls hasFlipVertically={ true } />
+				</PanelAdvancedSettings>
+				{ PremiumSeparatorControls && <PremiumSeparatorControls { ...props } /> }
+			</InspectorStyleControls>
+
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-separator" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</> )
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/separator/save.js b/src/block/separator/save.js
index 782c571ad..e8be3d4b2 100644
--- a/src/block/separator/save.js
+++ b/src/block/separator/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { SeparatorStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -51,7 +46,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<SeparatorStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<div className={ separatorClassNames }>
 				<Separator2.Content
diff --git a/src/block/separator/style.js b/src/block/separator/style.js
index 39c20ad28..465bb5b51 100644
--- a/src/block/separator/style.js
+++ b/src/block/separator/style.js
@@ -6,73 +6,36 @@ import {
 	BlockDiv,
 	EffectsAnimations,
 	Transform,
-	SeparatorStyles as SeparatorStyles_,
+	addSeparatorStyles,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element'
-import { applyFilters } from '@wordpress/hooks'
+import { doAction } from '@wordpress/hooks'
 
-const separatorOptions = {
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
+
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+addSeparatorStyles( blockStyles, {
 	selector: '',
 	enableFlipVertically: true,
 	isInitiallyFlippedVertically: false,
 	wrapperSelector: '.stk-block-separator__inner',
-}
-
-export const SeparatorStyles = memo( props => {
-	const SeparatorLayerStyles = applyFilters( 'stackable.block-component.separator.layer-styles', null )
-
-	return (
-		<>
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Transform.Style { ...props } />
-			<SeparatorStyles_ { ...props } { ...separatorOptions } location="" />
-			{ SeparatorLayerStyles && (
-				<SeparatorLayerStyles
-					{ ...props }
-					{ ...separatorOptions }
-					location=""
-				/>
-			) }
-		</>
-	)
+	location: '',
 } )
-
-SeparatorStyles.defaultProps = {
-	version: '',
-}
-
-SeparatorStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-	const SeparatorLayerStyles = applyFilters( 'stackable.block-component.separator.layer-styles', null )
-
-	return (
-		<BlockCssCompiler>
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<SeparatorStyles_ { ...props } { ...separatorOptions } location="" />
-			{ SeparatorLayerStyles && (
-				<SeparatorLayerStyles
-					{ ...props }
-					{ ...separatorOptions }
-					location=""
-				/>
-			) }
-		</BlockCssCompiler>
-	)
-}
-
-SeparatorStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+doAction( 'stackable.block-component.separator.layer-styles.addStyles', blockStyles, {
+	selector: '',
+	enableFlipVertically: true,
+	isInitiallyFlippedVertically: false,
+	wrapperSelector: '.stk-block-separator__inner',
+	location: '',
+} )
+export default blockStyles
diff --git a/src/block/spacer/edit.js b/src/block/spacer/edit.js
index b547de70a..f8be6ea7a 100644
--- a/src/block/spacer/edit.js
+++ b/src/block/spacer/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { SpacerStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -11,7 +11,6 @@ import { i18n, version as VERSION } from 'stackable'
 import {
 	Advanced,
 	BlockDiv,
-	useGeneratedCss,
 	CustomCSS,
 	Responsive,
 	CustomAttributes,
@@ -22,6 +21,7 @@ import {
 import { useDeviceType } from '~stackable/hooks'
 import {
 	InspectorTabs, InspectorStyleControls, PanelAdvancedSettings, AdvancedRangeControl, ResizerTooltip,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import { getAttributeName } from '~stackable/util'
 import {
@@ -35,7 +35,7 @@ import { ResizableBox } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
 import { compose } from '@wordpress/compose'
 import {
-	useState, useRef, useMemo,
+	useState, useRef, useMemo, memo,
 } from '@wordpress/element'
 
 const getSnapYBetween = ( value, snapDiff = 50 ) => {
@@ -53,7 +53,6 @@ const TABS = [ 'style', 'advanced' ]
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
 		setAttributes,
@@ -61,8 +60,6 @@ const Edit = props => {
 		isSelected,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const deviceType = useDeviceType()
 	const blockClassNames = classnames( [
 		className,
@@ -89,42 +86,21 @@ const Edit = props => {
 	const [ snapY, setSnapY ] = useState( getSnapYBetween( parseInt( height === undefined ? defaultMinHeight : attributes[ heightAttrName ] ) ) )
 	const resizableRef = useRef()
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs tabs={ TABS } hasLayoutPanel={ false } />
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'General', i18n ) }
-						id="general"
-						initialOpen={ true }
-					>
-						<AdvancedRangeControl
-							label={ __( 'Height', i18n ) }
-							responsive="all"
-							attribute="height"
-							sliderMin="0"
-							sliderMax="500"
-							placeholder={ defaultMinHeight }
-						/>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-				<BlockDiv.InspectorControls hasSizeSpacing={ false } />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-spacer" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<SpacerStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			<InspectorControls defaultMinHeight={ defaultMinHeight } />
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-spacer" />
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -183,6 +159,39 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs tabs={ TABS } hasLayoutPanel={ false } />
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'General', i18n ) }
+					id="general"
+					initialOpen={ true }
+				>
+					<AdvancedRangeControl
+						label={ __( 'Height', i18n ) }
+						responsive="all"
+						attribute="height"
+						sliderMin="0"
+						sliderMax="500"
+						placeholder={ props.defaultMinHeight }
+					/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+			<BlockDiv.InspectorControls hasSizeSpacing={ false } />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-spacer" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/spacer/save.js b/src/block/spacer/save.js
index 84accefe1..5eee0ffa1 100644
--- a/src/block/spacer/save.js
+++ b/src/block/spacer/save.js
@@ -15,13 +15,9 @@ import {
  */
 import { compose } from '@wordpress/compose'
 
-/**
- * Internal dependencies
- */
-import { SpacerStyles } from './style'
-
 export const Save = props => {
 	const {
+		attributes,
 		...propsToPass
 	} = props
 
@@ -40,7 +36,7 @@ export const Save = props => {
 			attributes={ props.attributes }
 			version={ props.version }
 		>
-			<SpacerStyles.Content { ...propsToPass } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ props.attributes } />
 		</BlockDiv.Content>
 	)
diff --git a/src/block/spacer/style.js b/src/block/spacer/style.js
index d0d98e372..50ae2fe0e 100644
--- a/src/block/spacer/style.js
+++ b/src/block/spacer/style.js
@@ -7,70 +7,26 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				renderIn="save"
-				styleRule="height"
-				attrName="height"
-				key="height"
-				format="%spx"
-				responsive="all"
-			/>
-		</>
-	)
-}
-
-export const SpacerStyles = memo( props => {
-	return (
-		<>
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Styles { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-SpacerStyles.defaultProps = {
-	version: '',
-}
-
-SpacerStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-SpacerStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+blockStyles.addBlockStyles( 'height', [ {
+	selector: '',
+	renderIn: 'save',
+	styleRule: 'height',
+	attrName: 'height',
+	key: 'height',
+	format: '%spx',
+	responsive: 'all',
+} ] )
+
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+
+export default blockStyles
diff --git a/src/block/subtitle/edit.js b/src/block/subtitle/edit.js
index 7148dfcf9..03b5e5769 100644
--- a/src/block/subtitle/edit.js
+++ b/src/block/subtitle/edit.js
@@ -1,14 +1,13 @@
 /**
  * Internal dependencies
  */
-import { SubtitleStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
 k*/
 import {
 	BlockDiv,
-	useGeneratedCss,
 	CustomCSS,
 	Responsive,
 	Advanced,
@@ -24,7 +23,7 @@ import {
 } from '~stackable/block-components'
 import { version as VERSION, i18n } from 'stackable'
 import classnames from 'classnames'
-import { InspectorTabs } from '~stackable/components'
+import { InspectorTabs, useBlockCssGenerator } from '~stackable/components'
 import {
 	withBlockAttributeContext,
 	withBlockWrapperIsHovered,
@@ -39,6 +38,7 @@ import { compose } from '@wordpress/compose'
 import { createBlock } from '@wordpress/blocks'
 import { addFilter } from '@wordpress/hooks'
 import { sprintf, __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 /**
  * Add `autocompleters` support for stackable/subtitle
@@ -54,15 +54,12 @@ addFilter( 'editor.Autocomplete.completers', 'stackable/subtitle', ( filteredCom
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		onReplace,
 		onRemove,
 		mergeBlocks,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const textClasses = getTypographyClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 
@@ -78,35 +75,22 @@ const Edit = props => {
 		blockAlignmentClass,
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<Typography.InspectorControls
-					{ ...props }
-					hasTextTag={ false }
-					isMultiline={ false }
-					initialOpen={ true }
-					hasTextShadow={ true }
-				/>
+			<InspectorControls blockState={ props.blockState } />
 
-				<Alignment.InspectorControls labelContentAlign={ sprintf( __( '%s Alignment', i18n ), __( 'Text', i18n ) ) } />
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-subtitle" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<SubtitleStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-subtitle" />
 
 			<BlockDiv
@@ -148,6 +132,32 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Typography.InspectorControls
+				{ ...props }
+				hasTextTag={ false }
+				isMultiline={ false }
+				initialOpen={ true }
+				hasTextShadow={ true }
+			/>
+
+			<Alignment.InspectorControls labelContentAlign={ sprintf( __( '%s Alignment', i18n ), __( 'Text', i18n ) ) } />
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-subtitle" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/subtitle/save.js b/src/block/subtitle/save.js
index 2eb9e0b91..6c2a64407 100644
--- a/src/block/subtitle/save.js
+++ b/src/block/subtitle/save.js
@@ -1,8 +1,6 @@
 /**
  * Internal dependencies
  */
-import { SubtitleStyles } from './style'
-
 import {
 	BlockDiv,
 	CustomCSS,
@@ -49,7 +47,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<SubtitleStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Typography.Content
 				attributes={ attributes }
diff --git a/src/block/subtitle/style.js b/src/block/subtitle/style.js
index 6fe479c1b..0053a560c 100644
--- a/src/block/subtitle/style.js
+++ b/src/block/subtitle/style.js
@@ -6,59 +6,25 @@ import {
 	Advanced,
 	Typography,
 	Alignment,
-	MarginBottom,
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const typographyOptions = {
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-block-subtitle__text',
 	hoverSelector: '.stk-block-subtitle__text:hover',
-}
-
-export const SubtitleStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Typography.Style { ...props } { ...typographyOptions } />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
 } )
+EffectsAnimations.addStyles( blockStyles )
 
-SubtitleStyles.defaultProps = {
-	version: '',
-}
-
-SubtitleStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-SubtitleStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
 
diff --git a/src/block/tab-content/edit.js b/src/block/tab-content/edit.js
index f7f292472..1b1792137 100644
--- a/src/block/tab-content/edit.js
+++ b/src/block/tab-content/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -13,11 +13,11 @@ import {
 	GroupPlaceholder,
 	InspectorTabs,
 	AdvancedToggleControl,
-	InspectorLayoutControls
+	InspectorLayoutControls,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	getRowClasses,
 	Alignment,
 	getAlignmentClasses,
@@ -43,6 +43,7 @@ import {
  */
 import { compose } from '@wordpress/compose'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 import { useSetActiveTabContext } from '../tabs/with-active-tab'
 import {
 	useSelect,
@@ -70,8 +71,6 @@ const Edit = props => {
 		context,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const [ activeTab, , templateLock ] = useSetActiveTabContext()
 
 	const rowClass = getRowClasses( props.attributes )
@@ -103,20 +102,20 @@ const Edit = props => {
 		'stk-block-content',
 	], getContentAlignmentClasses( props.attributes ) )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-				<Alignment.InspectorControls hasColumnJustify={ false } hasRowAlignment={ false } />
-				<BlockDiv.InspectorControls sizeControlLayoutProps={ { hasContentVerticalAlign: false } } />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-tab-content" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
+			<InspectorControls />
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -124,14 +123,10 @@ const Edit = props => {
 				attributes={ props.attributes }
 				className={ blockClassNames }
 			>
-				<BlockStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-tab-content" />
 
-				{ ! hasInnerBlocks && <GroupPlaceholder /> }
+				{/* { ! hasInnerBlocks && <GroupPlaceholder attributes={ TEMPLATE[0][1] } /> } */}
 				<Separator>
 					<div
 						className={ contentClassNames }
@@ -178,6 +173,23 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+			<Alignment.InspectorControls hasColumnJustify={ false } hasRowAlignment={ false } />
+			<BlockDiv.InspectorControls sizeControlLayoutProps={ { hasContentVerticalAlign: false } } />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-tab-content" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+})
+
 export default compose(
 	withBlockWrapper,
 	withQueryLoopContext,
diff --git a/src/block/tab-content/save.js b/src/block/tab-content/save.js
index 01f68bbe4..ad1fecf34 100644
--- a/src/block/tab-content/save.js
+++ b/src/block/tab-content/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -60,7 +55,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Separator.Content attributes={ attributes }>
 				<div className={ contentClassNames }>
diff --git a/src/block/tab-content/style.js b/src/block/tab-content/style.js
index 0f1707ee5..3293e7ab6 100644
--- a/src/block/tab-content/style.js
+++ b/src/block/tab-content/style.js
@@ -10,56 +10,21 @@ import {
 	Separator,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const alignmentOptions = {
+Alignment.addStyles( blockStyles, {
 	editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`,
-}
-
-const BlockStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } { ...alignmentOptions } />
-			<BlockDiv.Style { ...props } />
-			<MarginBottom.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Separator.Style { ...props } />
-		</>
-	)
 } )
-
-BlockStyles.defaultProps = {
-	version: '',
-}
-
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } { ...alignmentOptions } />
-			<BlockDiv.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Separator.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
-export default BlockStyles
+BlockDiv.addStyles( blockStyles )
+MarginBottom.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+Separator.addStyles( blockStyles )
+
+export default blockStyles
diff --git a/src/block/tab-labels/edit.js b/src/block/tab-labels/edit.js
index 156e79e59..a54dcbd87 100644
--- a/src/block/tab-labels/edit.js
+++ b/src/block/tab-labels/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { TabStyles } from './style'
+import tabBlockStyles from './style'
 import { useSetActiveTabContext } from '../tabs/with-active-tab'
 import { defaultIcon } from './schema'
 import { blockStyles as _blockStyles } from './block-styles'
@@ -15,7 +15,6 @@ import SVGIconBottom from './images/icon-bottom.svg'
  */
 import {
 	BlockDiv,
-	useGeneratedCss,
 	CustomCSS,
 	Responsive,
 	Advanced,
@@ -46,6 +45,7 @@ import {
 	ColorPaletteControl,
 	BlockStyles,
 	RichText,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	withBlockAttributeContext,
@@ -60,7 +60,7 @@ import { cloneDeep, kebabCase } from 'lodash'
  */
 import { __, sprintf } from '@wordpress/i18n'
 import {
-	useRef, useCallback, createRef, useState, useEffect,
+	useRef, useCallback, createRef, useState, useEffect, memo,
 } from '@wordpress/element'
 import { dispatch, useSelect } from '@wordpress/data'
 import { compose } from '@wordpress/compose'
@@ -107,8 +107,6 @@ const Edit = props => {
 		context,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const [ activeTab, setActiveTab, , setTemplateLock ] = useSetActiveTabContext()
 	const textClasses = getTypographyClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
@@ -310,353 +308,43 @@ const Edit = props => {
 		blockAlignmentClass,
 	] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles: tabBlockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton
-							label={ __( 'Move left', i18n ) }
-							icon="arrow-left-alt2"
-							disabled={ activeTab === 1 }
-							onClick={ moveActiveTabLeft }
-						/>
-						<ToolbarButton
-							label={ __( 'Move right', i18n ) }
-							icon="arrow-right-alt2"
-							disabled={ activeTab === props.attributes.tabLabels.length }
-							onClick={ moveActiveTabRight }
-						/>
-					</ToolbarGroup>
-				</BlockControls>
-
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton
-							label={ __( 'Add tab', i18n ) }
-							icon="plus-alt2"
-							onClick={ () => addNewTab( activeTab ) }
-						/>
-						<ToolbarButton
-							label={ __( 'Duplicate tab', i18n ) }
-							icon="admin-page"
-							onClick={ () => duplicateTab( activeTab ) }
-						/>
-						<ToolbarButton
-							label={ __( 'Delete tab', i18n ) }
-							icon="trash"
-							disabled={ props.attributes.tabLabels.length === 1 }
-							onClick={ () => {
-								// Prompt first if the user really wants to delete the tab
-								if ( confirm( __( 'Are you sure you want to delete this tab?', i18n ) ) ) { // eslint-disable-line no-alert
-									deleteActiveTab()
-								}
-							} }
-						/>
-					</ToolbarGroup>
-				</BlockControls>
-
-				<InspectorLayoutControls>
-					{ context[ 'stackable/tabOrientation' ] !== 'vertical' && <>
-						<AdvancedToggleControl
-							label={ __( 'Full Width', i18n ) }
-							attribute="fullWidth"
-							defaultValue={ false }
-							onChange={ fullWidth => {
-								const newAttributes = { fullWidth }
-
-								// For ceneterd pills, we have block margin
-								// left/right set to auto, so the full width
-								// option would look like it's not working,
-								// change the margins too.
-								const activeStyle = getBlockStyle( blockStyles, props.attributes.className )
-								if ( activeStyle.name === 'centered-pills' ) {
-									props.attributes.blockMargin = {
-										top: props.attributes.blockMargin?.top || '',
-										bottom: props.attributes.blockMargin?.bottom || '',
-									}
-									if ( fullWidth ) {
-										const right = props.attributes.blockMargin?.right || ''
-										const left = props.attributes.blockMargin?.left || ''
-										props.attributes.blockMargin.right = right === 'auto' ? '' : right
-										props.attributes.blockMargin.left = left === 'auto' ? '' : left
-									} else {
-										const right = props.attributes.blockMargin?.right || 'auto'
-										const left = props.attributes.blockMargin?.left || 'auto'
-										props.attributes.blockMargin.right = right === '' ? 'auto' : right
-										props.attributes.blockMargin.left = left === '' ? 'auto' : left
-									}
-								}
-
-								setAttributes( newAttributes )
-							} }
-						/>
-					</> }
-
-					{ ( ( props.attributes.iconPosition === '' || props.attributes.iconPosition === 'right' ) && props.attributes.showIcon ) && // Check if icon position is left or right
-							( ( context[ 'stackable/tabOrientation' ] !== 'vertical' && props.attributes.fullWidth ) || context[ 'stackable/tabOrientation' ] === 'vertical' ) && // Show if its in horizontal position and fullWidth OR show on vertical position
-								<AdvancedToggleControl
-									label={ __( 'Fixed Icon Position', i18n ) }
-									attribute="fixedIconPosition"
-									defaultValue={ false }
-								/>
-					}
-
-					{ props.attributes.showIcon &&
-						<AdvancedToolbarControl
-							label={ __( 'Icon Position', i18n ) }
-							controls={ ICON_ALIGN_OPTIONS }
-							attribute="iconPosition"
-						/>
-					}
-
-					{ context[ 'stackable/tabOrientation' ] !== 'vertical' && <>
-						{ ! props.attributes.fullWidth && (
-							<AdvancedToolbarControl
-								label={ __( 'Tab Alignment', i18n ) }
-								attribute="tabAlignment"
-								controls="horizontal"
-								// default="flex-start"
-								responsive="all"
-								// value={ props.attributes.tabAlignment |' }
-							/>
-						) }
-					</> }
-
-					{ ( props.attributes.fullWidth || context[ 'stackable/tabOrientation' ] === 'vertical' || props.attributes.iconPosition === 'top' || props.attributes.iconPosition === 'bottom' ) && <>
-						<AlignButtonsControl
-							label={ __( 'Text Alignment', i18n ) }
-							attribute="contentAlign"
-							responsive="all"
-						/>
-					</> }
-
-					{ context[ 'stackable/tabOrientation' ] !== 'vertical' && <>
-						<AdvancedRangeControl
-							label={ __( 'Column Gap', i18n ) }
-							attribute="columnGap"
-							min={ 0 }
-							sliderMax={ 50 }
-							placeholder="12"
-							responsive="all"
-						/>
-					</> }
-
-					<AdvancedRangeControl
-						label={ __( 'Row Gap', i18n ) }
-						attribute="rowGap"
-						min={ 0 }
-						sliderMax={ 50 }
-						placeholder="8"
-						responsive="all"
-					/>
-
-					{ props.attributes.showIcon &&
-						<AdvancedRangeControl
-							label={ __( 'Icon Gap', i18n ) }
-							attribute="iconGap"
-							min={ 0 }
-							sliderMax={ 50 }
-							placeholder="8"
-						/>
-					}
-
-					<AdvancedToggleControl
-						label={ __( 'Scrollable Tabs on Mobile', i18n ) }
-						attribute="scrollableOnMobile"
-						defaultValue={ true }
-
-					/>
-
-				</InspectorLayoutControls>
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'Tab', i18n ) }
-						initialOpen={ true }
-						id="tab"
-					>
-						<BlockStyles styles={ blockStyles } context={ context } />
-						<ControlSeparator />
-
-						<Button.InspectorControls.Colors.Controls
-							// We add our own text color and icon color
-							hasTextColor={ false }
-							hasIconColor={ false }
-							attrNameTemplate="tab%s"
-						/>
-						<ColorPaletteControl
-							label={ __( 'Text Color', i18n ) }
-							attribute="tabTextColor1"
-							hover="all"
-						/>
-						{ props.attributes.showIcon &&
-							<ColorPaletteControl
-								label={ __( 'Icon Color', i18n ) }
-								// We need this name because the Button Block Component uses this.
-								attribute="tabIconColor1"
-								hover="all"
-							/>
-						}
-						<ControlSeparator />
-						<Button.InspectorControls.Size.Controls
-							attrNameTemplate="tab%s"
-						/>
-						<ControlSeparator />
-						<Button.InspectorControls.Borders.Controls
-							attrNameTemplate="tab%s"
-						/>
-					</PanelAdvancedSettings>
-
-					<PanelAdvancedSettings
-						title={ __( 'Tab Active State', i18n ) }
-						id="tab-active-state"
-					>
-						<Button.InspectorControls.Colors.Controls
-							hasTextColor={ false }
-							hasIconColor={ false }
-							attrNameTemplate="activeTab%s"
-						/>
-						<ColorPaletteControl
-							label={ __( 'Text Color', i18n ) }
-							attribute="activeTabTextColor"
-							hover="all"
-						/>
-						{ props.attributes.showIcon &&
-							<ColorPaletteControl
-								label={ __( 'Icon Color', i18n ) }
-								// We need this name because the Button Block Component uses this.
-								attribute="activeTabIconColor1"
-								hover="all"
-							/>
-						}
-						<ControlSeparator />
-						<Button.InspectorControls.Borders.Controls
-							attrNameTemplate="activeTab%s"
-							hasBorderType={ false }
-							borderTypeValue={ props.attributes.tabBorderType } // Change this to the value of the border type control
-							hasBorderRadius={ false }
-						/>
-					</PanelAdvancedSettings>
-
-					<PanelAdvancedSettings
-						title={ __( 'Typography', i18n ) }
-						initialOpen={ false }
-						id="typography"
-					>
-						<Typography.InspectorControls.Controls
-							attrNameTemplate="tab%s"
-							{ ...props }
-							hasTextContent={ false }
-							hasTextTag={ false }
-							isMultiline={ true }
-							initialOpen={ true }
-							hasTextShadow={ true }
-							hasGradient={ false }
-							hasInset={ false }
-						/>
-					</PanelAdvancedSettings>
-
-					<PanelAdvancedSettings
-						title={ __( 'Icon', i18n ) }
-						initialOpen={ false }
-						hasToggle={ true }
-						checked={ props.attributes.showIcon }
-						onChange={ showIcon => setAttributes( { showIcon } ) }
-						id="icon"
-					>
-						<Icon.InspectorControls
-							attrNameTemplate="tab%s"
-							wrapInPanels={ false }
-							hasGradient={ false }
-							hasShape={ false }
-							hasBackgroundShape={ false }
-							hasIconGap={ true }
-							hasIconPosition={ false }
-							defaultValue={ defaultIcon }
-							iconControlHelp={ __( 'Change icons individually by clicking on each tab\'s icon.', i18n ) }
-							iconGapPlaceholder="8"
-							onChangeIcon={ icon => {
-								// Reset all tab label icons.
-								const newTabLabels = cloneDeep( props.attributes.tabLabels ).map(
-									tab => ( {
-										...tab,
-										icon: '',
-									} )
-								)
-								setAttributes( {
-									icon,
-									tabLabels: newTabLabels,
-								} )
-							} }
-						>
-							<AdvancedToolbarControl
-								label={ __( 'Icon Position', i18n ) }
-								controls={ ICON_ALIGN_OPTIONS }
-								attribute="iconPosition"
-							/>
-						</Icon.InspectorControls>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<BlockDiv.InspectorControls />
-
-				<InspectorAdvancedControls>
-					<PanelAdvancedSettings
-						title={ __( 'Tab Anchors', i18n ) }
-						id="tabAnchors"
-					>
-						<GutBaseControl help={ __( "Assign unique anchor names to each tab so you'll be able to link directly and open each one.", i18n ) } />
-						{ tabLabels.map( ( tab, index ) => (
-							<AdvancedTextControl
-								label={ sprintf(
-									// Translators: %s is the tab label.
-									__( '%s Anchor', i18n ),
-									// eslint-disable-next-line @wordpress/i18n-no-variables
-									__( tab.label, i18n )
-								) }
-								value={ tabLabels[ index ].anchor }
-								placeholder={ __( 'Tab Anchor', i18n ) }
-								key={ `tab-anchors-${ index }` }
-								onChange={ value => {
-									const updatedLabels = cloneDeep( tabLabels )
-									updatedLabels[ index ].anchor = value
-									setTabLabels( updatedLabels )
-
-									if ( ! value ) {
-										setAttributes( { tabLabels: updatedLabels } )
-									}
-								} }
-								onBlur={ () => {
-									const updatedLabels = tabLabels
-									if ( updatedLabels[ index ].anchor ) {
-										updatedLabels[ index ].anchor = kebabCase( updatedLabels[ index ].anchor )
-										setAttributes( { tabLabels: updatedLabels } )
-									}
-								} }
-							/>
-						) ) }
-
-					</PanelAdvancedSettings>
-				</InspectorAdvancedControls>
-
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-tab-labels" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<TabStyles
-				version={ VERSION }
+			<InspectorControls
+				activeTab={ activeTab }
+				moveActiveTabLeft={ moveActiveTabLeft }
+				moveActiveTabRight={ moveActiveTabRight }
+				addNewTab={ addNewTab }
+				deleteActiveTab={ deleteActiveTab }
+				duplicateTab={ duplicateTab }
+				tabLabels={ tabLabels }
+				setTabLabels={ setTabLabels }
+				context={ context }
+				blockStyles={ blockStyles }
+				setAttributes={ setAttributes }
 				blockState={ props.blockState }
-				clientId={ clientId }
+				attributes={ {
+					tabLabels: props.attributes.tabLabels,
+					className: props.attributes.className,
+					blockMargin: props.attributes.blockMargin,
+					iconPosition: props.attributes.iconPosition,
+					showIcon: props.attributes.showIcon,
+					fullWidth: props.attributes.fullWidth,
+				} }
 			/>
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-tab-labels" />
 
 			<BlockDiv
@@ -732,6 +420,350 @@ const useGetRef = () => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton
+						label={ __( 'Move left', i18n ) }
+						icon="arrow-left-alt2"
+						disabled={ props.activeTab === 1 }
+						onClick={ props.moveActiveTabLeft }
+					/>
+					<ToolbarButton
+						label={ __( 'Move right', i18n ) }
+						icon="arrow-right-alt2"
+						disabled={ props.activeTab === props.attributes.tabLabels.length }
+						onClick={ props.moveActiveTabRight }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton
+						label={ __( 'Add tab', i18n ) }
+						icon="plus-alt2"
+						onClick={ () => props.addNewTab( props.activeTab ) }
+					/>
+					<ToolbarButton
+						label={ __( 'Duplicate tab', i18n ) }
+						icon="admin-page"
+						onClick={ () => props.duplicateTab( props.activeTab ) }
+					/>
+					<ToolbarButton
+						label={ __( 'Delete tab', i18n ) }
+						icon="trash"
+						disabled={ props.attributes.tabLabels.length === 1 }
+						onClick={ () => {
+							// Prompt first if the user really wants to delete the tab
+							if ( confirm( __( 'Are you sure you want to delete this tab?', i18n ) ) ) { // eslint-disable-line no-alert
+								props.deleteActiveTab()
+							}
+						} }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+
+			<InspectorLayoutControls>
+				{ props.context[ 'stackable/tabOrientation' ] !== 'vertical' && <>
+					<AdvancedToggleControl
+						label={ __( 'Full Width', i18n ) }
+						attribute="fullWidth"
+						defaultValue={ false }
+						onChange={ fullWidth => {
+							const newAttributes = { fullWidth }
+
+							// For ceneterd pills, we have block margin
+							// left/right set to auto, so the full width
+							// option would look like it's not working,
+							// change the margins too.
+							const activeStyle = getBlockStyle( props.blockStyles, props.attributes.className )
+							if ( activeStyle.name === 'centered-pills' ) {
+								props.attributes.blockMargin = {
+									top: props.attributes.blockMargin?.top || '',
+									bottom: props.attributes.blockMargin?.bottom || '',
+								}
+								if ( fullWidth ) {
+									const right = props.attributes.blockMargin?.right || ''
+									const left = props.attributes.blockMargin?.left || ''
+									props.attributes.blockMargin.right = right === 'auto' ? '' : right
+									props.attributes.blockMargin.left = left === 'auto' ? '' : left
+								} else {
+									const right = props.attributes.blockMargin?.right || 'auto'
+									const left = props.attributes.blockMargin?.left || 'auto'
+									props.attributes.blockMargin.right = right === '' ? 'auto' : right
+									props.attributes.blockMargin.left = left === '' ? 'auto' : left
+								}
+							}
+
+							props.setAttributes( newAttributes )
+						} }
+					/>
+				</> }
+
+				{ ( ( props.attributes.iconPosition === '' || props.attributes.iconPosition === 'right' ) && props.attributes.showIcon ) && // Check if icon position is left or right
+							( ( props.context[ 'stackable/tabOrientation' ] !== 'vertical' && props.attributes.fullWidth ) || props.context[ 'stackable/tabOrientation' ] === 'vertical' ) && // Show if its in horizontal position and fullWidth OR show on vertical position
+								<AdvancedToggleControl
+									label={ __( 'Fixed Icon Position', i18n ) }
+									attribute="fixedIconPosition"
+									defaultValue={ false }
+								/>
+				}
+
+				{ props.attributes.showIcon &&
+					<AdvancedToolbarControl
+						label={ __( 'Icon Position', i18n ) }
+						controls={ ICON_ALIGN_OPTIONS }
+						attribute="iconPosition"
+					/>
+				}
+
+				{ props.context[ 'stackable/tabOrientation' ] !== 'vertical' && <>
+					{ ! props.attributes.fullWidth && (
+						<AdvancedToolbarControl
+							label={ __( 'Tab Alignment', i18n ) }
+							attribute="tabAlignment"
+							controls="horizontal"
+							// default="flex-start"
+							responsive="all"
+							// value={ props.attributes.tabAlignment |' }
+						/>
+					) }
+				</> }
+
+				{ ( props.attributes.fullWidth || props.context[ 'stackable/tabOrientation' ] === 'vertical' || props.attributes.iconPosition === 'top' || props.attributes.iconPosition === 'bottom' ) && <>
+					<AlignButtonsControl
+						label={ __( 'Text Alignment', i18n ) }
+						attribute="contentAlign"
+						responsive="all"
+					/>
+				</> }
+
+				{ props.context[ 'stackable/tabOrientation' ] !== 'vertical' && <>
+					<AdvancedRangeControl
+						label={ __( 'Column Gap', i18n ) }
+						attribute="columnGap"
+						min={ 0 }
+						sliderMax={ 50 }
+						placeholder="12"
+						responsive="all"
+					/>
+				</> }
+
+				<AdvancedRangeControl
+					label={ __( 'Row Gap', i18n ) }
+					attribute="rowGap"
+					min={ 0 }
+					sliderMax={ 50 }
+					placeholder="8"
+					responsive="all"
+				/>
+
+				{ props.attributes.showIcon &&
+					<AdvancedRangeControl
+						label={ __( 'Icon Gap', i18n ) }
+						attribute="iconGap"
+						min={ 0 }
+						sliderMax={ 50 }
+						placeholder="8"
+					/>
+				}
+
+				<AdvancedToggleControl
+					label={ __( 'Scrollable Tabs on Mobile', i18n ) }
+					attribute="scrollableOnMobile"
+					defaultValue={ true }
+
+				/>
+
+			</InspectorLayoutControls>
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'Tab', i18n ) }
+					initialOpen={ true }
+					id="tab"
+				>
+					<BlockStyles styles={ props.blockStyles } context={ props.context } />
+					<ControlSeparator />
+
+					<Button.InspectorControls.Colors.Controls
+						// We add our own text color and icon color
+						hasTextColor={ false }
+						hasIconColor={ false }
+						attrNameTemplate="tab%s"
+					/>
+					<ColorPaletteControl
+						label={ __( 'Text Color', i18n ) }
+						attribute="tabTextColor1"
+						hover="all"
+					/>
+					{ props.attributes.showIcon &&
+						<ColorPaletteControl
+							label={ __( 'Icon Color', i18n ) }
+							// We need this name because the Button Block Component uses this.
+							attribute="tabIconColor1"
+							hover="all"
+						/>
+					}
+					<ControlSeparator />
+					<Button.InspectorControls.Size.Controls
+						attrNameTemplate="tab%s"
+					/>
+					<ControlSeparator />
+					<Button.InspectorControls.Borders.Controls
+						attrNameTemplate="tab%s"
+					/>
+				</PanelAdvancedSettings>
+
+				<PanelAdvancedSettings
+					title={ __( 'Tab Active State', i18n ) }
+					id="tab-active-state"
+				>
+					<Button.InspectorControls.Colors.Controls
+						hasTextColor={ false }
+						hasIconColor={ false }
+						attrNameTemplate="activeTab%s"
+					/>
+					<ColorPaletteControl
+						label={ __( 'Text Color', i18n ) }
+						attribute="activeTabTextColor"
+						hover="all"
+					/>
+					{ props.attributes.showIcon &&
+						<ColorPaletteControl
+							label={ __( 'Icon Color', i18n ) }
+							// We need this name because the Button Block Component uses this.
+							attribute="activeTabIconColor1"
+							hover="all"
+						/>
+					}
+					<ControlSeparator />
+					<Button.InspectorControls.Borders.Controls
+						attrNameTemplate="activeTab%s"
+						hasBorderType={ false }
+						borderTypeValue={ props.attributes.tabBorderType } // Change this to the value of the border type control
+						hasBorderRadius={ false }
+					/>
+				</PanelAdvancedSettings>
+
+				<PanelAdvancedSettings
+					title={ __( 'Typography', i18n ) }
+					initialOpen={ false }
+					id="typography"
+				>
+					<Typography.InspectorControls.Controls
+						attrNameTemplate="tab%s"
+						{ ...props }
+						hasTextContent={ false }
+						hasTextTag={ false }
+						isMultiline={ true }
+						initialOpen={ true }
+						hasTextShadow={ true }
+						hasGradient={ false }
+						hasInset={ false }
+					/>
+				</PanelAdvancedSettings>
+
+				<PanelAdvancedSettings
+					title={ __( 'Icon', i18n ) }
+					initialOpen={ false }
+					hasToggle={ true }
+					checked={ props.attributes.showIcon }
+					onChange={ showIcon => props.setAttributes( { showIcon } ) }
+					id="icon"
+				>
+					<Icon.InspectorControls
+						attrNameTemplate="tab%s"
+						wrapInPanels={ false }
+						hasGradient={ false }
+						hasShape={ false }
+						hasBackgroundShape={ false }
+						hasIconGap={ true }
+						hasIconPosition={ false }
+						defaultValue={ defaultIcon }
+						iconControlHelp={ __( 'Change icons individually by clicking on each tab\'s icon.', i18n ) }
+						iconGapPlaceholder="8"
+						onChangeIcon={ icon => {
+							// Reset all tab label icons.
+							const newTabLabels = cloneDeep( props.attributes.tabLabels ).map(
+								tab => ( {
+									...tab,
+									icon: '',
+								} )
+							)
+							props.setAttributes( {
+								icon,
+								tabLabels: newTabLabels,
+							} )
+						} }
+					>
+						<AdvancedToolbarControl
+							label={ __( 'Icon Position', i18n ) }
+							controls={ ICON_ALIGN_OPTIONS }
+							attribute="iconPosition"
+						/>
+					</Icon.InspectorControls>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+
+			<BlockDiv.InspectorControls />
+
+			<InspectorAdvancedControls>
+				<PanelAdvancedSettings
+					title={ __( 'Tab Anchors', i18n ) }
+					id="tabAnchors"
+				>
+					<GutBaseControl help={ __( "Assign unique anchor names to each tab so you'll be able to link directly and open each one.", i18n ) } />
+					{ props.tabLabels.map( ( tab, index ) => (
+						<AdvancedTextControl
+							label={ sprintf(
+								// Translators: %s is the tab label.
+								__( '%s Anchor', i18n ),
+								// eslint-disable-next-line @wordpress/i18n-no-variables
+								__( tab.label, i18n )
+							) }
+							value={ props.tabLabels[ index ].anchor }
+							placeholder={ __( 'Tab Anchor', i18n ) }
+							key={ `tab-anchors-${ index }` }
+							onChange={ value => {
+								const updatedLabels = cloneDeep( props.tabLabels )
+								updatedLabels[ index ].anchor = value
+								props.setTabLabels( updatedLabels )
+
+								if ( ! value ) {
+									props.setAttributes( { tabLabels: updatedLabels } )
+								}
+							} }
+							onBlur={ () => {
+								const updatedLabels = props.tabLabels
+								if ( updatedLabels[ index ].anchor ) {
+									updatedLabels[ index ].anchor = kebabCase( updatedLabels[ index ].anchor )
+									props.setAttributes( { tabLabels: updatedLabels } )
+								}
+							} }
+						/>
+					) ) }
+
+				</PanelAdvancedSettings>
+			</InspectorAdvancedControls>
+
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-tab-labels" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapper,
 	withQueryLoopContext,
diff --git a/src/block/tab-labels/save.js b/src/block/tab-labels/save.js
index a89976e5c..f5beaf075 100644
--- a/src/block/tab-labels/save.js
+++ b/src/block/tab-labels/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { TabStyles } from './style'
-
 import {
 	BlockDiv,
 	CustomCSS,
@@ -53,7 +48,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<TabStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<div
 				className="stk-block-tab-labels__wrapper"
diff --git a/src/block/tab-labels/style.js b/src/block/tab-labels/style.js
index 4f5050fe2..5328ce7aa 100644
--- a/src/block/tab-labels/style.js
+++ b/src/block/tab-labels/style.js
@@ -6,253 +6,184 @@ import {
 	Advanced,
 	Typography,
 	Alignment,
-	MarginBottom,
 	EffectsAnimations,
 	Transform,
 	Icon,
 	Button,
 } from '~stackable/block-components'
-import {
-	BlockCss,
-	BlockCssCompiler,
-} from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const typographyOptions = {
+blockStyles.addBlockStyles( 'tabAlignment', [ {
+	selector: '.stk-block-tab-labels__wrapper',
+	styleRule: 'justifyContent',
+	attrName: 'tabAlignment',
+	key: 'tabAlignment',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'fullWidth', [ {
+	selector: '.stk-block-content.stk-block-tabs--horizontal .%s',
+	styleRule: '--tabs-flex',
+	attrName: 'fullWidth',
+	key: 'fullWidth',
+	valuePreCallback: value => {
+		return value ? '1 1 auto' : undefined
+	},
+} ] )
+
+blockStyles.addBlockStyles( 'columnGap', [ {
+	selector: '',
+	styleRule: '--tabs-column-gap',
+	attrName: 'columnGap',
+	key: 'columnGap',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'rowGap', [ {
+	selector: '',
+	styleRule: '--tabs-row-gap',
+	attrName: 'rowGap',
+	key: 'rowGap',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+{ /* Icon */ }
+blockStyles.addBlockStyles( 'iconPosition', [ {
+	selector: '.stk-block-tabs__tab',
+	styleRule: 'flex-direction',
+	attrName: 'iconPosition',
+	key: 'iconPosition',
+	valueCallback: value => {
+		if ( value === 'right' ) {
+			return 'row-reverse'
+		} else if ( value === 'top' ) {
+			return 'column'
+		} else if ( value === 'bottom' ) {
+			return 'column-reverse'
+		}
+	},
+} ] )
+
+{ /* Icon alignment */ }
+blockStyles.addBlockStyles( 'contentAlign', [ {
+	selector: '.stk-block-tabs__tab',
+	styleRuleCallback: getAttribute => {
+		return getAttribute( 'iconPosition' ) === '' || getAttribute( 'iconPosition' ) === 'right'
+			? 'justifyContent'
+			 : 'alignItems'
+	},
+	attrName: 'contentAlign',
+	key: 'iconAlignment-iconPosition',
+	enabledCallback: getAttribute => getAttribute( 'fullWidth' ) !== undefined || getAttribute( 'iconPosition' ) === 'top' || getAttribute( 'iconPosition' ) === 'bottom',
+	valueCallback: ( value, getAttribute ) => {
+		let newValue = value
+		if ( value === '' || value === 'left' ) {
+			newValue = 'flex-start'
+		} else if ( value === 'center' ) {
+			newValue = 'center'
+		} else {
+			newValue = 'flex-end'
+		}
+
+		// If right icon position, then we need to reverse the alignment.
+		if ( getAttribute( 'iconPosition' ) === 'right' ) {
+			if ( newValue === 'flex-start' ) {
+				newValue = 'flex-end'
+			} else if ( newValue === 'flex-end' ) {
+				newValue = 'flex-start'
+			}
+		}
+
+		return newValue
+	},
+	responsive: 'all',
+	dependencies: [
+		'fullWidth',
+		'iconPosition',
+	],
+} ] )
+
+blockStyles.addBlockStyles( 'iconGap', [ {
+	selector: '.stk-block-tabs__tab',
+	styleRule: 'gap',
+	attrName: 'iconGap',
+	key: 'iconGap',
+	format: '%spx',
+} ] )
+
+{ /* Tab text colors */ }
+blockStyles.addBlockStyles( 'tabTextColor1', [ {
+	selector: '.stk-block-tabs__tab',
+	hoverSelector: '.stk-block-tabs__tab:hover',
+	styleRule: 'color',
+	attrName: 'tabTextColor1',
+	key: 'tabTextColor',
+	hover: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'activeTabTextColor', [ {
+	selector: '.stk-block-tabs__tab.stk-block-tabs__tab--active .stk-block-tab-labels__text',
+	hoverSelector: '.stk-block-tabs__tab.stk-block-tabs__tab--active:hover .stk-block-tab-labels__text',
+	styleRule: 'color',
+	attrName: 'activeTabTextColor',
+	key: 'activeTabTextColor',
+	hover: 'all',
+} ] )
+
+{ /* Enable labels layout to more customizable */ }
+blockStyles.addBlockStyles( 'fixedIconPosition', [ {
+	enabledCallback: getAttribute => getAttribute( 'iconPosition' ) === '' || getAttribute( 'iconPosition' ) === 'right',
+	selector: '.stk-block-tab-labels__wrapper .stk-block-tab-labels__text',
+	styleRule: 'width',
+	attrName: 'fixedIconPosition',
+	valueCallback: value => {
+		return value ? '100%' : undefined
+	},
+	key: 'fixedIconPosition',
+	responsive: 'all',
+	dependencies: [
+		'iconPosition',
+	],
+} ] )
+
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-block-tab-labels__text',
 	hoverSelector: '.stk-block-tabs__tab:hover .stk-block-tab-labels__text',
-}
-
-const buttonOptions = {
+	attrNameTemplate: 'tab%s',
+} )
+Icon.addStyles( blockStyles, {
+	selector: '.stk-block-tabs__tab',
+	hoverSelector: '.stk-block-tabs__tab:hover',
+	hasIconGap: false,
+} )
+EffectsAnimations.addStyles( blockStyles )
+Button.addStyles( blockStyles, {
 	selector: '.stk-block-tabs__tab',
 	hoverSelector: '.stk-block-tabs__tab:not(.stk-block-tabs__tab--active):hover',
 	backgroundSelector: '.stk-block-tabs__tab',
 	borderSelector: '.stk-block-tabs__tab',
 	borderHoverSelector: '.stk-block-tabs__tab:not(.stk-block-tabs__tab--active):hover',
-}
-
-const activeButtonOptions = {
+	attrNameTemplate: 'tab%s',
+} )
+Button.addStyles( blockStyles, {
 	selector: '.stk-block-tabs__tab.stk-block-tabs__tab--active',
 	hoverSelector: '.stk-block-tabs__tab.stk-block-tabs__tab--active:hover',
 	backgroundSelector: '.stk-block-tabs__tab.stk-block-tabs__tab--active',
 	borderSelector: '.stk-block-tabs__tab.stk-block-tabs__tab--active',
 	borderHoverSelector: '.stk-block-tabs__tab.stk-block-tabs__tab--active:hover',
 	borderEnabledCallback: null, // If this is enabled, then we should be able to render the border attributes for the active tab.
-}
-
-const iconOptions = {
-	selector: '.stk-block-tabs__tab',
-	hoverSelector: '.stk-block-tabs__tab:hover',
-}
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	const {
-		dependencies = [],
-	} = props
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-tab-labels__wrapper"
-				styleRule="justifyContent"
-				attrName="tabAlignment"
-				key="tabAlignment"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-content.stk-block-tabs--horizontal .%s"
-				styleRule="--tabs-flex"
-				attrName="fullWidth"
-				key="fullWidth"
-				valuePreCallback={ value => {
-					return value ? '1 1 auto' : undefined
-				} }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--tabs-column-gap"
-				attrName="columnGap"
-				key="columnGap"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--tabs-row-gap"
-				attrName="rowGap"
-				key="rowGap"
-				responsive="all"
-				format="%spx"
-			/>
-
-			{ /* Icon */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-tabs__tab"
-				styleRule="flex-direction"
-				attrName="iconPosition"
-				key="iconPosition"
-				valueCallback={ value => {
-					if ( value === 'right' ) {
-						return 'row-reverse'
-					} else if ( value === 'top' ) {
-						return 'column'
-					} else if ( value === 'bottom' ) {
-						return 'column-reverse'
-					}
-				} }
-			/>
-
-			{ /* Icon alignment */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-tabs__tab"
-				styleRuleCallback={ getAttribute => {
-					return getAttribute( 'iconPosition' ) === '' || getAttribute( 'iconPosition' ) === 'right'
-						? 'justifyContent'
-						 : 'alignItems'
-				} }
-				attrName="contentAlign"
-				key="iconAlignment-iconPosition"
-				enabledCallback={ getAttribute => getAttribute( 'fullWidth' ) !== undefined || getAttribute( 'iconPosition' ) === 'top' || getAttribute( 'iconPosition' ) === 'bottom' }
-				valueCallback={ ( value, getAttribute ) => {
-					let newValue = value
-					if ( value === '' || value === 'left' ) {
-						newValue = 'flex-start'
-					} else if ( value === 'center' ) {
-						newValue = 'center'
-					} else {
-						newValue = 'flex-end'
-					}
-
-					// If right icon position, then we need to reverse the alignment.
-					if ( getAttribute( 'iconPosition' ) === 'right' ) {
-						if ( newValue === 'flex-start' ) {
-							newValue = 'flex-end'
-						} else if ( newValue === 'flex-end' ) {
-							newValue = 'flex-start'
-						}
-					}
-
-					return newValue
-				} }
-				responsive="all"
-				dependencies={ [
-					'fullWidth',
-					'iconPosition',
-					...dependencies,
-				] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-tabs__tab"
-				styleRule="gap"
-				attrName="iconGap"
-				key="iconGap"
-				format="%spx"
-			/>
-
-			{ /* Tab text colors */ }
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-tabs__tab"
-				hoverSelector=".stk-block-tabs__tab:hover"
-				styleRule="color"
-				attrName="tabTextColor1"
-				key="tabTextColor"
-				hover="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-tabs__tab.stk-block-tabs__tab--active .stk-block-tab-labels__text"
-				hoverSelector=".stk-block-tabs__tab.stk-block-tabs__tab--active:hover .stk-block-tab-labels__text"
-				styleRule="color"
-				attrName="activeTabTextColor"
-				key="activeTabTextColor"
-				hover="all"
-			/>
-
-			{ /* Enable labels layout to more customizable */ }
-			<BlockCss
-				{ ...propsToPass }
-				enabledCallback={ getAttribute => getAttribute( 'iconPosition' ) === '' || getAttribute( 'iconPosition' ) === 'right' }
-				selector=".stk-block-tab-labels__wrapper .stk-block-tab-labels__text"
-				styleRule="width"
-				attrName="fixedIconPosition"
-				valueCallback={ value => {
-					return value ? '100%' : undefined
-				} }
-				key="fixedIconPosition"
-				responsive="all"
-				dependencies={ [
-					'iconPosition',
-					 ...dependencies,
-				] }
-			/>
-		</>
-	)
-}
-
-export const TabStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Typography.Style { ...props } { ...typographyOptions } attrNameTemplate="tab%s" />
-			<Icon.Style { ...props } { ...iconOptions } hasIconGap={ false } />
-			<Styles { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Button.Style { ...props } { ...buttonOptions } attrNameTemplate="tab%s" />
-			<Button.Style { ...props } { ...activeButtonOptions } attrNameTemplate="activeTab%s" />
-		</>
-	)
+	attrNameTemplate: 'activeTab%s',
 } )
 
-TabStyles.defaultProps = {
-	version: '',
-}
-
-TabStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } attrNameTemplate="tab%s" />
-			<Icon.Style.Content { ...props } { ...iconOptions } hasIconGap={ false } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-			<Styles { ...props } />
-			<Button.Style.Content { ...props } { ...buttonOptions } attrNameTemplate="tab%s" />
-			<Button.Style.Content { ...props } { ...activeButtonOptions } attrNameTemplate="activeTab%s" />
-		</BlockCssCompiler>
-	)
-}
-
-TabStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
+export default blockStyles
diff --git a/src/block/table-of-contents/edit.js b/src/block/table-of-contents/edit.js
index e6e3406f9..d5fa77cd5 100644
--- a/src/block/table-of-contents/edit.js
+++ b/src/block/table-of-contents/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { TableOfContentsStyles } from './style'
+import blockStyles from './style'
 import { generateAnchor } from './autogenerate-anchors'
 import TableOfContentsList from './table-of-contents-list'
 import { getUpdatedHeadings, linearToNestedHeadingList } from './util'
@@ -22,6 +22,7 @@ import {
 	AdvancedToggleControl,
 	AdvancedSelectControl,
 	RichText,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	withBlockAttributeContext, withBlockWrapperIsHovered, withQueryLoopContext,
@@ -29,7 +30,6 @@ import {
 import {
 	Typography,
 	BlockDiv,
-	useGeneratedCss,
 	Advanced,
 	CustomCSS,
 	Responsive,
@@ -53,7 +53,7 @@ import {
 } from '@wordpress/components'
 import { useSelect, dispatch } from '@wordpress/data'
 import {
-	useEffect, useState, useCallback,
+	useEffect, useState, useCallback, memo,
 } from '@wordpress/element'
 import {
 	__, _x, sprintf,
@@ -141,7 +141,6 @@ const Notice = ( { autoGenerateAnchors } ) => {
 
 const Edit = props => {
 	const {
-		clientId,
 		attributes,
 		setAttributes,
 		className,
@@ -281,8 +280,6 @@ const Edit = props => {
 		}
 	}, 301 ), [ headings ] )
 
-	useGeneratedCss( props.attributes )
-
 	const { listType } = attributes
 	const tagName = isEmpty( listType ) || listType === 'unordered' || listType === 'none' ? 'ul' : 'ol'
 
@@ -385,6 +382,17 @@ const Edit = props => {
 		setForceUpdateHeadings( forceUpdateHeadings + 1 )
 	}, [ headings ] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	// When generating an example block preview, just show a list of headings.
 	// @see example.js
 	if ( props.attributes.example ) {
@@ -399,123 +407,9 @@ const Edit = props => {
 
 	return (
 		<>
-			<>
-				<InspectorTabs hasLayoutPanel={ false } />
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'General', i18n ) }
-						initialOpen={ true }
-						id="general"
-					>
-						<HeadingsControls />
-
-						<AdvancedSelectControl
-							label={ __( 'List Type', i18n ) }
-							attribute="listType"
-							options={ listTypeOptions }
-						/>
-
-						<AdvancedRangeControl
-							label={ __( 'Columns', i18n ) }
-							attribute="columns"
-							min="1"
-							sliderMax="3"
-							step="1"
-							placeholder="1"
-							responsive="all"
-						/>
-
-						<AdvancedRangeControl
-							label={ __( 'Column Gap', i18n ) }
-							attribute="columnGap"
-							min="0"
-							placeholder="32"
-							sliderMax="50"
-							responsive="all"
-						/>
-
-						<AdvancedRangeControl
-							label={ __( 'Row Gap', i18n ) }
-							attribute="rowGap"
-							min="0"
-							sliderMax="50"
-							responsive="all"
-						/>
-
-						<AdvancedRangeControl
-							label={ __( 'Icon Gap', i18n ) }
-							attribute="iconGap"
-							min="0"
-							sliderMax="20"
-							responsive="all"
-						/>
-
-						<AdvancedRangeControl
-							label={ __( 'Indentation', i18n ) }
-							attribute="indentation"
-							min="0"
-							sliderMax="50"
-							responsive="all"
-							placeholder=""
-						/>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'Scrolling', i18n ) }
-						initialOpen={ false }
-						id="scrolling"
-					>
-						<AdvancedToggleControl
-							label={ __( 'Use smooth scroll', i18n ) }
-							attribute="isSmoothScroll"
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Scroll Top Offset ', i18n ) }
-							attribute="scrollTopOffset"
-							min={ 0 }
-							max={ 200 }
-							step={ 1 }
-							responsive="all"
-							placeholder="0"
-						/>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<Typography.InspectorControls
-					{ ...props }
-					isMultiline={ true }
-					initialOpen={ false }
-					hasTextTag={ false }
-					hasTextContent={ false }
-				/>
+			<InspectorControls blockState={ props.blockState } />
 
-				<Typography.InspectorControls
-					{ ...props }
-					label={ __( 'Title', i18n ) }
-					attrNameTemplate="title%s"
-					initialOpen={ false }
-					hasToggle={ true }
-					hasTextTag={ false }
-				/>
-
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-table-of-contents" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<TableOfContentsStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
-			/>
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-table-of-contents" />
 
 			<BlockDiv
@@ -549,6 +443,122 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs hasLayoutPanel={ false } />
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'General', i18n ) }
+					initialOpen={ true }
+					id="general"
+				>
+					<HeadingsControls />
+
+					<AdvancedSelectControl
+						label={ __( 'List Type', i18n ) }
+						attribute="listType"
+						options={ listTypeOptions }
+					/>
+
+					<AdvancedRangeControl
+						label={ __( 'Columns', i18n ) }
+						attribute="columns"
+						min="1"
+						sliderMax="3"
+						step="1"
+						placeholder="1"
+						responsive="all"
+					/>
+
+					<AdvancedRangeControl
+						label={ __( 'Column Gap', i18n ) }
+						attribute="columnGap"
+						min="0"
+						placeholder="32"
+						sliderMax="50"
+						responsive="all"
+					/>
+
+					<AdvancedRangeControl
+						label={ __( 'Row Gap', i18n ) }
+						attribute="rowGap"
+						min="0"
+						sliderMax="50"
+						responsive="all"
+					/>
+
+					<AdvancedRangeControl
+						label={ __( 'Icon Gap', i18n ) }
+						attribute="iconGap"
+						min="0"
+						sliderMax="20"
+						responsive="all"
+					/>
+
+					<AdvancedRangeControl
+						label={ __( 'Indentation', i18n ) }
+						attribute="indentation"
+						min="0"
+						sliderMax="50"
+						responsive="all"
+						placeholder=""
+					/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'Scrolling', i18n ) }
+					initialOpen={ false }
+					id="scrolling"
+				>
+					<AdvancedToggleControl
+						label={ __( 'Use smooth scroll', i18n ) }
+						attribute="isSmoothScroll"
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Scroll Top Offset ', i18n ) }
+						attribute="scrollTopOffset"
+						min={ 0 }
+						max={ 200 }
+						step={ 1 }
+						responsive="all"
+						placeholder="0"
+					/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+
+			<Typography.InspectorControls
+				{ ...props }
+				isMultiline={ true }
+				initialOpen={ false }
+				hasTextTag={ false }
+				hasTextContent={ false }
+			/>
+
+			<Typography.InspectorControls
+				{ ...props }
+				label={ __( 'Title', i18n ) }
+				attrNameTemplate="title%s"
+				initialOpen={ false }
+				hasToggle={ true }
+				hasTextTag={ false }
+			/>
+
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-table-of-contents" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/table-of-contents/save.js b/src/block/table-of-contents/save.js
index e97fb7f11..1fecb6c65 100644
--- a/src/block/table-of-contents/save.js
+++ b/src/block/table-of-contents/save.js
@@ -1,7 +1,6 @@
 /**
  * Internal dependencies
  */
-import { TableOfContentsStyles } from './style'
 import TableOfContentsList from './table-of-contents-list'
 import { linearToNestedHeadingList } from './util'
 import {
@@ -70,7 +69,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<TableOfContentsStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			{ attributes.titleShow && <Typography.Content
 				className={ titleClassNames }
diff --git a/src/block/table-of-contents/style.js b/src/block/table-of-contents/style.js
index 10cfb02a7..41f3fbd96 100644
--- a/src/block/table-of-contents/style.js
+++ b/src/block/table-of-contents/style.js
@@ -5,14 +5,144 @@ import { isEmpty } from 'lodash'
 import {
 	Typography, MarginBottom, BlockDiv, Advanced, EffectsAnimations, Alignment, Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
+
+blockStyles.addBlockStyles( 'iconGap', [ {
+	selector: 'li',
+	styleRule: 'paddingInlineStart',
+	attrName: 'iconGap',
+	key: 'iconGap',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'listType', [ {
+	selector: 'ul',
+	styleRule: 'listStyleType',
+	attrName: 'listType',
+	key: 'listType',
+	valueCallback: value => ( value === 'none' ? 'none' : undefined ),
+}, {
+	selector: 'ol',
+	styleRule: 'listStyleType',
+	attrName: 'listType',
+	key: 'listType-ol',
+	valueCallback: value =>
+		isEmpty( value ) || value === 'none' || value === 'unordered'
+			? undefined
+			: value,
+} ] )
+
+blockStyles.addBlockStyles( 'columns', [ {
+	selector: '.stk-table-of-contents__table',
+	styleRule: 'columnCount',
+	attrName: 'columns',
+	key: 'columns',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'columnGap', [ {
+	selector: '.stk-table-of-contents__table',
+	styleRule: 'columnGap',
+	attrName: 'columnGap',
+	key: 'columnGap',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'rowGap', [ {
+	renderIn: 'save',
+	selector: 'li',
+	styleRule: 'marginBottom',
+	attrName: 'rowGap',
+	key: 'rowGapSave',
+	responsive: 'all',
+	format: '%spx',
+}, {
+	renderIn: 'edit',
+	selector: '.stk-block-table-of-contents__list-item-inner',
+	styleRule: 'marginBottom',
+	attrName: 'rowGap',
+	key: 'rowGapEdit',
+	responsive: 'all',
+	format: '%spx',
+}, {
+	selector: '.stk-table-of-contents__table ul',
+	styleRule: 'marginTop',
+	attrName: 'rowGap',
+	key: 'rowGap-top',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'indentation', [ {
+	selector: [ 'ul', 'ol' ],
+	styleRule: 'paddingLeft',
+	attrName: 'indentation',
+	key: 'indentation',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'color', [ {
+	selector: 'li a',
+	hover: 'all',
+	styleRule: 'color',
+	attrName: 'color',
+	key: 'color',
+} ] )
+
+blockStyles.addBlockStyles( 'listAlignment', [ {
+	selector: [ 'li' ],
+	styleRule: 'marginInline',
+	attrName: 'listAlignment',
+	key: 'listAlignment',
+	responsive: 'all',
+	valueCallback: value =>
+		value === 'center'
+			? 'auto'
+			: value === 'right'
+				? 'auto 0'
+				: value === 'left'
+					? '0 auto'
+					: '',
+} ] )
 
-const typographyOptions = {
+blockStyles.addBlockStyles( 'isSmoothScroll', [ {
+	selector: 'html',
+	styleRule: 'scroll-behavior',
+	attrName: 'isSmoothScroll',
+	key: 'isSmoothScroll',
+	valueCallback: value => ( value ? 'smooth' : undefined ),
+} ] )
+
+blockStyles.addBlockStyle( 'scrollTopOffset', [ {
+	selector: 'html',
+	styleRule: 'scroll-padding-top',
+	attrName: 'scrollTopOffset',
+	key: 'scrollTopOffset',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'fontSize', [ {
+	// This fixes the issue where the bullet becomes small when a global font size is set.
+	renderIn: 'edit',
+	selector: '.%s.%s li',
+	styleRule: 'fontSize',
+	attrName: 'fontSize',
+	key: 'fontSize',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+Alignment.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
 	selector: [
 		'li',
 		'ul li a',
@@ -23,204 +153,16 @@ const typographyOptions = {
 		'.%s:hover ul li a',
 		'.%s:hover ol li a',
 	],
-}
-
-const titleTypographyOptions = {
+} )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-table-of-contents__title',
 	hoverSelector: '.stk-table-of-contents__title:hover',
 	attrNameTemplate: 'title%s',
-}
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector="li"
-				styleRule="paddingInlineStart"
-				attrName="iconGap"
-				key="iconGap"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector="ul"
-				styleRule="listStyleType"
-				attrName="listType"
-				key="listType"
-				valueCallback={ value => ( value === 'none' ? 'none' : undefined ) }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector="ol"
-				styleRule="listStyleType"
-				attrName="listType"
-				key="listType-ol"
-				valueCallback={ value =>
-					isEmpty( value ) || value === 'none' || value === 'unordered'
-						? undefined
-						: value }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-table-of-contents__table"
-				styleRule="columnCount"
-				attrName="columns"
-				key="columns"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-table-of-contents__table"
-				styleRule="columnGap"
-				attrName="columnGap"
-				key="columnGap"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector="li"
-				styleRule="marginBottom"
-				attrName="rowGap"
-				key="rowGapSave"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="edit"
-				selector=".stk-block-table-of-contents__list-item-inner"
-				styleRule="marginBottom"
-				attrName="rowGap"
-				key="rowGapEdit"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-table-of-contents__table ul"
-				styleRule="marginTop"
-				attrName="rowGap"
-				key="rowGap-top"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ 'ul', 'ol' ] }
-				styleRule="paddingLeft"
-				attrName="indentation"
-				key="indentation"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector="li a"
-				hover="all"
-				styleRule="color"
-				attrName="color"
-				key="color"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ 'li' ] }
-				styleRule="marginInline"
-				attrName="listAlignment"
-				key="listAlignment"
-				responsive="all"
-				valueCallback={ value =>
-					value === 'center'
-						? 'auto'
-						: value === 'right'
-							? 'auto 0'
-							: value === 'left'
-								? '0 auto'
-								: '' }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector="html"
-				styleRule="scroll-behavior"
-				attrName="isSmoothScroll"
-				key="isSmoothScroll"
-				valueCallback={ value => ( value ? 'smooth' : undefined ) }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector="html"
-				styleRule="scroll-padding-top"
-				attrName="scrollTopOffset"
-				key="scrollTopOffset"
-				responsive="all"
-				format={ '%spx' }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				// This fixes the issue where the bullet becomes small when a global font size is set.
-				renderIn="edit"
-				selector=".%s.%s li"
-				styleRule="fontSize"
-				attrName="fontSize"
-				key="fontSize"
-				responsive="all"
-				format="%spx"
-			/>
-		</>
-	)
-}
-
-export const TableOfContentsStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<Typography.Style { ...props } { ...typographyOptions } />
-			<Typography.Style { ...props } { ...titleTypographyOptions } />
-			<MarginBottom.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Styles { ...props } />
-		</>
-	)
 } )
+MarginBottom.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
 
-TableOfContentsStyles.defaultProps = {
-	version: '',
-}
-
-TableOfContentsStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } />
-			<Typography.Style.Content { ...props } { ...titleTypographyOptions } />
-			<MarginBottom.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-TableOfContentsStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/tabs/edit.js b/src/block/tabs/edit.js
index 7e5ee1c65..f19da15d5 100644
--- a/src/block/tabs/edit.js
+++ b/src/block/tabs/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 import { withActiveTab } from './with-active-tab'
 
 /**
@@ -15,13 +15,12 @@ import {
 	AdvancedSelectControl,
 	AdvancedToolbarControl,
 	ControlSeparator,
-	GroupPlaceholder,
 	InspectorLayoutControls,
 	InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	MarginBottom,
 	getAlignmentClasses,
 	Advanced,
@@ -52,6 +51,7 @@ import {
 	dispatch, select, useSelect,
 } from '@wordpress/data'
 import { __, sprintf } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const TEMPLATE = [
 	[ 'stackable/tab-labels', {
@@ -88,8 +88,6 @@ const Edit = props => {
 		clientId,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const separatorClass = getSeparatorClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 
@@ -162,108 +160,27 @@ const Edit = props => {
 		},
 	], getContentAlignmentClasses( props.attributes ) )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-				<InspectorLayoutControls>
-					<ColumnsControl
-						label={ __( 'Tabs', i18n ) }
-						rootClientId={ tabContentBlock?.clientId }
-						onChangeCallback={ ( changeColumnsFunc, numColumns ) => {
-							props.setTemplateLock( false )
-							setTimeout( () => {
-								changeColumnsFunc( numColumns )
-								props.setTemplateLock( true )
-							}, 1 )
-
-							if ( hasMultiSelectedBlocks ) {
-								multiInnerBlocks.forEach( _innerBlocks => {
-									if ( _innerBlocks?.length ) {
-										const _tabLabelsBlock = _innerBlocks[ 0 ].name === 'stackable/tab-labels' ? _innerBlocks[ 0 ] : _innerBlocks[ 1 ]
-
-										updateColumns( numColumns, _tabLabelsBlock.clientId )
-									}
-								} )
-							} else {
-								updateColumns( numColumns, tabLabelsBlock.clientId )
-							}
-						} }
-						newColumnAttributes={
-							{
-								customAttributes: [ [ 'role', 'tabpanel' ] ],
-							}
-						}
-					/>
-					<AdvancedSelectControl
-						label={ __( 'Initial Tab Open', i18n ) }
-						attribute="initialTabOpen"
-						options={ tabContentBlock?.innerBlocks?.map( ( block, index ) => {
-							return {
-								value: index === 0 ? '' : index + 1,
-								label: index + 1,
-							}
-						} ) }
-					/>
-					<AdvancedToggleControl
-						label={ __( 'Equal tab height', i18n ) }
-						attribute="equalTabHeight"
-						defaultValue={ false }
-					/>
-					<ControlSeparator />
-					<AdvancedToolbarControl
-						label={ __( 'Tab Orientation', i18n ) }
-						controls={ [
-							{
-								value: '',
-								title: __( 'Horizontal', i18n ),
-							},
-							{
-								value: 'vertical',
-								title: __( 'Vertical', i18n ),
-							},
-						] }
-						attribute="tabOrientation"
-					/>
-					<AdvancedRangeControl
-						label={ __( 'Tab Panel Offset', i18n ) }
-						min={ 0 }
-						sliderMax={ 100 }
-						placeholder="16"
-						attribute="tabPanelOffset"
-						responsive="all"
-					/>
-					<AdvancedToolbarControl
-						label={ __( 'Tab Panel Effect', i18n ) }
-						controls={ [
-							{
-								value: '',
-								title: __( 'Fade', i18n ),
-							},
-							{
-								value: 'immediate',
-								title: __( 'Immediate', i18n ),
-							},
-						] }
-						attribute="tabPanelEffect"
-					/>
-				</InspectorLayoutControls>
-
-				{ /* <Columns.InspectorControls /> */ }
-				<InspectorLayoutControls>
-					<ControlSeparator />
-				</InspectorLayoutControls>
-				<ContentAlign.InspectorControls />
-				{ /* <Alignment.InspectorControls hasColumnJustify={ true } hasRowAlignment={ true } /> */ }
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-tabs" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
+			<InspectorControls
+				tabContentBlock={ tabContentBlock }
+				hasMultiSelectedBlocks={ hasMultiSelectedBlocks }
+				multiInnerBlocks={ multiInnerBlocks }
+				tabLabelsBlock={ tabLabelsBlock }
+				updateColumns={ updateColumns }
+				setTemplateLock={ props.setTemplateLock }
+			/>
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -271,14 +188,9 @@ const Edit = props => {
 				attributes={ props.attributes }
 				className={ blockClassNames }
 			>
-				<BlockStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-tabs" />
 
-				{ ! hasInnerBlocks && <GroupPlaceholder /> }
 				<Separator>
 					<div
 						className={ contentClassNames }
@@ -299,6 +211,111 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+			<InspectorLayoutControls>
+				<ColumnsControl
+					label={ __( 'Tabs', i18n ) }
+					rootClientId={ props.tabContentBlock?.clientId }
+					onChangeCallback={ ( changeColumnsFunc, numColumns ) => {
+						props.setTemplateLock( false )
+						setTimeout( () => {
+							changeColumnsFunc( numColumns )
+							props.setTemplateLock( true )
+						}, 1 )
+
+						if ( props.hasMultiSelectedBlocks ) {
+							props.multiInnerBlocks.forEach( _innerBlocks => {
+								if ( _innerBlocks?.length ) {
+									const _tabLabelsBlock = _innerBlocks[ 0 ].name === 'stackable/tab-labels' ? _innerBlocks[ 0 ] : _innerBlocks[ 1 ]
+
+									props.updateColumns( numColumns, _tabLabelsBlock.clientId )
+								}
+							} )
+						} else {
+							props.updateColumns( numColumns, props.tabLabelsBlock.clientId )
+						}
+					} }
+					newColumnAttributes={
+						{
+							customAttributes: [ [ 'role', 'tabpanel' ] ],
+						}
+					}
+				/>
+				<AdvancedSelectControl
+					label={ __( 'Initial Tab Open', i18n ) }
+					attribute="initialTabOpen"
+					options={ props.tabContentBlock?.innerBlocks?.map( ( block, index ) => {
+						return {
+							value: index === 0 ? '' : index + 1,
+							label: index + 1,
+						}
+					} ) }
+				/>
+				<AdvancedToggleControl
+					label={ __( 'Equal tab height', i18n ) }
+					attribute="equalTabHeight"
+					defaultValue={ false }
+				/>
+				<ControlSeparator />
+				<AdvancedToolbarControl
+					label={ __( 'Tab Orientation', i18n ) }
+					controls={ [
+						{
+							value: '',
+							title: __( 'Horizontal', i18n ),
+						},
+						{
+							value: 'vertical',
+							title: __( 'Vertical', i18n ),
+						},
+					] }
+					attribute="tabOrientation"
+				/>
+				<AdvancedRangeControl
+					label={ __( 'Tab Panel Offset', i18n ) }
+					min={ 0 }
+					sliderMax={ 100 }
+					placeholder="16"
+					attribute="tabPanelOffset"
+					responsive="all"
+				/>
+				<AdvancedToolbarControl
+					label={ __( 'Tab Panel Effect', i18n ) }
+					controls={ [
+						{
+							value: '',
+							title: __( 'Fade', i18n ),
+						},
+						{
+							value: 'immediate',
+							title: __( 'Immediate', i18n ),
+						},
+					] }
+					attribute="tabPanelEffect"
+				/>
+			</InspectorLayoutControls>
+
+			{ /* <Columns.InspectorControls /> */ }
+			<InspectorLayoutControls>
+				<ControlSeparator />
+			</InspectorLayoutControls>
+			<ContentAlign.InspectorControls />
+			{ /* <Alignment.InspectorControls hasColumnJustify={ true } hasRowAlignment={ true } /> */ }
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-tabs" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/tabs/save.js b/src/block/tabs/save.js
index cf1b1b52b..5d267e1a3 100644
--- a/src/block/tabs/save.js
+++ b/src/block/tabs/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -67,7 +62,7 @@ export const Save = props => {
 			version={ props.version }
 			data-initial-tab={ props.attributes.initialTabOpen || '1' }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Separator.Content attributes={ attributes }>
 				<div className={ contentClassNames }>
diff --git a/src/block/tabs/style.js b/src/block/tabs/style.js
index 55bccfd16..425d3d63e 100644
--- a/src/block/tabs/style.js
+++ b/src/block/tabs/style.js
@@ -3,115 +3,45 @@
  */
 import {
 	Advanced,
-	// Alignment,
 	BlockDiv,
 	EffectsAnimations,
 	MarginBottom,
 	Separator,
 	Transform,
-	// Columns,
 } from '~stackable/block-components'
-// import { useBlockAttributesContext } from '~stackable/hooks'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-// import { applyFilters } from '@wordpress/hooks'
-
-// const alignmentOptions = {
-// 	editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`,
-// }
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--tabs-gap"
-				attrName="tabPanelOffset"
-				key="tabPanelOffset"
-				format="%spx"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".%s .stk-block-tab-content .stk-block-content .stk-block-column[hidden]"
-				renderIn="save"
-				styleRule="display"
-				attrName="equalTabHeight"
-				key="equalTabHeight"
-				valueCallback={ value => {
-					return value ? undefined : 'none'
-				} }
-				responsive="all"
-			/>
-		</>
-	)
-}
-
-const BlockStyles = memo( props => {
-	// const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet )
-	// const numColumns = ( columnArrangement || '' ).split( ',' ).length
-
-	// const ColumnOrderStyle = applyFilters( 'stackable.block-component.columns.column-order-style', null )
-
-	return (
-		<>
-			{ /* <Alignment.Style { ...props } { ...alignmentOptions } /> */ }
-			<BlockDiv.Style { ...props } />
-			<MarginBottom.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Separator.Style { ...props } />
-			{ /* <Columns.Style { ...props } /> */ }
-			<Styles { ...props } />
-			{ /* { ColumnOrderStyle && <ColumnOrderStyle { ...props } numColumns={ numColumns } /> } */ }
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
-
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	// const numColumns = ( props.attributes.columnArrangementMobile || props.attributes.columnArrangementTablet || '' ).split( ',' ).length
-	// const ColumnOrderStyle = applyFilters( 'stackable.block-component.columns.column-order-style', null )
-
-	return (
-		<BlockCssCompiler>
-			{ /* <Alignment.Style.Content { ...props } { ...alignmentOptions } /> */ }
-			<BlockDiv.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Separator.Style.Content { ...props } />
-			{ /* <Columns.Style.Content { ...props } /> */ }
-			<Styles { ...props } />
-			{ /* { ColumnOrderStyle && <ColumnOrderStyle { ...props } numColumns={ numColumns } /> } */ }
-		</BlockCssCompiler>
-	)
-}
-
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
-export default BlockStyles
+blockStyles.addBlockStyles( 'tabPanelOffset', [ {
+	selector: '',
+	styleRule: '--tabs-gap',
+	attrName: 'tabPanelOffset',
+	key: 'tabPanelOffset',
+	format: '%spx',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'equalTabHeight', [ {
+	selector: '.%s .stk-block-tab-content .stk-block-content .stk-block-column[hidden]',
+	renderIn: 'save',
+	styleRule: 'display',
+	attrName: 'equalTabHeight',
+	key: 'equalTabHeight',
+	valueCallback: value => {
+		return value ? undefined : 'none'
+	},
+	responsive: 'all',
+} ] )
+
+BlockDiv.addStyles( blockStyles )
+MarginBottom.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+Separator.addStyles( blockStyles )
+
+export default blockStyles
diff --git a/src/block/team-member/edit.js b/src/block/team-member/edit.js
index 7618bdee2..1cdc2954d 100644
--- a/src/block/team-member/edit.js
+++ b/src/block/team-member/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { TeamMemberStyles } from './style'
+import blockStyles from './style'
 import variations from './variations'
 
 /**
@@ -14,10 +14,10 @@ import {
 	InspectorBottomTip,
 	InspectorStyleControls,
 	InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	ContainerDiv,
 	ConditionalDisplay,
 	Alignment,
@@ -46,18 +46,16 @@ import {
 import { compose } from '@wordpress/compose'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const TEMPLATE = variations[ 0 ].innerBlocks
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const { hasInnerBlocks, innerBlocks } = useBlockContext()
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 
@@ -77,28 +75,20 @@ const Edit = props => {
 	const lastBlockName = last( innerBlocks )?.name
 	const renderAppender = hasInnerBlocks ? ( [ 'stackable/text', 'core/paragraph' ].includes( lastBlockName ) ? () => <></> : InnerBlocks.DefaultBlockAppender ) : InnerBlocks.ButtonBlockAppender
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<ContentAlign.InspectorControls />
-				<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
-				<BlockDiv.InspectorControls />
-				<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
-				<BlockLink.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-team-member" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
+			<InspectorControls />
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -107,11 +97,7 @@ const Edit = props => {
 				className={ blockClassNames }
 				enableVariationPicker={ true }
 			>
-				<TeamMemberStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-team-member" />
 
 				<ContainerDiv className={ contentClassNames }>
@@ -127,6 +113,31 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<ContentAlign.InspectorControls />
+			<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
+			<BlockDiv.InspectorControls />
+			<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
+			<BlockLink.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-team-member" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/team-member/save.js b/src/block/team-member/save.js
index 842ea502e..94e0a233a 100644
--- a/src/block/team-member/save.js
+++ b/src/block/team-member/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { TeamMemberStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -62,7 +57,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<TeamMemberStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<ContainerDiv.Content
 				className={ contentClassNames }
diff --git a/src/block/team-member/style.js b/src/block/team-member/style.js
index ea02429d2..fdbe198e9 100644
--- a/src/block/team-member/style.js
+++ b/src/block/team-member/style.js
@@ -10,55 +10,22 @@ import {
 	MarginBottom,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const containerDivOptions = {
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles, {
 	sizeSelector: '.stk-block-team-member__content',
 	sizeHorizontalAlignRule: 'margin',
-}
-
-export const TeamMemberStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ContainerDiv.Style { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style { ...props } />
-		</>
-	)
 } )
+MarginBottom.addStyles( blockStyles )
 
-TeamMemberStyles.defaultProps = {
-	version: '',
-}
-
-TeamMemberStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-TeamMemberStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/testimonial/edit.js b/src/block/testimonial/edit.js
index f8724dfe7..a39e8d11f 100644
--- a/src/block/testimonial/edit.js
+++ b/src/block/testimonial/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { ContainerStyles } from './style'
+import blockStyles from './style'
 import variations from './variations'
 
 /**
@@ -14,10 +14,10 @@ import {
 	InspectorBottomTip,
 	InspectorStyleControls,
 	InspectorTabs,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	ContainerDiv,
 	ConditionalDisplay,
 	Alignment,
@@ -44,18 +44,16 @@ import {
 import { compose } from '@wordpress/compose'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
+import { memo } from '@wordpress/element'
 
 const TEMPLATE = variations[ 0 ].innerBlocks
 
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const { hasInnerBlocks, innerBlocks } = useBlockContext()
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 
@@ -75,28 +73,20 @@ const Edit = props => {
 	const lastBlockName = last( innerBlocks )?.name
 	const renderAppender = hasInnerBlocks ? ( [ 'stackable/text', 'core/paragraph' ].includes( lastBlockName ) ? () => <></> : InnerBlocks.DefaultBlockAppender ) : InnerBlocks.ButtonBlockAppender
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<ContentAlign.InspectorControls />
-				<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
-				<BlockDiv.InspectorControls />
-				<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
-				<BlockLink.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-testimonial" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
+			<InspectorControls />
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -105,11 +95,7 @@ const Edit = props => {
 				className={ blockClassNames }
 				enableVariationPicker={ true }
 			>
-				<ContainerStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-testimonial" />
 
 				<ContainerDiv className={ contentClassNames }>
@@ -125,6 +111,31 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( () => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<ContentAlign.InspectorControls />
+			<Alignment.InspectorControls hasContainerSize={ true } hasBlockAlignment={ true } />
+			<BlockDiv.InspectorControls />
+			<ContainerDiv.InspectorControls sizeSelector=".stk-block-content" />
+			<BlockLink.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-testimonial" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/testimonial/save.js b/src/block/testimonial/save.js
index 7d968a336..69a7ec082 100644
--- a/src/block/testimonial/save.js
+++ b/src/block/testimonial/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { ContainerStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -62,7 +57,7 @@ export const Save = props => {
 			version={ props.version }
 			data-v={ props.attributes.version }
 		>
-			<ContainerStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<ContainerDiv.Content
 				className={ contentClassNames }
diff --git a/src/block/testimonial/style.js b/src/block/testimonial/style.js
index 81ff89790..ec9ac3428 100644
--- a/src/block/testimonial/style.js
+++ b/src/block/testimonial/style.js
@@ -10,55 +10,22 @@ import {
 	MarginBottom,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const containerDivOptions = {
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+ContainerDiv.addStyles( blockStyles, {
 	sizeSelector: '.stk-block-testimonial__content',
 	sizeHorizontalAlignRule: 'margin',
-}
-
-export const ContainerStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<ContainerDiv.Style { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style { ...props } />
-		</>
-	)
 } )
+MarginBottom.addStyles( blockStyles )
 
-ContainerStyles.defaultProps = {
-	version: '',
-}
-
-ContainerStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<ContainerDiv.Style.Content { ...props } { ...containerDivOptions } />
-			<MarginBottom.Style.Content { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-ContainerStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+export default blockStyles
diff --git a/src/block/text/edit.js b/src/block/text/edit.js
index 224096f51..43c842635 100644
--- a/src/block/text/edit.js
+++ b/src/block/text/edit.js
@@ -1,14 +1,13 @@
 /**
  * Internal dependencies
  */
-import { TextStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
  */
 import {
 	BlockDiv,
-	useGeneratedCss,
 	CustomCSS,
 	Responsive,
 	Advanced,
@@ -28,8 +27,8 @@ import {
 	InspectorTabs,
 	AdvancedRangeControl,
 	InspectorLayoutControls,
+	useBlockCssGenerator,
 } from '~stackable/components'
-import { useBlockContext } from '~stackable/hooks'
 import {
 	withBlockAttributeContext,
 	withBlockWrapperIsHovered,
@@ -43,6 +42,8 @@ import { createBlockCompleter } from '~stackable/util'
 import { sprintf, __ } from '@wordpress/i18n'
 import { addFilter, applyFilters } from '@wordpress/hooks'
 import { compose } from '@wordpress/compose'
+import { useSelect } from '@wordpress/data'
+import { memo } from '@wordpress/element'
 
 /**
  * Add `autocompleters` support for stackable/text
@@ -65,13 +66,29 @@ const Edit = props => {
 		clientId,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const textClasses = getTypographyClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
+
 	const {
 		parentBlock, isFirstBlock, isLastBlock,
-	} = useBlockContext()
+	} = useSelect(
+		select => {
+			const {
+				getBlockOrder, getBlockRootClientId, getBlock,
+			} =
+				select( 'core/block-editor' )
+
+			const rootClientId = getBlockRootClientId( clientId )
+			const parentInnerBlocks = getBlockOrder( rootClientId )
+
+			return {
+				parentBlock: getBlock( rootClientId ),
+				isFirstBlock: parentInnerBlocks.indexOf( clientId ) === 0,
+				isLastBlock: parentInnerBlocks.indexOf( clientId ) === parentInnerBlocks.length - 1,
+			}
+		},
+		[ clientId ]
+	)
 
 	const enableColumns = applyFilters( 'stackable.text.edit.enable-column', true, parentBlock )
 
@@ -90,62 +107,25 @@ const Edit = props => {
 		parentBlock, isFirstBlock, isLastBlock,
 	} )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<Typography.InspectorControls
-					{ ...props }
-					hasTextTag={ false }
-					isMultiline={ true }
-					initialOpen={ true }
-					hasTextShadow={ true }
-				/>
-				<Alignment.InspectorControls
-					labelContentAlign={ sprintf( __( '%s Alignment', i18n ), __( 'Text', i18n ) ) }
-					hasContentJustify={ true }
-				/>
-				{ enableColumns && (
-					<InspectorLayoutControls>
-						<AdvancedRangeControl
-							label={ __( 'Columns', i18n ) }
-							allowReset={ true }
-							attribute="columns"
-							min="1"
-							sliderMax="3"
-							step="1"
-							placeholder="1"
-							responsive="all"
-						/>
-
-						<AdvancedRangeControl
-							label={ __( 'Column Gap', i18n ) }
-							allowReset={ true }
-							attribute="columnGap"
-							min="0"
-							sliderMax="50"
-							responsive="all"
-						/>
-					</InspectorLayoutControls>
-				) }
-
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-text" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
-
-			<TextStyles
-				version={ VERSION }
+			<InspectorControls
+				enableColumns={ enableColumns }
 				blockState={ props.blockState }
-				clientId={ clientId }
 			/>
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-text" />
 
 			<BlockDiv
@@ -168,6 +148,61 @@ const Edit = props => {
 	)
 }
 
+// Inspector controls for the block, it's important that we only pass only the
+// props used by controls to prevent rerenders of all the inspector controls.
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<Typography.InspectorControls
+				{ ...props }
+				hasTextTag={ false }
+				isMultiline={ true }
+				initialOpen={ true }
+				hasTextShadow={ true }
+			/>
+			<Alignment.InspectorControls
+				labelContentAlign={ sprintf( __( '%s Alignment', i18n ), __( 'Text', i18n ) ) }
+				hasContentJustify={ true }
+			/>
+			{ props.enableColumns && (
+				<InspectorLayoutControls>
+					<AdvancedRangeControl
+						label={ __( 'Columns', i18n ) }
+						allowReset={ true }
+						attribute="columns"
+						min="1"
+						sliderMax="3"
+						step="1"
+						placeholder="1"
+						responsive="all"
+					/>
+
+					<AdvancedRangeControl
+						label={ __( 'Column Gap', i18n ) }
+						allowReset={ true }
+						attribute="columnGap"
+						min="0"
+						sliderMax="50"
+						responsive="all"
+					/>
+				</InspectorLayoutControls>
+			) }
+
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-text" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/text/save.js b/src/block/text/save.js
index 4e6795a60..52e6e3678 100644
--- a/src/block/text/save.js
+++ b/src/block/text/save.js
@@ -1,8 +1,6 @@
 /**
  * Internal dependencies
  */
-import { TextStyles } from './style'
-
 import {
 	BlockDiv,
 	CustomCSS,
@@ -48,7 +46,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<TextStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Typography.Content
 				attributes={ attributes }
diff --git a/src/block/text/style.js b/src/block/text/style.js
index 3984e1e36..f08765a90 100644
--- a/src/block/text/style.js
+++ b/src/block/text/style.js
@@ -6,92 +6,41 @@ import {
 	Advanced,
 	Typography,
 	Alignment,
-	MarginBottom,
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
 
-const typographyOptions = {
+blockStyles.addBlockStyles( 'columns', [ {
+	selector: '',
+	styleRule: 'columnCount',
+	attrName: 'columns',
+	key: 'columns',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'columnGap', [ {
+	selector: '',
+	styleRule: 'columnGap',
+	attrName: 'columnGap',
+	key: 'columnGap',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-block-text__text',
 	hoverSelector: '.stk-block-text__text:hover',
-}
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="columnCount"
-				attrName="columns"
-				key="columns"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="columnGap"
-				attrName="columnGap"
-				key="columnGap"
-				responsive="all"
-				format="%spx"
-			/>
-		</>
-	)
-}
-
-export const TextStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Typography.Style { ...props } { ...typographyOptions } />
-			<Styles { ...props } />
-			<EffectsAnimations.Style { ...props } />
-		</>
-	)
 } )
+EffectsAnimations.addStyles( blockStyles )
 
-TextStyles.defaultProps = {
-	version: '',
-}
-
-TextStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-TextStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
+export default blockStyles
diff --git a/src/block/timeline/edit.js b/src/block/timeline/edit.js
index 31156bfc6..8f67c8661 100644
--- a/src/block/timeline/edit.js
+++ b/src/block/timeline/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import BlockStyles from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -17,10 +17,10 @@ import {
 	InspectorStyleControls,
 	InspectorTabs,
 	PanelAdvancedSettings,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	MarginBottom,
 	getRowClasses,
 	getTypographyClasses,
@@ -54,7 +54,7 @@ import { InnerBlocks } from '@wordpress/block-editor'
 import { addFilter } from '@wordpress/hooks'
 import { dispatch } from '@wordpress/data'
 import {
-	useEffect, useRef, useState,
+	useEffect, useRef, useState, memo,
 } from '@wordpress/element'
 
 const ALLOWED_INNER_BLOCKS = [ 'stackable/column' ]
@@ -92,8 +92,6 @@ const Edit = props => {
 		setAttributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const rowClass = getRowClasses( props.attributes )
 	const separatorClass = getSeparatorClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
@@ -326,124 +324,26 @@ const Edit = props => {
 		)
 	}, [ nextBlock, previousBlock ] )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
-			<>
-				<InspectorTabs />
-
-				<InspectorLayoutControls>
-					<AdvancedToolbarControl
-						label={ __( 'Content Position', i18n ) }
-						attribute="timelinePosition"
-						controls={ [
-							{ value: '', title: __( 'Left', i18n ) },
-							{ value: 'right', title: __( 'Right', i18n ) },
-						] }
-					/>
-					<AdvancedRangeControl
-						label={ sprintf( __( '%s Gap', i18n ), __( 'Timeline', i18n ) ) }
-						attribute="timelineGap"
-						sliderMax={ 100 }
-						min={ 0 }
-						responsive="all"
-						placeholder="16"
-					/>
-				</InspectorLayoutControls>
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'Timeline', i18n ) }
-						initialOpen={ true }
-						id="timeline"
-					>
-						<AdvancedRangeControl
-							label={ __( 'Accent Anchor Position', i18n ) }
-							attribute="timelineAnchor"
-							sliderMax={ 100 }
-							min={ 0 }
-							placeholder="50"
-							responsive="all"
-							help={ __( 'Succeeding timeline blocks will also use this value.', i18n ) }
-						/>
-
-						<ControlSeparator />
-
-						<AdvancedRangeControl
-							label={ sprintf( __( '%s Size', i18n ), __( 'Dot', i18n ) ) }
-							attribute="timelineDotSize"
-							sliderMax={ 100 }
-							sliderMin={ props.attributes.timelineThickness || 3 }
-							min={ 1 }
-							placeholder="11"
-						/>
-						<AdvancedRangeControl
-							label={ sprintf( __( '%s Border Radius', i18n ), __( 'Dot', i18n ) ) }
-							attribute="timelineDotBorderRadius"
-							sliderMax={ ( props.attributes.timelineDotSize || 11 ) / 2 }
-							min={ 0 }
-							placeholder=""
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Line Thickness', i18n ) }
-							attribute="timelineThickness"
-							sliderMax={ 20 }
-							min={ 1 }
-							placeholder="3"
-						/>
-						<AdvancedRangeControl
-							label={ __( 'Horizontal Offset', i18n ) }
-							attribute="timelineOffset"
-							sliderMax={ 100 }
-							min={ 0 }
-							placeholder="40"
-						/>
-
-						<ControlSeparator />
+			<InspectorControls
+				blockState={ props.blockState }
+				timelineThickness={ props.attributes.timelineThickness }
+				timelineDotSize={ props.attributes.timelineDotSize }
+				timelineAccentColorType={ props.attributes.timelineAccentColorType }
 
-						<AdvancedToolbarControl
-							controls={ COLOR_TYPE_CONTROLS }
-							attribute="timelineAccentColorType"
-							isSmall={ true }
-						/>
-						<ColorPaletteControl
-							label={
-								props.attributes.timelineAccentColorType === 'gradient'
-									? sprintf( _x( '%s #%d', 'option title', i18n ), __( 'Timeline Accent Color', i18n ), 1 )
-									: __( 'Timeline Accent Color', i18n )
-							}
-							attribute="timelineAccentColor"
-						/>
-						{ props.attributes.timelineAccentColorType === 'gradient' &&
-							<ColorPaletteControl
-								label={ sprintf( _x( '%s #%d', 'option title', i18n ), __( 'Timeline Accent Color', i18n ), 2 ) }
-								attribute="timelineAccentColor2"
-							/>
-						}
-						<ColorPaletteControl
-							label={ __( 'Timeline Background Color', i18n ) }
-							attribute="timelineBackgroundColor"
-						/>
-					</PanelAdvancedSettings>
-				</InspectorStyleControls>
-
-				<Typography.InspectorControls
-					{ ...props }
-					hasTextTag={ false }
-					isMultiline={ true }
-					initialOpen={ false }
-					hasTextShadow={ true }
-				/>
-				<InspectorLayoutControls>
-					<ControlSeparator />
-				</InspectorLayoutControls>
-				<ContentAlign.InspectorControls />
-				<BlockDiv.InspectorControls hasContentVerticalAlign={ false } hasMinHeight={ false } />
-				<Advanced.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-timeline" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-			</>
+			/>
 
 			<BlockDiv
 				blockHoverClass={ props.blockHoverClass }
@@ -451,11 +351,7 @@ const Edit = props => {
 				attributes={ props.attributes }
 				className={ blockClassNames }
 			>
-				<BlockStyles
-					version={ VERSION }
-					blockState={ props.blockState }
-					clientId={ clientId }
-				/>
+				{ blockCss && <style key="block-css">{ blockCss }</style> }
 				<CustomCSS mainBlockClass="stk-block-timeline" />
 
 				<div
@@ -556,6 +452,127 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs />
+
+			<InspectorLayoutControls>
+				<AdvancedToolbarControl
+					label={ __( 'Content Position', i18n ) }
+					attribute="timelinePosition"
+					controls={ [
+						{ value: '', title: __( 'Left', i18n ) },
+						{ value: 'right', title: __( 'Right', i18n ) },
+					] }
+				/>
+				<AdvancedRangeControl
+					label={ sprintf( __( '%s Gap', i18n ), __( 'Timeline', i18n ) ) }
+					attribute="timelineGap"
+					sliderMax={ 100 }
+					min={ 0 }
+					responsive="all"
+					placeholder="16"
+				/>
+			</InspectorLayoutControls>
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'Timeline', i18n ) }
+					initialOpen={ true }
+					id="timeline"
+				>
+					<AdvancedRangeControl
+						label={ __( 'Accent Anchor Position', i18n ) }
+						attribute="timelineAnchor"
+						sliderMax={ 100 }
+						min={ 0 }
+						placeholder="50"
+						responsive="all"
+						help={ __( 'Succeeding timeline blocks will also use this value.', i18n ) }
+					/>
+
+					<ControlSeparator />
+
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Size', i18n ), __( 'Dot', i18n ) ) }
+						attribute="timelineDotSize"
+						sliderMax={ 100 }
+						sliderMin={ props.timelineThickness || 3 }
+						min={ 1 }
+						placeholder="11"
+					/>
+					<AdvancedRangeControl
+						label={ sprintf( __( '%s Border Radius', i18n ), __( 'Dot', i18n ) ) }
+						attribute="timelineDotBorderRadius"
+						sliderMax={ ( props.timelineDotSize || 11 ) / 2 }
+						min={ 0 }
+						placeholder=""
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Line Thickness', i18n ) }
+						attribute="timelineThickness"
+						sliderMax={ 20 }
+						min={ 1 }
+						placeholder="3"
+					/>
+					<AdvancedRangeControl
+						label={ __( 'Horizontal Offset', i18n ) }
+						attribute="timelineOffset"
+						sliderMax={ 100 }
+						min={ 0 }
+						placeholder="40"
+					/>
+
+					<ControlSeparator />
+
+					<AdvancedToolbarControl
+						controls={ COLOR_TYPE_CONTROLS }
+						attribute="timelineAccentColorType"
+						isSmall={ true }
+					/>
+					<ColorPaletteControl
+						label={
+							props.timelineAccentColorType === 'gradient'
+								? sprintf( _x( '%s #%d', 'option title', i18n ), __( 'Timeline Accent Color', i18n ), 1 )
+								: __( 'Timeline Accent Color', i18n )
+						}
+						attribute="timelineAccentColor"
+					/>
+					{ props.timelineAccentColorType === 'gradient' &&
+						<ColorPaletteControl
+							label={ sprintf( _x( '%s #%d', 'option title', i18n ), __( 'Timeline Accent Color', i18n ), 2 ) }
+							attribute="timelineAccentColor2"
+						/>
+					}
+					<ColorPaletteControl
+						label={ __( 'Timeline Background Color', i18n ) }
+						attribute="timelineBackgroundColor"
+					/>
+				</PanelAdvancedSettings>
+			</InspectorStyleControls>
+
+			<Typography.InspectorControls
+				{ ...props }
+				hasTextTag={ false }
+				isMultiline={ true }
+				initialOpen={ false }
+				hasTextShadow={ true }
+			/>
+			<InspectorLayoutControls>
+				<ControlSeparator />
+			</InspectorLayoutControls>
+			<ContentAlign.InspectorControls />
+			<BlockDiv.InspectorControls hasContentVerticalAlign={ false } hasMinHeight={ false } />
+			<Advanced.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-timeline" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/timeline/save.js b/src/block/timeline/save.js
index 3ec1ef077..8b70cddcc 100644
--- a/src/block/timeline/save.js
+++ b/src/block/timeline/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import BlockStyles from './style'
-
 /**
  * External dependencies
  */
@@ -73,7 +68,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<BlockStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			{ /* <Separator.Content attributes={ attributes }> */ }
 			<div className={ contentClassNames }>
diff --git a/src/block/timeline/style.js b/src/block/timeline/style.js
index 5861246f4..8aac3acc2 100644
--- a/src/block/timeline/style.js
+++ b/src/block/timeline/style.js
@@ -9,218 +9,161 @@ import {
 	Transform,
 	Typography,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
+
+blockStyles.addBlockStyles( 'timelineAnchor', [ {
+	selector: [ '', '~ .stk-block-timeline' ], // Also set the succeeding ones.
+	styleRule: '--line-accent-bg-location',
+	attrName: 'timelineAnchor',
+	key: 'timelineAnchor',
+	format: '%s%',
+} ] )
+
+blockStyles.addBlockStyles( 'timelineGap', [ {
+	selector: '',
+	styleRule: '--gap',
+	attrName: 'timelineGap',
+	key: 'timelineGap',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'timelineDotBorderRadius', [ {
+	selector: '',
+	styleRule: '--line-dot-border-radius',
+	attrName: 'timelineDotBorderRadius',
+	key: 'timelineDotBorderRadius',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'timelineDotSize', [ {
+	selector: '',
+	styleRule: '--line-dot-size',
+	attrName: 'timelineDotSize',
+	key: 'timelineDotSize',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'timelineThickness', [ {
+	selector: '',
+	styleRule: '--line-bg-width',
+	attrName: 'timelineThickness',
+	key: 'timelineThickness',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'timelineOffset', [ {
+	selector: '',
+	styleRule: '--content-line',
+	attrName: 'timelineOffset',
+	key: 'timelineOffset',
+	format: '%spx',
+} ] )
+
+blockStyles.addBlockStyles( 'timelineAccentColor', [ {
+	selector: '',
+	styleRule: '--line-accent-bg-color',
+	attrName: 'timelineAccentColor',
+	key: 'timelineAccentColor',
+} ] )
+
+blockStyles.addBlockStyles( 'timelineAccentColor2', [ {
+	selector: '',
+	styleRule: '--line-accent-bg-color-2',
+	attrName: 'timelineAccentColor2',
+	key: 'timelineAccentColor2',
+	enabledCallback: getAttribute => getAttribute( 'timelineAccentColorType' ) === 'gradient',
+	dependencies: [ 'timelineAccentColorType' ],
+} ] )
+
+blockStyles.addBlockStyles( 'timelineBackgroundColor', [ {
+	selector: '',
+	styleRule: '--line-bg-color',
+	attrName: 'timelineBackgroundColor',
+	key: 'timelineBackgroundColor',
+} ] )
+
+blockStyles.addBlockStyles( 'blockPadding', [ {
+	renderIn: 'save',
+	selector: '.stk-inner-blocks:after',
+	styleRule: 'top',
+	attrName: 'blockPadding',
+	key: 'timeline-blockPadding-top',
+	responsive: 'all',
+	valuePreCallback: ( value, getAttribute, device ) => {
+		const getInherited = true
+		const padding = getAttribute( 'blockPadding', device, 'normal', getInherited )
+		const top = padding && padding?.top !== '' ? padding?.top : ( device === 'mobile' ? 0 : 16 )
+		if ( device === 'mobile' ) {
+			return `${ top + 16 }px`
+		}
+
+		if ( padding?.top === padding?.bottom ) {
+			return ''
+		}
+
+		const bottom = padding && padding?.bottom !== '' ? padding?.bottom : 16
+		return `calc(${ top }px + (100% - ${ top }px - ${ bottom }px)/2)`
+	},
+	unitCallback: () => '',
+	dependencies: [ 'blockPadding' ],
+}, {
+	renderIn: 'save',
+	selector: '.stk-inner-blocks:after',
+	styleRule: 'bottom',
+	attrName: 'blockPadding',
+	key: 'timeline-blockPadding-bottom',
+	enabledCallback: getAttribute => getAttribute( 'timelineIsLast' ) === true,
+	responsive: 'all',
+	valuePreCallback: ( value, getAttribute, device ) => {
+		const getInherited = true
+		const padding = getAttribute( 'blockPadding', device, 'normal', getInherited )
+		const top = padding && padding?.top !== '' ? padding?.top : ( device === 'mobile' ? 0 : 16 )
+		const bottom = padding && padding?.bottom !== '' ? padding?.bottom : ( device === 'mobile' ? 0 : 16 )
+		if ( device === 'mobile' ) {
+			return `calc(${ bottom }px + (100% - ${ top + bottom }px) - 16px)`
+		}
+
+		if ( top === bottom ) {
+			return ``
+		}
+
+		return `calc(${ bottom }px + (100% - ${ top }px - ${ bottom }px)/2)`
+	},
+	unitCallback: () => '',
+	dependencies: [ 'timelineIsLast', 'blockPadding' ],
+}, {
+	renderIn: 'save',
+	selector: '.stk-block-timeline__middle',
+	styleRule: 'marginTop',
+	attrName: 'blockPadding',
+	key: 'timeline-blockPadding-marginTop',
+	responsive: 'all',
+	valuePreCallback: ( value, getAttribute, device ) => {
+		const getInherited = true
+		const padding = getAttribute( 'blockPadding', device, 'normal', getInherited )
+		if ( device === 'mobile' ) {
+			return padding ? `${ padding?.top }px` : ''
+		}
+		return ''
+	},
+	unitCallback: () => '',
+	dependencies: [ 'blockPadding' ],
+} ] )
 
-const typographyOptions = {
+BlockDiv.addStyles( blockStyles )
+MarginBottom.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+Typography.addStyles( blockStyles, {
 	selector: '.stk-block-timeline__date',
 	hoverSelector: '.stk-block-timeline__date:hover',
-}
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-	const {
-		dependencies = [],
-	} = props
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ '', '~ .stk-block-timeline' ] } // Also set the succeeding ones.
-				styleRule="--line-accent-bg-location"
-				attrName="timelineAnchor"
-				key="timelineAnchor"
-				format="%s%"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--gap"
-				attrName="timelineGap"
-				key="timelineGap"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--line-dot-border-radius"
-				attrName="timelineDotBorderRadius"
-				key="timelineDotBorderRadius"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--line-dot-size"
-				attrName="timelineDotSize"
-				key="timelineDotSize"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--line-bg-width"
-				attrName="timelineThickness"
-				key="timelineThickness"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--content-line"
-				attrName="timelineOffset"
-				key="timelineOffset"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--line-accent-bg-color"
-				attrName="timelineAccentColor"
-				key="timelineAccentColor"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--line-accent-bg-color-2"
-				attrName="timelineAccentColor2"
-				key="timelineAccentColor2"
-				enabledCallback={ getAttribute => getAttribute( 'timelineAccentColorType' ) === 'gradient' }
-				dependencies={ [ 'timelineAccentColorType', ...dependencies ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--line-bg-color"
-				attrName="timelineBackgroundColor"
-				key="timelineBackgroundColor"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-inner-blocks:after"
-				styleRule="top"
-				attrName="blockPadding"
-				key="timeline-blockPadding-top"
-				responsive="all"
-				valuePreCallback={ ( value, getAttribute, device ) => {
-					const getInherited = true
-					const padding = getAttribute( 'blockPadding', device, 'normal', getInherited )
-					const top = padding && padding?.top !== '' ? padding?.top : ( device === 'mobile' ? 0 : 16 )
-					if ( device === 'mobile' ) {
-						return `${ top + 16 }px`
-					}
-
-					if ( padding?.top === padding?.bottom ) {
-						return ''
-					}
-
-					const bottom = padding && padding?.bottom !== '' ? padding?.bottom : 16
-					return `calc(${ top }px + (100% - ${ top }px - ${ bottom }px)/2)`
-				} }
-				unitCallback={ () => '' }
-				dependencies={ [ 'blockPadding', ...dependencies ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-inner-blocks:after"
-				styleRule="bottom"
-				attrName="blockPadding"
-				key="timeline-blockPadding-bottom"
-				enabledCallback={ getAttribute => getAttribute( 'timelineIsLast' ) === true }
-				responsive="all"
-				valuePreCallback={ ( value, getAttribute, device ) => {
-					const getInherited = true
-					const padding = getAttribute( 'blockPadding', device, 'normal', getInherited )
-					const top = padding && padding?.top !== '' ? padding?.top : ( device === 'mobile' ? 0 : 16 )
-					const bottom = padding && padding?.bottom !== '' ? padding?.bottom : ( device === 'mobile' ? 0 : 16 )
-					if ( device === 'mobile' ) {
-						return `calc(${ bottom }px + (100% - ${ top + bottom }px) - 16px)`
-					}
-
-					if ( top === bottom ) {
-						return ``
-					}
-
-					return `calc(${ bottom }px + (100% - ${ top }px - ${ bottom }px)/2)`
-				} }
-				unitCallback={ () => '' }
-				dependencies={ [ 'timelineIsLast', 'blockPadding', ...dependencies ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				renderIn="save"
-				selector=".stk-block-timeline__middle"
-				styleRule="marginTop"
-				attrName="blockPadding"
-				key="timeline-blockPadding-marginTop"
-				responsive="all"
-				valuePreCallback={ ( value, getAttribute, device ) => {
-					const getInherited = true
-					const padding = getAttribute( 'blockPadding', device, 'normal', getInherited )
-					if ( device === 'mobile' ) {
-						return padding ? `${ padding?.top }px` : ''
-					}
-					return ''
-				} }
-				unitCallback={ () => '' }
-				dependencies={ [ 'blockPadding', ...dependencies ] }
-			/>
-		</>
-	)
-}
-
-const BlockStyles = memo( props => {
-	return (
-		<>
-			<BlockDiv.Style { ...props } />
-			<MarginBottom.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Typography.Style { ...props } { ...typographyOptions } />
-			<Styles { ...props } />
-		</>
-	)
 } )
+EffectsAnimations.addStyles( blockStyles )
 
-BlockStyles.defaultProps = {
-	version: '',
-}
-
-BlockStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<BlockDiv.Style.Content { ...props } />
-			<MarginBottom.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-BlockStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
-
-export default BlockStyles
+export default blockStyles
diff --git a/src/block/video-popup/edit.js b/src/block/video-popup/edit.js
index 3f849452e..8cfc1b2a1 100644
--- a/src/block/video-popup/edit.js
+++ b/src/block/video-popup/edit.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { IconLabelStyles } from './style'
+import blockStyles from './style'
 
 /**
  * External dependencies
@@ -16,10 +16,10 @@ import {
 	AdvancedTextControl,
 	InspectorBottomTip,
 	AdvancedToggleControl,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import {
 	BlockDiv,
-	useGeneratedCss,
 	MarginBottom,
 	getRowClasses,
 	getAlignmentClasses,
@@ -45,6 +45,7 @@ import { compose } from '@wordpress/compose'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
+import { memo } from '@wordpress/element'
 
 export const defaultIcon = '<svg data-prefix="fas" data-icon="play" class="svg-inline--fa fa-play fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true"><path fill="currentColor" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>'
 
@@ -55,16 +56,21 @@ const TEMPLATE = [
 	[ 'stackable/image', { enableHandles: false } ],
 ]
 
+const isVideoFile = link => {
+	if ( ! link ) {
+		return false
+	}
+	const regexp = /(?:^.*\.(mp4|avi|wmv|mov|flv|mkv|webm|vob|ogv|m4v|3gp|3g2|mpeg|mpg|m2v|m4v|svi|3gpp|3gpp2|mxf|roq|nsv|flv|f4v|f4p|f4a|f4b)$)/im
+	return regexp.test( link )
+}
+
 const Edit = props => {
 	const {
-		clientId,
 		className,
 		attributes,
 		setAttributes,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const rowClass = getRowClasses( attributes )
 	const blockAlignmentClass = getAlignmentClasses( attributes )
 
@@ -81,94 +87,27 @@ const Edit = props => {
 		'stk-hover-parent',
 	] )
 
-	const isVideoFile = link => {
-		if ( ! link ) {
-			return false
-		}
-		const regexp = /(?:^.*\.(mp4|avi|wmv|mov|flv|mkv|webm|vob|ogv|m4v|3gp|3g2|mpeg|mpg|m2v|m4v|svi|3gpp|3gpp2|mxf|roq|nsv|flv|f4v|f4p|f4a|f4b)$)/im
-		return regexp.test( link )
-	}
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
 
 	return (
 		<>
-			<>
-				<InspectorTabs hasLayoutPanel={ false } />
-
-				<InspectorStyleControls>
-					<PanelAdvancedSettings
-						title={ __( 'General', i18n ) }
-						id="general"
-						initialOpen={ true }
-					>
-						<ImageControl2
-							isDynamic={ false }
-							label={ __( 'Popup Option #1: Upload Video', i18n ) }
-							help={ __( 'Use .mp4 format for videos', i18n ) }
-							onRemove={ () => setAttributes( {
-								videoLink: '',
-								videoId: '',
-							} ) }
-							onChange={ media => {
-								setAttributes( {
-									videoLink: media.url,
-									videoId: media.url,
-								} )
-							} }
-							imageId={ urlIsVideo( attributes.videoLink ) ? attributes.videoId : '' }
-							imageURL={ urlIsVideo( attributes.videoLink ) ? attributes.videoLink : '' }
-							allowedTypes={ [ 'video' ] }
-						/>
-						<AdvancedTextControl
-							label={ __( 'Popup Option #2: Video URL', i18n ) }
-							help={ __( 'Paste a Youtube / Vimeo URL', i18n ) }
-							isDynamic={ true }
-							isFormatType={ false }
-							placeholder="https://"
-							value={ ! urlIsVideo( attributes.videoLink ) ? attributes.videoLink : '' }
-							onChange={ videoLink => setAttributes( {
-								videoLink,
-								videoId: getVideoProviderFromURL( videoLink ).id,
-							} ) }
-						/>
-						{ isVideoFile( attributes.videoLink ) && <>
-							<AdvancedToggleControl
-								label={ __( 'Allow fullscreen', i18n ) }
-								attribute="videoFullscreen"
-								defaultValue={ true }
-							/>
-							<AdvancedToggleControl
-								label={ __( 'Allow download video', i18n ) }
-								attribute="videoDownload"
-								defaultValue={ true }
-							/>
-							<AdvancedToggleControl
-								label={ __( 'Loop video', i18n ) }
-								attribute="videoLoop"
-								defaultValue={ false }
-							/>
-						</> }
-					</PanelAdvancedSettings>
-
-				</InspectorStyleControls>
-				<BlockDiv.InspectorControls />
-				<Advanced.InspectorControls />
-				<Transform.InspectorControls />
-				<EffectsAnimations.InspectorControls />
-				<CustomAttributes.InspectorControls />
-				<CustomCSS.InspectorControls mainBlockClass="stk-block-video-popup" />
-				<Responsive.InspectorControls />
-				<ConditionalDisplay.InspectorControls />
-
-				<InspectorStyleControls>
-					<InspectorBottomTip />
-				</InspectorStyleControls>
-			</>
-
-			<IconLabelStyles
-				version={ VERSION }
-				blockState={ props.blockState }
-				clientId={ clientId }
+			<InspectorControls
+				setAttributes={ setAttributes }
+				videoLink={ attributes.videoLink }
+				videoId={ attributes.videoId }
+
 			/>
+
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
 			<CustomCSS mainBlockClass="stk-block-video-popup" />
 
 			<BlockDiv
@@ -189,6 +128,83 @@ const Edit = props => {
 	)
 }
 
+const InspectorControls = memo( props => {
+	return (
+		<>
+			<InspectorTabs hasLayoutPanel={ false } />
+
+			<InspectorStyleControls>
+				<PanelAdvancedSettings
+					title={ __( 'General', i18n ) }
+					id="general"
+					initialOpen={ true }
+				>
+					<ImageControl2
+						isDynamic={ false }
+						label={ __( 'Popup Option #1: Upload Video', i18n ) }
+						help={ __( 'Use .mp4 format for videos', i18n ) }
+						onRemove={ () => props.setAttributes( {
+							videoLink: '',
+							videoId: '',
+						} ) }
+						onChange={ media => {
+							props.setAttributes( {
+								videoLink: media.url,
+								videoId: media.url,
+							} )
+						} }
+						imageId={ urlIsVideo( props.videoLink ) ? props.videoId : '' }
+						imageURL={ urlIsVideo( props.videoLink ) ? props.videoLink : '' }
+						allowedTypes={ [ 'video' ] }
+					/>
+					<AdvancedTextControl
+						label={ __( 'Popup Option #2: Video URL', i18n ) }
+						help={ __( 'Paste a Youtube / Vimeo URL', i18n ) }
+						isDynamic={ true }
+						isFormatType={ false }
+						placeholder="https://"
+						value={ ! urlIsVideo( props.videoLink ) ? props.videoLink : '' }
+						onChange={ videoLink => props.setAttributes( {
+							videoLink,
+							videoId: getVideoProviderFromURL( videoLink ).id,
+						} ) }
+					/>
+					{ isVideoFile( props.videoLink ) && <>
+						<AdvancedToggleControl
+							label={ __( 'Allow fullscreen', i18n ) }
+							attribute="videoFullscreen"
+							defaultValue={ true }
+						/>
+						<AdvancedToggleControl
+							label={ __( 'Allow download video', i18n ) }
+							attribute="videoDownload"
+							defaultValue={ true }
+						/>
+						<AdvancedToggleControl
+							label={ __( 'Loop video', i18n ) }
+							attribute="videoLoop"
+							defaultValue={ false }
+						/>
+					</> }
+				</PanelAdvancedSettings>
+
+			</InspectorStyleControls>
+			<BlockDiv.InspectorControls />
+			<Advanced.InspectorControls />
+			<Transform.InspectorControls />
+			<EffectsAnimations.InspectorControls />
+			<CustomAttributes.InspectorControls />
+			<CustomCSS.InspectorControls mainBlockClass="stk-block-video-popup" />
+			<Responsive.InspectorControls />
+			<ConditionalDisplay.InspectorControls />
+
+			<InspectorStyleControls>
+				<InspectorBottomTip />
+			</InspectorStyleControls>
+		</>
+	)
+} )
+
 export default compose(
 	withBlockWrapperIsHovered,
 	withQueryLoopContext,
diff --git a/src/block/video-popup/save.js b/src/block/video-popup/save.js
index e4889ddf4..63719c31b 100644
--- a/src/block/video-popup/save.js
+++ b/src/block/video-popup/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { IconLabelStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -59,7 +54,7 @@ export const Save = props => {
 			data-nodownload={ attributes.videoDownload ? null : '' }
 			data-loop={ attributes.videoLoop ? '' : null }
 		>
-			<IconLabelStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			{ applyFilters( 'stackable.video-popup.save.div.content', (
 				<div
diff --git a/src/block/video-popup/style.js b/src/block/video-popup/style.js
index bf3cc84d5..9ac4712eb 100644
--- a/src/block/video-popup/style.js
+++ b/src/block/video-popup/style.js
@@ -9,72 +9,26 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import { BlockStyleGenerator } from '~stackable/components'
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-icon"
-				attrName="iconGap"
-				key="iconGap"
-				styleRule="flexBasis"
-				format="%spx"
-			/>
-		</>
-	)
-}
-
-export const IconLabelStyles = memo( props => {
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<Column.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Styles { ...props } />
-		</>
-	)
+const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
 } )
 
-IconLabelStyles.defaultProps = {
-	version: '',
-}
-
-IconLabelStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<Column.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Styles { ...props } />
-		</BlockCssCompiler>
-	)
-}
-
-IconLabelStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}
+blockStyles.addBlockStyles( 'iconGap', [ {
+	selector: '.stk-block-icon',
+	attrName: 'iconGap',
+	key: 'iconGap',
+	styleRule: 'flexBasis',
+	format: '%spx',
+} ] )
+
+Alignment.addStyles( blockStyles )
+BlockDiv.addStyles( blockStyles )
+Column.addStyles( blockStyles )
+Advanced.addStyles( blockStyles )
+Transform.addStyles( blockStyles )
+EffectsAnimations.addStyles( blockStyles )
+
+export default blockStyles
diff --git a/src/components/advanced-range-control/range-control.js b/src/components/advanced-range-control/range-control.js
index 25e761c7f..48ecc75fc 100644
--- a/src/components/advanced-range-control/range-control.js
+++ b/src/components/advanced-range-control/range-control.js
@@ -17,10 +17,7 @@ import {
 } from '@wordpress/components'
 import {
 	useState,
-	useLayoutEffect,
-	useEffect,
 	memo,
-	useCallback,
 } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 
@@ -28,9 +25,8 @@ import { __ } from '@wordpress/i18n'
  * External dependencies
  */
 import classnames from 'classnames'
-import { clamp, debounce } from 'lodash'
+import { clamp } from 'lodash'
 import { i18n } from 'stackable'
-import { useDeviceType } from '~stackable/hooks'
 
 // NumberControl is only supported in WP 5.5
 const isNumberControlSupported = !! NumberControl
@@ -50,6 +46,11 @@ const StackableRangeControl = memo( props => {
 		...propsToPass
 	} = props
 
+	// This fixes the block error for dynamic AdvancedRangeControls if props.value is NaN
+	const _getValue = () => {
+		return props.value === '' || ( isNaN( props.value ) && props.value !== 'auto' ) ? '' : props.value
+	}
+
 	// We have an internal state for the value so that the user can freely type
 	// any number in the number field without any validation and then we can
 	// just set the proper value on the onChange prop.
@@ -58,17 +59,21 @@ const StackableRangeControl = memo( props => {
 	// We need to debounce the prop.onChange callback for when the slider is
 	// dragged, this is so that things feel smoother.
 	// TODO: may need to remove this?
-	const _debouncedOnChange = useCallback( debounce( props.onChange, 100 ), [ props.onChange ] )
+	// const _debouncedOnChange = useCallback( debounce( props.onChange, 100 ), [ props.onChange ] )
 
 	// Update the internal value state if the prop changes.
-	useEffect( () => {
+	const [ prevValue, setPrevValue ] = useState( _getValue() )
+	// use _getValue() instead of props.value because NaN !== NaN will always return true and will cause a lot of re-renders and an infinite loop.
+	if ( _getValue() !== prevValue ) {
+		const _val = _getValue()
+		setPrevValue( _val )
 		// Invalid values entered inside the number control will be omitted.
 		if ( props.value === '' || ( isNaN( props.value ) && props.value !== 'auto' ) ) {
 			setValue( '' )
 		} else {
 			setValue( props.value )
 		}
-	}, [ props.value ] )
+	}
 
 	// When the value is changed, set the internal value to it, but provide only
 	// a valid number to the onChange event.
@@ -131,19 +136,12 @@ const StackableRangeControl = memo( props => {
 
 	// This makes sure that dynamic placeholders can be recomputed after other
 	// styles have been applied.
-	const [ placeholderValue, setPlaceholderValue ] = useState( props.placeholder )
-	useEffect( () => {
-		setPlaceholderValue( props.placeholder )
-	}, [ props.placeholder ] )
-	const deviceType = useDeviceType()
-	useLayoutEffect( () => {
-		const timeout = setTimeout( () => {
-			setPlaceholderValue( ( typeof placeholderRender === 'function' && ! value )
-				? placeholderRender( value )
-				: ( props.placeholder !== null ? props.placeholder : initialPosition ) )
-		}, 400 )
-		return () => clearTimeout( timeout )
-	}, [ deviceType, !! value, props.placeholder ] )
+	let placeholderValue = props.placeholder
+	if ( typeof placeholderRender === 'function' && ! value ) {
+		placeholderValue = placeholderRender( value )
+	} else if ( props.placeholder === null ) {
+		placeholderValue = initialPosition
+	}
 
 	return <div
 		className={ classNames }
diff --git a/src/components/block-css/block-style-generator-class.js b/src/components/block-css/block-style-generator-class.js
new file mode 100644
index 000000000..ded397c94
--- /dev/null
+++ b/src/components/block-css/block-style-generator-class.js
@@ -0,0 +1,309 @@
+/**
+ * This is the 3rd implementation of the BlockStyles class.  Context: 1st
+ * implementation was a function that generated css - slow since it traversed
+ * all the attributes 2nd implementation was ReactJS Components - lots of
+ * rerenders and slow
+ *
+ * 3rd implementation: A class that generates css by traversing only the
+ * attributes with values
+ *
+ * Usage: This class should be instantiated on script load and once per block.
+ * The function `addBlockStyles` should be used to add block styles during that
+ * time.
+ *
+ * In the block edit component, the function `generateBlockStyles` should be
+ * called to generate the css string for the block.
+ */
+import { getAttrName, getUniqueBlockClass } from '~stackable/util'
+import { getDynamicContentEdit } from '../dynamic-content-control'
+import { applyFilters } from '@wordpress/hooks'
+import { BlockCssFunc } from '.'
+import { pickBy } from 'lodash'
+
+export class BlockStyleGenerator {
+	constructor( commonProps ) {
+		this.commonProps = commonProps
+		this._blockStyles = {} // This holds all the blockStyles indices, keys are the attrName
+		this._dynamicBlockStyles = [] // Holds functions that will be called when generating blocks styles.
+		this._blockStyleNamesWithValuePreCallbacks = [] // This holds all block style keys that have valuePreCallbacks, becuase these will need to be run even if the attribute is blank.
+		this._orderedStyles = [] // This holds all the blockStyles added in order
+	}
+
+	/**
+	 * Used to add block styles to the block style generator. The attribute name
+	 * is important because it is used for looking which styles are generated
+	 * from a set of attributes.
+	 *
+	 * @param {string} attrName The attribute name to add block styles to
+	 * @param {Array} blockStyles Properties needed to generate the block
+	 * styles
+	 * @return {undefined}
+	 */
+	addBlockStyles( attrName, blockStyles ) {
+		if ( ! Array.isArray( blockStyles ) ) {
+			this.addBlockStyle( attrName, blockStyles )
+		} else {
+			blockStyles.forEach( blockStyle => {
+				this.addBlockStyle( attrName, blockStyle )
+			} )
+		}
+	}
+
+	/**
+	 * Used to add one block style to the block style generator. The attribute
+	 * name is important because it is used for looking which styles are
+	 * generated from a set of attributes.
+	 *
+	 * @param {string} _attrName The attribute name to add block styles to
+	 * @param {Object} blockStyle Properties needed to generate the block styles
+	 * @return {undefined}
+	 */
+	addBlockStyle( _attrName, blockStyle ) {
+		if ( ! _attrName ) {
+			console.error( 'BlockStyleGenerator: No attribute name provided.' ) // eslint-disable-line no-console
+		}
+
+		// If an attribute name template is provided, use it to format the attrName
+		const attrName = blockStyle.attrNameTemplate ? getAttrName( blockStyle.attrNameTemplate, _attrName ) : _attrName
+
+		// Remember the block styles that have valuePreCallbacks
+		if ( blockStyle.valuePreCallback ) {
+			this._blockStyleNamesWithValuePreCallbacks.push( attrName )
+		}
+
+		this._orderedStyles.push( blockStyle )
+		const blockStyleIndex = this._orderedStyles.length - 1
+
+		if ( ! this._blockStyles[ attrName ] ) {
+			this._blockStyles[ attrName ] = [ blockStyleIndex ]
+			return
+		}
+		this._blockStyles[ attrName ].push( blockStyleIndex )
+	}
+
+	/**
+	 * Normally, block styles are added with `addBlockStyle`. However, when you
+	 * need to generate a block style that need to use a value from an
+	 * attribute, you don't have access to the attributes yet. But if you use
+	 * this function, then you can add the blockStyle dynamically - although
+	 * this is a less performant way to add block styles.
+	 *
+	 * @param {Function} fn function that's called when generating block styles
+	 */
+	addBlockStyleConditionally( fn ) {
+		this._orderedStyles.push( fn )
+		const blockStyleIndex = this._orderedStyles.length - 1
+		this._dynamicBlockStyles.push( blockStyleIndex )
+	}
+
+	/**
+	 * Removes any suffixes from the attribute name.
+	 *
+	 * @param {string} attrName Attribute name
+	 * @return {string} Root attribute name
+	 */
+	getRootAttrName( attrName ) {
+		return attrName.replace( /(Hover|ParentHover|Collapsed|Tablet|TabletHover|TabletParentHover|TabletCollapsed|Mobile|MobileHover|MobileParentHover|MobileCollapsed|Unit|UnitHover|UnitParentHover|UnitCollapsed|UnitTablet|UnitTabletHover|UnitTabletParentHover|UnitTabletCollapsed|UnitMobile|UnitMobileHover|UnitMobileParentHover|UnitMobileCollapsed)$/, '' )
+	}
+
+	/**
+	 * Gets all the block styles for the given attribute names
+	 *
+	 * @param {Array} attrNames Array of attribute names
+	 * @return {Object} Object of blockStyles, keys are the indices
+	 */
+	getBlockStyles( attrNames ) {
+		if ( ! attrNames ) {
+			return this._orderedStyles.reduce( ( blockStyles, blockStyle, index ) => {
+				blockStyles[ index ] = blockStyle
+				return blockStyles
+			}, {} )
+		}
+
+		// Since, JavaScript objects are ordered by default, use object with block style indices as keys
+		// to maintain the order since attrNames may not follow the correct order.
+		const orderdBlockStyles = {}
+		const blockStyles = attrNames.reduce( ( blockStyles, attrName ) => {
+			if ( ! blockStyles[ attrName ] && this._blockStyles[ attrName ] ) {
+				blockStyles[ attrName ] = true
+				// iterate over the block style indices, and add them to the array
+				this._blockStyles[ attrName ].forEach( index => {
+					orderdBlockStyles[ index ] = this._orderedStyles[ index ]
+				} )
+			}
+			const rootAttrName = this.getRootAttrName( attrName )
+			if ( ! blockStyles[ rootAttrName ] && this._blockStyles[ rootAttrName ] ) {
+				blockStyles[ rootAttrName ] = true
+				this._blockStyles[ rootAttrName ].forEach( index => {
+					orderdBlockStyles[ index ] = this._orderedStyles[ index ]
+				} )
+			}
+			return blockStyles
+		}, {} )
+
+		// Alays include block styles that have valuePreCallbacks.
+		this._blockStyleNamesWithValuePreCallbacks.forEach( attrName => {
+			if ( ! blockStyles[ attrName ] ) {
+				blockStyles[ attrName ] = true
+				this._blockStyles[ attrName ].forEach( index => {
+					orderdBlockStyles[ index ] = this._orderedStyles[ index ]
+				} )
+			}
+		} )
+
+		// Add dynamic block styles
+		this._dynamicBlockStyles.forEach( index => {
+			if ( ! orderdBlockStyles[ index ] ) {
+				orderdBlockStyles[ index ] = this._orderedStyles[ index ]
+			}
+		} )
+
+		return orderdBlockStyles
+	}
+
+	getAttributesWithValues( attributes ) {
+		const test = value => typeof value !== 'undefined' && value !== ''
+		return Object.keys( pickBy( attributes, test ) )
+	}
+
+	/**
+	 * Checks the `renderCondition` property in blockStyle if it matches the
+	 * condition to render this, if present.
+	 *
+	 * @param {Object} blockStyle The block style object
+	 * @param {Object} attributes The block attributes
+	 */
+	styleShouldRender( blockStyle, attributes ) {
+		if ( blockStyle.renderCondition ) {
+			if ( typeof blockStyle.renderCondition === 'function' ) {
+				return blockStyle.renderCondition( attributes )
+			}
+			// renderCondition is an attribute name.
+			return !! attributes[ blockStyle.renderCondition ]
+		}
+		return true
+	}
+
+	generateBlockStylesForEditor( attributes, blockStyles, args ) {
+		const generatedCss = []
+
+		// Generate block styles based on the attributes that have values
+		Object.values( blockStyles ).forEach( blockStyle => {
+			// Call block styles that are added conditionally
+			if ( typeof blockStyle === 'function' ) {
+				const fn = blockStyle
+				const _BlockCssFunc = _blockStyle => {
+					if ( ! this.styleShouldRender( _blockStyle, attributes ) ) {
+						return
+					}
+					const css = BlockCssFunc( {
+						...this.commonProps,
+						..._blockStyle,
+						version: args.version || this.commonProps.version,
+						versionDeprecated: args.versionDeprecated || this.commonProps.versionDeprecated,
+						blockState: args.blockState,
+						clientId: args.clientId,
+						uniqueId: args.uniqueId,
+						instanceId: args.instanceId,
+						attributes,
+						editorMode: true,
+					} )
+					if ( css ) {
+						generatedCss.push( css )
+					}
+				}
+				fn( attributes, _BlockCssFunc )
+				return
+			}
+
+			if ( ! this.styleShouldRender( blockStyle, attributes ) ) {
+				return
+			}
+
+			const css = BlockCssFunc( {
+				...this.commonProps,
+				...blockStyle,
+				version: args.version || this.commonProps.version,
+				versionDeprecated: args.versionDeprecated || this.commonProps.versionDeprecated,
+				blockState: args.blockState,
+				clientId: args.clientId,
+				uniqueId: args.uniqueId,
+				instanceId: args.instanceId,
+				attributes,
+				editorMode: true,
+			} )
+
+			if ( css ) {
+				generatedCss.push( css )
+			}
+		} )
+
+		let output = generatedCss.join( '' )
+		output = getDynamicContentEdit( output, args.clientId, args.context )
+		output = applyFilters( 'stackable.block-styles.edit', output, getUniqueBlockClass( attributes.uniqueId ) )
+		return output
+	}
+
+	/**
+	 * Compiles the blockStyles based on the attributes given. Make sure to pass
+	 * the same CssSaveCompiler instance for the same block for a more optimized
+	 * way of compiling.
+	 *
+	 * @param {CssSaveCompiler} cssCompiler An instance of CssSaveCompiler
+	 * @param {Object} attributes
+	 * @param {Array} blockStyles
+	 * @param {Object} args
+	 *
+	 * @return {string} Compiled css
+	 */
+	generateBlockStylesForSave( cssCompiler, attributes, blockStyles, args ) {
+		// Generate block styles based on the attributes that have values
+		Object.values( blockStyles ).forEach( blockStyle => {
+			// Call block styles that are added conditionally
+			if ( typeof blockStyle === 'function' ) {
+				const fn = blockStyle
+				const _BlockCssFunc = _blockStyle => {
+					if ( ! this.styleShouldRender( _blockStyle, attributes ) ) {
+						return
+					}
+
+					return BlockCssFunc( {
+						...this.commonProps,
+						..._blockStyle,
+						version: args.version || this.commonProps.version,
+						versionDeprecated: args.versionDeprecated || this.commonProps.versionDeprecated,
+						// blockState: args.blockState,
+						// clientId: args.clientId,
+						uniqueId: attributes.uniqueId,
+						// instanceId: args.instanceId,
+						attributes,
+						editorMode: false,
+						compileCssTo: cssCompiler,
+					} )
+				}
+				fn( attributes, _BlockCssFunc )
+				return
+			}
+
+			if ( ! this.styleShouldRender( blockStyle, attributes ) ) {
+				return
+			}
+
+			BlockCssFunc( {
+				...this.commonProps,
+				...blockStyle,
+				version: args.version || this.commonProps.version,
+				versionDeprecated: args.versionDeprecated || this.commonProps.versionDeprecated,
+				// blockState: args.blockState,
+				// clientId: args.clientId,
+				uniqueId: attributes.uniqueId,
+				// instanceId: args.instanceId,
+				attributes,
+				editorMode: false,
+				compileCssTo: cssCompiler,
+			} )
+		} )
+
+		return cssCompiler.compile()
+	}
+}
diff --git a/src/components/block-css/css-save-compiler.js b/src/components/block-css/css-save-compiler.js
index 0e397583e..101cf3120 100644
--- a/src/components/block-css/css-save-compiler.js
+++ b/src/components/block-css/css-save-compiler.js
@@ -3,17 +3,20 @@
  * components.  Mainly used for the save function of blocks.
  */
 
-import { minifyCSS } from '~stackable/util'
+// import { minifyCSS } from '~stackable/util'
 import { getMediaQuery } from './util'
 
 const DEVICES = [ 'desktop', 'desktopOnly', 'desktopTablet', 'tabletOnly', 'tablet', 'mobile' ]
 
 class CssSaveCompiler {
 	constructor() {
-		this.styles = {}
+		this.styles = null
 	}
 
 	addStyle( selector, rule, value = undefined, device = 'desktop' ) {
+		if ( ! this.styles ) {
+			this.styles = {}
+		}
 		// Add the style in this.styles
 		if ( ! this.styles[ device ] ) {
 			this.styles[ device ] = {}
@@ -24,18 +27,22 @@ class CssSaveCompiler {
 		if ( typeof value === 'undefined' ) {
 			// TODO: not sure if we need to do this because we might accidentally delete something that wants to add a style.
 			// delete this.styles[ device ][ selector ][ rule ]
-		} else {
+		} else if ( this.styles[ device ][ selector ][ rule ] !== value ) {
+			// Only update if the value changed
 			this.styles[ device ][ selector ][ rule ] = value
 		}
 	}
 
 	// Compile all this.styles into a single string.
 	compile() {
-		let allCss = ''
+		if ( ! this.styles ) {
+			return ''
+		}
+
+		const allCss = []
 
 		// Follow this order so we can put the media queries that override for smaller screens last.
 		DEVICES.forEach( device => {
-			// console.log( this.styles, device )
 			if ( ! this.styles[ device ] ) {
 				return
 			}
@@ -47,22 +54,33 @@ class CssSaveCompiler {
 				let selectorCss = ''
 				const rules = Object.keys( this.styles[ device ][ selector ] )
 				rules.forEach( rule => {
+					// If the style was not added, then delete it from this.styles
+					// if ( this.addedStyles[ `${ device }|${ selector }|${ rule }` ] === false ) {
+					// 	delete this.styles[ device ][ selector ][ rule ]
+					// 	delete this.addedStyles[ `${ device }|${ selector }|${ rule }` ]
+					// } else {
 					const value = this.styles[ device ][ selector ][ rule ]
 					selectorCss += `${ rule }:${ value };`
+					// Reset the flag
+					// this.addedStyles[ `${ device }|${ selector }|${ rule }` ] = false
+					// }
 				} )
-
-				css += `${ selector }{${ selectorCss }}`
+				if ( selectorCss ) {
+					css += `${ selector }{${ selectorCss }}`
+				}
 			} )
 
 			const mediaQuery = getMediaQuery( device )
-			if ( mediaQuery ) {
+			if ( mediaQuery && css ) {
 				css = `${ mediaQuery }{${ css }}`
 			}
 
-			allCss += css
+			allCss.push( css )
 		} )
 
-		return minifyCSS( allCss )
+		// Let's not minify to make it faster
+		// return minifyCSS( allCss.join( '' ) )
+		return allCss.join( '' )
 	}
 }
 
diff --git a/src/components/block-css/index.js b/src/components/block-css/index.js
index bcfcbff75..53d6b4be4 100644
--- a/src/components/block-css/index.js
+++ b/src/components/block-css/index.js
@@ -37,6 +37,8 @@ import { pick, kebabCase } from 'lodash'
  */
 import { sprintf } from '@wordpress/i18n'
 import { applyFilters } from '@wordpress/hooks'
+export { BlockStyleGenerator } from './block-style-generator-class'
+export { useBlockCssGenerator } from './use-block-style-generator'
 
 const BlockCss = props => {
 	const {
@@ -154,7 +156,7 @@ const BlockCss = props => {
 
 		// Allow others to override the unit.
 		if ( unitCallback ) {
-			unit = unitCallback( unit, device, state )
+			unit = unitCallback( unit, device, state, getAttribute )
 		}
 
 		// Allow unspecified tablet & mobile values to be clamped based on the desktop value.
@@ -432,6 +434,8 @@ const BlockCss = props => {
 	return css || null
 }
 
+export const BlockCssFunc = BlockCss
+
 // This is used for rendering styles for the editor.
 const BlockCssEdit = props => {
 	const {
@@ -471,10 +475,12 @@ const _BlockCss = props => {
 
 	// If no compileCssTo prop is provided, then we just print the styles directly.
 	if ( ! props.compileCssTo ) {
+		// console.error( `BlockCss component is deprecated, use the useBlockCssGenerator hook in your block's edit component instead` ) // eslint-disable-line no-console
 		return <BlockCssEdit { ...props } editorMode={ true } />
 	}
 	// Else, it means we need to compile all the css into the object passed to the compileCssTo prop.
 	// Call as a function so we just return the string quickly.
+	// console.error( `BlockCss component is deprecated, remove this from the block's save render method` ) // eslint-disable-line no-console
 	return BlockCss( {
 		...props,
 		editorMode: false,
diff --git a/src/components/block-css/use-block-style-generator.js b/src/components/block-css/use-block-style-generator.js
new file mode 100644
index 000000000..991f73b81
--- /dev/null
+++ b/src/components/block-css/use-block-style-generator.js
@@ -0,0 +1,77 @@
+import { useQueryLoopInstanceId } from '~stackable/util'
+import { useMemo, useRef } from '@wordpress/element'
+import { useRafEffect } from '~stackable/hooks'
+import CssSaveCompiler from './css-save-compiler'
+
+export const useBlockCssGenerator = props => {
+	const {
+		blockStyles,
+		version,
+		clientId,
+		context,
+		attributes,
+		blockState,
+	} = props
+
+	// Keep the filtered block styles that we will update.
+	const blockStyleDefsRef = useRef( [] )
+
+	// Generate the CSS styles.
+	const instanceId = useQueryLoopInstanceId( attributes.uniqueId )
+
+	// Keep the old text attribute for comparison to prevent block style generation when only the text attribute has changed.
+	const oldText = useRef( attributes.text )
+
+	// Keep the generated CSS for editor and return it when only the text attribute has changed.
+	const oldCss = useRef( null )
+
+	const editCss = useMemo( () => {
+		if ( oldText.current !== attributes.text ) {
+			oldText.current = attributes.text
+			return oldCss.current
+		}
+		// Gather only the attributes that have values and all their
+		// corresponding block style definitions.
+		const attrNamesWithValues = blockStyles.getAttributesWithValues( attributes )
+		blockStyleDefsRef.current = blockStyles.getBlockStyles( attrNamesWithValues )
+
+		// These are the styles to be displayed in the editor.
+		const css = blockStyles.generateBlockStylesForEditor( attributes, blockStyleDefsRef.current, {
+			version,
+			blockState,
+			uniqueId: attributes.uniqueId,
+			instanceId, // This is used by the native Query Loop block.
+			clientId,
+			context, // This is used for dynamic content.
+		} )
+		oldCss.current = css
+		return css
+	}, [ attributes, version, blockState, clientId, attributes.uniqueId, instanceId, context ] )
+
+	useRafEffect( () => {
+		if ( oldText.current !== attributes.text ) {
+			oldText.current = attributes.text
+			return
+		}
+
+		const cssCompiler = new CssSaveCompiler()
+
+		// Generate the styles that are to be saved with the actual block.
+		const saveCss = blockStyles.generateBlockStylesForSave(
+			cssCompiler,
+			attributes,
+			blockStyleDefsRef.current,
+			{
+				version,
+			}
+		)
+
+		// Quietly save the styles. We cannot use setAttributes here because it
+		// will cause the block and this hook to rerender.
+		// dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
+		// setAttributes( { generatedCss: saveCss } )
+		attributes.generatedCss = saveCss
+	}, [ attributes, version ] )
+
+	return editCss
+}
diff --git a/src/components/color-palette-control/color-palette-popup.js b/src/components/color-palette-control/color-palette-popup.js
index d6d3eadbd..9ad7e3f73 100644
--- a/src/components/color-palette-control/color-palette-popup.js
+++ b/src/components/color-palette-control/color-palette-popup.js
@@ -13,8 +13,9 @@ import {
 	ColorPicker,
 	GradientPicker,
 } from '@wordpress/components'
+import { memo } from '@wordpress/element'
 
-export const ColorPalettePopup = props => {
+export const ColorPalettePopup = memo( props => {
 	const {
 		onChange,
 		preOnChange,
@@ -81,7 +82,7 @@ export const ColorPalettePopup = props => {
 			}
 		</>
 	)
-}
+} )
 
 const NOOP = () => {}
 const PASSTHRU = v => v
diff --git a/src/components/column-inserter/index.js b/src/components/column-inserter/index.js
index b1360511e..477ea7b45 100644
--- a/src/components/column-inserter/index.js
+++ b/src/components/column-inserter/index.js
@@ -14,7 +14,7 @@ import { useBlockEditContext } from '@wordpress/block-editor'
 import { plus } from '@wordpress/icons'
 import { __ } from '@wordpress/i18n'
 
-export const insertColumnBlock = ( rootClientId, blockName = '' ) => {
+export const insertColumnBlock = ( rootClientId, blockName = '', attributes = {} ) => {
 	const {
 		getBlock,
 		__experimentalGetAllowedBlocks: getAllowedBlocks,
@@ -25,7 +25,7 @@ export const insertColumnBlock = ( rootClientId, blockName = '' ) => {
 
 	// If block name is given, insert a blank block.
 	if ( blockName ) {
-		block = getBlockFromExample( blockName, {} )
+		block = getBlockFromExample( blockName, attributes )
 
 	// Else, copy the last block if it's available
 	} else {
diff --git a/src/components/dynamic-content-control/index.js b/src/components/dynamic-content-control/index.js
index 69980da42..10dc05296 100644
--- a/src/components/dynamic-content-control/index.js
+++ b/src/components/dynamic-content-control/index.js
@@ -335,6 +335,107 @@ export const useDynamicContent = ( value = '' ) => {
 	}, [ value, queryLoopContext?.postId ] )
 }
 
+// This is the same as with the useDynamicContent hook, but it's a function
+// instead of a hook.
+export const getDynamicContentEdit = ( value, clientId, context ) => {
+	if ( ! value || ! isString( value ) ) {
+		return value
+	}
+
+	if ( ! value.includes( '!#stk_dynamic' ) && ! value.includes( 'data-stk-dynamic' ) ) {
+		return value
+	}
+
+	if ( ! select( 'stackable/dynamic-content' ) ) {
+		return value
+	}
+
+	let currentPostId = select( 'core/editor' )?.getCurrentPostId() || -1
+
+	// If we're being used in a Query Loop, then check if we need to change the display value to match the given post Id.
+	if ( currentPostId && context?.postId !== currentPostId ) {
+		currentPostId = context.postId?.toString() || -1
+	}
+
+	// If we're being used in the site editor, then check if we need to change the display value to match the given post Id.
+	if ( currentPostId === -1 && select( 'core/edit-site' ) ) {
+		currentPostId = select( 'core/edit-site' ).getEditedPostContext()?.postId || -1
+	}
+
+	let tempValue = value
+
+	if ( currentPostId !== -1 ) {
+		// Replace all post IDS or else we will just get the value of the current post.
+		tempValue = tempValue?.replace( /<span[^\>]+data-stk-dynamic=[^\>]*>(.*?)<\/span>/g, value => {
+			const dataFieldString = value.match( /data-stk-dynamic="([^\"]*)"/ )[ 1 ]
+			const splitFieldString = dataFieldString.split( '/' )
+			if ( ! dataFieldString.startsWith( 'current-page' ) ) {
+				return value
+			}
+
+			if ( splitFieldString.length > 2 && splitFieldString[ 2 ].startsWith( '?' ) ) {
+				splitFieldString.splice( 2, 0, currentPostId )
+			} else if ( splitFieldString.length === 2 ) {
+				splitFieldString.push( currentPostId )
+			}
+
+			return value.replace(
+				/data-stk-dynamic="[^\"]*"/g,
+				'data-stk-dynamic="' + splitFieldString.join( '/' ) + '"'
+			)
+		} )
+
+		tempValue = tempValue?.replace( /!#stk_dynamic(.*)\!#/g, value => {
+			const dataFieldString = value.replace( /\!#/g, '' ).replace( 'stk_dynamic/', '' )
+			const splitFieldString = dataFieldString.split( '/' )
+			if ( ! dataFieldString.startsWith( 'current-page' ) ) {
+				return value
+			}
+
+			if ( splitFieldString.length > 2 ) {
+				splitFieldString.splice( 2, 0, currentPostId )
+			} else if ( splitFieldString.length === 2 ) {
+				splitFieldString.push( currentPostId )
+			}
+
+			return '!#stk_dynamic/' + splitFieldString.join( '/' ) + '!#'
+		} )
+	}
+
+	// Get the correct value for the dynamic content.
+	const blockDetails = select( 'core/block-editor' ).getBlock( clientId )
+	let parsedContent = select( 'stackable/dynamic-content' ).parseDynamicContents( tempValue, blockDetails )
+
+	/**
+	 * If we are using the current-page, then we need to remove the post ID from the data-stk-dynamic.
+	 */
+	if ( currentPostId !== -1 ) {
+		parsedContent = parsedContent?.replace( /<span[^\>]+data-stk-dynamic=[^\>]*>(.*?)<\/span>/g, value => {
+			const dataFieldString = value.match( /data-stk-dynamic="([^\"]*)"/ )[ 1 ]
+			const splitFieldString = dataFieldString.split( '/' )
+			if ( dataFieldString.startsWith( 'current-page' ) && last( splitFieldString ).match( /^\d+$/ ) ) {
+				splitFieldString.pop()
+				return value.replace(
+					/data-stk-dynamic="[^\"]*"/g,
+					'data-stk-dynamic="' + splitFieldString.join( '/' ) + '"'
+				)
+			}
+			return value
+		} )
+
+		parsedContent = parsedContent?.replace( /!#stk_dynamic(.*)\!#/g, value => {
+			const dataFieldString = value.replace( /\!#/g, '' ).replace( 'stk_dynamic/', '' )
+			const splitFieldString = dataFieldString.split( '/' )
+			if ( dataFieldString.startsWith( 'current-page' ) && last( splitFieldString ).match( /^\d+$/ ) ) {
+				return '!#stk_dynamic/' + splitFieldString.join( '/' ) + '!#'
+			}
+			return value
+		} )
+	}
+
+	return parsedContent
+}
+
 /**
  * Custom hook for parsing all dynamic content inside of a text
  * and changing it to its Field Title.
diff --git a/src/components/group-placeholder/index.js b/src/components/group-placeholder/index.js
index 6a1307af6..6b58b7d4a 100644
--- a/src/components/group-placeholder/index.js
+++ b/src/components/group-placeholder/index.js
@@ -6,7 +6,11 @@ import { SVGStackableIcon } from '~stackable/icons'
 import { insertColumnBlock } from '../column-inserter'
 import { __ } from '@wordpress/i18n'
 
-const GroupPlaceholder = () => {
+const GroupPlaceholder = props => {
+	const {
+		blockName: blockNameToAdd = 'stackable/column',
+		attributes,
+	} = props
 	const { clientId, name: blockName } = useBlockEditContext()
 	const { blockTitle } = useSelect( select => {
 		return {
@@ -24,7 +28,7 @@ const GroupPlaceholder = () => {
 				isSecondary
 				className="ugb-design-library-block__button"
 				onClick={ () => {
-					insertColumnBlock( clientId )
+					insertColumnBlock( clientId, blockNameToAdd, attributes )
 				} }
 			>{ __( 'Add Block', i18n ) }</Button>
 		</Placeholder>
diff --git a/src/components/index.js b/src/components/index.js
index 6207dbbb6..08324109f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -106,7 +106,10 @@ export { default as ColumnInnerBlocks } from './column-inner-blocks'
 export { default as VariationPicker } from './variation-picker'
 export { default as InspectorBottomTip } from './inspector-bottom-tip'
 export { default as BlockWrapper } from './block-wrapper'
-export { default as BlockCss, BlockCssCompiler } from './block-css'
+// TODO: clean this
+export {
+	default as BlockCss, BlockCssCompiler, BlockStyleGenerator, useBlockCssGenerator,
+} from './block-css'
 export { default as ColumnsWidthControl } from './columns-width-control'
 export { default as ColumnsWidthMultiControl } from './columns-width-multi-control'
 export { default as Popover } from './popover'
diff --git a/src/components/resizable-column/index.js b/src/components/resizable-column/index.js
index 27853e1d1..b3261a132 100644
--- a/src/components/resizable-column/index.js
+++ b/src/components/resizable-column/index.js
@@ -9,11 +9,7 @@ import ArrowDownSvg from './images/arrow-down.svg'
 /**
  * External dependencies
  */
-import {
-	useBlockContext,
-	useDeviceType,
-	useWithShift,
-} from '~stackable/hooks'
+import { useDeviceType, useWithShift } from '~stackable/hooks'
 import { clamp, isEqual } from 'lodash'
 import classnames from 'classnames'
 import { i18n } from 'stackable'
@@ -45,12 +41,39 @@ const formatLabel = value => {
 
 const ResizableColumn = props => {
 	const { clientId } = useBlockEditContext()
-	const blockContext = useBlockContext()
 	const { getEditorDom } = useSelect( 'stackable/editor-dom' )
 
 	const {
-		isFirstBlock, isLastBlock, isOnlyBlock, adjacentBlocks, blockIndex, parentBlock,
-	} = blockContext
+		isFirstBlock,
+		isLastBlock,
+		isOnlyBlock,
+		adjacentBlocks,
+		blockIndex,
+		parentBlock,
+	} = useSelect(
+		select => {
+			const {
+				getBlockOrder, getBlockRootClientId, getBlock,
+			} =
+				select( 'core/block-editor' )
+
+			const rootClientId = getBlockRootClientId( clientId )
+			const parentBlock = getBlock( rootClientId )
+			const parentInnerBlocks = parentBlock.innerBlocks
+			const blockOrder = getBlockOrder( rootClientId )
+			const blockIndex = blockOrder.indexOf( clientId )
+
+			return {
+				isFirstBlock: blockIndex === 0,
+				isLastBlock: blockIndex === parentInnerBlocks.length - 1,
+				isOnlyBlock: parentInnerBlocks.length === 1,
+				adjacentBlocks: parentInnerBlocks,
+				blockIndex,
+				parentBlock,
+			}
+		},
+		[ clientId ]
+	)
 
 	// Block context is provided from the parent Columns block.
 	const allowResize = ! props.context[ 'stackable/innerBlockOrientation' ]
@@ -492,7 +515,11 @@ const ResizableColumn = props => {
 		>
 			{ allowResize && <ResizableTooltip
 				isVisible={ ! isOnlyBlock }
-				blockContext={ blockContext }
+				adjacentBlocks={ adjacentBlocks }
+				isOnlyBlock={ isOnlyBlock }
+				blockIndex={ blockIndex }
+				isLastBlock={ isLastBlock }
+				isFirstBlock={ isFirstBlock }
 				value={ isDesktop ? props.columnWidth
 					: isTablet ? ( props.columnWidthTablet || props.columnWidth )
 						: props.columnWidthMobile }
@@ -512,7 +539,7 @@ const ResizableColumn = props => {
 const ResizableTooltip = memo( props => {
 	const {
 		adjacentBlocks, isOnlyBlock, blockIndex, isLastBlock, isFirstBlock,
-	} = props.blockContext
+	} = props
 
 	const deviceType = useDeviceType()
 	const [ isEditWidth, setIsEditWidth ] = useState( false )
@@ -662,7 +689,6 @@ const noop = () => {}
 
 ResizableTooltip.defaultProps = {
 	isVisible: true,
-	blockContext: noobj,
 	value: '',
 	onChange: noop,
 	tooltipProps: noobj,
diff --git a/src/higher-order/with-block-wrapper/index.js b/src/higher-order/with-block-wrapper/index.js
index 3fae293f1..46abbc98b 100644
--- a/src/higher-order/with-block-wrapper/index.js
+++ b/src/higher-order/with-block-wrapper/index.js
@@ -12,13 +12,14 @@
  * Internal dependencies
  */
 import { BlockWrapper } from '~stackable/components'
-import { useBlockContext, useBlockHoverState } from '~stackable/hooks'
+import { useBlockHoverState } from '~stackable/hooks'
 
 /**
  * WordPress dependencies
  */
 import { createHigherOrderComponent } from '@wordpress/compose'
 import { useEffect, useState } from '@wordpress/element'
+import { useSelect } from '@wordpress/data'
 
 const EMPTY_OBJ = {}
 
@@ -74,7 +75,17 @@ let selectedBlock = null
  */
 export const useDevicePreviewOptimization = blockProps => {
 	const { clientId, isSelected } = blockProps
-	const { rootBlockClientId } = useBlockContext()
+	const { rootBlockClientId } = useSelect(
+		select => {
+			const { getBlockRootClientId } = select( 'core/block-editor' )
+			const rootBlockClientId = getBlockRootClientId( clientId )
+
+			return {
+				rootBlockClientId,
+			}
+		},
+		[ clientId ]
+	)
 
 	// Remember the selected block.
 	if ( isSelected ) {
diff --git a/src/hooks/use-block-hover-state.js b/src/hooks/use-block-hover-state.js
index c5c28afb0..619179a91 100644
--- a/src/hooks/use-block-hover-state.js
+++ b/src/hooks/use-block-hover-state.js
@@ -118,31 +118,32 @@ export const useBlockHoverState = () => {
 	const clientIds = useSelect( select => select( 'core/block-editor' ).getMultiSelectedBlockClientIds() )
 
 	const {
-		hoverState,
-		hoverStateClientId,
+		currentHoverState,
+		blockHoverClass,
+		hasParentHoverState,
+		hasCollapsedState,
+		isCollapsedBlock,
 	} = useSelect( select => {
-		return {
-			hoverState: select( 'stackable/hover-state' ).getHoverState(),
-			hoverStateClientId: select( 'stackable/hover-state' ).getSelectedBlock(),
-		}
-	}, [] )
-
-	const {
-		getSelectedParentHoverBlock,
-		getSelectedParentHoverBlockChildren,
-		getSelectedHoverChildren,
-		getHasParentHoverState,
-		getHasCollapsedState,
-		getSelectedCollapsedBlock,
-		getSelectedCollapsedBlockChildren,
-	} = useSelect( 'stackable/hover-state' )
-
-	const hasParentHoverState = getHasParentHoverState()
-	const parentHoverClientId = getSelectedParentHoverBlock()
-	const hasCollapsedState = getHasCollapsedState()
-	const collapsedClientId = getSelectedCollapsedBlock()
-
-	// return useMemo( () => {
+		const hoverState = select( 'stackable/hover-state' ).getHoverState()
+		const hoverStateClientId = select( 'stackable/hover-state' ).getSelectedBlock()
+
+		const {
+			getSelectedParentHoverBlock,
+			getSelectedParentHoverBlockChildren,
+			getSelectedHoverChildren,
+			getHasParentHoverState,
+			getHasCollapsedState,
+			getSelectedCollapsedBlock,
+			getSelectedCollapsedBlockChildren,
+		} = select( 'stackable/hover-state' )
+
+
+		const hasParentHoverState = getHasParentHoverState()
+		const parentHoverClientId = getSelectedParentHoverBlock()
+		const hasCollapsedState = getHasCollapsedState()
+		const collapsedClientId = getSelectedCollapsedBlock()
+
+		// return useMemo( () => {
 		const isBlockSelected = clientId === hoverStateClientId || clientIds.includes( clientId )
 		const isParentHoverBlock = clientId === parentHoverClientId
 		const isCollapsedBlock = clientId === collapsedClientId
@@ -191,8 +192,16 @@ export const useBlockHoverState = () => {
 			}
 		}
 
-		return [ currentHoverState, blockHoverClass, hasParentHoverState, hasCollapsedState, isCollapsedBlock ]
-	// }, [ hoverState, clientId, hoverStateClientId, hasParentHoverState, parentHoverClientId, hasCollapsedState, collapsedClientId ] )
+		return {
+			currentHoverState,
+			blockHoverClass,
+			hasParentHoverState,
+			hasCollapsedState,
+			isCollapsedBlock,
+		}
+	}, [ clientId, clientIds ] )
+
+	return [ currentHoverState, blockHoverClass, hasParentHoverState, hasCollapsedState, isCollapsedBlock ]
 }
 
 // This just returns the `blockHoverClass` value from the useBlockHoverState
diff --git a/src/util/attributes/index.js b/src/util/attributes/index.js
index 453bb7bb0..c9758836d 100644
--- a/src/util/attributes/index.js
+++ b/src/util/attributes/index.js
@@ -186,6 +186,14 @@ export const getAttributeName = ( attrName, deviceType = 'desktop', hoverState =
 	return `${ attrName }${ deviceAttrName }${ hoverAttrName }`
 }
 
+// This can be used instead of using a hook to prevent rerenderes:
+// const { getAttrName } = useAttributeEditHandlers( attrNameTemplate )
+// Now:
+// const getAttrName = getAttrNameFunc( attrNameTemplate )
+export const getAttributeNameFunc = attrNameTemplate => ( attrName, device = 'desktop', state = 'normal' ) => {
+	return getAttributeName( getAttrNameFunction( attrNameTemplate )( attrName ), device, state )
+}
+
 /**
  * Checks whether an attribute is empty or is considered as an unset block
  * attribute. Handles top, left, right and bottom default attribute.

From cc368605430f6991fae1fecead9e337dcd103eea Mon Sep 17 00:00:00 2001
From: Benjamin Intal <bfintal@gmail.com>
Date: Mon, 23 Sep 2024 15:24:05 +0800
Subject: [PATCH 02/18] fix (global colors): editing/adding colors when blocks
 are present is slow (#3299)

* fix: editing/adding global colors when blocks are present is slow

* corrected color label value for global colors

---------

Co-authored-by: bfintal@gmail.com <>
---
 src/components/color-palette-control/index.js    | 16 ++++++++++++++--
 .../global-settings/colors/color-picker.js       |  4 ++--
 src/plugins/global-settings/colors/index.js      |  2 +-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/color-palette-control/index.js b/src/components/color-palette-control/index.js
index 9f6881ef6..5ab9d208e 100644
--- a/src/components/color-palette-control/index.js
+++ b/src/components/color-palette-control/index.js
@@ -143,13 +143,25 @@ const ColorPaletteControl = memo( props => {
 	value = applyFilters( 'stackable.color-palette-control.color-value', value )
 
 	let colorLabel,
-		colorName = value
+		colorName = value,
+		popupPickerValue = value // We assign a value to this so that the popup picker will show a "check" on the selected color.
+
 	allColors.some( color => {
 		if ( color.color === value || color.gradient === value ) {
 			colorName = color.name
 			colorLabel = color.name
 			return true
 		}
+
+		// For Stackable global colors to have a correct name label.
+		if ( color.slug ) {
+			if ( `var(--${ color.slug })` === value ) {
+				colorName = color.name
+				colorLabel = color.name
+				popupPickerValue = color.color
+				return true
+			}
+		}
 		return false
 	} )
 
@@ -162,7 +174,7 @@ const ColorPaletteControl = memo( props => {
 
 	const colorPalette = (
 		<ColorPalettePopup
-			value={ value }
+			value={ popupPickerValue }
 			onChange={ onChange }
 			preOnChange={ props.preOnChange }
 			colors={ props.isGradient ? gradients : colors }
diff --git a/src/plugins/global-settings/colors/color-picker.js b/src/plugins/global-settings/colors/color-picker.js
index 65f160a86..ddd9c9615 100644
--- a/src/plugins/global-settings/colors/color-picker.js
+++ b/src/plugins/global-settings/colors/color-picker.js
@@ -4,7 +4,6 @@
 import {
 	getRgb,
 	createColor,
-	updateFallbackBlockAttributes,
 	convertGlobalColorBlockAttributesToStatic,
 } from './util'
 
@@ -75,8 +74,9 @@ const ColorPickers = props => {
 	 * @param {Array} newColors colors passed.
 	 */
 	const updateColors = newColors => {
+		// NOTE: Removed this because it is slow to update all blocks.
 		// Update the blocks in our page.
-		updateFallbackBlockAttributes( newColors )
+		// updateFallbackBlockAttributes( newColors )
 
 		// Save settings.
 		clearTimeout( saveTimeout )
diff --git a/src/plugins/global-settings/colors/index.js b/src/plugins/global-settings/colors/index.js
index 938cd22e1..2b51a5378 100644
--- a/src/plugins/global-settings/colors/index.js
+++ b/src/plugins/global-settings/colors/index.js
@@ -144,7 +144,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-colors', out
 // Convert hex colors to global colors in Stackable blocks.
 addFilter( 'stackable.color-palette-control.change', 'stackable/global-colors', ( value, colorObject ) => {
 	if ( colorObject && colorObject.slug.includes( 'stk-global-color' ) ) {
-		return `var(--${ colorObject.slug }, ${ colorObject.color })`
+		return `var(--${ colorObject.slug })`
 	}
 
 	return value

From 5c9b994c611c11fc99df37ce9f27a470beb11108 Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Mon, 23 Sep 2024 15:53:13 +0800
Subject: [PATCH 03/18] chore: updated Freemius SDK to 2.8.1

---
 freemius/assets/css/admin/account.css         |   2 +-
 freemius/assets/css/admin/common.css          |   2 +-
 freemius/assets/css/admin/dialog-boxes.css    |   2 +-
 freemius/includes/class-freemius.php          | 510 +++---------------
 freemius/includes/class-fs-logger.php         |  17 +-
 freemius/includes/class-fs-plugin-updater.php |  57 +-
 freemius/includes/class-fs-storage.php        |   1 +
 .../entities/class-fs-plugin-plan.php         |   8 +
 freemius/includes/entities/class-fs-site.php  |   5 +-
 freemius/includes/entities/class-fs-user.php  |   2 +-
 .../managers/class-fs-clone-manager.php       |   2 +-
 .../managers/class-fs-debug-manager.php       | 508 +++++++++++++++++
 freemius/require.php                          |   1 +
 freemius/start.php                            |   2 +-
 freemius/templates/account.php                |   2 +-
 freemius/templates/debug.php                  |  65 ++-
 16 files changed, 730 insertions(+), 456 deletions(-)
 create mode 100644 freemius/includes/managers/class-fs-debug-manager.php

diff --git a/freemius/assets/css/admin/account.css b/freemius/assets/css/admin/account.css
index c9f5abd71..6e0feb487 100755
--- a/freemius/assets/css/admin/account.css
+++ b/freemius/assets/css/admin/account.css
@@ -1 +1 @@
-label.fs-tag,span.fs-tag{background:#ffba00;border-radius:3px;color:#fff;display:inline-block;font-size:11px;line-height:11px;padding:5px;vertical-align:baseline}label.fs-tag.fs-warn,span.fs-tag.fs-warn{background:#ffba00}label.fs-tag.fs-info,span.fs-tag.fs-info{background:#00a0d2}label.fs-tag.fs-success,span.fs-tag.fs-success{background:#46b450}label.fs-tag.fs-error,span.fs-tag.fs-error{background:#dc3232}.fs-notice[data-id=license_not_whitelabeled].success,.fs-notice[data-id=license_whitelabeled].success{border-left-color:#00a0d2;color:inherit}.fs-notice[data-id=license_not_whitelabeled].success label.fs-plugin-title,.fs-notice[data-id=license_whitelabeled].success label.fs-plugin-title{display:none}#fs_account .postbox,#fs_account .widefat{max-width:800px}#fs_account h3{border-bottom:1px solid #f1f1f1;font-size:1.3em;line-height:1.4;margin:0 0 12px;padding:12px 15px}#fs_account h3 .dashicons{font-size:1.3em;height:26px;width:26px}#fs_account i.dashicons{font-size:1.2em;height:1.2em;width:1.2em}#fs_account .dashicons{vertical-align:middle}#fs_account .fs-header-actions{font-size:.9em;position:absolute;right:15px;top:17px}#fs_account .fs-header-actions ul{margin:0}#fs_account .fs-header-actions li{float:left}#fs_account .fs-header-actions li form{display:inline-block}#fs_account .fs-header-actions li a{text-decoration:none}#fs_account_details .button-group{float:right}.rtl #fs_account .fs-header-actions{left:15px;right:auto}.fs-key-value-table{width:100%}.fs-key-value-table form{display:inline-block}.fs-key-value-table tr td:first-child{text-align:right}.fs-key-value-table tr td:first-child nobr{font-weight:700}.fs-key-value-table tr td:first-child form{display:block}.fs-key-value-table tr td.fs-right{text-align:right}.fs-key-value-table tr.fs-odd{background:#ebebeb}.fs-key-value-table td,.fs-key-value-table th{padding:10px}.fs-key-value-table code{line-height:28px}.fs-key-value-table code,.fs-key-value-table input[type=text],.fs-key-value-table var{background:none;color:#0073aa;font-size:16px}.fs-key-value-table input[type=text]{font-weight:700;width:100%}.fs-field-beta_program label{margin-left:7px}label.fs-tag{border-radius:3px;color:#fff;display:inline-block;font-size:11px;line-height:11px;padding:5px;vertical-align:baseline}label.fs-tag,label.fs-tag.fs-warn{background:#ffba00}label.fs-tag.fs-success{background:#46b450}label.fs-tag.fs-error{background:#dc3232}#fs_sites .fs-scrollable-table .fs-table-body{border:1px solid #e5e5e5;max-height:200px;overflow:auto}#fs_sites .fs-scrollable-table .fs-table-body>table.widefat{border:none!important}#fs_sites .fs-scrollable-table .fs-main-column{width:100%}#fs_sites .fs-scrollable-table .fs-site-details td:first-of-type{color:gray;text-align:right;width:1px}#fs_sites .fs-scrollable-table .fs-site-details td:last-of-type{text-align:right}#fs_sites .fs-scrollable-table .fs-install-details table tr td{white-space:nowrap;width:1px}#fs_sites .fs-scrollable-table .fs-install-details table tr td:last-of-type{width:auto}#fs_addons h3{border:none;margin-bottom:0;padding:4px 5px}#fs_addons td{vertical-align:middle}#fs_addons thead{white-space:nowrap}#fs_addons td:first-child,#fs_addons th:first-child{font-weight:700;text-align:left}#fs_addons td:last-child,#fs_addons th:last-child{text-align:right}#fs_addons th{font-weight:700}#fs_billing_address{width:100%}#fs_billing_address tr td{padding:5px;width:50%}#fs_billing_address tr:first-of-type td{padding-top:0}#fs_billing_address span{font-weight:700}#fs_billing_address input,#fs_billing_address select{display:block;margin-top:5px;width:100%}#fs_billing_address input::-moz-placeholder,#fs_billing_address select::-moz-placeholder{color:transparent;opacity:1}#fs_billing_address input:-ms-input-placeholder,#fs_billing_address select:-ms-input-placeholder{color:transparent}#fs_billing_address input::-webkit-input-placeholder,#fs_billing_address select::-webkit-input-placeholder{color:transparent}#fs_billing_address input.fs-read-mode,#fs_billing_address select.fs-read-mode{background:none;border-color:transparent;border-bottom:1px dashed #ccc;color:#777;padding-left:0}#fs_billing_address.fs-read-mode td span{display:none}#fs_billing_address.fs-read-mode input,#fs_billing_address.fs-read-mode select{background:none;border-color:transparent;border-bottom:1px dashed #ccc;color:#777;padding-left:0}#fs_billing_address.fs-read-mode input::-moz-placeholder,#fs_billing_address.fs-read-mode select::-moz-placeholder{color:#ccc;opacity:1}#fs_billing_address.fs-read-mode input:-ms-input-placeholder,#fs_billing_address.fs-read-mode select:-ms-input-placeholder{color:#ccc}#fs_billing_address.fs-read-mode input::-webkit-input-placeholder,#fs_billing_address.fs-read-mode select::-webkit-input-placeholder{color:#ccc}#fs_billing_address button{display:block;width:100%}@media screen and (max-width:639px){#fs_account .fs-header-actions{margin:0 0 12px;padding:0 15px 12px;position:static}#fs_account .fs-header-actions li{display:inline-block;float:none}#fs_account #fs_account_details,#fs_account #fs_account_details tbody,#fs_account #fs_account_details td,#fs_account #fs_account_details th,#fs_account #fs_account_details tr{display:block}#fs_account #fs_account_details tr td:first-child{text-align:left}#fs_account #fs_account_details tr td:nth-child(2){padding:0 12px}#fs_account #fs_account_details tr td:nth-child(2) code{margin:0;padding:0}#fs_account #fs_account_details tr td:nth-child(2) label{margin-left:0}#fs_account #fs_account_details tr td:nth-child(3){text-align:left}#fs_account #fs_account_details tr.fs-field-plan td:nth-child(2) .button-group{float:none;margin:12px 0}}
\ No newline at end of file
+label.fs-tag,span.fs-tag{background:#ffba00;border-radius:3px;color:#fff;display:inline-block;font-size:11px;line-height:11px;padding:5px;vertical-align:baseline}label.fs-tag.fs-warn,span.fs-tag.fs-warn{background:#ffba00}label.fs-tag.fs-info,span.fs-tag.fs-info{background:#00a0d2}label.fs-tag.fs-success,span.fs-tag.fs-success{background:#46b450}label.fs-tag.fs-error,span.fs-tag.fs-error{background:#dc3232}.fs-notice[data-id=license_not_whitelabeled].success,.fs-notice[data-id=license_whitelabeled].success{border-left-color:#00a0d2;color:inherit}.fs-notice[data-id=license_not_whitelabeled].success label.fs-plugin-title,.fs-notice[data-id=license_whitelabeled].success label.fs-plugin-title{display:none}#fs_account .postbox,#fs_account .widefat{max-width:800px}#fs_account h3{border-bottom:1px solid #f1f1f1;font-size:1.3em;line-height:1.4;margin:0 0 12px;padding:12px 15px}#fs_account h3 .dashicons{font-size:1.3em;height:26px;width:26px}#fs_account i.dashicons{font-size:1.2em;height:1.2em;width:1.2em}#fs_account .dashicons{vertical-align:middle}#fs_account .fs-header-actions{font-size:.9em;position:absolute;right:15px;top:17px}#fs_account .fs-header-actions ul{margin:0}#fs_account .fs-header-actions li{float:left}#fs_account .fs-header-actions li form{display:inline-block}#fs_account .fs-header-actions li a{text-decoration:none}#fs_account_details .button-group{float:right}.rtl #fs_account .fs-header-actions{left:15px;right:auto}.fs-key-value-table{width:100%}.fs-key-value-table form{display:inline-block}.fs-key-value-table tr td:first-child{text-align:right}.fs-key-value-table tr td:first-child nobr{font-weight:700}.fs-key-value-table tr td:first-child form{display:block}.fs-key-value-table tr td.fs-right{text-align:right}.fs-key-value-table tr.fs-odd{background:#ebebeb}.fs-key-value-table td,.fs-key-value-table th{padding:10px}.fs-key-value-table code{line-height:28px}.fs-key-value-table code,.fs-key-value-table input[type=text],.fs-key-value-table var{background:none;color:#0073aa;font-size:16px}.fs-key-value-table input[type=text]{font-weight:700;width:100%}.fs-field-beta_program label{margin-left:7px}label.fs-tag{border-radius:3px;color:#fff;display:inline-block;font-size:11px;line-height:11px;padding:5px;vertical-align:baseline}label.fs-tag,label.fs-tag.fs-warn{background:#ffba00}label.fs-tag.fs-success{background:#46b450}label.fs-tag.fs-error{background:#dc3232}#fs_sites .fs-scrollable-table .fs-table-body{border:1px solid #e5e5e5;max-height:200px;overflow:auto}#fs_sites .fs-scrollable-table .fs-table-body>table.widefat{border:none!important}#fs_sites .fs-scrollable-table .fs-main-column{width:100%}#fs_sites .fs-scrollable-table .fs-site-details td:first-of-type{color:gray;text-align:right;width:1px}#fs_sites .fs-scrollable-table .fs-site-details td:last-of-type{text-align:right}#fs_sites .fs-scrollable-table .fs-install-details table tr td{white-space:nowrap;width:1px}#fs_sites .fs-scrollable-table .fs-install-details table tr td:last-of-type{width:auto}#fs_addons h3{border:none;margin-bottom:0;padding:4px 5px}#fs_addons td{vertical-align:middle}#fs_addons thead{white-space:nowrap}#fs_addons td:first-child,#fs_addons th:first-child{font-weight:700;text-align:left}#fs_addons td:last-child,#fs_addons th:last-child{text-align:right}#fs_addons th{font-weight:700}#fs_billing_address{width:100%}#fs_billing_address tr td{padding:5px;width:50%}#fs_billing_address tr:first-of-type td{padding-top:0}#fs_billing_address span{font-weight:700}#fs_billing_address input,#fs_billing_address select{display:block;margin-top:5px;width:100%}#fs_billing_address input::-moz-placeholder,#fs_billing_address select::-moz-placeholder{color:transparent}#fs_billing_address input::placeholder,#fs_billing_address select::placeholder{color:transparent}#fs_billing_address input.fs-read-mode,#fs_billing_address select.fs-read-mode{background:none;border-color:transparent;border-bottom:1px dashed #ccc;color:#777;padding-left:0}#fs_billing_address.fs-read-mode td span{display:none}#fs_billing_address.fs-read-mode input,#fs_billing_address.fs-read-mode select{background:none;border-color:transparent;border-bottom:1px dashed #ccc;color:#777;padding-left:0}#fs_billing_address.fs-read-mode input::-moz-placeholder,#fs_billing_address.fs-read-mode select::-moz-placeholder{color:#ccc}#fs_billing_address.fs-read-mode input::placeholder,#fs_billing_address.fs-read-mode select::placeholder{color:#ccc}#fs_billing_address button{display:block;width:100%}@media screen and (max-width:639px){#fs_account .fs-header-actions{margin:0 0 12px;padding:0 15px 12px;position:static}#fs_account .fs-header-actions li{display:inline-block;float:none}#fs_account #fs_account_details,#fs_account #fs_account_details tbody,#fs_account #fs_account_details td,#fs_account #fs_account_details th,#fs_account #fs_account_details tr{display:block}#fs_account #fs_account_details tr td:first-child{text-align:left}#fs_account #fs_account_details tr td:nth-child(2){padding:0 12px}#fs_account #fs_account_details tr td:nth-child(2) code{margin:0;padding:0}#fs_account #fs_account_details tr td:nth-child(2) label{margin-left:0}#fs_account #fs_account_details tr td:nth-child(3){text-align:left}#fs_account #fs_account_details tr.fs-field-plan td:nth-child(2) .button-group{float:none;margin:12px 0}}
\ No newline at end of file
diff --git a/freemius/assets/css/admin/common.css b/freemius/assets/css/admin/common.css
index fae281017..a005ed46e 100755
--- a/freemius/assets/css/admin/common.css
+++ b/freemius/assets/css/admin/common.css
@@ -1 +1 @@
-.fs-badge{background:#71ae00;border-radius:3px 0 0 3px;border-right:0;box-shadow:0 2px 1px -1px rgba(0,0,0,.3);color:#fff;font-weight:700;padding:5px 10px;position:absolute;right:0;text-transform:uppercase;top:10px}.theme-browser .theme .fs-premium-theme-badge-container{position:absolute;right:0;top:0}.theme-browser .theme .fs-premium-theme-badge-container .fs-badge{margin-top:10px;position:relative;text-align:center;top:0}.theme-browser .theme .fs-premium-theme-badge-container .fs-badge.fs-premium-theme-badge{font-size:1.1em}.theme-browser .theme .fs-premium-theme-badge-container .fs-badge.fs-beta-theme-badge{background:#00a0d2}.fs-switch{background:#ececec;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.1),inset 0 1px 3px 0 rgba(0,0,0,.1);color:#ccc;cursor:pointer;display:inline-block;height:18px;padding:6px 6px 5px;position:relative;text-shadow:0 1px 1px hsla(0,0%,100%,.8)}.fs-switch span{display:inline-block;text-transform:uppercase;width:35px}.fs-switch .fs-toggle{background-color:#fff;background-image:linear-gradient(180deg,#ececec,#fff);border:1px solid rgba(0,0,0,.3);border-radius:4px;box-shadow:inset 0 1px 0 0 hsla(0,0%,100%,.5);height:25px;position:absolute;top:1px;transition:.4s cubic-bezier(.54,1.6,.5,1);width:37px;z-index:999}.fs-switch.fs-off .fs-toggle{left:2%}.fs-switch.fs-on .fs-toggle{left:54%}.fs-switch.fs-round{border-radius:24px;padding:4px 25px;top:8px}.fs-switch.fs-round .fs-toggle{border-radius:24px;height:24px;top:0;width:24px}.fs-switch.fs-round.fs-off .fs-toggle{left:-1px}.fs-switch.fs-round.fs-on{background:#0085ba}.fs-switch.fs-round.fs-on .fs-toggle{left:25px}.fs-switch.fs-small.fs-round{padding:1px 19px}.fs-switch.fs-small.fs-round .fs-toggle{border-radius:18px;height:18px;top:0;width:18px}.fs-switch.fs-small.fs-round.fs-on .fs-toggle{left:19px}body.fs-loading,body.fs-loading *{cursor:wait!important}#fs_frame{font-size:0;line-height:0}.fs-full-size-wrapper{margin:40px 0 -65px -20px}@media(max-width:600px){.fs-full-size-wrapper{margin:0 0 -65px -10px}}.fs-notice{position:relative}.fs-notice.fs-has-title{margin-bottom:30px!important}.fs-notice.success{color:green}.fs-notice.promotion{background-color:#f2fcff!important;border-color:#00a0d2!important}.fs-notice .fs-notice-body{margin:.5em 0;padding:2px}.fs-notice .fs-close{color:#aaa;cursor:pointer;float:right}.fs-notice .fs-close:hover{color:#666}.fs-notice .fs-close>*{display:inline-block;margin-top:7px}.fs-notice label.fs-plugin-title{background:rgba(0,0,0,.3);border-radius:0 0 3px 3px;bottom:auto;color:#fff;cursor:auto;font-size:12px;font-weight:700;left:10px;padding:2px 10px;position:absolute;right:auto;top:100%}div.fs-notice.promotion,div.fs-notice.success,div.fs-notice.updated{display:block!important}#fs_connect .fs-error .fs-api-request-error-details,#fs_connect .fs-error .fs-api-request-error-show-details-link,#fs_connect .fs-error ol,.fs-modal .notice-error .fs-api-request-error-details,.fs-modal .notice-error .fs-api-request-error-show-details-link,.fs-modal .notice-error ol,.fs-notice.error .fs-api-request-error-details,.fs-notice.error .fs-api-request-error-show-details-link,.fs-notice.error ol{text-align:left}#fs_connect .fs-error ol,.fs-modal .notice-error ol,.fs-notice.error ol{list-style-type:disc}#fs_connect .fs-error .fs-api-request-error-show-details-link,.fs-modal .notice-error .fs-api-request-error-show-details-link,.fs-notice.error .fs-api-request-error-show-details-link{box-shadow:none;color:#2271b1;text-decoration:none}#fs_connect .fs-error .fs-api-request-error-details,.fs-modal .notice-error .fs-api-request-error-details,.fs-notice.error .fs-api-request-error-details{border:1px solid #ccc;max-height:150px;overflow:auto;padding:5px}.rtl .fs-notice .fs-close{float:left}.fs-secure-notice{background:#ebfdeb;box-shadow:0 2px 2px rgba(6,113,6,.3);color:green;filter:alpha(opacity=95);left:160px;opacity:.95;padding:10px 20px;position:fixed;right:0;top:32px;z-index:9999}.fs-secure-notice:hover{filter:alpha(opacity=100);opacity:1}.fs-secure-notice a.fs-security-proof{color:green;text-decoration:none}@media screen and (max-width:960px){.fs-secure-notice{left:36px}}@media screen and (max-width:600px){.fs-secure-notice{display:none}}@media screen and (max-width:1250px){#fs_promo_tab{display:none}}@media screen and (max-width:782px){.fs-secure-notice{left:0;text-align:center;top:46px}}span.fs-submenu-item.fs-sub:before{content:"↳";padding:0 5px}.rtl span.fs-submenu-item.fs-sub:before{content:"↲"}.fs-submenu-item.pricing.upgrade-mode{color:#adff2f}.fs-submenu-item.pricing.trial-mode{color:#83e2ff}#adminmenu .update-plugins.fs-trial{background-color:#00b9eb}.fs-ajax-spinner{background:url(/wp-admin/images/wpspin_light-2x.gif);background-size:contain;border:0;display:inline-block;height:20px;margin-bottom:-2px;margin-right:5px;vertical-align:sub;width:20px}.wrap.fs-section h2{text-align:left}.plugins p.fs-upgrade-notice{background-color:#d54e21;border:0;color:#f9f9f9;margin-top:10px;padding:10px}
\ No newline at end of file
+.fs-badge{background:#71ae00;border-radius:3px 0 0 3px;border-right:0;box-shadow:0 2px 1px -1px rgba(0,0,0,.3);color:#fff;font-weight:700;padding:5px 10px;position:absolute;right:0;text-transform:uppercase;top:10px}.theme-browser .theme .fs-premium-theme-badge-container{position:absolute;right:0;top:0}.theme-browser .theme .fs-premium-theme-badge-container .fs-badge{margin-top:10px;position:relative;text-align:center;top:0}.theme-browser .theme .fs-premium-theme-badge-container .fs-badge.fs-premium-theme-badge{font-size:1.1em}.theme-browser .theme .fs-premium-theme-badge-container .fs-badge.fs-beta-theme-badge{background:#00a0d2}.fs-switch{background:#ececec;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.1),inset 0 1px 3px 0 rgba(0,0,0,.1);color:#ccc;cursor:pointer;display:inline-block;height:18px;padding:6px 6px 5px;position:relative;text-shadow:0 1px 1px hsla(0,0%,100%,.8)}.fs-switch span{display:inline-block;text-transform:uppercase;width:35px}.fs-switch .fs-toggle{background-color:#fff;background-image:linear-gradient(180deg,#ececec,#fff);border:1px solid rgba(0,0,0,.3);border-radius:4px;box-shadow:inset 0 1px 0 0 hsla(0,0%,100%,.5);height:25px;position:absolute;top:1px;transition:.4s cubic-bezier(.54,1.6,.5,1);width:37px;z-index:999}.fs-switch.fs-off .fs-toggle{left:2%}.fs-switch.fs-on .fs-toggle{left:54%}.fs-switch.fs-round{border-radius:24px;padding:4px 25px;top:8px}.fs-switch.fs-round .fs-toggle{border-radius:24px;height:24px;top:0;width:24px}.fs-switch.fs-round.fs-off .fs-toggle{left:-1px}.fs-switch.fs-round.fs-on{background:#0085ba}.fs-switch.fs-round.fs-on .fs-toggle{left:25px}.fs-switch.fs-small.fs-round{padding:1px 19px}.fs-switch.fs-small.fs-round .fs-toggle{border-radius:18px;height:18px;top:0;width:18px}.fs-switch.fs-small.fs-round.fs-on .fs-toggle{left:19px}body.fs-loading,body.fs-loading *{cursor:wait!important}#fs_frame{font-size:0;line-height:0}.fs-full-size-wrapper{margin:40px 0 -65px -20px}@media(max-width:600px){.fs-full-size-wrapper{margin:0 0 -65px -10px}}.fs-notice{position:relative}.fs-notice.fs-has-title{margin-bottom:30px!important}.fs-notice.success{color:green}.fs-notice.promotion{background-color:#f2fcff!important;border-color:#00a0d2!important}.fs-notice .fs-notice-body{margin:.5em 0;padding:2px}.fs-notice .fs-close{color:#aaa;cursor:pointer;float:right}.fs-notice .fs-close:hover{color:#666}.fs-notice .fs-close>*{display:inline-block;margin-top:7px}.fs-notice label.fs-plugin-title{background:rgba(0,0,0,.3);border-radius:0 0 3px 3px;bottom:auto;color:#fff;cursor:auto;font-size:12px;font-weight:700;left:10px;padding:2px 10px;position:absolute;right:auto;top:100%}div.fs-notice.promotion,div.fs-notice.success,div.fs-notice.updated{display:block!important}#fs_connect .fs-error .fs-api-request-error-details,#fs_connect .fs-error .fs-api-request-error-show-details-link,#fs_connect .fs-error ol,.fs-modal .notice-error .fs-api-request-error-details,.fs-modal .notice-error .fs-api-request-error-show-details-link,.fs-modal .notice-error ol,.fs-notice.error .fs-api-request-error-details,.fs-notice.error .fs-api-request-error-show-details-link,.fs-notice.error ol{text-align:left}#fs_connect .fs-error ol,.fs-modal .notice-error ol,.fs-notice.error ol{list-style-type:disc}#fs_connect .fs-error .fs-api-request-error-show-details-link,.fs-modal .notice-error .fs-api-request-error-show-details-link,.fs-notice.error .fs-api-request-error-show-details-link{box-shadow:none;color:#2271b1;text-decoration:none}#fs_connect .fs-error .fs-api-request-error-details,.fs-modal .notice-error .fs-api-request-error-details,.fs-notice.error .fs-api-request-error-details{border:1px solid #ccc;max-height:150px;overflow:auto;padding:5px}.rtl .fs-notice .fs-close{float:left}.fs-secure-notice{background:#ebfdeb;box-shadow:0 2px 2px rgba(6,113,6,.3);color:green;left:160px;opacity:.95;padding:10px 20px;position:fixed;right:0;top:32px;z-index:9989}.fs-secure-notice:hover{opacity:1}.fs-secure-notice a.fs-security-proof{color:green;text-decoration:none}@media screen and (max-width:960px){.fs-secure-notice{left:36px}}@media screen and (max-width:600px){.fs-secure-notice{display:none}}@media screen and (max-width:1250px){#fs_promo_tab{display:none}}@media screen and (max-width:782px){.fs-secure-notice{left:0;text-align:center;top:46px}}span.fs-submenu-item.fs-sub:before{content:"↳";padding:0 5px}.rtl span.fs-submenu-item.fs-sub:before{content:"↲"}.fs-submenu-item.pricing.upgrade-mode{color:#adff2f}.fs-submenu-item.pricing.trial-mode{color:#83e2ff}#adminmenu .update-plugins.fs-trial{background-color:#00b9eb}.fs-ajax-spinner{background:url(/wp-admin/images/wpspin_light-2x.gif);background-size:contain;border:0;display:inline-block;height:20px;margin-bottom:-2px;margin-right:5px;vertical-align:sub;width:20px}.wrap.fs-section h2{text-align:left}.plugins p.fs-upgrade-notice{background-color:#d54e21;border:0;color:#f9f9f9;margin-top:10px;padding:10px}
\ No newline at end of file
diff --git a/freemius/assets/css/admin/dialog-boxes.css b/freemius/assets/css/admin/dialog-boxes.css
index ff6dc13d6..562b7bb8a 100644
--- a/freemius/assets/css/admin/dialog-boxes.css
+++ b/freemius/assets/css/admin/dialog-boxes.css
@@ -1 +1 @@
-.fs-modal{background:rgba(0,0,0,.6);display:none;height:100%;overflow:auto;position:fixed;top:0;width:100%;z-index:100000}@media(min-width:961px){.fs-modal{padding-left:160px}.rtl .fs-modal{padding-left:0;padding-right:160px}}.fs-modal .dashicons{vertical-align:middle}.fs-modal .fs-modal-dialog{background:transparent;left:50%;margin-left:-298px;padding-bottom:30px;position:absolute;top:-100%;width:596px;z-index:100001}@media(max-width:650px){.fs-modal .fs-modal-dialog{box-sizing:border-box;margin-left:-50%;padding-left:10px;padding-right:10px;width:100%}.fs-modal .fs-modal-dialog .fs-modal-panel>h3>strong{font-size:1.3em}}.fs-modal.active,.fs-modal.active:before{display:block}.fs-modal.active .fs-modal-dialog{top:10%}.fs-modal.fs-success .fs-modal-header{border-bottom-color:#46b450}.fs-modal.fs-success .fs-modal-body{background-color:#f7fff7}.fs-modal.fs-warn .fs-modal-header{border-bottom-color:#ffb900}.fs-modal.fs-warn .fs-modal-body{background-color:#fff8e5}.fs-modal.fs-error .fs-modal-header{border-bottom-color:#dc3232}.fs-modal.fs-error .fs-modal-body{background-color:#ffeaea}.fs-modal .fs-modal-body,.fs-modal .fs-modal-footer{background:#fefefe;border:0;padding:20px}.fs-modal .fs-modal-header{background:#fbfbfb;border-bottom:1px solid #eee;margin-bottom:-10px;padding:15px 20px;position:relative}.fs-modal .fs-modal-header h4{color:#cacaca;font-size:1.2em;font-weight:700;letter-spacing:.6px;margin:0;padding:0;text-shadow:1px 1px 1px #fff;text-transform:uppercase;-webkit-font-smoothing:antialiased}.fs-modal .fs-modal-header .fs-close{border-radius:20px;color:#bbb;cursor:pointer;padding:3px;position:absolute;right:10px;top:12px;transition:all .2s ease-in-out}.fs-modal .fs-modal-header .fs-close:hover{background:#aaa;color:#fff}.fs-modal .fs-modal-header .fs-close .dashicons,.fs-modal .fs-modal-header .fs-close:hover .dashicons{text-decoration:none}.fs-modal .fs-modal-body{border-bottom:0}.fs-modal .fs-modal-body p{font-size:14px}.fs-modal .fs-modal-body h2{font-size:20px;line-height:1.5em}.fs-modal .fs-modal-body>div{margin-top:10px}.fs-modal .fs-modal-body>div h2{font-size:20px;font-weight:700;margin-top:0}.fs-modal .fs-modal-footer{border-top:1px solid #eee;text-align:right}.fs-modal .fs-modal-footer>.button{margin:0 7px}.fs-modal .fs-modal-footer>.button:last-of-type{margin:0}.fs-modal .fs-modal-panel>.notice.inline{display:none;margin:0}.fs-modal .fs-modal-panel:not(.active){display:none}.rtl .fs-modal .fs-modal-header .fs-close{left:20px;right:auto}.rtl .fs-modal .fs-modal-footer{text-align:left}body.has-fs-modal{overflow:hidden}.fs-modal.fs-modal-deactivation-feedback .internal-message,.fs-modal.fs-modal-deactivation-feedback .reason-input{margin:3px 0 3px 22px}.fs-modal.fs-modal-deactivation-feedback .internal-message input,.fs-modal.fs-modal-deactivation-feedback .internal-message textarea,.fs-modal.fs-modal-deactivation-feedback .reason-input input,.fs-modal.fs-modal-deactivation-feedback .reason-input textarea{width:100%}.fs-modal.fs-modal-deactivation-feedback li.reason.has-internal-message .internal-message{border:1px solid #ccc;display:none;padding:7px}@media(max-width:650px){.fs-modal.fs-modal-deactivation-feedback li.reason li.reason{margin-bottom:10px}.fs-modal.fs-modal-deactivation-feedback li.reason li.reason .internal-message,.fs-modal.fs-modal-deactivation-feedback li.reason li.reason .reason-input{margin-left:29px}.fs-modal.fs-modal-deactivation-feedback li.reason li.reason label{display:table}.fs-modal.fs-modal-deactivation-feedback li.reason li.reason label>span{display:table-cell;font-size:1.3em}}.fs-modal.fs-modal-deactivation-feedback .anonymous-feedback-label,.fs-modal.fs-modal-deactivation-feedback .feedback-from-snooze-label{float:left;line-height:30px}.rtl .fs-modal.fs-modal-deactivation-feedback .anonymous-feedback-label,.rtl .fs-modal.fs-modal-deactivation-feedback .feedback-from-snooze-label{float:right}.fs-modal.fs-modal-deactivation-feedback .fs-modal-panel{margin-top:0!important}.fs-modal.fs-modal-deactivation-feedback .fs-modal-panel h3{font-size:16px;line-height:1.5em;margin-bottom:0;margin-top:10px}#the-list .deactivate>.fs-slug{display:none}.fs-modal.fs-modal-subscription-cancellation .fs-price-increase-warning{color:red;font-weight:700;margin-bottom:0;padding:0 25px}.fs-modal.fs-modal-subscription-cancellation ul.subscription-actions label input{float:left;position:relative;top:5px}.rtl .fs-modal.fs-modal-subscription-cancellation ul.subscription-actions label input{float:right}.fs-modal.fs-modal-subscription-cancellation ul.subscription-actions label span{display:block;margin-left:24px}.rtl .fs-modal.fs-modal-subscription-cancellation ul.subscription-actions label span{margin-left:0;margin-right:24px}.fs-license-options-container table,.fs-license-options-container table .fs-available-license-key,.fs-license-options-container table select,.fs-modal.fs-modal-license-activation .fs-modal-body input.fs-license-key{width:100%}.fs-license-options-container table td:first-child{width:1%}.fs-license-options-container table .fs-other-license-key-container label{float:left;margin-right:5px;position:relative;top:6px}.fs-license-options-container table .fs-other-license-key-container div{display:block;height:30px;overflow:hidden;position:relative;top:2px;width:auto}.fs-license-options-container table .fs-other-license-key-container div input{margin:0}.fs-sites-list-container td{cursor:pointer}.fs-modal.fs-modal-user-change .fs-modal-body input#fs_other_email_address{width:100%}.fs-user-change-options-container table{border-collapse:collapse;width:100%}.fs-user-change-options-container table tr{display:block;margin-bottom:2px}.fs-user-change-options-container table .fs-email-address-container td{display:inline-block}.fs-user-change-options-container table .fs-email-address-container input[type=radio]{margin-bottom:0;margin-top:0}.fs-user-change-options-container table .fs-other-email-address-container{width:100%}.fs-user-change-options-container table .fs-other-email-address-container>div{display:table;width:100%}.fs-user-change-options-container table .fs-other-email-address-container>div label,.fs-user-change-options-container table .fs-other-email-address-container>div>div{display:table-cell}.fs-user-change-options-container table .fs-other-email-address-container>div label{padding-left:3px;padding-right:3px;width:1%}.fs-user-change-options-container table .fs-other-email-address-container>div>div{width:auto}.fs-modal.fs-modal-developer-license-debug-mode .fs-modal-body input.fs-license-or-user-key,.fs-user-change-options-container table .fs-other-email-address-container>div>div input{width:100%}.fs-multisite-options-container{border:1px solid #ccc;margin-top:20px;padding:5px}.fs-multisite-options-container a{text-decoration:none}.fs-multisite-options-container a:focus{box-shadow:none}.fs-multisite-options-container a.selected{font-weight:700}.fs-multisite-options-container.fs-apply-on-all-sites{border:0;padding:0}.fs-multisite-options-container.fs-apply-on-all-sites .fs-all-sites-options{border-spacing:0}.fs-multisite-options-container.fs-apply-on-all-sites .fs-all-sites-options td:not(:first-child){display:none}.fs-multisite-options-container .fs-sites-list-container{display:none;overflow:auto}.fs-multisite-options-container .fs-sites-list-container table td{border-top:1px solid #ccc;padding:4px 2px}.fs-modal.fs-modal-license-key-resend .email-address-container{overflow:hidden;padding-right:2px}.fs-modal.fs-modal-license-key-resend.fs-freemium input.email-address{width:300px}.fs-modal.fs-modal-license-key-resend.fs-freemium label{display:block;margin-bottom:10px}.fs-modal.fs-modal-license-key-resend.fs-premium input.email-address{width:100%}.fs-modal.fs-modal-license-key-resend.fs-premium .button-container{float:right;margin-left:7px}@media(max-width:650px){.fs-modal.fs-modal-license-key-resend.fs-premium .button-container{margin-top:2px}}.rtl .fs-modal.fs-modal-license-key-resend .fs-modal-body .input-container>.email-address-container{padding-left:2px;padding-right:0}.rtl .fs-modal.fs-modal-license-key-resend .fs-modal-body .button-container{float:left;margin-left:0;margin-right:7px}a.show-license-resend-modal{display:inline-block;margin-top:4px}.fs-modal.fs-modal-email-address-update .fs-modal-body input[type=text]{width:100%}.fs-modal.fs-modal-email-address-update p{margin-bottom:0}.fs-modal.fs-modal-email-address-update ul{margin:1em .5em}.fs-modal.fs-modal-email-address-update ul li label span{float:left;margin-top:0}.fs-modal.fs-modal-email-address-update ul li label span:last-child{display:block;float:none;margin-left:20px}.fs-ajax-loader{height:20px;margin:auto;position:relative;width:170px}.fs-ajax-loader .fs-ajax-loader-bar{animation-direction:normal;animation-duration:1.5s;animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-name:bounce_ajaxLoader;background-color:#0074a3;height:20px;position:absolute;top:0;transform:.3;width:20px}.fs-ajax-loader .fs-ajax-loader-bar-1{animation-delay:.6s;-o-animation-delay:.6s;-ms-animation-delay:.6s;-webkit-animation-delay:.6s;-moz-animation-delay:.6s;left:0}.fs-ajax-loader .fs-ajax-loader-bar-2{animation-delay:.75s;-o-animation-delay:.75s;-ms-animation-delay:.75s;-webkit-animation-delay:.75s;-moz-animation-delay:.75s;left:19px}.fs-ajax-loader .fs-ajax-loader-bar-3{animation-delay:.9s;-o-animation-delay:.9s;-ms-animation-delay:.9s;-webkit-animation-delay:.9s;-moz-animation-delay:.9s;left:38px}.fs-ajax-loader .fs-ajax-loader-bar-4{animation-delay:1.05s;-o-animation-delay:1.05s;-ms-animation-delay:1.05s;-webkit-animation-delay:1.05s;-moz-animation-delay:1.05s;left:57px}.fs-ajax-loader .fs-ajax-loader-bar-5{animation-delay:1.2s;-o-animation-delay:1.2s;-ms-animation-delay:1.2s;-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;left:76px}.fs-ajax-loader .fs-ajax-loader-bar-6{animation-delay:1.35s;-o-animation-delay:1.35s;-ms-animation-delay:1.35s;-webkit-animation-delay:1.35s;-moz-animation-delay:1.35s;left:95px}.fs-ajax-loader .fs-ajax-loader-bar-7{animation-delay:1.5s;-o-animation-delay:1.5s;-ms-animation-delay:1.5s;-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;left:114px}.fs-ajax-loader .fs-ajax-loader-bar-8{animation-delay:1.65s;-o-animation-delay:1.65s;-ms-animation-delay:1.65s;-webkit-animation-delay:1.65s;-moz-animation-delay:1.65s;left:133px}@keyframes bounce_ajaxLoader{0%{background-color:#0074a3;transform:scale(1)}to{background-color:#fff;transform:scale(.3)}}.fs-modal-auto-install #request-filesystem-credentials-form .request-filesystem-credentials-action-buttons,.fs-modal-auto-install #request-filesystem-credentials-form h2{display:none}.fs-modal-auto-install #request-filesystem-credentials-form input[type=email],.fs-modal-auto-install #request-filesystem-credentials-form input[type=password],.fs-modal-auto-install #request-filesystem-credentials-form input[type=text]{-webkit-appearance:none;max-width:100%;padding:10px 10px 5px;width:300px}.fs-modal-auto-install #request-filesystem-credentials-form fieldset,.fs-modal-auto-install #request-filesystem-credentials-form label,.fs-modal-auto-install #request-filesystem-credentials-form>div{display:block;margin:0 auto;max-width:100%;width:300px}.button-primary.warn{background:#f56a48;border-color:#ec6544 #d2593c #d2593c;box-shadow:0 1px 0 #d2593c;text-shadow:0 -1px 1px #d2593c,1px 0 1px #d2593c,0 1px 1px #d2593c,-1px 0 1px #d2593c}.button-primary.warn:hover{background:#fd6d4a;border-color:#d2593c}.button-primary.warn:focus{box-shadow:0 1px 0 #dd6041,0 0 2px 1px #e4a796}.button-primary.warn:active{background:#dd6041;border-color:#d2593c;box-shadow:inset 0 2px 0 #d2593c}.button-primary.warn.disabled{background:#e76444!important;border-color:#d85e40!important;color:#f5b3a1!important;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}
\ No newline at end of file
+.fs-modal{background:rgba(0,0,0,.6);display:none;height:100%;overflow:auto;position:fixed;top:0;width:100%;z-index:100000}@media(min-width:961px){.fs-modal{padding-left:160px}.rtl .fs-modal{padding-left:0;padding-right:160px}}.fs-modal .dashicons{vertical-align:middle}.fs-modal .fs-modal-dialog{background:transparent;left:50%;margin-left:-298px;padding-bottom:30px;position:absolute;top:-100%;width:596px;z-index:100001}@media(max-width:650px){.fs-modal .fs-modal-dialog{box-sizing:border-box;margin-left:-50%;padding-left:10px;padding-right:10px;width:100%}.fs-modal .fs-modal-dialog .fs-modal-panel>h3>strong{font-size:1.3em}}.fs-modal.active,.fs-modal.active:before{display:block}.fs-modal.active .fs-modal-dialog{top:10%}.fs-modal.fs-success .fs-modal-header{border-bottom-color:#46b450}.fs-modal.fs-success .fs-modal-body{background-color:#f7fff7}.fs-modal.fs-warn .fs-modal-header{border-bottom-color:#ffb900}.fs-modal.fs-warn .fs-modal-body{background-color:#fff8e5}.fs-modal.fs-error .fs-modal-header{border-bottom-color:#dc3232}.fs-modal.fs-error .fs-modal-body{background-color:#ffeaea}.fs-modal .fs-modal-body,.fs-modal .fs-modal-footer{background:#fefefe;border:0;padding:20px}.fs-modal .fs-modal-header{background:#fbfbfb;border-bottom:1px solid #eee;margin-bottom:-10px;padding:15px 20px;position:relative}.fs-modal .fs-modal-header h4{color:#cacaca;font-size:1.2em;font-weight:700;letter-spacing:.6px;margin:0;padding:0;text-shadow:1px 1px 1px #fff;text-transform:uppercase;-webkit-font-smoothing:antialiased}.fs-modal .fs-modal-header .fs-close{border-radius:20px;color:#bbb;cursor:pointer;padding:3px;position:absolute;right:10px;top:12px;transition:all .2s ease-in-out}.fs-modal .fs-modal-header .fs-close:hover{background:#aaa;color:#fff}.fs-modal .fs-modal-header .fs-close .dashicons,.fs-modal .fs-modal-header .fs-close:hover .dashicons{text-decoration:none}.fs-modal .fs-modal-body{border-bottom:0}.fs-modal .fs-modal-body p{font-size:14px}.fs-modal .fs-modal-body h2{font-size:20px;line-height:1.5em}.fs-modal .fs-modal-body>div{margin-top:10px}.fs-modal .fs-modal-body>div h2{font-size:20px;font-weight:700;margin-top:0}.fs-modal .fs-modal-footer{border-top:1px solid #eee;text-align:right}.fs-modal .fs-modal-footer>.button{margin:0 7px}.fs-modal .fs-modal-footer>.button:last-of-type{margin:0}.fs-modal .fs-modal-panel>.notice.inline{display:none;margin:0}.fs-modal .fs-modal-panel:not(.active){display:none}.rtl .fs-modal .fs-modal-header .fs-close{left:20px;right:auto}.rtl .fs-modal .fs-modal-footer{text-align:left}body.has-fs-modal{overflow:hidden}.fs-modal.fs-modal-deactivation-feedback .internal-message,.fs-modal.fs-modal-deactivation-feedback .reason-input{margin:3px 0 3px 22px}.fs-modal.fs-modal-deactivation-feedback .internal-message input,.fs-modal.fs-modal-deactivation-feedback .internal-message textarea,.fs-modal.fs-modal-deactivation-feedback .reason-input input,.fs-modal.fs-modal-deactivation-feedback .reason-input textarea{width:100%}.fs-modal.fs-modal-deactivation-feedback li.reason.has-internal-message .internal-message{border:1px solid #ccc;display:none;padding:7px}@media(max-width:650px){.fs-modal.fs-modal-deactivation-feedback li.reason li.reason{margin-bottom:10px}.fs-modal.fs-modal-deactivation-feedback li.reason li.reason .internal-message,.fs-modal.fs-modal-deactivation-feedback li.reason li.reason .reason-input{margin-left:29px}.fs-modal.fs-modal-deactivation-feedback li.reason li.reason label{display:table}.fs-modal.fs-modal-deactivation-feedback li.reason li.reason label>span{display:table-cell;font-size:1.3em}}.fs-modal.fs-modal-deactivation-feedback .anonymous-feedback-label,.fs-modal.fs-modal-deactivation-feedback .feedback-from-snooze-label{float:left;line-height:30px}.rtl .fs-modal.fs-modal-deactivation-feedback .anonymous-feedback-label,.rtl .fs-modal.fs-modal-deactivation-feedback .feedback-from-snooze-label{float:right}.fs-modal.fs-modal-deactivation-feedback .fs-modal-panel{margin-top:0!important}.fs-modal.fs-modal-deactivation-feedback .fs-modal-panel h3{font-size:16px;line-height:1.5em;margin-bottom:0;margin-top:10px}#the-list .deactivate>.fs-slug{display:none}.fs-modal.fs-modal-subscription-cancellation .fs-price-increase-warning{color:red;font-weight:700;margin-bottom:0;padding:0 25px}.fs-modal.fs-modal-subscription-cancellation ul.subscription-actions label input{float:left;position:relative;top:5px}.rtl .fs-modal.fs-modal-subscription-cancellation ul.subscription-actions label input{float:right}.fs-modal.fs-modal-subscription-cancellation ul.subscription-actions label span{display:block;margin-left:24px}.rtl .fs-modal.fs-modal-subscription-cancellation ul.subscription-actions label span{margin-left:0;margin-right:24px}.fs-license-options-container table,.fs-license-options-container table .fs-available-license-key,.fs-license-options-container table select,.fs-modal.fs-modal-license-activation .fs-modal-body input.fs-license-key{width:100%}.fs-license-options-container table td:first-child{width:1%}.fs-license-options-container table .fs-other-license-key-container label{float:left;margin-right:5px;position:relative;top:6px}.fs-license-options-container table .fs-other-license-key-container div{display:block;height:30px;overflow:hidden;position:relative;top:2px;width:auto}.fs-license-options-container table .fs-other-license-key-container div input{margin:0}.fs-sites-list-container td{cursor:pointer}.fs-modal.fs-modal-user-change .fs-modal-body input#fs_other_email_address{width:100%}.fs-user-change-options-container table{border-collapse:collapse;width:100%}.fs-user-change-options-container table tr{display:block;margin-bottom:2px}.fs-user-change-options-container table .fs-email-address-container td{display:inline-block}.fs-user-change-options-container table .fs-email-address-container input[type=radio]{margin-bottom:0;margin-top:0}.fs-user-change-options-container table .fs-other-email-address-container{width:100%}.fs-user-change-options-container table .fs-other-email-address-container>div{display:table;width:100%}.fs-user-change-options-container table .fs-other-email-address-container>div label,.fs-user-change-options-container table .fs-other-email-address-container>div>div{display:table-cell}.fs-user-change-options-container table .fs-other-email-address-container>div label{padding-left:3px;padding-right:3px;width:1%}.fs-user-change-options-container table .fs-other-email-address-container>div>div{width:auto}.fs-modal.fs-modal-developer-license-debug-mode .fs-modal-body input.fs-license-or-user-key,.fs-user-change-options-container table .fs-other-email-address-container>div>div input{width:100%}.fs-multisite-options-container{border:1px solid #ccc;margin-top:20px;padding:5px}.fs-multisite-options-container a{text-decoration:none}.fs-multisite-options-container a:focus{box-shadow:none}.fs-multisite-options-container a.selected{font-weight:700}.fs-multisite-options-container.fs-apply-on-all-sites{border:0;padding:0}.fs-multisite-options-container.fs-apply-on-all-sites .fs-all-sites-options{border-spacing:0}.fs-multisite-options-container.fs-apply-on-all-sites .fs-all-sites-options td:not(:first-child){display:none}.fs-multisite-options-container .fs-sites-list-container{display:none;overflow:auto}.fs-multisite-options-container .fs-sites-list-container table td{border-top:1px solid #ccc;padding:4px 2px}.fs-modal.fs-modal-license-key-resend .email-address-container{overflow:hidden;padding-right:2px}.fs-modal.fs-modal-license-key-resend.fs-freemium input.email-address{width:300px}.fs-modal.fs-modal-license-key-resend.fs-freemium label{display:block;margin-bottom:10px}.fs-modal.fs-modal-license-key-resend.fs-premium input.email-address{width:100%}.fs-modal.fs-modal-license-key-resend.fs-premium .button-container{float:right;margin-left:7px}@media(max-width:650px){.fs-modal.fs-modal-license-key-resend.fs-premium .button-container{margin-top:2px}}.rtl .fs-modal.fs-modal-license-key-resend .fs-modal-body .input-container>.email-address-container{padding-left:2px;padding-right:0}.rtl .fs-modal.fs-modal-license-key-resend .fs-modal-body .button-container{float:left;margin-left:0;margin-right:7px}a.show-license-resend-modal{display:inline-block;margin-top:4px}.fs-modal.fs-modal-email-address-update .fs-modal-body input[type=text]{width:100%}.fs-modal.fs-modal-email-address-update p{margin-bottom:0}.fs-modal.fs-modal-email-address-update ul{margin:1em .5em}.fs-modal.fs-modal-email-address-update ul li label span{float:left;margin-top:0}.fs-modal.fs-modal-email-address-update ul li label span:last-child{display:block;float:none;margin-left:20px}.fs-ajax-loader{height:20px;margin:auto;position:relative;width:170px}.fs-ajax-loader .fs-ajax-loader-bar{animation-direction:normal;animation-duration:1.5s;animation-iteration-count:infinite;animation-name:bounce_ajaxLoader;background-color:#0074a3;height:20px;position:absolute;top:0;transform:scale(.3);width:20px}.fs-ajax-loader .fs-ajax-loader-bar-1{animation-delay:.6s;left:0}.fs-ajax-loader .fs-ajax-loader-bar-2{animation-delay:.75s;left:19px}.fs-ajax-loader .fs-ajax-loader-bar-3{animation-delay:.9s;left:38px}.fs-ajax-loader .fs-ajax-loader-bar-4{animation-delay:1.05s;left:57px}.fs-ajax-loader .fs-ajax-loader-bar-5{animation-delay:1.2s;left:76px}.fs-ajax-loader .fs-ajax-loader-bar-6{animation-delay:1.35s;left:95px}.fs-ajax-loader .fs-ajax-loader-bar-7{animation-delay:1.5s;left:114px}.fs-ajax-loader .fs-ajax-loader-bar-8{animation-delay:1.65s;left:133px}@keyframes bounce_ajaxLoader{0%{background-color:#0074a3;transform:scale(1)}to{background-color:#fff;transform:scale(.3)}}.fs-modal-auto-install #request-filesystem-credentials-form .request-filesystem-credentials-action-buttons,.fs-modal-auto-install #request-filesystem-credentials-form h2{display:none}.fs-modal-auto-install #request-filesystem-credentials-form input[type=email],.fs-modal-auto-install #request-filesystem-credentials-form input[type=password],.fs-modal-auto-install #request-filesystem-credentials-form input[type=text]{-webkit-appearance:none;max-width:100%;padding:10px 10px 5px;width:300px}.fs-modal-auto-install #request-filesystem-credentials-form fieldset,.fs-modal-auto-install #request-filesystem-credentials-form label,.fs-modal-auto-install #request-filesystem-credentials-form>div{display:block;margin:0 auto;max-width:100%;width:300px}.button-primary.warn{background:#f56a48;border-color:#ec6544 #d2593c #d2593c;box-shadow:0 1px 0 #d2593c;text-shadow:0 -1px 1px #d2593c,1px 0 1px #d2593c,0 1px 1px #d2593c,-1px 0 1px #d2593c}.button-primary.warn:hover{background:#fd6d4a;border-color:#d2593c}.button-primary.warn:focus{box-shadow:0 1px 0 #dd6041,0 0 2px 1px #e4a796}.button-primary.warn:active{background:#dd6041;border-color:#d2593c;box-shadow:inset 0 2px 0 #d2593c}.button-primary.warn.disabled{background:#e76444!important;border-color:#d85e40!important;color:#f5b3a1!important;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}
\ No newline at end of file
diff --git a/freemius/includes/class-freemius.php b/freemius/includes/class-freemius.php
index 347bc44d6..34b768f45 100755
--- a/freemius/includes/class-freemius.php
+++ b/freemius/includes/class-freemius.php
@@ -1257,7 +1257,7 @@ private static function migrate_accounts_to_network() {
          *
          * @return bool
          */
-        private static function set_network_upgrade_mode( FS_Storage $storage ) {
+        public static function set_network_upgrade_mode( FS_Storage $storage ) {
             return $storage->is_network_activation = true;
         }
 
@@ -1583,6 +1583,8 @@ private function register_constructor_hooks() {
             ) {
                 add_action( 'admin_init', array( &$this, 'connect_again' ) );
             }
+
+            FS_DebugManager::register_hooks();
         }
 
         /**
@@ -2701,7 +2703,7 @@ static function is_deactivation_snoozed() {
          * @author Vova Feldman (@svovaf)
          * @since  2.4.3
          */
-        private static function reset_deactivation_snoozing( $period = 0 ) {
+        public static function reset_deactivation_snoozing( $period = 0 ) {
             $value = ( 0 === $period ) ? null : 'true';
 
             if ( ! is_multisite() || fs_is_network_admin() ) {
@@ -3418,20 +3420,7 @@ private static function _load_required_static() {
 
             self::$_global_admin_notices = FS_Admin_Notices::instance( 'global' );
 
-            if ( ! WP_FS__DEMO_MODE ) {
-                add_action( ( fs_is_network_admin() ? 'network_' : '' ) . 'admin_menu', array(
-                    'Freemius',
-                    '_add_debug_section'
-                ) );
-            }
-
-            add_action( "wp_ajax_fs_toggle_debug_mode", array( 'Freemius', '_toggle_debug_mode' ) );
-
-            self::add_ajax_action_static( 'get_debug_log', array( 'Freemius', '_get_debug_log' ) );
-
-            self::add_ajax_action_static( 'get_db_option', array( 'Freemius', '_get_db_option' ) );
-
-            self::add_ajax_action_static( 'set_db_option', array( 'Freemius', '_set_db_option' ) );
+            FS_DebugManager::load_required_static();
 
             if ( 0 == did_action( 'plugins_loaded' ) ) {
                 add_action( 'plugins_loaded', array( 'Freemius', '_load_textdomain' ), 1 );
@@ -3458,6 +3447,14 @@ private static function _load_required_static() {
             self::$_statics_loaded = true;
         }
 
+        public static function get_static_logger() {
+            return self::$_static_logger;
+        }
+
+        public static function get_accounts() {
+            return self::$_accounts;
+        }
+
         #--------------------------------------------------------------------------------
         #region Clone
         #--------------------------------------------------------------------------------
@@ -3626,7 +3623,7 @@ function _handle_long_term_duplicate() {
          *
          * @since 2.1.3
          */
-        private static function migrate_options_to_network() {
+        public static function migrate_options_to_network() {
             self::migrate_accounts_to_network();
 
             // Migrate API options from site level to network level.
@@ -3666,325 +3663,6 @@ static function _load_textdomain() {
 
         #endregion
 
-        #----------------------------------------------------------------------------------
-        #region Debugging
-        #----------------------------------------------------------------------------------
-
-        /**
-         * @author Vova Feldman (@svovaf)
-         * @since  1.0.8
-         */
-        static function _add_debug_section() {
-            if ( ! is_super_admin() ) {
-                // Add debug page only for super-admins.
-                return;
-            }
-
-            self::$_static_logger->entrance();
-
-            $title = sprintf( '%s [v.%s]', fs_text_inline( 'Freemius Debug' ), WP_FS__SDK_VERSION );
-
-            if ( WP_FS__DEV_MODE ) {
-                // Add top-level debug menu item.
-                $hook = FS_Admin_Menu_Manager::add_page(
-                    $title,
-                    $title,
-                    'manage_options',
-                    'freemius',
-                    array( 'Freemius', '_debug_page_render' )
-                );
-            } else {
-                // Add hidden debug page.
-                $hook = FS_Admin_Menu_Manager::add_subpage(
-                    '',
-                    $title,
-                    $title,
-                    'manage_options',
-                    'freemius',
-                    array( 'Freemius', '_debug_page_render' )
-                );
-            }
-
-            if ( ! empty( $hook ) ) {
-                add_action( "load-$hook", array( 'Freemius', '_debug_page_actions' ) );
-            }
-        }
-
-        /**
-         * @author Vova Feldman (@svovaf)
-         * @since  1.1.7.3
-         */
-        static function _toggle_debug_mode() {
-            check_admin_referer( 'fs_toggle_debug_mode' );
-
-            if ( ! is_super_admin() ) {
-                return;
-            }
-
-            $is_on = fs_request_get( 'is_on', false, 'post' );
-
-            if ( fs_request_is_post() && in_array( $is_on, array( 0, 1 ) ) ) {
-                update_option( 'fs_debug_mode', $is_on );
-
-                // Turn on/off storage logging.
-                FS_Logger::_set_storage_logging( ( 1 == $is_on ) );
-            }
-
-            exit;
-        }
-
-        /**
-         * @author Vova Feldman (@svovaf)
-         * @since  1.2.1.6
-         */
-        static function _get_debug_log() {
-            check_admin_referer( 'fs_get_debug_log' );
-
-            if ( ! is_super_admin() ) {
-                return;
-            }
-
-            $limit  = min( ! empty( $_POST['limit'] ) ? absint( $_POST['limit'] ) : 200, 200 );
-            $offset = min( ! empty( $_POST['offset'] ) ? absint( $_POST['offset'] ) : 200, 200 );
-
-            $logs = FS_Logger::load_db_logs(
-                fs_request_get( 'filters', false, 'post' ),
-                $limit,
-                $offset
-            );
-
-            self::shoot_ajax_success( $logs );
-        }
-
-        /**
-         * @author Vova Feldman (@svovaf)
-         * @since  1.2.1.7
-         */
-        static function _get_db_option() {
-            check_admin_referer( 'fs_get_db_option' );
-
-            $option_name = fs_request_get( 'option_name' );
-
-            if ( ! is_super_admin() ||
-                 ! fs_starts_with( $option_name, 'fs_' )
-            ) {
-                self::shoot_ajax_failure();
-            }
-
-            $value = get_option( $option_name );
-
-            $result = array(
-                'name' => $option_name,
-            );
-
-            if ( false !== $value ) {
-                if ( ! is_string( $value ) ) {
-                    $value = json_encode( $value );
-                }
-
-                $result['value'] = $value;
-            }
-
-            self::shoot_ajax_success( $result );
-        }
-
-        /**
-         * @author Vova Feldman (@svovaf)
-         * @since  1.2.1.7
-         */
-        static function _set_db_option() {
-            check_admin_referer( 'fs_set_db_option' );
-
-            $option_name = fs_request_get( 'option_name' );
-
-            if ( ! is_super_admin() ||
-                 ! fs_starts_with( $option_name, 'fs_' )
-            ) {
-                self::shoot_ajax_failure();
-            }
-
-            $option_value = fs_request_get_raw( 'option_value' );
-
-            if ( ! empty( $option_value ) ) {
-                update_option( $option_name, $option_value );
-            }
-
-            self::shoot_ajax_success();
-        }
-
-        /**
-         * @author Vova Feldman (@svovaf)
-         * @since  1.0.8
-         */
-        static function _debug_page_actions() {
-            self::_clean_admin_content_section();
-
-            if ( fs_request_is_action( 'restart_freemius' ) ) {
-                check_admin_referer( 'restart_freemius' );
-
-                if ( ! is_multisite() ) {
-                    // Clear accounts data.
-                    self::$_accounts->clear( null, true );
-                } else {
-                    $sites = self::get_sites();
-                    foreach ( $sites as $site ) {
-                        $blog_id = self::get_site_blog_id( $site );
-                        self::$_accounts->clear( $blog_id, true );
-                    }
-
-                    // Clear network level storage.
-                    self::$_accounts->clear( true, true );
-                }
-
-                // Clear SDK reference cache.
-                delete_option( 'fs_active_plugins' );
-            } else if ( fs_request_is_action( 'clear_updates_data' ) ) {
-                check_admin_referer( 'clear_updates_data' );
-
-                if ( ! is_multisite() ) {
-                    set_site_transient( 'update_plugins', null );
-                    set_site_transient( 'update_themes', null );
-                } else {
-                    $current_blog_id = get_current_blog_id();
-
-                    $sites = self::get_sites();
-                    foreach ( $sites as $site ) {
-                        switch_to_blog( self::get_site_blog_id( $site ) );
-
-                        set_site_transient( 'update_plugins', null );
-                        set_site_transient( 'update_themes', null );
-                    }
-
-                    switch_to_blog( $current_blog_id );
-                }
-            } else if ( fs_request_is_action( 'reset_deactivation_snoozing' ) ) {
-                check_admin_referer( 'reset_deactivation_snoozing' );
-
-                self::reset_deactivation_snoozing();
-            } else if ( fs_request_is_action( 'simulate_trial' ) ) {
-                check_admin_referer( 'simulate_trial' );
-
-                $fs = freemius( fs_request_get( 'module_id' ) );
-
-                // Update SDK install to at least 24 hours before.
-                $fs->_storage->install_timestamp = ( time() - WP_FS__TIME_24_HOURS_IN_SEC );
-                // Unset the trial shown timestamp.
-                unset( $fs->_storage->trial_promotion_shown );
-            } else if ( fs_request_is_action( 'simulate_network_upgrade' ) ) {
-                check_admin_referer( 'simulate_network_upgrade' );
-
-                $fs = freemius( fs_request_get( 'module_id' ) );
-
-                self::set_network_upgrade_mode( $fs->_storage );
-            } else if ( fs_request_is_action( 'delete_install' ) ) {
-                check_admin_referer( 'delete_install' );
-
-                self::_delete_site_by_slug(
-                    fs_request_get( 'slug' ),
-                    fs_request_get( 'module_type' ),
-                    true,
-                    fs_request_get( 'blog_id', null )
-                );
-            } else if ( fs_request_is_action( 'delete_user' ) ) {
-                check_admin_referer( 'delete_user' );
-
-                self::delete_user( fs_request_get( 'user_id' ) );
-            } else if ( fs_request_is_action( 'download_logs' ) ) {
-                check_admin_referer( 'download_logs' );
-
-                $download_url = FS_Logger::download_db_logs(
-                    fs_request_get( 'filters', false, 'post' )
-                );
-
-                if ( false === $download_url ) {
-                    wp_die( 'Oops... there was an error while generating the logs download file. Please try again and if it doesn\'t work contact support@freemius.com.' );
-                }
-
-                fs_redirect( $download_url );
-            } else if ( fs_request_is_action( 'migrate_options_to_network' ) ) {
-                check_admin_referer( 'migrate_options_to_network' );
-
-                self::migrate_options_to_network();
-            }
-        }
-
-        /**
-         * @author Leo Fajardo (@leorw)
-         * @since  2.5.0
-         * 
-         * @return array
-         */
-        static function get_all_modules_sites() {
-            self::$_static_logger->entrance();
-
-            $sites_by_type = array(
-                WP_FS__MODULE_TYPE_PLUGIN => array(),
-                WP_FS__MODULE_TYPE_THEME  => array(),
-            );
-
-            $module_types = array_keys( $sites_by_type );
-
-            if ( ! is_multisite() ) {
-                foreach ( $module_types as $type ) {
-                    $sites_by_type[ $type ] = self::get_all_sites( $type );
-
-                    foreach ( $sites_by_type[ $type ] as $slug => $install ) {
-                        $sites_by_type[ $type ][ $slug ] = array( $install );
-                    }
-                }
-            } else {
-                $sites = self::get_sites();
-
-                foreach ( $sites as $site ) {
-                    $blog_id = self::get_site_blog_id( $site );
-
-                    foreach ( $module_types as $type ) {
-                        $installs = self::get_all_sites( $type, $blog_id );
-
-                        foreach ( $installs as $slug => $install ) {
-                            if ( ! isset( $sites_by_type[ $type ][ $slug ] ) ) {
-                                $sites_by_type[ $type ][ $slug ] = array();
-                            }
-
-                            $install->blog_id = $blog_id;
-
-                            $sites_by_type[ $type ][ $slug ][] = $install;
-                        }
-
-                    }
-                }
-            }
-
-            return $sites_by_type;
-        }
-
-        /**
-         * @author Vova Feldman (@svovaf)
-         * @since  1.0.8
-         */
-        static function _debug_page_render() {
-            self::$_static_logger->entrance();
-
-            $all_modules_sites = self::get_all_modules_sites();
-
-            $licenses_by_module_type = self::get_all_licenses_by_module_type();
-
-            $vars = array(
-                'plugin_sites'    => $all_modules_sites[ WP_FS__MODULE_TYPE_PLUGIN ],
-                'theme_sites'     => $all_modules_sites[ WP_FS__MODULE_TYPE_THEME ],
-                'users'           => self::get_all_users(),
-                'addons'          => self::get_all_addons(),
-                'account_addons'  => self::get_all_account_addons(),
-                'plugin_licenses' => $licenses_by_module_type[ WP_FS__MODULE_TYPE_PLUGIN ],
-                'theme_licenses'  => $licenses_by_module_type[ WP_FS__MODULE_TYPE_THEME ]
-            );
-
-            fs_enqueue_local_style( 'fs_debug', '/admin/debug.css' );
-            fs_require_once_template( 'debug.php', $vars );
-        }
-
-        #endregion
-
         #----------------------------------------------------------------------------------
         #region Connectivity Issues
         #----------------------------------------------------------------------------------
@@ -7482,31 +7160,6 @@ static function _delete_site_by_slug( $slug, $module_type, $store = true, $blog_
             return $install_id;
         }
 
-        /**
-         * Delete user.
-         *
-         * @author Vova Feldman (@svovaf)
-         * @since  2.0.0
-         *
-         * @param number $user_id
-         * @param bool   $store
-         *
-         * @return false|int The user ID if deleted. Otherwise, FALSE (when install not exist).
-         */
-        private static function delete_user( $user_id, $store = true ) {
-            $users = self::get_all_users();
-
-            if ( ! is_array( $users ) || ! isset( $users[ $user_id ] ) ) {
-                return false;
-            }
-
-            unset( $users[ $user_id ] );
-
-            self::$_accounts->set_option( 'users', $users, $store );
-
-            return $user_id;
-        }
-
         /**
          * Delete plugin's plans information.
          *
@@ -10642,7 +10295,7 @@ static function get_all_users() {
          *
          * @return array[string]FS_Site
          */
-        private static function get_all_sites(
+        public static function get_all_sites(
             $module_type = WP_FS__MODULE_TYPE_PLUGIN,
             $blog_id = null,
             $is_backup = false
@@ -10671,7 +10324,7 @@ private static function get_all_sites(
          *
          * @return mixed
          */
-        private static function get_account_option( $option_name, $module_type = null, $network_level_or_blog_id = null ) {
+        public static function get_account_option( $option_name, $module_type = null, $network_level_or_blog_id = null ) {
             if ( ! is_null( $module_type ) && WP_FS__MODULE_TYPE_PLUGIN !== $module_type ) {
                 $option_name = $module_type . '_' . $option_name;
             }
@@ -10802,36 +10455,6 @@ private static function get_all_licenses( $module_id = null ) {
             return $licenses;
         }
 
-        /**
-         * @author Leo Fajardo (@leorw)
-         * @since  2.0.0
-         *
-         * @return array
-         */
-        private static function get_all_licenses_by_module_type() {
-            $licenses = self::get_account_option( 'all_licenses' );
-
-            $licenses_by_module_type = array(
-                WP_FS__MODULE_TYPE_PLUGIN => array(),
-                WP_FS__MODULE_TYPE_THEME  => array()
-            );
-
-            if ( ! is_array( $licenses ) ) {
-                return $licenses_by_module_type;
-            }
-
-            foreach ( $licenses as $module_id => $module_licenses ) {
-                $fs = self::get_instance_by_id( $module_id );
-                if ( false === $fs ) {
-                    continue;
-                }
-
-                $licenses_by_module_type[ $fs->_module_type ] = array_merge( $licenses_by_module_type[ $fs->_module_type ], $module_licenses );
-            }
-
-            return $licenses_by_module_type;
-        }
-
         /**
          * @author Leo Fajardo (@leorw)
          * @since  2.0.0
@@ -10974,7 +10597,7 @@ private static function get_all_updates() {
          *
          * @return array<number,FS_Plugin[]>|false
          */
-        private static function get_all_addons() {
+        public static function get_all_addons() {
             $addons = self::maybe_get_entities_account_option( 'addons', array() );
 
             if ( ! is_array( $addons ) ) {
@@ -10990,7 +10613,7 @@ private static function get_all_addons() {
          *
          * @return number[]|false
          */
-        private static function get_all_account_addons() {
+        public static function get_all_account_addons() {
             $addons = self::$_accounts->get_option( 'account_addons', array() );
 
             if ( ! is_array( $addons ) ) {
@@ -11107,6 +10730,16 @@ function get_site() {
             return $this->_site;
         }
 
+        /**
+         * @author Daniele Alessandra (@danielealessandra)
+         * @return FS_Storage
+         * @since  2.6.2
+         *
+         */
+        public function get_storage() {
+            return $this->_storage;
+        }
+
         /**
          * @author Leo Fajardo (@leorw)
          * @since 2.5.0
@@ -15041,6 +14674,20 @@ function pricing_url( $billing_cycle = WP_FS__PERIOD_ANNUALLY, $is_trial = false
                 $this->_parent->addon_url( $this->_slug ) :
                 $this->_get_admin_page_url( 'pricing', $params );
 
+            return $this->get_pricing_url_with_filter( $url );
+        }
+
+        /**
+         * Retrieves the filtered pricing URL.
+         *
+         * @author Leo Fajardo (@leorw)
+         * @since  2.7.4
+         *
+         * @param string $url
+         *
+         * @return string
+         */
+        private function get_pricing_url_with_filter( $url ) {
             return $this->apply_filters( 'pricing_url', $url );
         }
 
@@ -19167,18 +18814,34 @@ private function add_submenu_items() {
                         }
                     }
 
-                    // Add upgrade/pricing page.
-                    $this->add_submenu_item(
-                        $pricing_cta_text . '&nbsp;&nbsp;' . ( is_rtl() ? $this->get_text_x_inline( '&#x2190;', 'ASCII arrow left icon', 'symbol_arrow-left' ) : $this->get_text_x_inline( '&#x27a4;', 'ASCII arrow right icon', 'symbol_arrow-right' ) ),
-                        array( &$this, '_pricing_page_render' ),
-                        $this->get_plugin_name() . ' &ndash; ' . $this->get_text_x_inline( 'Pricing', 'noun', 'pricing' ),
-                        'manage_options',
-                        'pricing',
-                        'Freemius::_clean_admin_content_section',
-                        WP_FS__LOWEST_PRIORITY,
-                        ( $add_submenu_items && $show_pricing ),
-                        $pricing_class
-                    );
+                    $custom_pricing_url        = $this->get_pricing_url_with_filter( null );
+                    $pricing_menu_title        = $pricing_cta_text . '&nbsp;&nbsp;' . ( is_rtl() ? $this->get_text_x_inline( '&#x2190;', 'ASCII arrow left icon', 'symbol_arrow-left' ) : $this->get_text_x_inline( '&#x27a4;', 'ASCII arrow right icon', 'symbol_arrow-right' ) );
+                    $show_pricing_submenu_item = ( $add_submenu_items && $show_pricing );
+
+                    // Add upgrade/pricing submenu item.
+                    if ( ! is_null( $custom_pricing_url ) ) {
+                        $this->add_submenu_link_item(
+                            $pricing_menu_title,
+                            $custom_pricing_url,
+                            'pricing',
+                            'manage_options',
+                            WP_FS__LOWEST_PRIORITY,
+                            $show_pricing_submenu_item,
+                            $pricing_class
+                        );
+                    } else {
+                        $this->add_submenu_item(
+                            $pricing_menu_title,
+                            array( &$this, '_pricing_page_render' ),
+                            $this->get_plugin_name() . ' &ndash; ' . $this->get_text_x_inline( 'Pricing', 'noun', 'pricing' ),
+                            'manage_options',
+                            'pricing',
+                            'Freemius::_clean_admin_content_section',
+                            WP_FS__LOWEST_PRIORITY,
+                            $show_pricing_submenu_item,
+                            $pricing_class
+                        );
+                    }
                 }
             }
 
@@ -19467,6 +19130,7 @@ function add_submenu_item(
          * @param string $capability
          * @param int    $priority
          * @param bool   $show_submenu
+         * @param string $class
          */
         function add_submenu_link_item(
             $menu_title,
@@ -19474,7 +19138,8 @@ function add_submenu_link_item(
             $menu_slug = false,
             $capability = 'read',
             $priority = WP_FS__DEFAULT_PRIORITY,
-            $show_submenu = true
+            $show_submenu = true,
+            $class = ''
         ) {
             $this->_logger->entrance( 'Title = ' . $menu_title . '; Url = ' . $url );
 
@@ -19488,7 +19153,8 @@ function add_submenu_link_item(
                         $menu_slug,
                         $capability,
                         $priority,
-                        $show_submenu
+                        $show_submenu,
+                        $class
                     );
 
                     return;
@@ -19508,6 +19174,7 @@ function add_submenu_link_item(
                 'render_function'        => 'fs_dummy',
                 'before_render_function' => '',
                 'show_submenu'           => $show_submenu,
+                'class'                  => $class,
             );
         }
 
@@ -22801,7 +22468,7 @@ private function complete_change_owner() {
             $this->_set_account( $user, $this->_site );
 
             $remove_user       = true;
-            $all_modules_sites = self::get_all_modules_sites();
+            $all_modules_sites = FS_DebugManager::get_all_modules_sites();
 
             foreach ( $all_modules_sites as $sites_by_module_type ) {
                 foreach ( $sites_by_module_type as $sites_by_slug ) {
@@ -24884,27 +24551,6 @@ private function add_after_plan_activation_or_upgrade_instructions_notice( $is_u
             );
         }
 
-        /**
-         * @author Leo Fajardo (@leorw)
-         * @since 2.1.0
-         *
-         * @param string $url
-         * @param array  $request
-         */
-        private static function enrich_request_for_debug( &$url, &$request ) {
-            if ( WP_FS__DEBUG_SDK || isset( $_COOKIE['XDEBUG_SESSION'] ) ) {
-                $url = add_query_arg( 'XDEBUG_SESSION_START', rand( 0, 9999999 ), $url );
-                $url = add_query_arg( 'XDEBUG_SESSION', 'PHPSTORM', $url );
-
-                $request['cookies'] = array(
-                    new WP_Http_Cookie( array(
-                        'name'  => 'XDEBUG_SESSION',
-                        'value' => 'PHPSTORM',
-                    ) )
-                );
-            }
-        }
-
         /**
          * @author Leo Fajardo (@leorw)
          * @since 2.1.0
@@ -24934,7 +24580,7 @@ static function safe_remote_post(
 
             if ( false === $response ) {
                 if ( $maybe_enrich_request_for_debug ) {
-                    self::enrich_request_for_debug( $url, $request );
+                    FS_DebugManager::enrich_request_for_debug( $url, $request );
                 }
 
                 if ( ! isset( $request['method'] ) ) {
diff --git a/freemius/includes/class-fs-logger.php b/freemius/includes/class-fs-logger.php
index 6dde8aa30..c5f0c52a1 100644
--- a/freemius/includes/class-fs-logger.php
+++ b/freemius/includes/class-fs-logger.php
@@ -32,6 +32,9 @@ class FS_Logger {
 		 */
 		private static $_abspathLength;
 
+		/**
+		 * @var FS_Logger[] $LOGGERS
+		 */
 		private static $LOGGERS = array();
 		private static $LOG = array();
 		private static $CNT = 0;
@@ -124,7 +127,6 @@ function on() {
 
 			self::hook_footer();
 		}
-
 		function echo_on() {
 			$this->on();
 
@@ -320,6 +322,11 @@ public static function _set_storage_logging( $is_on = true ) {
 
 			$table = "{$wpdb->prefix}fs_logger";
 
+			/**
+			 * Drop logging table in any case.
+			 */
+			$result = $wpdb->query( "DROP TABLE IF EXISTS $table;" );
+
 			if ( $is_on ) {
 				/**
 				 * Create logging table.
@@ -329,7 +336,7 @@ public static function _set_storage_logging( $is_on = true ) {
 				 *
 				 * @link https://core.trac.wordpress.org/ticket/2695
 				 */
-				$result = $wpdb->query( "CREATE TABLE {$table} (
+				$result = $wpdb->query( "CREATE TABLE IF NOT EXISTS {$table} (
 `id` BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT,
 `process_id` INT UNSIGNED NOT NULL,
 `user_name` VARCHAR(64) NOT NULL,
@@ -348,15 +355,11 @@ public static function _set_storage_logging( $is_on = true ) {
 KEY `process_logger` (`process_id` ASC, `logger` ASC),
 KEY `function` (`function` ASC),
 KEY `type` (`type` ASC))" );
-			} else {
-				/**
-				 * Drop logging table.
-				 */
-				$result = $wpdb->query( "DROP TABLE IF EXISTS $table;" );
 			}
 
 			if ( false !== $result ) {
 				update_option( 'fs_storage_logger', ( $is_on ? 1 : 0 ) );
+				self::$_isStorageLoggingOn = $is_on;
 			}
 
 			return ( false !== $result );
diff --git a/freemius/includes/class-fs-plugin-updater.php b/freemius/includes/class-fs-plugin-updater.php
index c54c190b8..dc233da4d 100755
--- a/freemius/includes/class-fs-plugin-updater.php
+++ b/freemius/includes/class-fs-plugin-updater.php
@@ -106,6 +106,8 @@ private function filters() {
 
             if ( ! $this->_fs->has_any_active_valid_license() ) {
                 add_action( 'admin_head', array( &$this, 'catch_plugin_information_dialog_contents' ) );
+            } else {
+                add_action( 'admin_footer', array( &$this, '_add_fs_allow_updater_and_dialog_request_param' ) );
             }
 
             if ( ! WP_FS__IS_PRODUCTION_MODE ) {
@@ -129,15 +131,48 @@ private function filters() {
             }
         }
 
+        /**
+         * @author Leo Fajardo (@leorw)
+         * @since 2.7.4
+         */
+        function _add_fs_allow_updater_and_dialog_request_param() {
+            if ( ! $this->is_plugin_information_dialog_for_plugin() ) {
+                return;
+            }
+            ?>
+            <script type="text/javascript">
+                if ( typeof jQuery !== 'undefined' ) {
+                    jQuery( document ).on( 'wp-plugin-updating', function( event, args ) {
+                        if ( typeof args === 'object' && args.slug && typeof args.slug === 'string' ) {
+                            if ( <?php echo json_encode( $this->_fs->get_slug() ) ?> === args.slug ) {
+                                args.fs_allow_updater_and_dialog = true;
+                            }
+                        }
+                    } );
+                }
+            </script>
+            <?php
+        }
+
+        /**
+         * @author Leo Fajardo (@leorw)
+         * @since 2.7.4
+         *
+         * @return bool
+         */
+        private function is_plugin_information_dialog_for_plugin() {
+            return (
+                'plugin-information' === fs_request_get( 'tab', false ) &&
+                $this->_fs->get_slug() === fs_request_get_raw( 'plugin', false )
+            );
+        }
+
         /**
          * @author Leo Fajardo (@leorw)
          * @since 2.1.4
          */
         function catch_plugin_information_dialog_contents() {
-            if (
-                'plugin-information' !== fs_request_get( 'tab', false ) ||
-                $this->_fs->get_slug() !== fs_request_get_raw( 'plugin', false )
-            ) {
+            if ( ! $this->is_plugin_information_dialog_for_plugin() ) {
                 return;
             }
 
@@ -616,7 +651,7 @@ function pre_set_site_transient_update_plugins_filter( $transient_data ) {
 
             $slug = $this->_fs->get_slug();
 
-            if ( $this->_fs->is_org_repo_compliant() && $this->_fs->is_freemium() ) {
+            if ( $this->can_fetch_data_from_wp_org() ) {
                 if ( ! isset( $this->_translation_updates ) ) {
                     $this->_translation_updates = array();
 
@@ -873,6 +908,16 @@ static function _fetch_plugin_info_from_repository( $action, $args ) {
             return $res;
         }
 
+        /**
+         * Returns true if the product can fetch data from WordPress.org.
+         *
+         * @author Leo Fajardo (@leorw)
+         * @since  2.7.4
+         */
+        private function can_fetch_data_from_wp_org() {
+            return ( $this->_fs->is_org_repo_compliant() && $this->_fs->is_freemium() );
+        }
+
         /**
          * Fetches module translation updates from wordpress.org.
          *
@@ -1057,7 +1102,7 @@ function plugins_api_filter( $data, $action = '', $args = null ) {
             }
 
             $plugin_in_repo = false;
-            if ( ! $is_addon ) {
+            if ( ! $is_addon && $this->can_fetch_data_from_wp_org() ) {
                 // Try to fetch info from .org repository.
                 $data = self::_fetch_plugin_info_from_repository( $action, $args );
 
diff --git a/freemius/includes/class-fs-storage.php b/freemius/includes/class-fs-storage.php
index 1093302ad..1028b113d 100644
--- a/freemius/includes/class-fs-storage.php
+++ b/freemius/includes/class-fs-storage.php
@@ -20,6 +20,7 @@
      * @property bool|null   $is_extensions_tracking_allowed
      * @property bool|null   $is_diagnostic_tracking_allowed
      * @property object      $sync_cron
+     * @property bool|int    $install_timestamp
      */
     class FS_Storage {
         /**
diff --git a/freemius/includes/entities/class-fs-plugin-plan.php b/freemius/includes/entities/class-fs-plugin-plan.php
index 5bc6bc2d4..e89e2bce2 100755
--- a/freemius/includes/entities/class-fs-plugin-plan.php
+++ b/freemius/includes/entities/class-fs-plugin-plan.php
@@ -92,6 +92,14 @@ class FS_Plugin_Plan extends FS_Entity {
 		 * @var bool Is hidden plan.
 		 */
 		public $is_hidden;
+		/**
+		 * @var FS_Pricing[]
+		 */
+		public $pricing;
+		/**
+		 * @var object[]
+		 */
+		public $features;
 
 		#endregion Properties
 
diff --git a/freemius/includes/entities/class-fs-site.php b/freemius/includes/entities/class-fs-site.php
index f9012d056..e8049bae3 100755
--- a/freemius/includes/entities/class-fs-site.php
+++ b/freemius/includes/entities/class-fs-site.php
@@ -182,6 +182,7 @@ static function is_localhost_by_address( $url ) {
                 fs_ends_with( $subdomain, '.staging.wpengine.com' ) ||
                 fs_ends_with( $subdomain, '.dev.wpengine.com' ) ||
                 fs_ends_with( $subdomain, '.wpengine.com' ) ||
+                fs_ends_with( $subdomain, '.wpenginepowered.com' ) ||
                 // Pantheon
                 ( fs_ends_with( $subdomain, 'pantheonsite.io' ) &&
                   ( fs_starts_with( $subdomain, 'test-' ) || fs_starts_with( $subdomain, 'dev-' ) ) ) ||
@@ -201,7 +202,9 @@ static function is_localhost_by_address( $url ) {
                 // Vendasta
                 ( fs_ends_with( $subdomain, '.websitepro-staging.com' ) || fs_ends_with( $subdomain, '.websitepro.hosting' ) ) ||
                 // InstaWP
-                fs_ends_with( $subdomain, '.instawp.xyz' )
+                fs_ends_with( $subdomain, '.instawp.xyz' ) ||
+                // 10Web Hosting
+                ( fs_ends_with( $subdomain, '-dev.10web.site' ) || fs_ends_with( $subdomain, '-dev.10web.cloud' ) )
             );
         }
 
diff --git a/freemius/includes/entities/class-fs-user.php b/freemius/includes/entities/class-fs-user.php
index 2bee3f157..63fd209ed 100755
--- a/freemius/includes/entities/class-fs-user.php
+++ b/freemius/includes/entities/class-fs-user.php
@@ -74,4 +74,4 @@ function is_beta() {
         static function get_type() {
 			return 'user';
 		}
-	}
+	}
\ No newline at end of file
diff --git a/freemius/includes/managers/class-fs-clone-manager.php b/freemius/includes/managers/class-fs-clone-manager.php
index 01c20cf3d..c46deb2ac 100644
--- a/freemius/includes/managers/class-fs-clone-manager.php
+++ b/freemius/includes/managers/class-fs-clone-manager.php
@@ -333,7 +333,7 @@ private function find_network_subsite_clone_install( Freemius $instance ) {
             }
 
             if ( ! isset( $this->all_installs ) ) {
-                $this->all_installs = Freemius::get_all_modules_sites();
+                $this->all_installs = FS_DebugManager::get_all_modules_sites();
             }
 
             // Check if there's another blog that has the same site.
diff --git a/freemius/includes/managers/class-fs-debug-manager.php b/freemius/includes/managers/class-fs-debug-manager.php
new file mode 100644
index 000000000..5364712da
--- /dev/null
+++ b/freemius/includes/managers/class-fs-debug-manager.php
@@ -0,0 +1,508 @@
+<?php
+    /**
+     * @author    Daniele Alessandra (@danielealessandra)
+     * @copyright Copyright (c) 2024, Freemius, Inc.
+     * @license   https://www.gnu.org/licenses/gpl-3.0.html GNU General Public License Version 3
+     * @package   Freemius
+     * @since     2.6.2
+     */
+
+    class FS_DebugManager {
+
+        /**
+         * @author Vova Feldman (@svovaf)
+         *  Moved from Freemius
+         *
+         * @since  1.0.8
+         */
+        static function _add_debug_section() {
+            if ( ! is_super_admin() ) {
+                // Add debug page only for super-admins.
+                return;
+            }
+
+            Freemius::get_static_logger()->entrance();
+
+            $title = sprintf( '%s [v.%s]', fs_text_inline( 'Freemius Debug' ), WP_FS__SDK_VERSION );
+
+            if ( WP_FS__DEV_MODE ) {
+                // Add top-level debug menu item.
+                $hook = FS_Admin_Menu_Manager::add_page(
+                    $title,
+                    $title,
+                    'manage_options',
+                    'freemius',
+                    array( self::class, '_debug_page_render' )
+                );
+            } else {
+                // Add hidden debug page.
+                $hook = FS_Admin_Menu_Manager::add_subpage(
+                    '',
+                    $title,
+                    $title,
+                    'manage_options',
+                    'freemius',
+                    array( self::class, '_debug_page_render' )
+                );
+            }
+
+            if ( ! empty( $hook ) ) {
+                add_action( "load-$hook", array( self::class, '_debug_page_actions' ) );
+            }
+        }
+
+        /**
+         * @author Vova Feldman (@svovaf)
+         *  Moved from Freemius
+         *
+         * @since  1.0.8
+         */
+        static function _debug_page_actions() {
+            Freemius::_clean_admin_content_section();
+
+            if ( fs_request_is_action( 'restart_freemius' ) ) {
+                check_admin_referer( 'restart_freemius' );
+
+                if ( ! is_multisite() ) {
+                    // Clear accounts data.
+                    Freemius::get_accounts()->clear( null, true );
+                } else {
+                    $sites = Freemius::get_sites();
+                    foreach ( $sites as $site ) {
+                        $blog_id = Freemius::get_site_blog_id( $site );
+                        Freemius::get_accounts()->clear( $blog_id, true );
+                    }
+
+                    // Clear network level storage.
+                    Freemius::get_accounts()->clear( true, true );
+                }
+
+                // Clear SDK reference cache.
+                delete_option( 'fs_active_plugins' );
+            } else if ( fs_request_is_action( 'clear_updates_data' ) ) {
+                check_admin_referer( 'clear_updates_data' );
+
+                if ( ! is_multisite() ) {
+                    set_site_transient( 'update_plugins', null );
+                    set_site_transient( 'update_themes', null );
+                } else {
+                    $current_blog_id = get_current_blog_id();
+
+                    $sites = Freemius::get_sites();
+                    foreach ( $sites as $site ) {
+                        switch_to_blog( Freemius::get_site_blog_id( $site ) );
+
+                        set_site_transient( 'update_plugins', null );
+                        set_site_transient( 'update_themes', null );
+                    }
+
+                    switch_to_blog( $current_blog_id );
+                }
+            } else if ( fs_request_is_action( 'reset_deactivation_snoozing' ) ) {
+                check_admin_referer( 'reset_deactivation_snoozing' );
+
+                Freemius::reset_deactivation_snoozing();
+            } else if ( fs_request_is_action( 'simulate_trial' ) ) {
+                check_admin_referer( 'simulate_trial' );
+
+                $fs = freemius( fs_request_get( 'module_id' ) );
+
+                // Update SDK install to at least 24 hours before.
+                $fs->get_storage()->install_timestamp = ( time() - WP_FS__TIME_24_HOURS_IN_SEC );
+                // Unset the trial shown timestamp.
+                unset( $fs->get_storage()->trial_promotion_shown );
+            } else if ( fs_request_is_action( 'simulate_network_upgrade' ) ) {
+                check_admin_referer( 'simulate_network_upgrade' );
+
+                $fs = freemius( fs_request_get( 'module_id' ) );
+
+                Freemius::set_network_upgrade_mode( $fs->get_storage() );
+            } else if ( fs_request_is_action( 'delete_install' ) ) {
+                check_admin_referer( 'delete_install' );
+
+                Freemius::_delete_site_by_slug(
+                    fs_request_get( 'slug' ),
+                    fs_request_get( 'module_type' ),
+                    true,
+                    fs_request_get( 'blog_id', null )
+                );
+            } else if ( fs_request_is_action( 'delete_user' ) ) {
+                check_admin_referer( 'delete_user' );
+
+                self::delete_user( fs_request_get( 'user_id' ) );
+            } else if ( fs_request_is_action( 'download_logs' ) ) {
+                check_admin_referer( 'download_logs' );
+
+                $download_url = FS_Logger::download_db_logs(
+                    fs_request_get( 'filters', false, 'post' )
+                );
+
+                if ( false === $download_url ) {
+                    wp_die( 'Oops... there was an error while generating the logs download file. Please try again and if it doesn\'t work contact support@freemius.com.' );
+                }
+
+                fs_redirect( $download_url );
+            } else if ( fs_request_is_action( 'migrate_options_to_network' ) ) {
+                check_admin_referer( 'migrate_options_to_network' );
+
+                Freemius::migrate_options_to_network();
+            }
+        }
+
+        /**
+         * @author Vova Feldman (@svovaf)
+         *  Moved from Freemius
+         *
+         * @since  1.0.8
+         */
+        static function _debug_page_render() {
+            Freemius::get_static_logger()->entrance();
+
+            $all_modules_sites = self::get_all_modules_sites();
+
+            $licenses_by_module_type = self::get_all_licenses_by_module_type();
+
+            $vars = array(
+                'plugin_sites'    => $all_modules_sites[ WP_FS__MODULE_TYPE_PLUGIN ],
+                'theme_sites'     => $all_modules_sites[ WP_FS__MODULE_TYPE_THEME ],
+                'users'           => Freemius::get_all_users(),
+                'addons'          => Freemius::get_all_addons(),
+                'account_addons'  => Freemius::get_all_account_addons(),
+                'plugin_licenses' => $licenses_by_module_type[ WP_FS__MODULE_TYPE_PLUGIN ],
+                'theme_licenses'  => $licenses_by_module_type[ WP_FS__MODULE_TYPE_THEME ],
+            );
+
+            fs_enqueue_local_style( 'fs_debug', '/admin/debug.css' );
+            fs_require_once_template( 'debug.php', $vars );
+        }
+
+        /**
+         * @author Vova Feldman (@svovaf)
+         *  Moved from Freemius
+         *
+         * @since  1.2.1.6
+         */
+        static function _get_debug_log() {
+            check_admin_referer( 'fs_get_debug_log' );
+
+            if ( ! is_super_admin() ) {
+                return;
+            }
+
+            if (!FS_Logger::is_storage_logging_on()) {
+                return;
+            }
+
+            $limit  = min( ! empty( $_POST['limit'] ) ? absint( $_POST['limit'] ) : 200, 200 );
+            $offset = min( ! empty( $_POST['offset'] ) ? absint( $_POST['offset'] ) : 200, 200 );
+
+            $logs = FS_Logger::load_db_logs(
+                fs_request_get( 'filters', false, 'post' ),
+                $limit,
+                $offset
+            );
+
+            Freemius::shoot_ajax_success( $logs );
+        }
+
+        /**
+         * @author Vova Feldman (@svovaf)
+         *  Moved from Freemius
+         *
+         * @since  1.2.1.7
+         */
+        static function _get_db_option() {
+            check_admin_referer( 'fs_get_db_option' );
+
+            $option_name = fs_request_get( 'option_name' );
+
+            if ( ! is_super_admin() ||
+                 ! fs_starts_with( $option_name, 'fs_' )
+            ) {
+                Freemius::shoot_ajax_failure();
+            }
+
+            $value = get_option( $option_name );
+
+            $result = array(
+                'name' => $option_name,
+            );
+
+            if ( false !== $value ) {
+                if ( ! is_string( $value ) ) {
+                    $value = json_encode( $value );
+                }
+
+                $result['value'] = $value;
+            }
+
+            Freemius::shoot_ajax_success( $result );
+        }
+
+        /**
+         * @author Vova Feldman (@svovaf)
+         *  Moved from Freemius
+         *
+         * @since  1.2.1.7
+         */
+        static function _set_db_option() {
+            check_admin_referer( 'fs_set_db_option' );
+
+            $option_name = fs_request_get( 'option_name' );
+
+            if ( ! is_super_admin() ||
+                 ! fs_starts_with( $option_name, 'fs_' )
+            ) {
+                Freemius::shoot_ajax_failure();
+            }
+
+            $option_value = fs_request_get_raw( 'option_value' );
+
+            if ( ! empty( $option_value ) ) {
+                update_option( $option_name, $option_value );
+            }
+
+            Freemius::shoot_ajax_success();
+        }
+
+        /**
+         * @author Vova Feldman (@svovaf)
+         *  Moved from Freemius
+         *
+         * @since  1.1.7.3
+         */
+        static function _toggle_debug_mode() {
+            check_admin_referer( 'fs_toggle_debug_mode' );
+
+            if ( ! is_super_admin() ) {
+                return;
+            }
+
+            $is_on = fs_request_get( 'is_on', false, 'post' );
+
+            if ( fs_request_is_post() && in_array( $is_on, array( 0, 1 ) ) ) {
+                if ( $is_on ) {
+                    self::_turn_on_debug_mode();
+                } else {
+                    self::_turn_off_debug_mode();
+                }
+
+                // Logic to turn debugging off automatically
+                if ( 1 == $is_on ) {
+                    // Plan a single event triggering after 24 hours to turn debugging off.
+                    wp_schedule_single_event( time() + 24 * HOUR_IN_SECONDS, 'fs_debug_turn_off_logging_hook' );
+                } else {
+                    // Cancels any planned event when debugging is turned off manually.
+                    $timestamp = wp_next_scheduled( 'fs_debug_turn_off_logging_hook' );
+                    if ( $timestamp ) {
+                        wp_unschedule_event( $timestamp, 'fs_debug_turn_off_logging_hook' );
+                    }
+                }
+            }
+
+            exit;
+        }
+
+        /**
+         * @author Daniele Alessandra (@danielealessandra)
+         * @since  2.6.2
+         *
+         */
+        static function _turn_off_debug_mode() {
+            self::update_debug_mode_option( 0 );
+            FS_Logger::_set_storage_logging( false );
+        }
+
+        /**
+         * @author Daniele Alessandra (@danielealessandra)
+         * @since  2.6.2
+         *
+         */
+        static function _turn_on_debug_mode() {
+            self::update_debug_mode_option( 1 );
+            FS_Logger::_set_storage_logging();
+        }
+
+        /**
+         * @author Leo Fajardo (@leorw)
+         *  Moved from Freemius
+         *
+         * @param string $url
+         * @param array  $request
+         *
+         * @since  2.1.0
+         *
+         */
+        public static function enrich_request_for_debug( &$url, &$request ) {
+            if ( WP_FS__DEBUG_SDK || isset( $_COOKIE['XDEBUG_SESSION'] ) ) {
+                $url = add_query_arg( 'XDEBUG_SESSION_START', rand( 0, 9999999 ), $url );
+                $url = add_query_arg( 'XDEBUG_SESSION', 'PHPSTORM', $url );
+
+                $request['cookies'] = array(
+                    new WP_Http_Cookie( array(
+                        'name'  => 'XDEBUG_SESSION',
+                        'value' => 'PHPSTORM',
+                    ) ),
+                );
+            }
+        }
+
+        /**
+         * @author Leo Fajardo (@leorw)
+         *  Moved from Freemius
+         *
+         * @return array
+         *
+         * @since  2.0.0
+         *
+         */
+        private static function get_all_licenses_by_module_type() {
+            $licenses = Freemius::get_account_option( 'all_licenses' );
+
+            $licenses_by_module_type = array(
+                WP_FS__MODULE_TYPE_PLUGIN => array(),
+                WP_FS__MODULE_TYPE_THEME  => array(),
+            );
+
+            if ( ! is_array( $licenses ) ) {
+                return $licenses_by_module_type;
+            }
+
+            foreach ( $licenses as $module_id => $module_licenses ) {
+                $fs = Freemius::get_instance_by_id( $module_id );
+                if ( false === $fs ) {
+                    continue;
+                }
+
+                $licenses_by_module_type[ $fs->get_module_type() ] = array_merge( $licenses_by_module_type[ $fs->get_module_type() ],
+                    $module_licenses );
+            }
+
+            return $licenses_by_module_type;
+        }
+
+        /**
+         * Moved from the Freemius class.
+         *
+         * @author Leo Fajardo (@leorw)
+         *
+         * @return array
+         *
+         * @since  2.5.0
+         */
+        static function get_all_modules_sites() {
+            Freemius::get_static_logger()->entrance();
+
+            $sites_by_type = array(
+                WP_FS__MODULE_TYPE_PLUGIN => array(),
+                WP_FS__MODULE_TYPE_THEME  => array(),
+            );
+
+            $module_types = array_keys( $sites_by_type );
+
+            if ( ! is_multisite() ) {
+                foreach ( $module_types as $type ) {
+                    $sites_by_type[ $type ] = Freemius::get_all_sites( $type );
+
+                    foreach ( $sites_by_type[ $type ] as $slug => $install ) {
+                        $sites_by_type[ $type ][ $slug ] = array( $install );
+                    }
+                }
+            } else {
+                $sites = Freemius::get_sites();
+
+                foreach ( $sites as $site ) {
+                    $blog_id = Freemius::get_site_blog_id( $site );
+
+                    foreach ( $module_types as $type ) {
+                        $installs = Freemius::get_all_sites( $type, $blog_id );
+
+                        foreach ( $installs as $slug => $install ) {
+                            if ( ! isset( $sites_by_type[ $type ][ $slug ] ) ) {
+                                $sites_by_type[ $type ][ $slug ] = array();
+                            }
+
+                            $install->blog_id = $blog_id;
+
+                            $sites_by_type[ $type ][ $slug ][] = $install;
+                        }
+                    }
+                }
+            }
+
+            return $sites_by_type;
+        }
+
+        /**
+         * Delete user.
+         *
+         * @author Vova Feldman (@svovaf)
+         *
+         * @param number $user_id
+         * @param bool   $store
+         *
+         * @return false|int The user ID if deleted. Otherwise, FALSE (when install not exist).
+         * @since  2.0.0
+         *
+         */
+        public static function delete_user( $user_id, $store = true ) {
+            $users = Freemius::get_all_users();
+
+            if ( ! is_array( $users ) || ! isset( $users[ $user_id ] ) ) {
+                return false;
+            }
+
+            unset( $users[ $user_id ] );
+
+            self::$_accounts->set_option( 'users', $users, $store );
+
+            return $user_id;
+        }
+
+        /**
+         * @author Daniele Alessandra (@danielealessandra)
+         *
+         * @return void
+         * @since  2.6.2
+         *
+         */
+        public static function load_required_static() {
+            if ( ! WP_FS__DEMO_MODE ) {
+                add_action( ( fs_is_network_admin() ? 'network_' : '' ) . 'admin_menu', array(
+                    self::class,
+                    '_add_debug_section',
+                ) );
+            }
+
+            add_action( "wp_ajax_fs_toggle_debug_mode", array( self::class, '_toggle_debug_mode' ) );
+
+            Freemius::add_ajax_action_static( 'get_debug_log', array( self::class, '_get_debug_log' ) );
+            Freemius::add_ajax_action_static( 'get_db_option', array( self::class, '_get_db_option' ) );
+            Freemius::add_ajax_action_static( 'set_db_option', array( self::class, '_set_db_option' ) );
+        }
+
+        /**
+         * @author Daniele Alessandra (@danielealessandra)
+         *
+         * @return void
+         *
+         * @since  2.6.2
+         */
+        public static function register_hooks() {
+            add_action( 'fs_debug_turn_off_logging_hook', array( self::class, '_turn_off_debug_mode' ) );
+        }
+
+        /**
+         * @author Daniele Alessandra (@danielealessandra)
+         *
+         * @param int $is_on
+         *
+         * @return void
+         *
+         * @since  2.6.2
+         */
+        private static function update_debug_mode_option( $is_on ) {
+            update_option( 'fs_debug_mode', $is_on );
+        }
+
+    }
diff --git a/freemius/require.php b/freemius/require.php
index cc194d2d9..bff3fc39e 100644
--- a/freemius/require.php
+++ b/freemius/require.php
@@ -50,6 +50,7 @@
 	require_once WP_FS__DIR_INCLUDES . '/class-fs-api.php';
 	require_once WP_FS__DIR_INCLUDES . '/class-fs-plugin-updater.php';
 	require_once WP_FS__DIR_INCLUDES . '/class-fs-security.php';
+	require_once WP_FS__DIR_INCLUDES . '/managers/class-fs-debug-manager.php';
     require_once WP_FS__DIR_INCLUDES . '/class-fs-options.php';
     require_once WP_FS__DIR_INCLUDES . '/class-fs-storage.php';
     require_once WP_FS__DIR_INCLUDES . '/class-fs-admin-notices.php';
diff --git a/freemius/start.php b/freemius/start.php
index 15ecad246..d7b8979f5 100644
--- a/freemius/start.php
+++ b/freemius/start.php
@@ -15,7 +15,7 @@
 	 *
 	 * @var string
 	 */
-	$this_sdk_version = '2.7.3';
+	$this_sdk_version = '2.8.1';
 
 	#region SDK Selection Logic --------------------------------------------------------------------
 
diff --git a/freemius/templates/account.php b/freemius/templates/account.php
index 999356efd..b18fd4dac 100755
--- a/freemius/templates/account.php
+++ b/freemius/templates/account.php
@@ -510,7 +510,7 @@ class="dashicons dashicons-image-rotate"></i> <?php fs_esc_html_echo_x_inline( '
 											?>
 											<tr class="fs-field-<?php echo esc_attr( $p['id'] ) ?><?php if ( $odd ) : ?> alternate<?php endif ?>">
 												<td>
-													<nobr><?php echo esc_attr( $p['title'] ) ?><?php echo ( ! empty( $p['title'] ) ) ? ':' : '' ?></nobr>
+													<nobr><?php echo esc_html( $p['title'] ) ?><?php echo ( ! empty( $p['title'] ) ) ? ':' : '' ?></nobr>
 												</td>
 												<td<?php if ( 'plan' === $p['id'] || 'bundle_plan' === $p['id'] ) { echo ' colspan="2"'; }?>>
 													<?php if ( in_array( $p['id'], array( 'license_key', 'site_secret_key' ) ) ) : ?>
diff --git a/freemius/templates/debug.php b/freemius/templates/debug.php
index 4e386e1d5..b45a6ff53 100644
--- a/freemius/templates/debug.php
+++ b/freemius/templates/debug.php
@@ -17,19 +17,26 @@
     $off_text = fs_text_x_inline( 'Off', 'as turned off' );
     $on_text  = fs_text_x_inline( 'On', 'as turned on' );
 
+    // For some reason css was missing
+    fs_enqueue_local_style( 'fs_common', '/admin/common.css' );
+
     $has_any_active_clone = false;
 
     $is_multisite = is_multisite();
+
+    $auto_off_timestamp = wp_next_scheduled( 'fs_debug_turn_off_logging_hook' ) * 1000;
 ?>
 <h1><?php echo fs_text_inline( 'Freemius Debug' ) . ' - ' . fs_text_inline( 'SDK' ) . ' v.' . $fs_active_plugins->newest->version ?></h1>
 <div>
     <!-- Debugging Switch -->
-    <?php //$debug_mode = get_option( 'fs_debug_mode', null ) ?>
     <span class="fs-switch-label"><?php fs_esc_html_echo_x_inline( 'Debugging', 'as code debugging' ) ?></span>
 
     <div class="fs-switch fs-round <?php echo WP_FS__DEBUG_SDK ? 'fs-on' : 'fs-off' ?>">
         <div class="fs-toggle"></div>
     </div>
+
+    <span class="auto-off-debug-countdown hidden"><?php echo fs_esc_html_echo_x_inline( 'Auto off in:', 'timer for auto-disabling debug' ); ?> <span class="time">23:59:59</span>
+
     <script type="text/javascript">
         (function ($) {
             $(document).ready(function () {
@@ -39,18 +46,70 @@
                         .toggleClass( 'fs-on' )
                         .toggleClass( 'fs-off' );
 
+                    var is_on = ($(this).hasClass( 'fs-on' ) ? 1 : 0);
+
                     $.post( <?php echo Freemius::ajax_url() ?>, {
                         action: 'fs_toggle_debug_mode',
                         // As such we don't need to use `wp_json_encode` method but using it to follow wp.org guideline.
                         _wpnonce   : <?php echo wp_json_encode( wp_create_nonce( 'fs_toggle_debug_mode' ) ); ?>,
-                        is_on : ($(this).hasClass( 'fs-on' ) ? 1 : 0)
-                    }, function ( response ) {
+                        is_on
+                    }, function (response) {
+                        if (is_on) {
+                            startCountdownManually();
+                        } else {
+                            stopCountdownManually();
+                        }
+
                         if ( 1 == response ) {
                             // Refresh page on success.
                             location.reload();
                         }
                     });
                 });
+
+                // Countdown
+                var countdownElement = document.querySelector('.auto-off-debug-countdown');
+                var timeElement = countdownElement.querySelector('.time');
+                var targetTime = <?php echo wp_json_encode( $auto_off_timestamp ); ?>;
+                var countdownTimeout;
+
+                function updateCountdown() {
+                    var currentTime = new Date().getTime();
+                    var remainingTimeInMs = targetTime - currentTime;
+                    var hours = Math.floor((remainingTimeInMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+                    var minutes = Math.floor((remainingTimeInMs % (1000 * 60 * 60)) / (1000 * 60));
+                    var seconds = Math.floor((remainingTimeInMs % (1000 * 60)) / 1000);
+
+
+                    if (remainingTimeInMs < 1000) {
+                        countdownElement.classList.add('hidden');
+                        countdownTimeout = null;
+                    } else {
+                        timeElement.innerHTML = hours + ":"
+                            + minutes.toString().padStart(2, '0') + ":"
+                            + seconds.toString().padStart(2, '0');
+                        countdownElement.classList.remove('hidden');
+
+                        if (countdownTimeout) {
+                            clearTimeout(countdownTimeout);
+                        }
+                        countdownTimeout = setTimeout(updateCountdown, 1000);
+                    }
+                }
+
+                function startCountdownManually() {
+                    targetTime = ( new Date().getTime() ) + (24 * 60 * 60 * 1000) - 1;
+                    updateCountdown();
+                }
+
+                function stopCountdownManually() {
+                    targetTime = new Date().getTime();
+                    updateCountdown();
+                }
+
+                updateCountdown();
+                // End countdown
+
             });
         }(jQuery));
     </script>

From 69fad41f6e508779146690d7085477c67da0ca26 Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Mon, 23 Sep 2024 16:02:09 +0800
Subject: [PATCH 04/18] chore: version bump to v3.13.6

---
 .../stackable-ultimate-gutenberg-blocks.pot   | 6334 +++++++++--------
 package.json                                  |    2 +-
 plugin.php                                    |    4 +-
 readme.txt                                    |   17 +-
 .../font-family-control/google-fonts.json     |   70 +-
 src/dynamic-breakpoints.php                   |    2 +-
 6 files changed, 3262 insertions(+), 3167 deletions(-)

diff --git a/languages/stackable-ultimate-gutenberg-blocks.pot b/languages/stackable-ultimate-gutenberg-blocks.pot
index 9d3829298..b5be82b7c 100644
--- a/languages/stackable-ultimate-gutenberg-blocks.pot
+++ b/languages/stackable-ultimate-gutenberg-blocks.pot
@@ -2,14 +2,14 @@
 # This file is distributed under the same license as the Stackable - Gutenberg Blocks plugin.
 msgid ""
 msgstr ""
-"Project-Id-Version: Stackable - Gutenberg Blocks 3.13.5\n"
+"Project-Id-Version: Stackable - Gutenberg Blocks 3.13.6\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/stackable-ultimate-gutenberg-blocks\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2024-08-07T06:27:16+00:00\n"
+"POT-Creation-Date: 2024-09-23T08:00:48+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.5.0\n"
 
@@ -34,74 +34,58 @@ msgid "http://gambit.ph"
 msgstr ""
 
 #: dist/translation-strings.php:9
-#: src/welcome/index.php:29
-#: src/welcome/index.php:30
-#: src/welcome/index.php:161
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Stackable"
-msgstr ""
-
-#: dist/translation-strings.php:10
-msgid "Description for this block. You can use this space for describing your block."
-msgstr ""
-
-#: dist/translation-strings.php:11
-msgid "Description for this block. Use this space for describing your block. Any text will do."
-msgstr ""
-
-#: dist/translation-strings.php:12
 #: dist/admin_welcome.js:2
 msgid "Essential Blocks"
 msgstr ""
 
-#: dist/translation-strings.php:13
+#: dist/translation-strings.php:10
 #: dist/admin_welcome.js:2
 msgid "All the necessary building blocks you need to design anything."
 msgstr ""
 
-#: dist/translation-strings.php:14
+#: dist/translation-strings.php:11
 #: dist/admin_welcome.js:2
 msgid "Special Blocks"
 msgstr ""
 
-#: dist/translation-strings.php:15
+#: dist/translation-strings.php:12
 #: dist/admin_welcome.js:2
 msgid "Blocks with special functionality that will allow you to create distinctive designs."
 msgstr ""
 
-#: dist/translation-strings.php:16
+#: dist/translation-strings.php:13
 #: dist/admin_welcome.js:2
 msgid "Section Blocks"
 msgstr ""
 
-#: dist/translation-strings.php:17
+#: dist/translation-strings.php:14
 #: dist/admin_welcome.js:2
 msgid "Use these blocks act as templates to help you build sections effortlessly."
 msgstr ""
 
-#: dist/translation-strings.php:18
+#: dist/translation-strings.php:15
 #: dist/admin_welcome.js:2
 msgid "See example"
 msgstr ""
 
-#: dist/translation-strings.php:19
+#: dist/translation-strings.php:16
 #: dist/admin_welcome.js:2
 #: dist/deprecated/admin_welcome_v2.js:2
 msgid "Enable All"
 msgstr ""
 
-#: dist/translation-strings.php:20
+#: dist/translation-strings.php:17
 #: dist/admin_welcome.js:2
 #: dist/deprecated/admin_welcome_v2.js:2
 msgid "Disable All"
 msgstr ""
 
-#: dist/translation-strings.php:21
+#: dist/translation-strings.php:18
 #: dist/admin_welcome.js:2
 msgid "view demo"
 msgstr ""
 
-#: dist/translation-strings.php:22
+#: dist/translation-strings.php:19
 #: dist/admin_welcome.js:2
 #: dist/admin_welcome__premium_only.js:2
 #: dist/deprecated/admin_welcome_v2.js:2
@@ -109,7 +93,7 @@ msgstr ""
 msgid "Disabled"
 msgstr ""
 
-#: dist/translation-strings.php:23
+#: dist/translation-strings.php:20
 #: dist/admin_welcome.js:2
 #: dist/admin_welcome__premium_only.js:2
 #: dist/deprecated/admin_welcome_v2.js:2
@@ -117,12 +101,12 @@ msgstr ""
 msgid "Enabled"
 msgstr ""
 
-#: dist/translation-strings.php:24
+#: dist/translation-strings.php:21
 #: dist/admin_welcome.js:2
 msgid "Error getting Stackable settings. We got the following error. Please contact your administrator."
 msgstr ""
 
-#: dist/translation-strings.php:25
+#: dist/translation-strings.php:22
 #: src/stk-block-types.php:267
 #: dist/admin_welcome.js:2
 #: dist/editor_blocks.js:2
@@ -130,5441 +114,5467 @@ msgstr ""
 msgid "Design Library"
 msgstr ""
 
-#: dist/translation-strings.php:26
+#: dist/translation-strings.php:23
 #: dist/admin_welcome.js:2
 msgid "Adds a button on the top of the editor which gives access to a collection of pre-made block designs."
 msgstr ""
 
-#: dist/translation-strings.php:27
+#: dist/translation-strings.php:24
 #: dist/admin_welcome.js:2
 msgid "Optimize Inline CSS"
 msgstr ""
 
-#: dist/translation-strings.php:28
+#: dist/translation-strings.php:25
 #: dist/admin_welcome.js:2
 msgid "Optimize inlined CSS styles. If this is enabled, similar selectors will be combined together, helpful if you changed Block Defaults."
 msgstr ""
 
-#: dist/translation-strings.php:29
+#: dist/translation-strings.php:26
 #: dist/admin_welcome.js:2
 msgid "Auto-Collapse Panels"
 msgstr ""
 
-#: dist/translation-strings.php:30
+#: dist/translation-strings.php:27
 #: src/editor-settings.php:116
 #: dist/admin_welcome.js:2
 msgid "Collapse other inspector panels when opening another, keeping only one open at a time."
 msgstr ""
 
-#: dist/translation-strings.php:31
+#: dist/translation-strings.php:28
 #: dist/admin_welcome.js:2
 msgid "Block Linking (Beta)"
 msgstr ""
 
-#: dist/translation-strings.php:32
+#: dist/translation-strings.php:29
 #: src/editor-settings.php:128
 #: dist/admin_welcome.js:2
 msgid "Gives you the ability to link columns. Any changes you make on one column will automatically get applied on the other columns."
 msgstr ""
 
-#: dist/translation-strings.php:33
+#: dist/translation-strings.php:30
 #: src/welcome/index.php:217
 #: src/welcome/index.php:220
 #: dist/admin_welcome.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:239
+#: dist/translation-strings.js:219
 msgid "Learn more"
 msgstr ""
 
-#: dist/translation-strings.php:34
+#: dist/translation-strings.php:31
 #: dist/admin_welcome.js:2
 msgid "Nested Block Width"
 msgstr ""
 
-#: dist/translation-strings.php:35
+#: dist/translation-strings.php:32
 #: dist/admin_welcome.js:2
 msgid "The width used when a Columns block has its Content Width set to center. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula."
 msgstr ""
 
-#: dist/translation-strings.php:36
+#: dist/translation-strings.php:33
 #: dist/admin_welcome.js:2
 msgid "Nested Wide Block Width"
 msgstr ""
 
-#: dist/translation-strings.php:37
+#: dist/translation-strings.php:34
 #: dist/admin_welcome.js:2
 msgid "The width used when a Columns block has its Content Width set to wide. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula."
 msgstr ""
 
-#: dist/translation-strings.php:38
+#: dist/translation-strings.php:35
 #: dist/admin_welcome.js:2
 msgid "Google Maps API Key"
 msgstr ""
 
-#: dist/translation-strings.php:39
+#: dist/translation-strings.php:36
 #: dist/admin_welcome.js:2
 msgid "Lazy Load Images within Carousels"
 msgstr ""
 
-#: dist/translation-strings.php:40
+#: dist/translation-strings.php:37
 #: dist/admin_welcome.js:2
 msgid "Disable this if you encounter layout or spacing issues when using images inside carousel-type blocks because of image lazy loading."
 msgstr ""
 
-#: dist/translation-strings.php:41
+#: dist/translation-strings.php:38
+#: dist/admin_welcome.js:2
+msgid "Stackable Text as Default Block"
+msgstr ""
+
+#: dist/translation-strings.php:39
+#: dist/admin_welcome.js:2
+msgid "If enabled, Stackable Text blocks will be added by default instead of the native Paragraph Block."
+msgstr ""
+
+#: dist/translation-strings.php:40
 #: dist/admin_welcome.js:2
 msgid "Tablet Breakpoint"
 msgstr ""
 
-#: dist/translation-strings.php:42
+#: dist/translation-strings.php:41
 #: dist/admin_welcome.js:2
 msgid "Mobile Breakpoint"
 msgstr ""
 
-#: dist/translation-strings.php:43
+#: dist/translation-strings.php:42
 #: dist/admin_welcome.js:2
 msgid "Force Typography Styles"
 msgstr ""
 
-#: dist/translation-strings.php:44
+#: dist/translation-strings.php:43
 #: dist/admin_welcome.js:2
 msgid "Not forced"
 msgstr ""
 
-#: dist/translation-strings.php:45
+#: dist/translation-strings.php:44
 #: dist/admin_welcome.js:2
 msgid "Force styles"
 msgstr ""
 
-#: dist/translation-strings.php:46
+#: dist/translation-strings.php:45
 #: dist/admin_welcome.js:2
 msgid "FontAwesome Icon Library Version"
 msgstr ""
 
-#: dist/translation-strings.php:47
+#: dist/translation-strings.php:46
 #: dist/admin_welcome.js:2
 msgid "You are using the version set in your Font Awesome Pro Kit."
 msgstr ""
 
-#: dist/translation-strings.php:48
+#: dist/translation-strings.php:47
 #: dist/admin_welcome.js:2
 msgid "Show \"Go premium\" notices"
 msgstr ""
 
-#: dist/translation-strings.php:49
+#: dist/translation-strings.php:48
 #: dist/admin_welcome.js:2
 msgid "Don't show help video tooltips"
 msgstr ""
 
-#: dist/translation-strings.php:50
+#: dist/translation-strings.php:49
 #: dist/admin_welcome.js:2
 msgid "Generate Global Colors for native blocks"
 msgstr ""
 
-#: dist/translation-strings.php:51
+#: dist/translation-strings.php:50
 #: dist/admin_welcome.js:2
 msgid "🏠 Migration Settings"
 msgstr ""
 
-#: dist/translation-strings.php:52
+#: dist/translation-strings.php:51
 #: dist/admin_welcome.js:2
 msgid "Migrating from version 2 to version 3?"
 msgstr ""
 
-#: dist/translation-strings.php:53
+#: dist/translation-strings.php:52
 #: dist/admin_welcome.js:2
 msgid "Learn more about migration and the settings below"
 msgstr ""
 
-#: dist/translation-strings.php:54
+#: dist/translation-strings.php:53
 #: src/deprecated/v2/init.php:72
 #: dist/admin_welcome.js:2
 msgid "Load version 2 blocks in the editor"
 msgstr ""
 
-#: dist/translation-strings.php:55
+#: dist/translation-strings.php:54
 #: dist/admin_welcome.js:2
 msgid "Load version 2 blocks in the editor only when the page was using version 2 blocks"
 msgstr ""
 
-#: dist/translation-strings.php:56
+#: dist/translation-strings.php:55
 #: dist/admin_welcome.js:2
 msgid "Load version 2 frontend block stylesheet and scripts for backward compatibility"
 msgstr ""
 
-#: dist/translation-strings.php:57
+#: dist/translation-strings.php:56
 #: dist/admin_welcome.js:2
 msgid "Tutorials"
 msgstr ""
 
-#: dist/translation-strings.php:58
+#: dist/translation-strings.php:57
 #: dist/admin_welcome.js:2
 msgid "Get to know the plugin and start your journey with our brand new Stackable Courses."
 msgstr ""
 
-#: dist/translation-strings.php:59
+#: dist/translation-strings.php:58
 #: src/welcome/index.php:137
 #: dist/admin_welcome.js:2
 msgid "Documentation"
 msgstr ""
 
-#: dist/translation-strings.php:60
+#: dist/translation-strings.php:59
 #: dist/admin_welcome.js:2
 msgid "Visit our knowledge base for troubleshooting, guides, FAQs and updates."
 msgstr ""
 
-#: dist/translation-strings.php:61
+#: dist/translation-strings.php:60
 #: dist/admin_welcome.js:2
 msgid "Community"
 msgstr ""
 
-#: dist/translation-strings.php:62
+#: dist/translation-strings.php:61
 #: dist/admin_welcome.js:2
 msgid "Join our very active Stackable Community on Facebook."
 msgstr ""
 
-#: dist/translation-strings.php:63
+#: dist/translation-strings.php:62
 #: dist/admin_welcome.js:2
 msgid "The Basics of Stackable Blocks"
 msgstr ""
 
-#: dist/translation-strings.php:64
+#: dist/translation-strings.php:63
 #: dist/admin_welcome.js:2
 msgid "Learn how to personalize and tailor Stackable Blocks to match your website's unique style and design."
 msgstr ""
 
-#: dist/translation-strings.php:65
+#: dist/translation-strings.php:64
 #: dist/admin_welcome.js:2
 msgid "Flexbox Controls"
 msgstr ""
 
-#: dist/translation-strings.php:66
+#: dist/translation-strings.php:65
 #: dist/admin_welcome.js:2
 msgid "Explore the powerful Flexbox controls in Stackable that allow you to effortlessly create dynamic and responsive layouts."
 msgstr ""
 
-#: dist/translation-strings.php:67
+#: dist/translation-strings.php:66
 #: dist/admin_welcome.js:2
 msgid "Introduction to Hover Styles"
 msgstr ""
 
-#: dist/translation-strings.php:68
+#: dist/translation-strings.php:67
 #: dist/admin_welcome.js:2
 msgid "Discover the exciting world of hover styles in Stackable and learn how to add interactive and engaging effects to your website."
 msgstr ""
 
-#: dist/translation-strings.php:69
+#: dist/translation-strings.php:68
 #: dist/admin_welcome.js:2
 msgid "How to Use Image Settings"
 msgstr ""
 
-#: dist/translation-strings.php:70
+#: dist/translation-strings.php:69
 #: dist/admin_welcome.js:2
 msgid "Master the art of optimizing and enhancing images using Stackable's intuitive image settings for a visually captivating website."
 msgstr ""
 
-#: dist/translation-strings.php:71
+#: dist/translation-strings.php:70
 #: dist/admin_welcome.js:2
 msgid "Introduction to the Design Library"
 msgstr ""
 
-#: dist/translation-strings.php:72
+#: dist/translation-strings.php:71
 #: dist/admin_welcome.js:2
 msgid "Dive into the fundamentals of the Stackable Design Library and learn how to streamline your website development process with ease."
 msgstr ""
 
-#: dist/translation-strings.php:73
+#: dist/translation-strings.php:72
 #: dist/admin_welcome.js:2
 msgid "All About Typography in Stackable"
 msgstr ""
 
-#: dist/translation-strings.php:74
+#: dist/translation-strings.php:73
 #: dist/admin_welcome.js:2
 msgid "Unlock the full potential of typography in Stackable and gain insights on how to create visually stunning and impactful text designs."
 msgstr ""
 
-#: dist/translation-strings.php:75
+#: dist/translation-strings.php:74
 #: dist/admin_welcome.js:2
 msgid "Unleash the Full Potential of the WordPress Block Editor by Turning It into a Page Builder"
 msgstr ""
 
-#: dist/translation-strings.php:76
+#: dist/translation-strings.php:75
 #: dist/admin_welcome.js:2
 msgid "Learn the essentials in just a few minutes by watching this video. Scroll down to see more quick tutorials."
 msgstr ""
 
-#: dist/translation-strings.php:77
+#: dist/translation-strings.php:76
 #: src/welcome/index.php:114
 #: dist/admin_welcome.js:2
 msgid "Getting Started"
 msgstr ""
 
-#: dist/translation-strings.php:78
+#: dist/translation-strings.php:77
 #: dist/admin_welcome.js:2
 msgid "Create a new page"
 msgstr ""
 
-#: dist/translation-strings.php:79
+#: dist/translation-strings.php:78
 #: dist/admin_welcome.js:2
 msgid "Learn the essentials"
 msgstr ""
 
-#: dist/translation-strings.php:80
+#: dist/translation-strings.php:79
 #: dist/admin_welcome.js:2
 msgid "Check out our library of tutorials and guides"
 msgstr ""
 
-#: dist/translation-strings.php:81
+#: dist/translation-strings.php:80
 #: dist/admin_welcome.js:2
 msgid "Go to Stackable Learn"
 msgstr ""
 
-#: dist/translation-strings.php:82
+#: dist/translation-strings.php:81
+#: src/welcome/index.php:29
+#: src/welcome/index.php:30
+#: src/welcome/index.php:161
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:140
-msgid "General"
+msgid "Stackable"
+msgstr ""
+
+#: dist/translation-strings.php:82
+msgid "Description for this block. You can use this space for describing your block."
 msgstr ""
 
 #: dist/translation-strings.php:83
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Open at the start"
+msgid "Description for this block. Use this space for describing your block. Any text will do."
 msgstr ""
 
 #: dist/translation-strings.php:84
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Close adjacent on open"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:271
+msgid "Remove"
 msgstr ""
 
 #: dist/translation-strings.php:85
-#: dist/editor_blocks.js:2
-msgid "Automatically closes adjacent accordion panels when clicked."
+msgid "#%s (no title)"
 msgstr ""
 
 #: dist/translation-strings.php:86
-#: dist/editor_blocks.js:2
-msgid "Enable FAQ Schema"
+msgid "No posts found"
 msgstr ""
 
 #: dist/translation-strings.php:87
-#: dist/editor_blocks.js:2
-msgid "Open Icon"
+msgid "Pick a post"
 msgstr ""
 
 #: dist/translation-strings.php:88
-#: dist/editor_blocks.js:2
-msgid "The open icon will appear when the accordion is opened"
+msgid "No matches found"
 msgstr ""
 
 #: dist/translation-strings.php:89
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Title for This Block"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:60
+msgid "Reset"
 msgstr ""
 
 #: dist/translation-strings.php:90
-#: dist/editor_blocks.js:2
-msgid "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."
+msgid "Align Left"
 msgstr ""
 
 #: dist/translation-strings.php:91
-#: dist/editor_blocks.js:2
-msgctxt "Block layout name"
-msgid "%s Layout"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Align Center"
 msgstr ""
 
 #: dist/translation-strings.php:92
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:246
-msgid "Default"
+msgid "Align Right"
 msgstr ""
 
 #: dist/translation-strings.php:93
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:134
-msgctxt "Heading placeholder"
-msgid "Title for This Block"
+msgid "Justified"
 msgstr ""
 
 #: dist/translation-strings.php:94
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:133
-msgctxt "Content placeholder"
-msgid "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."
+#: dist/translation-strings.js:394
+msgid "Align"
 msgstr ""
 
 #: dist/translation-strings.php:95
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Plain"
+msgid "Start"
 msgstr ""
 
 #: dist/translation-strings.php:96
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:433
-msgid "Shadow"
+msgid "Center"
 msgstr ""
 
 #: dist/translation-strings.php:97
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Colored"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "End"
 msgstr ""
 
 #: dist/translation-strings.php:98
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Plus"
+msgid "Space Between"
 msgstr ""
 
 #: dist/translation-strings.php:99
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Horizontal"
+msgid "Space Around"
 msgstr ""
 
 #: dist/translation-strings.php:100
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Vertical"
+msgid "Space Evenly"
 msgstr ""
 
 #: dist/translation-strings.php:101
-#: dist/editor_blocks.js:2
-msgid "%s Alignment"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Stretch"
 msgstr ""
 
 #: dist/translation-strings.php:102
-#: dist/editor_blocks.js:2
-msgid "Content"
+msgid "Baseline"
 msgstr ""
 
 #: dist/translation-strings.php:103
-#: src/stk-block-types.php:51
-#: src/stk-block-types.php:96
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:464
-msgid "Button"
+#: dist/translation-strings.js:415
+msgid "Left"
 msgstr ""
 
 #: dist/translation-strings.php:104
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Full Width Buttons"
+#: dist/translation-strings.js:416
+msgid "Right"
 msgstr ""
 
 #: dist/translation-strings.php:105
 #: dist/editor_blocks.js:2
-msgid "Flex Wrap"
+msgid "Top"
 msgstr ""
 
 #: dist/translation-strings.php:106
 #: dist/editor_blocks.js:2
-msgid "No Wrap"
+msgid "Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:107
-#: dist/editor_blocks.js:2
-msgid "Wrap"
+msgid "Unit"
 msgstr ""
 
 #: dist/translation-strings.php:108
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Wrap Reverse"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:74
+msgid "None"
 msgstr ""
 
 #: dist/translation-strings.php:109
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Button Text"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:188
+msgid "Normal"
 msgstr ""
 
 #: dist/translation-strings.php:110
-#: src/stk-block-types.php:88
-#: src/stk-block-types.php:462
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:463
-msgid "Icon Button"
+msgid "Multiply"
 msgstr ""
 
 #: dist/translation-strings.php:111
-#: src/stk-block-types.php:104
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:465
-msgid "Social Buttons"
+msgid "Screen"
 msgstr ""
 
 #: dist/translation-strings.php:112
-#: src/stk-block-types.php:105
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:466
-msgid "Add social buttons."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:113
-#: dist/editor_blocks.js:2
-msgid "Horizontal 2"
+msgid "Darken"
 msgstr ""
 
 #: dist/translation-strings.php:114
-#: dist/editor_blocks.js:2
-msgid "Horizontal 3"
+msgid "Lighten"
 msgstr ""
 
 #: dist/translation-strings.php:115
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Split Centered"
+msgid "Color Dodge"
 msgstr ""
 
 #: dist/translation-strings.php:116
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Subtitle for This Block"
+msgid "Color Burn"
 msgstr ""
 
 #: dist/translation-strings.php:117
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:135
-msgctxt "Subtitle placeholder"
-msgid "Subtitle for This Block"
+msgid "Hard Light"
 msgstr ""
 
 #: dist/translation-strings.php:118
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:136
-msgctxt "Button placeholder"
-msgid "Button"
+msgid "Soft Light"
 msgstr ""
 
 #: dist/translation-strings.php:119
-#: dist/editor_blocks.js:2
-msgid "Default 2"
+msgid "Difference"
 msgstr ""
 
 #: dist/translation-strings.php:120
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:317
-msgid "Full"
+msgid "Exclusion"
 msgstr ""
 
 #: dist/translation-strings.php:121
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Faded"
+msgid "Hue"
 msgstr ""
 
 #: dist/translation-strings.php:122
-#: dist/editor_blocks.js:2
-msgid "Quotation Mark Icons"
+msgid "Saturation"
 msgstr ""
 
 #: dist/translation-strings.php:123
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Pick another icon"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:224
+msgid "Color"
 msgstr ""
 
 #: dist/translation-strings.php:124
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Round Thin"
+msgid "Luminosity"
 msgstr ""
 
 #: dist/translation-strings.php:125
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Round"
+msgid "Initial"
 msgstr ""
 
 #: dist/translation-strings.php:126
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Round Thick"
+msgid "Inherit"
 msgstr ""
 
 #: dist/translation-strings.php:127
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Round Fat"
+msgid "Unset"
 msgstr ""
 
 #: dist/translation-strings.php:128
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Square Thin"
+msgid "Mix Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:129
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Square"
+msgid "Normal State"
 msgstr ""
 
 #: dist/translation-strings.php:130
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Square Simple"
+msgid "Hovered State"
 msgstr ""
 
 #: dist/translation-strings.php:131
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Square Modern"
+msgid "Parent Hovered State"
 msgstr ""
 
 #: dist/translation-strings.php:132
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Square Fat"
+msgid "Collapsed"
 msgstr ""
 
 #: dist/translation-strings.php:133
-#: dist/editor_blocks.js:2
-msgid "Simple"
+msgid "Parent Hovered"
 msgstr ""
 
 #: dist/translation-strings.php:134
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Highlighted"
+msgid "Add a Container Background to a parent block to enable this state."
 msgstr ""
 
 #: dist/translation-strings.php:135
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Huge"
+msgid "Borders"
 msgstr ""
 
 #: dist/translation-strings.php:136
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Centered Quote"
+msgid "Solid"
 msgstr ""
 
 #: dist/translation-strings.php:137
 #: dist/editor_blocks.js:2
-msgid "Slides"
+msgid "Dashed"
 msgstr ""
 
 #: dist/translation-strings.php:138
 #: dist/editor_blocks.js:2
-msgid "Carousel Type"
+msgid "Dotted"
 msgstr ""
 
 #: dist/translation-strings.php:139
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Slide"
+msgid "Border Width"
 msgstr ""
 
 #: dist/translation-strings.php:140
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Fade"
+msgid "Border Color"
 msgstr ""
 
 #: dist/translation-strings.php:141
 #: dist/editor_blocks.js:2
-msgid "Infinite Scrolling"
+msgid "Edit"
 msgstr ""
 
 #: dist/translation-strings.php:142
-#: dist/editor_blocks.js:2
-msgid "Only visible in the frontend."
+msgid "Global Gradients"
 msgstr ""
 
 #: dist/translation-strings.php:143
 #: dist/editor_blocks.js:2
-msgid "Slides to Show"
+msgid "Global Colors"
 msgstr ""
 
 #: dist/translation-strings.php:144
-#: dist/editor_blocks.js:2
-msgid "Slide Gap"
+msgid "Add Column"
 msgstr ""
 
 #: dist/translation-strings.php:145
-#: dist/editor_blocks.js:2
-msgid "Fade duration"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Column Widths"
 msgstr ""
 
 #: dist/translation-strings.php:146
-#: dist/editor_blocks.js:2
-msgid "Autoplay"
+msgid "Adjust the individual widths of each column"
 msgstr ""
 
 #: dist/translation-strings.php:147
-#: dist/editor_blocks.js:2
-msgid "Speed (ms)"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Custom Attributes"
 msgstr ""
 
 #: dist/translation-strings.php:148
-#: dist/editor_blocks.js:2
-msgid "Arrows"
+msgid "You can type in custom HTML attributes for this block in the field above."
 msgstr ""
 
 #: dist/translation-strings.php:149
-#: dist/editor_blocks.js:2
-msgid "Previous Slide Icon"
+msgid "Example:"
 msgstr ""
 
 #: dist/translation-strings.php:150
-#: dist/editor_blocks.js:2
-msgid "Next Slide Icon"
+msgid "Learn more about Custom Attributes"
 msgstr ""
 
 #: dist/translation-strings.php:151
-#: dist/editor_blocks.js:2
-msgid "Arrow Position"
+msgid "There is an error in your custom attribute"
 msgstr ""
 
 #: dist/translation-strings.php:152
-#: dist/editor_blocks.js:2
-msgid "Inside"
+#: dist/translation-strings.php:1695
+#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:160
+#: src/welcome/index.php:211
+#: src/welcome/index.php:224
+#: src/welcome/index.php:235
+#: src/welcome/index.php:348
+msgid "Go Premium"
 msgstr ""
 
 #: dist/translation-strings.php:153
-#: dist/editor_blocks.js:2
-msgid "Outside"
+msgid "No designs found"
 msgstr ""
 
 #: dist/translation-strings.php:154
-#: dist/editor_blocks.js:2
-msgid "%s Justify"
+msgid "Group into Container"
 msgstr ""
 
 #: dist/translation-strings.php:155
-#: dist/editor_blocks.js:2
-msgid "%s Offset"
+msgid "Ungroup from Container"
 msgstr ""
 
 #: dist/translation-strings.php:156
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Button Gap"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Layout"
 msgstr ""
 
 #: dist/translation-strings.php:157
-#: dist/editor_blocks.js:2
-msgid "%s Color"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:425
+msgctxt "Nth Title"
+msgid "%s %d"
 msgstr ""
 
 #: dist/translation-strings.php:158
-#: src/stk-block-types.php:427
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:410
-msgid "Icon"
+msgid "Wave"
 msgstr ""
 
 #: dist/translation-strings.php:159
-#: dist/editor_blocks.js:2
-msgid "%s Width"
+msgid "Straight"
 msgstr ""
 
 #: dist/translation-strings.php:160
-#: dist/editor_blocks.js:2
-msgid "%s Height"
+msgid "Slant"
 msgstr ""
 
 #: dist/translation-strings.php:161
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:429
-msgid "Border Radius"
+msgid "Curve"
 msgstr ""
 
 #: dist/translation-strings.php:162
-#: dist/editor_blocks.js:2
-msgid "%s Size"
+msgid "Rounded"
 msgstr ""
 
 #: dist/translation-strings.php:163
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:171
-msgid "Opacity"
+#: dist/translation-strings.js:266
+msgid "Dynamic Fields"
 msgstr ""
 
 #: dist/translation-strings.php:164
-#: dist/editor_blocks.js:2
-msgid "Show %s on mobile"
+msgid "auto"
 msgstr ""
 
 #: dist/translation-strings.php:165
-#: dist/editor_blocks.js:2
-msgid "arrows"
+msgid "System Fonts"
 msgstr ""
 
 #: dist/translation-strings.php:166
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Dots"
+msgid "Sans-Serif"
 msgstr ""
 
 #: dist/translation-strings.php:167
-#: dist/editor_blocks.js:2
-msgid "Dot Style"
+msgid "Serif"
 msgstr ""
 
 #: dist/translation-strings.php:168
-#: dist/editor_blocks.js:2
-msgid "Solid"
+msgid "Serif Alternative"
 msgstr ""
 
 #: dist/translation-strings.php:169
-#: src/stk-block-types.php:871
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:566
-msgid "Outline"
+msgid "Monospace"
 msgstr ""
 
 #: dist/translation-strings.php:170
-#: dist/editor_blocks.js:2
-msgid "Dot"
+msgid "Google Fonts"
 msgstr ""
 
 #: dist/translation-strings.php:171
-#: dist/editor_blocks.js:2
-msgid "Active Dot"
+msgid "Theme Fonts"
 msgstr ""
 
 #: dist/translation-strings.php:172
-#: dist/editor_blocks.js:2
-msgid "%s Gap"
+msgid "Font Family"
 msgstr ""
 
 #: dist/translation-strings.php:173
-#: dist/editor_blocks.js:2
-msgid "To improve accessibility, the clickable area of the dots will not go below %s."
+msgid "Individual sides"
 msgstr ""
 
 #: dist/translation-strings.php:174
-#: dist/editor_blocks.js:2
-msgid "dots"
+msgid "All sides"
 msgstr ""
 
 #: dist/translation-strings.php:175
-#: dist/editor_blocks.js:2
-msgid "Accessibility"
+msgid "Top and Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:176
-#: dist/editor_blocks.js:2
-msgid "%s label"
+msgid "Left and Right"
 msgstr ""
 
 #: dist/translation-strings.php:177
-#: dist/editor_blocks.js:2
-msgid "Previous slide"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:248
+msgid "Top Left"
 msgstr ""
 
 #: dist/translation-strings.php:178
-#: dist/editor_blocks.js:2
-msgid "Next slide"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:250
+msgid "Top Right"
 msgstr ""
 
 #: dist/translation-strings.php:179
-#: dist/editor_blocks.js:2
-msgid "Use %%d to show the slide number."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:254
+msgid "Bottom Left"
 msgstr ""
 
 #: dist/translation-strings.php:180
-#: dist/editor_blocks.js:2
-msgid "Slide N of N"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:256
+msgid "Bottom Right"
 msgstr ""
 
 #: dist/translation-strings.php:181
-#: dist/editor_blocks.js:2
-msgid "Use two %%d to show the slide number and the total slides. e.g. Slide 1 of 3."
+msgid "There are no blocks in this group, please add one."
 msgstr ""
 
 #: dist/translation-strings.php:182
-#: dist/editor_blocks.js:2
-msgid "100"
+msgid "Add Block"
 msgstr ""
 
 #: dist/translation-strings.php:183
-#: dist/editor_blocks.js:2
-msgid "One column"
+msgid "Font Size"
 msgstr ""
 
 #: dist/translation-strings.php:184
+#: src/stk-block-types.php:363
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "50 / 50"
+#: dist/translation-strings.js:500
+msgid "Heading"
 msgstr ""
 
 #: dist/translation-strings.php:185
-#: dist/editor_blocks.js:2
-msgid "Two columns; equal split"
+#: src/stk-block-types.php:953
+#: dist/translation-strings.js:575
+msgid "Paragraph"
 msgstr ""
 
 #: dist/translation-strings.php:186
-#: dist/editor_blocks.js:2
-msgid "30 / 70"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "component"
+msgid "%s HTML Tag"
 msgstr ""
 
 #: dist/translation-strings.php:187
+#: src/stk-block-types.php:373
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Two columns; one-third, two-thirds split"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:309
+msgid "Title"
 msgstr ""
 
 #: dist/translation-strings.php:188
+#: src/stk-block-types.php:427
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "70 / 30"
+#: dist/translation-strings.js:410
+msgid "Icon"
 msgstr ""
 
 #: dist/translation-strings.php:189
-#: dist/editor_blocks.js:2
-msgid "Two columns; two-thirds, one-third split"
+msgid "Type to search icon"
 msgstr ""
 
 #: dist/translation-strings.php:190
-#: dist/editor_blocks.js:2
-msgid "33 / 33 / 33"
+msgid "Icon Settings"
 msgstr ""
 
 #: dist/translation-strings.php:191
-#: dist/editor_blocks.js:2
-msgid "Three columns; equal split"
+msgid "Upload SVG"
 msgstr ""
 
 #: dist/translation-strings.php:192
-#: dist/editor_blocks.js:2
-msgid "25 / 50 / 25"
+msgid "Clear icon"
 msgstr ""
 
 #: dist/translation-strings.php:193
-#: dist/editor_blocks.js:2
-msgid "Three columns; wide center column"
+msgid "Drop your SVG here"
 msgstr ""
 
 #: dist/translation-strings.php:194
-#: dist/editor_blocks.js:2
-msgid "25 / 25 / 25 / 25"
+msgid "preview"
 msgstr ""
 
 #: dist/translation-strings.php:195
-#: dist/editor_blocks.js:2
-msgid "Four columns; equal split"
+msgid "Describe the purpose of the image"
 msgstr ""
 
 #: dist/translation-strings.php:196
-#: dist/editor_blocks.js:2
-msgid "Column Spacing"
+msgid "Leave empty if the image is purely decorative."
 msgstr ""
 
 #: dist/translation-strings.php:197
-#: dist/editor_blocks.js:2
-msgid "Sets the paddings between the column content and the border."
+msgid "Alt Text (Alternative Text)"
 msgstr ""
 
 #: dist/translation-strings.php:198
-#: dist/editor_blocks.js:2
-msgid "Align Last Block to Bottom"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:203
+msgid "Blur"
 msgstr ""
 
 #: dist/translation-strings.php:199
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Ghost"
+msgid "Brightness"
 msgstr ""
 
 #: dist/translation-strings.php:200
-#: src/stk-block-types.php:64
-#: src/stk-block-types.php:83
-#: src/stk-block-types.php:475
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:462
-msgid "Link"
+msgid "Contrast"
 msgstr ""
 
 #: dist/translation-strings.php:201
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Button text"
+msgid "Grayscale"
 msgstr ""
 
 #: dist/translation-strings.php:202
-#: dist/editor_blocks.js:2
-msgid "Call to action"
+msgid "Hue Rotate"
 msgstr ""
 
 #: dist/translation-strings.php:203
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Stackable Design Library"
+msgid "Invert"
 msgstr ""
 
 #: dist/translation-strings.php:204
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Open the Design Library and select a pre-designed block or layout."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:197
+msgid "Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:205
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Open Design Library"
+msgid "Saturate"
 msgstr ""
 
 #: dist/translation-strings.php:206
-#: dist/editor_blocks.js:2
-msgid "Counter"
+msgid "Sepia"
 msgstr ""
 
 #: dist/translation-strings.php:207
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Duration (ms)"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:281
+msgid "Image Size"
 msgstr ""
 
 #: dist/translation-strings.php:208
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "1,234.56"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:147
+msgid "Default"
 msgstr ""
 
 #: dist/translation-strings.php:209
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "1,234,567"
+msgid "Square"
 msgstr ""
 
 #: dist/translation-strings.php:210
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Bar"
+msgid "Circle"
 msgstr ""
 
 #: dist/translation-strings.php:211
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Asterisks"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:343
+msgid "Blob %s"
 msgstr ""
 
 #: dist/translation-strings.php:212
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:167
-msgid "Color"
+#: dist/translation-strings.js:207
+msgid "Shape"
 msgstr ""
 
 #: dist/translation-strings.php:213
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Width"
+msgid "Upload"
 msgstr ""
 
 #: dist/translation-strings.php:214
-#: dist/editor_blocks.js:2
-msgid "Height / Size"
+msgid "Replace"
 msgstr ""
 
 #: dist/translation-strings.php:215
-#: dist/editor_blocks.js:2
-msgid "Colon"
+msgid "Click on any inner block in the editor to style it."
 msgstr ""
 
 #: dist/translation-strings.php:216
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Line"
+msgid "Looking for other settings? They've moved to the %s tab."
 msgstr ""
 
 #: dist/translation-strings.php:217
-#: src/stk-block-types.php:763
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:551
-msgid "Separator"
+msgid "style"
 msgstr ""
 
 #: dist/translation-strings.php:218
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Size"
+msgid "Dismiss hint"
 msgstr ""
 
 #: dist/translation-strings.php:219
-#: dist/editor_blocks.js:2
-msgid "Top Offset"
+msgid "layout"
 msgstr ""
 
 #: dist/translation-strings.php:220
-#: dist/editor_blocks.js:2
-msgid "Due Date"
+#: src/welcome/index.php:119
+#: src/welcome/index.php:336
+msgid "Settings"
 msgstr ""
 
 #: dist/translation-strings.php:221
-#: dist/editor_blocks.js:2
-msgid "Recurring"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Designs"
 msgstr ""
 
 #: dist/translation-strings.php:222
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:74
-msgid "None"
+msgid "Pick a design to start from, this will override your block settings"
 msgstr ""
 
 #: dist/translation-strings.php:223
-#: dist/editor_blocks.js:2
-msgid "Hide Block"
+msgid "Stop showing tooltips"
 msgstr ""
 
 #: dist/translation-strings.php:224
-#: dist/editor_blocks.js:2
-msgid "Display Message Upon Expiration"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Layout Tab"
 msgstr ""
 
 #: dist/translation-strings.php:225
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:63
-msgid "End Date"
+msgid "Style"
 msgstr ""
 
 #: dist/translation-strings.php:226
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:61
-msgid "Start Date"
+msgid "Style Tab"
 msgstr ""
 
 #: dist/translation-strings.php:227
-#: dist/editor_blocks.js:2
-msgid "Timezone"
+msgid "Advanced"
 msgstr ""
 
 #: dist/translation-strings.php:228
-#: dist/editor_blocks.js:2
-msgid "Action on Expiration"
+msgid "Advanced Tab"
 msgstr ""
 
 #: dist/translation-strings.php:229
-#: dist/editor_blocks.js:2
-msgid "Countdown Duration"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Auto"
 msgstr ""
 
 #: dist/translation-strings.php:230
-#: dist/editor_blocks.js:2
-msgid "Days"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:407
+msgid "Column"
 msgstr ""
 
 #: dist/translation-strings.php:231
-#: dist/editor_blocks.js:2
-msgid "Hours"
+msgid "Get More Image Shapes"
 msgstr ""
 
 #: dist/translation-strings.php:232
-#: dist/editor_blocks.js:2
-msgid "Minutes"
+msgid "Mask images with a variety of blob-like shapes"
 msgstr ""
 
 #: dist/translation-strings.php:233
-#: dist/editor_blocks.js:2
-msgid "Seconds"
+msgid "Choose from over 50 different shapes"
 msgstr ""
 
 #: dist/translation-strings.php:234
-#: dist/editor_blocks.js:2
-msgid "Restart Countdown After no. of Hours"
+msgid "Enhances the overall aesthetic of images"
 msgstr ""
 
 #: dist/translation-strings.php:235
-#: dist/editor_blocks.js:2
-msgid "Enable Double Digit"
+msgid "Use Dynamic Content"
 msgstr ""
 
 #: dist/translation-strings.php:236
-#: dist/editor_blocks.js:2
-msgid "Box Gap"
+msgid "Add dynamic content from posts or post meta"
 msgstr ""
 
 #: dist/translation-strings.php:237
-#: dist/editor_blocks.js:2
-msgid "Label Top Margin"
+msgid "Use third-party plugins as dynamic sources such as ACF, Meta Box, Toolset, and more"
 msgstr ""
 
 #: dist/translation-strings.php:238
-#: dist/editor_blocks.js:2
-msgid "Digits"
+msgid "Build custom loop design with the Native Query Loop"
 msgstr ""
 
 #: dist/translation-strings.php:239
-#: dist/editor_blocks.js:2
-msgid "Labels"
+msgid "Separator Layers"
 msgstr ""
 
 #: dist/translation-strings.php:240
-#: dist/editor_blocks.js:2
-msgid "Content Alignment"
+msgid "Add a second and third layer to separators"
 msgstr ""
 
 #: dist/translation-strings.php:241
-#: dist/editor_blocks.js:2
-msgid "Expired Message"
+msgid "Change layer color, size and opacity"
 msgstr ""
 
 #: dist/translation-strings.php:242
-#: dist/editor_blocks.js:2
-msgid "Days Label"
+msgid "Greater creativity in designing separators"
 msgstr ""
 
 #: dist/translation-strings.php:243
-#: dist/editor_blocks.js:2
-msgid "Hours Label"
+msgid "Elevate Your Icons"
 msgstr ""
 
 #: dist/translation-strings.php:244
-#: dist/editor_blocks.js:2
-msgid "Minutes Label"
+msgid "Liven up icons with gradient fills, multiple colors and background shapes"
 msgstr ""
 
 #: dist/translation-strings.php:245
-#: dist/editor_blocks.js:2
-msgid "Seconds Label"
+msgid "More design options and customization for icons"
 msgstr ""
 
 #: dist/translation-strings.php:246
-#: dist/editor_blocks.js:2
-msgid "Description for this block. Use this space for describing your block."
+msgid "Choose from over 50 background shapes"
 msgstr ""
 
 #: dist/translation-strings.php:247
-#: dist/editor_blocks.js:2
-msgctxt "Content placeholder"
-msgid "Description for this block. Use this space for describing your block."
+msgid "Greater visual interest and variety for your icons"
 msgstr ""
 
 #: dist/translation-strings.php:248
-#: dist/editor_blocks.js:2
-msgid "Overlap Shape 1"
+msgid "Liven up icons with background shapes"
 msgstr ""
 
 #: dist/translation-strings.php:249
-#: dist/editor_blocks.js:2
-msgid "Overlap Shape 2"
+msgid "Adjust timing of CSS transitions"
 msgstr ""
 
 #: dist/translation-strings.php:250
-#: dist/editor_blocks.js:2
-msgid "Overlap Shape 3"
+msgid "Change X and Y position of blocks"
 msgstr ""
 
 #: dist/translation-strings.php:251
-#: dist/editor_blocks.js:2
-msgid "Overlap Shape 4"
+msgid "Scale or rotate blocks"
 msgstr ""
 
 #: dist/translation-strings.php:252
-#: dist/editor_blocks.js:2
-msgid "Overlap Shape 5"
+msgid "Perfect for hover animations"
 msgstr ""
 
 #: dist/translation-strings.php:253
-#: dist/editor_blocks.js:2
-msgid "Overlap Background 1"
+msgid "Entrance fade-ins and animations when scrolling to blocks"
 msgstr ""
 
 #: dist/translation-strings.php:254
-#: dist/editor_blocks.js:2
-msgid "Overlap Background 2"
+msgid "Smooth scroll animations based on scrolling position"
 msgstr ""
 
 #: dist/translation-strings.php:255
-#: dist/editor_blocks.js:2
-msgid "Overlap Background 3"
+msgid "Create a more visually engaging and interactive experience"
 msgstr ""
 
 #: dist/translation-strings.php:256
-#: dist/editor_blocks.js:2
-msgid "Overlap Background 4"
+msgid "Show or hide blocks based on conditions"
 msgstr ""
 
 #: dist/translation-strings.php:257
-#: dist/editor_blocks.js:2
-msgid "Overlap Background 5"
+msgid "Display blocks based on time, role, meta, custom PHP, option, taxonomy and more"
 msgstr ""
 
 #: dist/translation-strings.php:258
-#: dist/editor_blocks.js:2
-msgid "Float"
+msgid "Use multiple conditions"
 msgstr ""
 
 #: dist/translation-strings.php:259
-#: src/stk-block-types.php:373
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:137
-msgid "Title"
+msgid "Show targeted content and personalization"
 msgstr ""
 
 #: dist/translation-strings.php:260
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Large Mid"
+msgid "Greater control over the visibility of content"
 msgstr ""
 
 #: dist/translation-strings.php:261
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:153
-msgid "Offset"
+msgid "Add custom CSS rules specific for each block"
 msgstr ""
 
 #: dist/translation-strings.php:262
-#: dist/editor_blocks.js:2
-msgid "Zizag"
+msgid "Support for media queries"
 msgstr ""
 
 #: dist/translation-strings.php:263
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Zigzag"
+msgid "Fine-tune styling on a per block basis"
 msgstr ""
 
 #: dist/translation-strings.php:264
-#: src/stk-block-types.php:484
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:509
-msgid "Icon Label"
+msgid "Adjust Column Arrangement"
 msgstr ""
 
 #: dist/translation-strings.php:265
-#: dist/editor_blocks.js:2
-msgid "Header Title"
+msgid "Adjust the arrangement of columns when collapsed on tablet and mobile"
 msgstr ""
 
 #: dist/translation-strings.php:266
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Half Overlay"
+msgid "Ensure that content remains organized and easily readable on mobile"
 msgstr ""
 
 #: dist/translation-strings.php:267
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Center Overlay"
+msgid "This is a Premium Design"
 msgstr ""
 
 #: dist/translation-strings.php:268
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Side Overlay"
+msgid "Unlock access to the entire design library and set your website apart from the rest."
 msgstr ""
 
 #: dist/translation-strings.php:269
-#: dist/editor_blocks.js:2
-msgid "Half Layout"
+msgid "Get More Post Options"
 msgstr ""
 
 #: dist/translation-strings.php:270
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Half"
+msgid "New Custom Post Type option"
 msgstr ""
 
 #: dist/translation-strings.php:271
-#: dist/editor_blocks.js:2
-msgid "Snapping"
+msgid "Offset, exclude, include specific posts"
 msgstr ""
 
 #: dist/translation-strings.php:272
-#: dist/editor_blocks.js:2
-msgid "Snap to Start"
+msgid "Hide the current post - great for synced patterns"
 msgstr ""
 
 #: dist/translation-strings.php:273
-#: dist/editor_blocks.js:2
-msgid "Snap to Center"
+msgid "This Is a Premium Feature"
 msgstr ""
 
 #: dist/translation-strings.php:274
-#: dist/editor_blocks.js:2
-msgid "No Snapping"
+#: src/welcome/index.php:274
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Learn More"
 msgstr ""
 
 #: dist/translation-strings.php:275
-#: dist/editor_blocks.js:2
-msgid "Item Width"
+msgid "View Demo"
 msgstr ""
 
 #: dist/translation-strings.php:276
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Height"
+msgid "You can hide premium hints in the settings"
 msgstr ""
 
 #: dist/translation-strings.php:277
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Inner Column Spacing"
+msgid "Width"
 msgstr ""
 
 #: dist/translation-strings.php:278
 #: dist/editor_blocks.js:2
-msgid "Gap"
+msgid "%s Width"
 msgstr ""
 
 #: dist/translation-strings.php:279
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Left Offset"
+msgid "Height"
 msgstr ""
 
 #: dist/translation-strings.php:280
 #: dist/editor_blocks.js:2
-msgid "Scrollbar"
+msgid "%s Height"
 msgstr ""
 
 #: dist/translation-strings.php:281
 #: dist/editor_blocks.js:2
-msgid "Track Color"
+msgid "%s Size"
 msgstr ""
 
 #: dist/translation-strings.php:282
-#: dist/editor_blocks.js:2
-msgid "Thumb Color"
+#: src/stk-block-types.php:552
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:402
+msgid "Image"
 msgstr ""
 
 #: dist/translation-strings.php:283
-#: dist/editor_blocks.js:2
-msgid "Thumb Radius"
+msgid "Inset"
 msgstr ""
 
 #: dist/translation-strings.php:284
 #: dist/editor_blocks.js:2
-msgid "123"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:212
+msgid "Horizontal Offset"
 msgstr ""
 
 #: dist/translation-strings.php:285
-#: dist/editor_blocks.js:2
-msgid "456"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:213
+msgid "Vertical Offset"
 msgstr ""
 
 #: dist/translation-strings.php:286
-#: dist/editor_blocks.js:2
-msgid "789"
+msgid "Shadow Spread"
 msgstr ""
 
 #: dist/translation-strings.php:287
-#: src/stk-block-types.php:446
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:507
-msgid "Icon Box"
+msgid "Shadow Color"
 msgstr ""
 
 #: dist/translation-strings.php:288
-#: src/stk-block-types.php:943
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:369
-msgid "Text"
+msgid "Advanced Shadow Options"
 msgstr ""
 
 #: dist/translation-strings.php:289
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Top Line"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:261
+msgid "Custom"
 msgstr ""
 
 #: dist/translation-strings.php:290
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Line Color"
+msgid "Shadow Settings"
 msgstr ""
 
 #: dist/translation-strings.php:291
-#: dist/editor_blocks.js:2
-msgid "Margin"
-msgstr ""
-
-#: dist/translation-strings.php:292
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:394
-msgid "Align"
+#: dist/translation-strings.js:430
+msgid "Shadow / Outline"
+msgstr ""
+
+#: dist/translation-strings.php:292
+msgid "Shadow/Outline"
 msgstr ""
 
 #: dist/translation-strings.php:293
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Bottom Line"
+msgid "Adjusts the intensity of the shadow/outline of the block and the appearance of the block border"
 msgstr ""
 
 #: dist/translation-strings.php:294
-#: dist/editor_blocks.js:2
-msgid "Add heading text here"
+msgid "Column Arrangement"
 msgstr ""
 
 #: dist/translation-strings.php:295
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Pill"
+msgid "Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:296
-#: dist/editor_blocks.js:2
-msgid "Icon Gap"
+msgid "Desktop"
 msgstr ""
 
 #: dist/translation-strings.php:297
-#: dist/editor_blocks.js:2
-msgid "Caption"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Tablet"
 msgstr ""
 
 #: dist/translation-strings.php:298
-#: dist/editor_blocks.js:2
-msgid "Image Caption"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Mobile"
 msgstr ""
 
 #: dist/translation-strings.php:299
-#: dist/editor_blocks.js:2
-msgid "Caption Alignment"
+#: pro__premium_only/src/dynamic-content/sources/other-posts.php:259
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:18
+msgid "Post Type"
 msgstr ""
 
 #: dist/translation-strings.php:300
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Some short text that can be expanded to show more details."
+msgid "Filter by Taxonomy"
 msgstr ""
 
 #: dist/translation-strings.php:301
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Show more"
+msgid "Taxonomy Filter Type"
 msgstr ""
 
 #: dist/translation-strings.php:302
-#: dist/editor_blocks.js:2
-msgid "Some long text that will be expanded when the show more button is clicked by the visitor."
+msgid "Included In"
 msgstr ""
 
 #: dist/translation-strings.php:303
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Show less"
+msgid "Not In"
 msgstr ""
 
 #: dist/translation-strings.php:304
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Less text"
+msgid "Sets the font set to be used for the element"
 msgstr ""
 
 #: dist/translation-strings.php:305
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "More text"
+msgid "Size"
 msgstr ""
 
 #: dist/translation-strings.php:306
-#: dist/editor_blocks.js:2
-msgid "Unordered List"
+msgid "Font size"
 msgstr ""
 
 #: dist/translation-strings.php:307
-#: dist/editor_blocks.js:2
-msgid "Ordered List"
+msgid "Sets the size of text characters"
 msgstr ""
 
 #: dist/translation-strings.php:308
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "List"
+msgid "Weight"
 msgstr ""
 
 #: dist/translation-strings.php:309
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Grid"
+msgid "Bold"
 msgstr ""
 
 #: dist/translation-strings.php:310
-#: src/stk-block-types.php:239
-#: src/stk-block-types.php:692
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:370
-msgid "Number"
+msgid "Font weight"
 msgstr ""
 
 #: dist/translation-strings.php:311
-#: dist/editor_blocks.js:2
-msgid "Padded Number"
+msgid "Sets the thinness or thickness of text characters"
 msgstr ""
 
 #: dist/translation-strings.php:312
-#: dist/editor_blocks.js:2
-msgid "Lowercase Roman"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:246
+msgid "Transform"
 msgstr ""
 
 #: dist/translation-strings.php:313
-#: dist/editor_blocks.js:2
-msgid "Uppercase Roman"
+msgid "Uppercase"
 msgstr ""
 
 #: dist/translation-strings.php:314
-#: dist/editor_blocks.js:2
-msgid "Lowercase Letters"
+msgid "Lowercase"
 msgstr ""
 
 #: dist/translation-strings.php:315
-#: dist/editor_blocks.js:2
-msgid "Uppercase Letters"
+msgid "Capitalize"
 msgstr ""
 
 #: dist/translation-strings.php:316
-#: dist/editor_blocks.js:2
-msgid "Dashed"
+msgid "Sets the usage of upper or lower case"
 msgstr ""
 
 #: dist/translation-strings.php:317
-#: dist/editor_blocks.js:2
-msgid "Dotted"
+msgid "Line-Height"
 msgstr ""
 
 #: dist/translation-strings.php:318
-#: dist/editor_blocks.js:2
-msgid "List Item"
+msgid "Line height"
 msgstr ""
 
 #: dist/translation-strings.php:319
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Full Width"
+msgid "Sets the vertical distance between lines of text"
 msgstr ""
 
 #: dist/translation-strings.php:320
-#: dist/editor_blocks.js:2
-msgid "More noticeable when using wide layouts or list item borders"
+msgid "Letter Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:321
-#: src/stk-block-types.php:206
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:478
-msgid "Columns"
+msgid "Letter spacing"
 msgstr ""
 
 #: dist/translation-strings.php:322
-#: dist/editor_blocks.js:2
-msgid "List Display Style"
+msgid "Sets the distance or space between letters"
 msgstr ""
 
 #: dist/translation-strings.php:323
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:400
-msgid "Column Gap"
+msgid "Typography"
 msgstr ""
 
 #: dist/translation-strings.php:324
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:401
-msgid "Row Gap"
+msgid "Opens in new tab"
 msgstr ""
 
 #: dist/translation-strings.php:325
-#: dist/editor_blocks.js:2
-msgid "Indentation"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Nofollow link"
 msgstr ""
 
 #: dist/translation-strings.php:326
-#: dist/editor_blocks.js:2
-msgid "Icons & Numbers"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Sponsored"
 msgstr ""
 
 #: dist/translation-strings.php:327
-#: dist/editor_blocks.js:2
-msgid "List Type"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "UGC"
 msgstr ""
 
 #: dist/translation-strings.php:328
-#: dist/editor_blocks.js:2
-msgid "With Period"
+msgid "Search or type url"
 msgstr ""
 
 #: dist/translation-strings.php:329
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:242
-msgid "Icon Opacity"
+msgid "URL"
 msgstr ""
 
 #: dist/translation-strings.php:330
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Icon Rotation"
+msgid "Upgrade to Premium to get more design variations."
 msgstr ""
 
 #: dist/translation-strings.php:331
-#: dist/editor_blocks.js:2
-msgid "Icon Vertical Alignment"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "All"
 msgstr ""
 
 #: dist/translation-strings.php:332
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "This is more visible if you have long text in your list."
+msgid "Stackable Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:333
-#: dist/editor_blocks.js:2
-msgid "Icon Vertical Offset"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Block Designs"
 msgstr ""
 
 #: dist/translation-strings.php:334
-#: dist/editor_blocks.js:2
-msgid "Icon List Item Borders"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "UI Kits"
 msgstr ""
 
 #: dist/translation-strings.php:335
-#: dist/editor_blocks.js:2
-msgid "Borders"
+msgid "Wireframes"
 msgstr ""
 
 #: dist/translation-strings.php:336
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Border Width"
+msgid "Latest Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:337
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Border Color"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "V2 Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:338
-#: dist/editor_blocks.js:2
-msgid "Line 1"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "E.g. light, dark, red, minimalist…"
 msgstr ""
 
 #: dist/translation-strings.php:339
-#: dist/editor_blocks.js:2
-msgid "Line 2"
+msgid "Select Multiple"
 msgstr ""
 
 #: dist/translation-strings.php:340
-#: dist/editor_blocks.js:2
-msgid "Line 3"
+msgid "Select"
 msgstr ""
 
 #: dist/translation-strings.php:341
-#: dist/editor_blocks.js:2
-msgid "Line 4"
+msgid "Deselect All"
 msgstr ""
 
 #: dist/translation-strings.php:342
-#: dist/editor_blocks.js:2
-msgid "Line 5"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Refresh Library"
 msgstr ""
 
 #: dist/translation-strings.php:343
-#: dist/editor_blocks.js:2
-msgid "Line 6"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Large preview"
 msgstr ""
 
 #: dist/translation-strings.php:344
-#: dist/editor_blocks.js:2
-msgid "Some map features require a Google API Key."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Medium preview"
 msgstr ""
 
 #: dist/translation-strings.php:345
-#: dist/editor_blocks.js:2
-msgid "Add API key here."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Small preview"
 msgstr ""
 
 #: dist/translation-strings.php:346
-#: dist/editor_blocks.js:2
-msgid "Location"
+msgid "Add Designs"
 msgstr ""
 
 #: dist/translation-strings.php:347
 #: dist/editor_blocks.js:2
-msgid "Enter an address or location"
+msgid "Color & Highlight"
 msgstr ""
 
 #: dist/translation-strings.php:348
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Zoom"
+msgid "Highlight"
 msgstr ""
 
 #: dist/translation-strings.php:349
 #: dist/editor_blocks.js:2
-msgid "Enable Dragging"
+msgid "Low"
 msgstr ""
 
 #: dist/translation-strings.php:350
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Full Screen Button"
+msgid "Text Color"
 msgstr ""
 
 #: dist/translation-strings.php:351
 #: dist/editor_blocks.js:2
-msgid "Map Type Buttons"
+msgid "Highlight Color"
 msgstr ""
 
 #: dist/translation-strings.php:352
 #: dist/editor_blocks.js:2
-msgid "Street View Button"
+msgid "Highlight Text"
 msgstr ""
 
 #: dist/translation-strings.php:353
 #: dist/editor_blocks.js:2
-msgid "Zoom Buttons"
+msgid "%s Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:354
 #: dist/editor_blocks.js:2
-msgid "Map Style"
+msgid "Content"
 msgstr ""
 
 #: dist/translation-strings.php:355
-#: dist/editor_blocks.js:2
-msgid "Custom Map Style (Paste JSON here)"
+msgid "Content Min. Height"
 msgstr ""
 
 #: dist/translation-strings.php:356
-#: dist/editor_blocks.js:2
-msgid "Learn how to use Custom Map Styles"
+msgid "Content Max Width"
 msgstr ""
 
 #: dist/translation-strings.php:357
-#: dist/editor_blocks.js:2
-msgid "Map Marker"
-msgstr ""
-
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Content Horizontal Align"
+msgstr ""
+
 #: dist/translation-strings.php:358
-#: dist/editor_blocks.js:2
-msgid "Uploaded Icon and Icon Color settings are not fully compatible."
+msgid "Sets the placement of the column container to left, center or right. Not available when block width is set to full width."
 msgstr ""
 
 #: dist/translation-strings.php:359
-#: dist/editor_blocks.js:2
-msgid "Horizontal Icon Anchor Point"
+msgid "Adjusts the placement of all content in the block to align left, center or right"
 msgstr ""
 
 #: dist/translation-strings.php:360
 #: dist/editor_blocks.js:2
-msgid "Vertical Icon Anchor Point"
+msgid "%s Justify"
 msgstr ""
 
 #: dist/translation-strings.php:361
-#: src/stk-block-types.php:584
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:523
-msgid "Map"
+msgid "Sets the horizontal position and spacing of the inner columns."
 msgstr ""
 
 #: dist/translation-strings.php:362
-#: dist/editor_blocks.js:2
-msgid "Embedded content from Google Map Platform."
+msgid "Column contents need to be narrow for effect to show."
 msgstr ""
 
 #: dist/translation-strings.php:363
-#: dist/editor_blocks.js:2
-msgid "Map Example"
+msgid "Sets the vertical position of the inner columns relative to the columns block."
 msgstr ""
 
 #: dist/translation-strings.php:364
-#: dist/editor_blocks.js:2
-msgid "Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled."
+msgid "%s Direction"
 msgstr ""
 
 #: dist/translation-strings.php:365
-#: dist/editor_blocks.js:2
-msgid "Silver"
+msgid "Inner Block"
 msgstr ""
 
 #: dist/translation-strings.php:366
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Retro"
+msgid "Horizontal"
 msgstr ""
 
 #: dist/translation-strings.php:367
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Dark"
+msgid "Vertical"
 msgstr ""
 
 #: dist/translation-strings.php:368
-#: dist/editor_blocks.js:2
-msgid "Night"
+msgid "Sets the horizontal/vertical position and spacing of the inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:369
-#: dist/editor_blocks.js:2
-msgid "Aubergine"
+msgid "Aligns the horizontal/vertical position of the inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:370
-#: dist/editor_blocks.js:2
-msgid "Embedded content from Google Maps Platform."
+msgid "Set Content Min. Height for alignment to display properly"
 msgstr ""
 
 #: dist/translation-strings.php:371
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Notification Type"
+msgid "Inner Block Wrapping"
 msgstr ""
 
 #: dist/translation-strings.php:372
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Success"
+msgid "No Wrap"
 msgstr ""
 
 #: dist/translation-strings.php:373
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Error"
+msgid "Wrap"
 msgstr ""
 
 #: dist/translation-strings.php:374
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Warning"
+msgid "%s %s"
 msgstr ""
 
 #: dist/translation-strings.php:375
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Information"
+#: dist/translation-strings.js:400
+msgid "Column Gap"
 msgstr ""
 
 #: dist/translation-strings.php:376
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Dismissible"
+msgid "Gap"
 msgstr ""
 
 #: dist/translation-strings.php:377
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Icon Size"
+msgid "Sets the gap between the columns of inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:378
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:241
-msgid "Icon Color"
+msgid "Sets the gap between inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:379
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Side"
+#: dist/translation-strings.js:401
+msgid "Row Gap"
 msgstr ""
 
 #: dist/translation-strings.php:380
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Bordered"
+msgid "Sets the gap between the rows of inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:381
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Outlined"
+msgctxt "HTML Tag"
+msgid "Address"
 msgstr ""
 
 #: dist/translation-strings.php:382
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Large Icon"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Article"
 msgstr ""
 
 #: dist/translation-strings.php:383
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:227
-msgid "Shape"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Aside"
 msgstr ""
 
 #: dist/translation-strings.php:384
-#: dist/editor_blocks.js:2
-msgid "01"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Blockquote"
 msgstr ""
 
 #: dist/translation-strings.php:385
-#: dist/editor_blocks.js:2
-msgid "$"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Div"
 msgstr ""
 
 #: dist/translation-strings.php:386
-#: dist/editor_blocks.js:2
-msgid "99"
+msgctxt "HTML Tag"
+msgid "Details"
 msgstr ""
 
 #: dist/translation-strings.php:387
-#: dist/editor_blocks.js:2
-msgid ".00"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Footer"
 msgstr ""
 
 #: dist/translation-strings.php:388
-#: dist/editor_blocks.js:2
-msgid "Content Arrangement"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Header"
 msgstr ""
 
 #: dist/translation-strings.php:389
-#: dist/editor_blocks.js:2
-msgid "Sets the order of the items displayed (category, title, meta, excerpt, read more button, image) for each post"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Hgroup"
 msgstr ""
 
 #: dist/translation-strings.php:390
-#: dist/editor_blocks.js:2
-msgid "Query"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Main"
 msgstr ""
 
 #: dist/translation-strings.php:391
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:396
-msgid "Number of items"
+msgctxt "HTML Tag"
+msgid "Nav"
 msgstr ""
 
 #: dist/translation-strings.php:392
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Order by"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Section"
 msgstr ""
 
 #: dist/translation-strings.php:393
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Newest to Oldest"
+msgctxt "HTML Tag"
+msgid "Summary"
 msgstr ""
 
 #: dist/translation-strings.php:394
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Oldest to Newest"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:312
+msgid "General"
 msgstr ""
 
 #: dist/translation-strings.php:395
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "A → Z"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Block"
 msgstr ""
 
 #: dist/translation-strings.php:396
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Z → A"
+msgid "Overflow"
 msgstr ""
 
 #: dist/translation-strings.php:397
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Last Modified to Oldest"
+msgid "Hidden"
 msgstr ""
 
 #: dist/translation-strings.php:398
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Oldest Modified to Last"
+msgid "Scroll"
 msgstr ""
 
 #: dist/translation-strings.php:399
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Menu Order"
+msgid "Visible"
 msgstr ""
 
 #: dist/translation-strings.php:400
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Random"
+msgid "Clear"
 msgstr ""
 
 #: dist/translation-strings.php:401
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Spacing"
+msgid "Both"
 msgstr ""
 
 #: dist/translation-strings.php:402
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Featured Image"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:342
+msgid "Position"
 msgstr ""
 
 #: dist/translation-strings.php:403
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Category"
+msgid "Adjusts the transparency of the entire block"
 msgstr ""
 
 #: dist/translation-strings.php:404
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Excerpt"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Z-Index"
 msgstr ""
 
 #: dist/translation-strings.php:405
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Meta"
+msgid "Sets the stack order of different blocks to make one appear in front of another. A block with a higher z-index will show up on top of another block with a lower z-index."
 msgstr ""
 
 #: dist/translation-strings.php:406
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Read More Link"
+msgid "Sticky position may not work across all themes"
 msgstr ""
 
 #: dist/translation-strings.php:407
-#: src/stk-block-types.php:646
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:534
-msgid "Posts"
+msgid "Static"
 msgstr ""
 
 #: dist/translation-strings.php:408
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "No posts found."
+msgid "Relative"
 msgstr ""
 
 #: dist/translation-strings.php:409
-#: dist/editor_blocks.js:2
-msgid "Apply hover effect when container is hovered"
+msgid "Absolute"
 msgstr ""
 
 #: dist/translation-strings.php:410
-#: dist/editor_blocks.js:2
-msgid "Highlight Color"
+msgid "Sticky"
 msgstr ""
 
 #: dist/translation-strings.php:411
+#: src/stk-block-types.php:64
+#: src/stk-block-types.php:83
+#: src/stk-block-types.php:475
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:310
-msgid "Excerpt Length"
+#: dist/translation-strings.js:462
+msgid "Link"
 msgstr ""
 
 #: dist/translation-strings.php:412
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Show Author"
+msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding. Opens inner image block if no link is provided"
 msgstr ""
 
 #: dist/translation-strings.php:413
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Show Date"
+msgid "Block Size & Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:414
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Show Comments"
+msgid "Background"
 msgstr ""
 
 #: dist/translation-strings.php:415
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Default (Dot)"
+msgid "Borders & Shadows"
 msgstr ""
 
 #: dist/translation-strings.php:416
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Space"
-msgstr ""
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:440
+msgid "Lift"
+msgstr ""
 
 #: dist/translation-strings.php:417
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Comma"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:180
+msgid "Scale"
 msgstr ""
 
 #: dist/translation-strings.php:418
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Dash"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Lift & Scale"
 msgstr ""
 
 #: dist/translation-strings.php:419
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Pipe"
+msgid "Lift More"
 msgstr ""
 
 #: dist/translation-strings.php:420
-#: dist/editor_blocks.js:2
-msgid "Sets the separators between meta items (dot, space, comma, dash, pipe)"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Scale More"
 msgstr ""
 
 #: dist/translation-strings.php:421
-#: dist/editor_blocks.js:2
-msgid "Add post links to images"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Lift & Scale More"
 msgstr ""
 
 #: dist/translation-strings.php:422
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:319
-msgid "Image Size"
+#: dist/translation-strings.js:448
+msgid "Hover Effect"
 msgstr ""
 
 #: dist/translation-strings.php:423
-#: dist/editor_blocks.js:2
-msgid "Sets the image display size to thumbnail, medium, large or full size. A smaller image size will also load faster."
+msgid "Hover effect"
 msgstr ""
 
 #: dist/translation-strings.php:424
-#: src/block/posts/index.php:265
-#: dist/editor_blocks.js:2
-msgid "Continue Reading"
+msgid "Triggers animation or effects when you mouse over"
 msgstr ""
 
 #: dist/translation-strings.php:425
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Read More Button"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:357
+msgid "Single"
 msgstr ""
 
 #: dist/translation-strings.php:426
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "featured"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:216
+msgid "Gradient"
 msgstr ""
 
 #: dist/translation-strings.php:427
-#: src/block/posts/index.php:59
-#: src/deprecated/v2/block/blog-posts/index.php:251
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "(Untitled)"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Button Color"
 msgstr ""
 
 #: dist/translation-strings.php:428
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Image Card"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:221
+msgid "Icon Color"
 msgstr ""
 
 #: dist/translation-strings.php:429
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Portfolio"
+msgid "Button Colors"
 msgstr ""
 
 #: dist/translation-strings.php:430
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Portfolio 2"
+msgid "Full Width"
 msgstr ""
 
 #: dist/translation-strings.php:431
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Vertical Card"
+msgid "Min. Button Height"
 msgstr ""
 
 #: dist/translation-strings.php:432
-#: dist/editor_blocks.js:2
-msgid "Vertical Card 2"
+msgid "Button Width"
 msgstr ""
 
 #: dist/translation-strings.php:433
-#: dist/editor_blocks.js:2
-msgid "Package inclusion one"
+msgid "Button Padding"
 msgstr ""
 
 #: dist/translation-strings.php:434
-#: dist/editor_blocks.js:2
-msgid "Package inclusion two"
+msgid "Button padding"
 msgstr ""
 
 #: dist/translation-strings.php:435
-#: dist/editor_blocks.js:2
-msgid "Package inclusion three"
+msgid "Adjusts the space between the button text and button borders"
 msgstr ""
 
 #: dist/translation-strings.php:436
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:162
-msgid "one"
+msgid "Button Size & Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:437
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:163
-msgid "two"
+msgid "Button Borders & Shadows"
 msgstr ""
 
 #: dist/translation-strings.php:438
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:164
-msgid "three"
+msgid "Styles"
 msgstr ""
 
 #: dist/translation-strings.php:439
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:165
-msgid "Package inclusion %s"
+msgid "Conditional Display"
 msgstr ""
 
 #: dist/translation-strings.php:440
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Compact"
+msgid "Block Width"
 msgstr ""
 
 #: dist/translation-strings.php:441
-#: dist/editor_blocks.js:2
-msgid "Banner Layout"
+msgid "Align Wide"
 msgstr ""
 
 #: dist/translation-strings.php:442
-#: dist/editor_blocks.js:2
-msgid "Banner"
+msgid "Align Full"
 msgstr ""
 
 #: dist/translation-strings.php:443
-#: dist/editor_blocks.js:2
-msgid "Colored Layout"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Content Width"
 msgstr ""
 
 #: dist/translation-strings.php:444
-#: dist/editor_blocks.js:2
-msgid "Sectioned Layout"
+msgid "Set the content to be smaller than the block width"
 msgstr ""
 
 #: dist/translation-strings.php:445
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Sectioned"
+msgid "When enabled, the last column will be cloned instead of adding a blank column."
 msgstr ""
 
 #: dist/translation-strings.php:446
+#: src/stk-block-types.php:206
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Label"
+#: dist/translation-strings.js:478
+msgid "Columns"
 msgstr ""
 
 #: dist/translation-strings.php:447
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:138
-msgctxt "Text placeholder"
-msgid "Text for This Block"
+msgid "Allow Column Wrapping"
 msgstr ""
 
 #: dist/translation-strings.php:448
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Box"
+msgid "Inner Column Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:449
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Captioned"
+msgid "Sets column paddings, the space inside the block between the block elements and the column container border"
 msgstr ""
 
 #: dist/translation-strings.php:450
-#: src/stk-block-types.php:782
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:554
-msgid "Spacer"
+msgid "Sets the distance between two or more columns"
 msgstr ""
 
 #: dist/translation-strings.php:451
-#: dist/editor_blocks.js:2
-msgid "Type / to choose a block"
+#: src/stk-block-types.php:216
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:431
+msgid "Container"
 msgstr ""
 
 #: dist/translation-strings.php:452
-#: dist/editor_blocks.js:2
-msgid "Subtitle for this block."
+msgid "Container Min. Height"
 msgstr ""
 
 #: dist/translation-strings.php:453
-#: dist/editor_blocks.js:2
-msgid "Unordered"
+msgid "Max Container Width"
 msgstr ""
 
 #: dist/translation-strings.php:454
-#: dist/editor_blocks.js:2
-msgctxt "%s is a heading level, e.g. H1"
-msgid "Include %s"
+msgid "Container Horizontal Align"
 msgstr ""
 
 #: dist/translation-strings.php:455
-#: dist/editor_blocks.js:2
-msgid "Auto-generate missing anchor ids"
+msgid "Container Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:456
-#: dist/editor_blocks.js:2
-msgid "Scrolling"
+msgid "Container Background"
 msgstr ""
 
 #: dist/translation-strings.php:457
-#: dist/editor_blocks.js:2
-msgid "Use smooth scroll"
+msgid "Trigger hover state on nested blocks"
 msgstr ""
 
 #: dist/translation-strings.php:458
-#: dist/editor_blocks.js:2
-msgid "Scroll Top Offset "
+msgid "Container Borders & Shadow"
 msgstr ""
 
 #: dist/translation-strings.php:459
-#: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Introduction"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:158
+msgid "Custom CSS"
 msgstr ""
 
 #: dist/translation-strings.php:460
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 1: Abstract"
+msgid "Icon Size"
 msgstr ""
 
 #: dist/translation-strings.php:461
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 2: History"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:222
+msgid "Icon Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:462
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 3: Main Content"
+msgid "Icon Rotation"
 msgstr ""
 
 #: dist/translation-strings.php:463
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 4: Additional Thoughts"
+msgid "Icon Position"
 msgstr ""
 
 #: dist/translation-strings.php:464
 #: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Conclusion"
+msgid "Icon Gap"
 msgstr ""
 
 #: dist/translation-strings.php:465
-#: src/stk-block-types.php:859
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:562
-msgid "Table of Contents"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:209
+msgid "Shape Color"
 msgstr ""
 
 #: dist/translation-strings.php:466
-#: dist/editor_blocks.js:2
-msgid "Include heading"
+msgid "Shape Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:467
-#: dist/editor_blocks.js:2
-msgid "Exclude heading"
+msgid "Shape Padding"
 msgstr ""
 
 #: dist/translation-strings.php:468
-#: src/stk-block-types.php:363
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:500
-msgid "Heading"
+msgid "Shape Outline Width"
 msgstr ""
 
 #: dist/translation-strings.php:469
-#: dist/editor_blocks.js:2
-msgid "Classic"
+msgid "Shape Outline Color"
 msgstr ""
 
 #: dist/translation-strings.php:470
-#: dist/editor_blocks.js:2
-msgid "Centered Pills"
+msgid "Icon Shape"
 msgstr ""
 
 #: dist/translation-strings.php:471
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:415
-msgid "Left"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:206
+msgid "Background Shape"
 msgstr ""
 
 #: dist/translation-strings.php:472
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:416
-msgid "Right"
+msgid "Select Image"
 msgstr ""
 
 #: dist/translation-strings.php:473
-#: dist/editor_blocks.js:2
-msgid "Top"
+msgid "Image Url"
 msgstr ""
 
 #: dist/translation-strings.php:474
-#: dist/editor_blocks.js:2
-msgid "Bottom"
+msgid "Aspect Ratio"
 msgstr ""
 
 #: dist/translation-strings.php:475
-#: dist/editor_blocks.js:2
-msgid "Move left"
+msgid "Original"
 msgstr ""
 
 #: dist/translation-strings.php:476
-#: dist/editor_blocks.js:2
-msgid "Move right"
+msgid "Square 1:1"
 msgstr ""
 
 #: dist/translation-strings.php:477
-#: dist/editor_blocks.js:2
-msgid "Add tab"
+msgid "Standard 4:3"
 msgstr ""
 
 #: dist/translation-strings.php:478
-#: dist/editor_blocks.js:2
-msgid "Duplicate tab"
+msgid "Classic 3:2"
 msgstr ""
 
 #: dist/translation-strings.php:479
-#: dist/editor_blocks.js:2
-msgid "Delete tab"
+msgid "Wide 16:9"
 msgstr ""
 
 #: dist/translation-strings.php:480
-#: dist/editor_blocks.js:2
-msgid "Are you sure you want to delete this tab?"
+msgid "Cinematic 2:1"
 msgstr ""
 
 #: dist/translation-strings.php:481
-#: dist/editor_blocks.js:2
-msgid "Fixed Icon Position"
+msgid "Ultra Wide 3:1"
 msgstr ""
 
 #: dist/translation-strings.php:482
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Icon Position"
+msgid "Panoramic 4:1"
 msgstr ""
 
 #: dist/translation-strings.php:483
-#: dist/editor_blocks.js:2
-msgid "Tab Alignment"
+msgid "Portrait 3:4"
 msgstr ""
 
 #: dist/translation-strings.php:484
-#: dist/editor_blocks.js:2
-msgid "Text Alignment"
+msgid "Classic Portrait 2:3"
 msgstr ""
 
 #: dist/translation-strings.php:485
-#: dist/editor_blocks.js:2
-msgid "Scrollable Tabs on Mobile"
+msgid "Tall 9:16"
 msgstr ""
 
 #: dist/translation-strings.php:486
-#: dist/editor_blocks.js:2
-msgid "Tab"
+msgid "Image width"
 msgstr ""
 
 #: dist/translation-strings.php:487
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Text Color"
+msgid "Adjusts the image width"
 msgstr ""
 
 #: dist/translation-strings.php:488
-#: dist/editor_blocks.js:2
-msgid "Tab Active State"
+msgid "Image height"
 msgstr ""
 
 #: dist/translation-strings.php:489
-#: dist/editor_blocks.js:2
-msgid "Typography"
+msgid "Adjusts the image height"
 msgstr ""
 
 #: dist/translation-strings.php:490
-#: dist/editor_blocks.js:2
-msgid "Change icons individually by clicking on each tab's icon."
+msgid "Open Image in Lightbox"
 msgstr ""
 
 #: dist/translation-strings.php:491
-#: dist/editor_blocks.js:2
-msgid "Tab Anchors"
+msgid "Image Alt"
 msgstr ""
 
 #: dist/translation-strings.php:492
 #: dist/editor_blocks.js:2
-msgid "Assign unique anchor names to each tab so you'll be able to link directly and open each one."
+msgid "Zoom"
 msgstr ""
 
 #: dist/translation-strings.php:493
-#: dist/editor_blocks.js:2
-msgid "%s Anchor"
+msgid "Image Shadow"
 msgstr ""
 
 #: dist/translation-strings.php:494
-#: dist/editor_blocks.js:2
-msgid "Tab Anchor"
+msgid "Adjusts the intensity of the image shadow"
 msgstr ""
 
 #: dist/translation-strings.php:495
 #: dist/editor_blocks.js:2
-msgid "Tab Label"
+msgid "Sets the image display size to thumbnail, medium, large or full size. A smaller image size will also load faster."
 msgstr ""
 
 #: dist/translation-strings.php:496
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:176
-msgid "Name"
+#: dist/translation-strings.js:429
+msgid "Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:497
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:177
-msgid "Position"
+msgid "Adjusts the radius of image corners to make them more rounded"
 msgstr ""
 
 #: dist/translation-strings.php:498
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Cover"
+msgid "Overlay Color"
 msgstr ""
 
 #: dist/translation-strings.php:499
-#: dist/editor_blocks.js:2
-msgid "Text for this block. Use this space for describing your block. Any text will do. Text for this block. You can use this space for describing your block."
+msgid "Overlay Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:500
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Bubble"
+msgid "Overlay Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:501
-#: dist/editor_blocks.js:2
-msgid "Inverted Vertical"
+msgid "Sets how the overlay color blends with the image"
 msgstr ""
 
 #: dist/translation-strings.php:502
-#: dist/editor_blocks.js:2
-msgid "Play Video"
+msgid "Focal point"
 msgstr ""
 
 #: dist/translation-strings.php:503
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Popup Option #1: Upload Video"
+msgid "Image Fit"
 msgstr ""
 
 #: dist/translation-strings.php:504
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Use .mp4 format for videos"
+msgid "Contain"
 msgstr ""
 
 #: dist/translation-strings.php:505
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Popup Option #2: Video URL"
+msgid "Cover"
 msgstr ""
 
 #: dist/translation-strings.php:506
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Paste a Youtube / Vimeo URL"
+msgid "Fill"
 msgstr ""
 
 #: dist/translation-strings.php:507
-#: dist/editor_blocks.js:2
-msgid "Allow fullscreen"
+msgid "Scale Down"
 msgstr ""
 
 #: dist/translation-strings.php:508
-#: dist/editor_blocks.js:2
-msgid "Allow download video"
+msgid "Sets the fit to default, contain, cover, fill, none, and scale down. Image fit specifies how an image resizes in a container."
 msgstr ""
 
 #: dist/translation-strings.php:509
-#: dist/editor_blocks.js:2
-msgid "Loop video"
+msgid "Image Shape"
 msgstr ""
 
 #: dist/translation-strings.php:510
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Address"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:208
+msgid "Change the shape of the image"
 msgstr ""
 
 #: dist/translation-strings.php:511
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Article"
+msgid "Flip Shape Horizontally"
 msgstr ""
 
 #: dist/translation-strings.php:512
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Aside"
+msgid "Flip Shape Vertically"
 msgstr ""
 
 #: dist/translation-strings.php:513
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Blockquote"
+msgid "Stretch Shape Mask"
 msgstr ""
 
 #: dist/translation-strings.php:514
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Div"
+msgid "Image Filter"
 msgstr ""
 
 #: dist/translation-strings.php:515
-msgctxt "HTML Tag"
-msgid "Details"
+msgid "When linked, styling this block would also style other linked blocks in adjacent columns."
 msgstr ""
 
 #: dist/translation-strings.php:516
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Footer"
+msgid "Learn more about linking"
 msgstr ""
 
 #: dist/translation-strings.php:517
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Header"
+#: src/welcome/index.php:260
+msgid "Motion Effects"
 msgstr ""
 
 #: dist/translation-strings.php:518
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Hgroup"
+msgid "Responsive"
 msgstr ""
 
 #: dist/translation-strings.php:519
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Main"
+msgid "Hide on Desktop"
 msgstr ""
 
 #: dist/translation-strings.php:520
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Nav"
+msgid "Hide on Tablet"
 msgstr ""
 
 #: dist/translation-strings.php:521
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Section"
+msgid "Hide on Mobile"
 msgstr ""
 
 #: dist/translation-strings.php:522
-msgctxt "HTML Tag"
-msgid "Summary"
+#: src/stk-block-types.php:744
+#: dist/translation-strings.js:549
+msgid "Progress Circle"
 msgstr ""
 
 #: dist/translation-strings.php:523
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "component"
-msgid "%s HTML Tag"
+#: src/stk-block-types.php:725
+#: dist/translation-strings.js:546
+msgid "Progress Bar"
 msgstr ""
 
 #: dist/translation-strings.php:524
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block"
+msgid "Progress"
 msgstr ""
 
 #: dist/translation-strings.php:525
-msgid "Overflow"
+msgid "Maximum Progress"
 msgstr ""
 
 #: dist/translation-strings.php:526
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Auto"
+msgid "Apply border radius to bar"
 msgstr ""
 
 #: dist/translation-strings.php:527
-msgid "Hidden"
+msgid "Thickness"
 msgstr ""
 
 #: dist/translation-strings.php:528
-msgid "Scroll"
+msgid "Bar Color #%s"
 msgstr ""
 
 #: dist/translation-strings.php:529
-msgid "Visible"
+msgid "Bar Color"
 msgstr ""
 
 #: dist/translation-strings.php:530
-msgid "Clear"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:215
+msgid "Gradient Direction (degrees)"
 msgstr ""
 
 #: dist/translation-strings.php:531
-msgid "Both"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Adv. Gradient Color Settings"
 msgstr ""
 
 #: dist/translation-strings.php:532
-msgid "Adjusts the transparency of the entire block"
+msgid "Gradient Direction"
 msgstr ""
 
 #: dist/translation-strings.php:533
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Z-Index"
+msgid "Sets the direction (in degrees) of the colors"
 msgstr ""
 
 #: dist/translation-strings.php:534
-msgid "Sets the stack order of different blocks to make one appear in front of another. A block with a higher z-index will show up on top of another block with a lower z-index."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Color %d Location"
 msgstr ""
 
 #: dist/translation-strings.php:535
-msgid "Sticky position may not work across all themes"
+msgid "Sets the placement of each color in relation to the other color"
 msgstr ""
 
 #: dist/translation-strings.php:536
-msgid "Static"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Gradient Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:537
-msgid "Relative"
+msgid "Sets how this background gradient/image blends into the other background"
 msgstr ""
 
 #: dist/translation-strings.php:538
-msgid "Absolute"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Color"
 msgstr ""
 
 #: dist/translation-strings.php:539
-msgid "Sticky"
+msgid "Animate"
 msgstr ""
 
 #: dist/translation-strings.php:540
-msgid "Block Size & Spacing"
+msgid "Accessibility Label"
 msgstr ""
 
 #: dist/translation-strings.php:541
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Background"
+msgid "Progress Bar Text"
 msgstr ""
 
 #: dist/translation-strings.php:542
-msgid "Borders & Shadows"
+msgid "Progress Prefix"
 msgstr ""
 
 #: dist/translation-strings.php:543
-msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding. Opens inner image block if no link is provided"
+msgid "Progress Suffix"
 msgstr ""
 
 #: dist/translation-strings.php:544
-msgid "Align Left"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Design"
 msgstr ""
 
 #: dist/translation-strings.php:545
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Align Center"
+msgid "Separator Height"
 msgstr ""
 
 #: dist/translation-strings.php:546
-msgid "Align Right"
+msgid "Adjusts the height of the separator to stretch or compress vertically"
 msgstr ""
 
 #: dist/translation-strings.php:547
-msgid "Justified"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Separator Width"
 msgstr ""
 
 #: dist/translation-strings.php:548
-msgid "Content Min. Height"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:439
+msgid "Shadow"
 msgstr ""
 
 #: dist/translation-strings.php:549
-msgid "Content Max Width"
+msgid "Adjusts the intensity of the separator shadow and makes the separator more prominent"
 msgstr ""
 
 #: dist/translation-strings.php:550
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Content Horizontal Align"
+msgid "Invert Design"
 msgstr ""
 
 #: dist/translation-strings.php:551
-msgid "Sets the placement of the column container to left, center or right. Not available when block width is set to full width."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:227
+msgid "Flip Horizontally"
 msgstr ""
 
 #: dist/translation-strings.php:552
-msgid "Adjusts the placement of all content in the block to align left, center or right"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Flip Vertically"
 msgstr ""
 
 #: dist/translation-strings.php:553
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:407
-msgid "Column"
+msgid "Bring to Front"
 msgstr ""
 
 #: dist/translation-strings.php:554
-msgid "Sets the horizontal position and spacing of the inner columns."
+msgid "Brings the separator layer in front of other block elements"
 msgstr ""
 
 #: dist/translation-strings.php:555
-msgid "Column contents need to be narrow for effect to show."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Top Separator"
 msgstr ""
 
 #: dist/translation-strings.php:556
-msgid "Sets the vertical position of the inner columns relative to the columns block."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Bottom Separator"
 msgstr ""
 
 #: dist/translation-strings.php:557
-msgid "%s Direction"
+msgid "Transform & Transition"
 msgstr ""
 
 #: dist/translation-strings.php:558
-msgid "Inner Block"
+msgid "Use theme heading margins"
 msgstr ""
 
 #: dist/translation-strings.php:559
-msgid "Sets the horizontal/vertical position and spacing of the inner blocks."
+msgid "Font Style"
 msgstr ""
 
 #: dist/translation-strings.php:560
-msgid "Aligns the horizontal/vertical position of the inner blocks."
+msgid "Italic"
 msgstr ""
 
 #: dist/translation-strings.php:561
-msgid "Set Content Min. Height for alignment to display properly"
+msgid "Oblique"
 msgstr ""
 
 #: dist/translation-strings.php:562
-msgid "Inner Block Wrapping"
+#: dist/editor_blocks.js:2
+msgid "Stackable Settings"
 msgstr ""
 
 #: dist/translation-strings.php:563
-msgid "%s %s"
+#: dist/editor_blocks.js:2
+msgid "Reset layout"
 msgstr ""
 
 #: dist/translation-strings.php:564
-msgid "Sets the gap between the columns of inner blocks."
+#: dist/editor_blocks.js:2
+msgid "Error saving block, please make sure you only have a %s block"
 msgstr ""
 
 #: dist/translation-strings.php:565
-msgid "Sets the gap between inner blocks."
+#: dist/editor_blocks.js:2
+msgid "Default %s Block saved"
 msgstr ""
 
 #: dist/translation-strings.php:566
-msgid "Sets the gap between the rows of inner blocks."
+#: dist/editor_blocks.js:2
+msgid "%s Block style saved"
 msgstr ""
 
 #: dist/translation-strings.php:567
 #: dist/editor_blocks.js:2
-msgid "Tab %d"
+msgid "Default %s Block Saved!"
 msgstr ""
 
 #: dist/translation-strings.php:568
-#: src/stk-block-types.php:880
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:567
-msgid "Tabs"
+msgid "Save as Default %s Block"
 msgstr ""
 
 #: dist/translation-strings.php:569
 #: dist/editor_blocks.js:2
-msgid "Initial Tab Open"
+msgid "Default %s Block Deleted!"
 msgstr ""
 
 #: dist/translation-strings.php:570
 #: dist/editor_blocks.js:2
-msgid "Equal tab height"
+msgid "Reset Default %s Block"
 msgstr ""
 
 #: dist/translation-strings.php:571
 #: dist/editor_blocks.js:2
-msgid "Tab Orientation"
+msgid "Couldn't update block styles, got this error:"
 msgstr ""
 
 #: dist/translation-strings.php:572
 #: dist/editor_blocks.js:2
-msgid "Tab Panel Offset"
+msgid "Please refresh the page and try again."
 msgstr ""
 
 #: dist/translation-strings.php:573
-#: dist/editor_blocks.js:2
-msgid "Tab Panel Effect"
+msgid "The page will now reload for the old blocks to load. Please reload it if it does not refresh automatically."
 msgstr ""
 
 #: dist/translation-strings.php:574
-#: dist/editor_blocks.js:2
-msgid "Immediate"
+msgid "Stackable V2 Block Detected"
 msgstr ""
 
 #: dist/translation-strings.php:575
-msgid "Styles"
+msgid "Hello! 👋"
 msgstr ""
 
 #: dist/translation-strings.php:576
-msgid "Darken"
+msgid "We noticed that the page you are editing contains old Stackable version 2 blocks. Starting Stackable version 3, old v2 blocks are not anymore loaded in the editor. This means that you would not be able to edit the old v2 blocks in the editor and any old v2 block would show a block error in the editor."
 msgstr ""
 
 #: dist/translation-strings.php:577
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:434
-msgid "Lift"
+msgid "Do you want to enable backward compatibility, so the old blocks will be loaded in the editor?"
 msgstr ""
 
 #: dist/translation-strings.php:578
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:201
-msgid "Scale"
+msgid "Yes, load V2 Blocks in the editor, but only when V2 blocks are present already"
 msgstr ""
 
 #: dist/translation-strings.php:579
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Lift & Scale"
+msgid "Yes, always load V2 blocks in the editor"
 msgstr ""
 
 #: dist/translation-strings.php:580
-msgid "Lift More"
+msgid "No, don't load V2 blocks in the editor"
 msgstr ""
 
 #: dist/translation-strings.php:581
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Scale More"
+#: dist/editor_blocks.js:2
+msgid "Quotation Mark Icons"
 msgstr ""
 
 #: dist/translation-strings.php:582
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Lift & Scale More"
+#: dist/editor_blocks.js:2
+msgid "Pick another icon"
 msgstr ""
 
 #: dist/translation-strings.php:583
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:442
-msgid "Hover Effect"
+#: dist/editor_blocks.js:2
+msgid "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."
 msgstr ""
 
 #: dist/translation-strings.php:584
-msgid "Hover effect"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Round Thin"
 msgstr ""
 
 #: dist/translation-strings.php:585
-msgid "Triggers animation or effects when you mouse over"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Round"
 msgstr ""
 
 #: dist/translation-strings.php:586
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:346
-msgid "Single"
+msgid "Round Thick"
 msgstr ""
 
 #: dist/translation-strings.php:587
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:236
-msgid "Gradient"
+msgid "Round Fat"
 msgstr ""
 
 #: dist/translation-strings.php:588
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Button Color"
+#: dist/editor_blocks.js:2
+msgid "Square Thin"
 msgstr ""
 
 #: dist/translation-strings.php:589
-msgid "Button Colors"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Square Simple"
 msgstr ""
 
 #: dist/translation-strings.php:590
-msgid "Min. Button Height"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Square Modern"
 msgstr ""
 
 #: dist/translation-strings.php:591
-msgid "Button Width"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Square Fat"
 msgstr ""
 
 #: dist/translation-strings.php:592
-msgid "Button Padding"
+#: dist/editor_blocks.js:2
+msgctxt "Block layout name"
+msgid "%s Layout"
 msgstr ""
 
 #: dist/translation-strings.php:593
-msgid "Button padding"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:306
+msgctxt "Content placeholder"
+msgid "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."
 msgstr ""
 
 #: dist/translation-strings.php:594
-msgid "Adjusts the space between the button text and button borders"
+#: dist/editor_blocks.js:2
+msgid "Simple"
 msgstr ""
 
 #: dist/translation-strings.php:595
-msgid "Button Size & Spacing"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Highlighted"
 msgstr ""
 
 #: dist/translation-strings.php:596
-msgid "Button Borders & Shadows"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Huge"
 msgstr ""
 
 #: dist/translation-strings.php:597
-msgid "When enabled, the last column will be cloned instead of adding a blank column."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Centered Quote"
 msgstr ""
 
 #: dist/translation-strings.php:598
-#: src/welcome/index.php:119
-#: src/welcome/index.php:336
-msgid "Settings"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Title for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:599
-msgid "Allow Column Wrapping"
+#: src/stk-block-types.php:51
+#: src/stk-block-types.php:96
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:464
+msgid "Button"
 msgstr ""
 
 #: dist/translation-strings.php:600
-msgid "Sets column paddings, the space inside the block between the block elements and the column container border"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:305
+msgctxt "Heading placeholder"
+msgid "Title for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:601
-msgid "Sets the distance between two or more columns"
+#: dist/editor_blocks.js:2
+msgid "Horizontal 2"
 msgstr ""
 
 #: dist/translation-strings.php:602
-msgid "Conditional Display"
+#: dist/editor_blocks.js:2
+msgid "Horizontal 3"
 msgstr ""
 
 #: dist/translation-strings.php:603
-#: src/stk-block-types.php:216
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:431
-msgid "Container"
+#: dist/editor_blocks.js:2
+msgid "Split Centered"
 msgstr ""
 
 #: dist/translation-strings.php:604
-msgid "Container Min. Height"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Ghost"
 msgstr ""
 
 #: dist/translation-strings.php:605
-msgid "Max Container Width"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Plain"
 msgstr ""
 
 #: dist/translation-strings.php:606
-msgid "Container Horizontal Align"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Button text"
 msgstr ""
 
 #: dist/translation-strings.php:607
-msgid "Container Vertical Align"
+#: dist/editor_blocks.js:2
+msgid "Call to action"
 msgstr ""
 
 #: dist/translation-strings.php:608
-msgid "Container Background"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Open at the start"
 msgstr ""
 
 #: dist/translation-strings.php:609
-msgid "Trigger hover state on nested blocks"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Close adjacent on open"
 msgstr ""
 
 #: dist/translation-strings.php:610
-msgid "Container Borders & Shadow"
+#: dist/editor_blocks.js:2
+msgid "Automatically closes adjacent accordion panels when clicked."
 msgstr ""
 
 #: dist/translation-strings.php:611
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Custom Attributes"
+#: dist/editor_blocks.js:2
+msgid "Enable FAQ Schema"
 msgstr ""
 
 #: dist/translation-strings.php:612
-msgid "Block Width"
+#: dist/editor_blocks.js:2
+msgid "Open Icon"
 msgstr ""
 
 #: dist/translation-strings.php:613
-msgid "Align Wide"
+#: dist/editor_blocks.js:2
+msgid "The open icon will appear when the accordion is opened"
 msgstr ""
 
 #: dist/translation-strings.php:614
-msgid "Align Full"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Colored"
 msgstr ""
 
 #: dist/translation-strings.php:615
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Content Width"
+#: dist/editor_blocks.js:2
+msgid "Plus"
 msgstr ""
 
 #: dist/translation-strings.php:616
-msgid "Set the content to be smaller than the block width"
+#: dist/editor_blocks.js:2
+msgid "Full Width Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:617
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:196
-msgid "Custom CSS"
+#: dist/editor_blocks.js:2
+msgid "Flex Wrap"
 msgstr ""
 
 #: dist/translation-strings.php:618
-#: src/welcome/index.php:260
-msgid "Motion Effects"
+#: dist/editor_blocks.js:2
+msgid "Wrap Reverse"
 msgstr ""
 
 #: dist/translation-strings.php:619
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:229
-msgid "Shape Color"
+#: dist/editor_blocks.js:2
+msgid "Button Text"
 msgstr ""
 
 #: dist/translation-strings.php:620
-msgid "Shape Border Radius"
+#: src/stk-block-types.php:88
+#: src/stk-block-types.php:462
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:463
+msgid "Icon Button"
 msgstr ""
 
 #: dist/translation-strings.php:621
-msgid "Shape Padding"
+#: src/stk-block-types.php:104
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:465
+msgid "Social Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:622
-msgid "Shape Outline Width"
+#: src/stk-block-types.php:105
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:466
+msgid "Add social buttons."
 msgstr ""
 
 #: dist/translation-strings.php:623
-msgid "Shape Outline Color"
+#: dist/editor_blocks.js:2
+msgid "Column Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:624
-msgid "Icon Shape"
+#: dist/editor_blocks.js:2
+msgid "Sets the paddings between the column content and the border."
 msgstr ""
 
 #: dist/translation-strings.php:625
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:226
-msgid "Background Shape"
+#: dist/editor_blocks.js:2
+msgid "Align Last Block to Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:626
-msgid "Select Image"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Subtitle for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:627
-msgid "Image Url"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:307
+msgctxt "Subtitle placeholder"
+msgid "Subtitle for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:628
-msgid "Aspect Ratio"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:308
+msgctxt "Button placeholder"
+msgid "Button"
 msgstr ""
 
 #: dist/translation-strings.php:629
-msgid "Original"
+#: dist/editor_blocks.js:2
+msgid "Default 2"
 msgstr ""
 
 #: dist/translation-strings.php:630
-msgid "Square 1:1"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:279
+msgid "Full"
 msgstr ""
 
 #: dist/translation-strings.php:631
-msgid "Standard 4:3"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Faded"
 msgstr ""
 
 #: dist/translation-strings.php:632
-msgid "Classic 3:2"
+#: dist/editor_blocks.js:2
+msgid "Slides"
 msgstr ""
 
 #: dist/translation-strings.php:633
-msgid "Wide 16:9"
+#: dist/editor_blocks.js:2
+msgid "Carousel Type"
 msgstr ""
 
 #: dist/translation-strings.php:634
-msgid "Cinematic 2:1"
+#: dist/editor_blocks.js:2
+msgid "Slide"
 msgstr ""
 
 #: dist/translation-strings.php:635
-msgid "Ultra Wide 3:1"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Fade"
 msgstr ""
 
 #: dist/translation-strings.php:636
-msgid "Panoramic 4:1"
+#: dist/editor_blocks.js:2
+msgid "Infinite Scrolling"
 msgstr ""
 
 #: dist/translation-strings.php:637
-msgid "Portrait 3:4"
+#: dist/editor_blocks.js:2
+msgid "Only visible in the frontend."
 msgstr ""
 
 #: dist/translation-strings.php:638
-msgid "Classic Portrait 2:3"
+#: dist/editor_blocks.js:2
+msgid "Slides to Show"
 msgstr ""
 
 #: dist/translation-strings.php:639
-msgid "Tall 9:16"
+#: dist/editor_blocks.js:2
+msgid "Slide Gap"
 msgstr ""
 
 #: dist/translation-strings.php:640
-msgid "Image width"
+#: dist/editor_blocks.js:2
+msgid "Fade duration"
 msgstr ""
 
 #: dist/translation-strings.php:641
-msgid "Adjusts the image width"
+#: dist/editor_blocks.js:2
+msgid "Autoplay"
 msgstr ""
 
 #: dist/translation-strings.php:642
-msgid "Image height"
+#: dist/editor_blocks.js:2
+msgid "Speed (ms)"
 msgstr ""
 
 #: dist/translation-strings.php:643
-msgid "Adjusts the image height"
+#: dist/editor_blocks.js:2
+msgid "Arrows"
 msgstr ""
 
 #: dist/translation-strings.php:644
-msgid "Open Image in Lightbox"
+#: dist/editor_blocks.js:2
+msgid "Previous Slide Icon"
 msgstr ""
 
 #: dist/translation-strings.php:645
-msgid "Image Alt"
+#: dist/editor_blocks.js:2
+msgid "Next Slide Icon"
 msgstr ""
 
 #: dist/translation-strings.php:646
-msgid "Image Shadow"
+#: dist/editor_blocks.js:2
+msgid "Arrow Position"
 msgstr ""
 
 #: dist/translation-strings.php:647
-msgid "Adjusts the intensity of the image shadow"
+#: dist/editor_blocks.js:2
+msgid "Inside"
 msgstr ""
 
 #: dist/translation-strings.php:648
-msgid "Adjusts the radius of image corners to make them more rounded"
+#: dist/editor_blocks.js:2
+msgid "Outside"
 msgstr ""
 
 #: dist/translation-strings.php:649
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Color"
+#: dist/editor_blocks.js:2
+msgid "%s Offset"
 msgstr ""
 
 #: dist/translation-strings.php:650
-msgid "Overlay Opacity"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Button Gap"
 msgstr ""
 
 #: dist/translation-strings.php:651
-msgid "Overlay Blend Mode"
+#: dist/editor_blocks.js:2
+msgid "%s Color"
 msgstr ""
 
 #: dist/translation-strings.php:652
-msgid "Sets how the overlay color blends with the image"
+#: dist/editor_blocks.js:2
+msgid "Show %s on mobile"
 msgstr ""
 
 #: dist/translation-strings.php:653
-msgid "Focal point"
+#: dist/editor_blocks.js:2
+msgid "arrows"
 msgstr ""
 
 #: dist/translation-strings.php:654
-msgid "Image Fit"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Dots"
 msgstr ""
 
 #: dist/translation-strings.php:655
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Contain"
+#: dist/editor_blocks.js:2
+msgid "Dot Style"
 msgstr ""
 
 #: dist/translation-strings.php:656
-msgid "Fill"
+#: src/stk-block-types.php:871
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:566
+msgid "Outline"
 msgstr ""
 
 #: dist/translation-strings.php:657
-msgid "Scale Down"
+#: dist/editor_blocks.js:2
+msgid "Dot"
 msgstr ""
 
 #: dist/translation-strings.php:658
-msgid "Sets the fit to default, contain, cover, fill, none, and scale down. Image fit specifies how an image resizes in a container."
+#: dist/editor_blocks.js:2
+msgid "Active Dot"
 msgstr ""
 
 #: dist/translation-strings.php:659
-msgid "Image Shape"
+#: dist/editor_blocks.js:2
+msgid "%s Gap"
 msgstr ""
 
 #: dist/translation-strings.php:660
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:228
-msgid "Change the shape of the image"
+#: dist/editor_blocks.js:2
+msgid "To improve accessibility, the clickable area of the dots will not go below %s."
 msgstr ""
 
 #: dist/translation-strings.php:661
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Flip Shape Horizontally"
+#: dist/editor_blocks.js:2
+msgid "dots"
 msgstr ""
 
 #: dist/translation-strings.php:662
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Flip Shape Vertically"
+#: dist/editor_blocks.js:2
+msgid "Accessibility"
 msgstr ""
 
 #: dist/translation-strings.php:663
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Stretch Shape Mask"
+#: dist/editor_blocks.js:2
+msgid "%s label"
 msgstr ""
 
 #: dist/translation-strings.php:664
-msgid "Image Filter"
+#: dist/editor_blocks.js:2
+msgid "Previous slide"
 msgstr ""
 
 #: dist/translation-strings.php:665
-#: src/stk-block-types.php:552
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:402
-msgid "Image"
+#: dist/editor_blocks.js:2
+msgid "Next slide"
 msgstr ""
 
 #: dist/translation-strings.php:666
-msgid "When linked, styling this block would also style other linked blocks in adjacent columns."
+#: dist/editor_blocks.js:2
+msgid "Use %%d to show the slide number."
 msgstr ""
 
 #: dist/translation-strings.php:667
-msgid "Learn more about linking"
+#: dist/editor_blocks.js:2
+msgid "Slide N of N"
 msgstr ""
 
 #: dist/translation-strings.php:668
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:170
-msgid "Flip Horizontally"
+msgid "Use two %%d to show the slide number and the total slides. e.g. Slide 1 of 3."
 msgstr ""
 
 #: dist/translation-strings.php:669
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Flip Vertically"
+msgid "Colon"
 msgstr ""
 
 #: dist/translation-strings.php:670
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Responsive"
+#: dist/editor_blocks.js:2
+msgid "Line"
 msgstr ""
 
 #: dist/translation-strings.php:671
+#: src/stk-block-types.php:763
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hide on Desktop"
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:551
+msgid "Separator"
 msgstr ""
 
 #: dist/translation-strings.php:672
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hide on Tablet"
+#: dist/editor_blocks.js:2
+msgid "Top Offset"
 msgstr ""
 
 #: dist/translation-strings.php:673
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hide on Mobile"
+#: dist/editor_blocks.js:2
+msgid "Due Date"
 msgstr ""
 
 #: dist/translation-strings.php:674
-#: src/stk-block-types.php:744
-#: dist/translation-strings.js:549
-msgid "Progress Circle"
+#: dist/editor_blocks.js:2
+msgid "Recurring"
 msgstr ""
 
 #: dist/translation-strings.php:675
-#: src/stk-block-types.php:725
-#: dist/translation-strings.js:546
-msgid "Progress Bar"
+#: dist/editor_blocks.js:2
+msgid "Hide Block"
 msgstr ""
 
 #: dist/translation-strings.php:676
-msgid "Progress"
+#: dist/editor_blocks.js:2
+msgid "Display Message Upon Expiration"
 msgstr ""
 
 #: dist/translation-strings.php:677
-msgid "Maximum Progress"
+#: dist/editor_blocks.js:2
+msgid "Days"
 msgstr ""
 
 #: dist/translation-strings.php:678
-msgid "Apply border radius to bar"
+#: dist/editor_blocks.js:2
+msgid "Hours"
 msgstr ""
 
 #: dist/translation-strings.php:679
-msgid "Thickness"
+#: dist/editor_blocks.js:2
+msgid "Minutes"
 msgstr ""
 
 #: dist/translation-strings.php:680
-msgid "Bar Color #%s"
+#: dist/editor_blocks.js:2
+msgid "Seconds"
 msgstr ""
 
 #: dist/translation-strings.php:681
-msgid "Bar Color"
-msgstr ""
-
-#: dist/translation-strings.php:682
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:235
-msgid "Gradient Direction (degrees)"
+#: dist/translation-strings.js:63
+msgid "End Date"
+msgstr ""
+
+#: dist/translation-strings.php:682
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:61
+msgid "Start Date"
 msgstr ""
 
 #: dist/translation-strings.php:683
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Adv. Gradient Color Settings"
+#: dist/editor_blocks.js:2
+msgid "Timezone"
 msgstr ""
 
 #: dist/translation-strings.php:684
-msgid "Gradient Direction"
+#: dist/editor_blocks.js:2
+msgid "Action on Expiration"
 msgstr ""
 
 #: dist/translation-strings.php:685
-msgid "Sets the direction (in degrees) of the colors"
+#: dist/editor_blocks.js:2
+msgid "Countdown Duration"
 msgstr ""
 
 #: dist/translation-strings.php:686
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Color %d Location"
+#: dist/editor_blocks.js:2
+msgid "Restart Countdown After no. of Hours"
 msgstr ""
 
 #: dist/translation-strings.php:687
-msgid "Sets the placement of each color in relation to the other color"
+#: dist/editor_blocks.js:2
+msgid "Enable Double Digit"
 msgstr ""
 
 #: dist/translation-strings.php:688
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Gradient Blend Mode"
+#: dist/editor_blocks.js:2
+msgid "Box Gap"
 msgstr ""
 
 #: dist/translation-strings.php:689
-msgid "Sets how this background gradient/image blends into the other background"
+#: dist/editor_blocks.js:2
+msgid "Label Top Margin"
 msgstr ""
 
 #: dist/translation-strings.php:690
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Color"
+#: dist/editor_blocks.js:2
+msgid "Digits"
 msgstr ""
 
 #: dist/translation-strings.php:691
-msgid "Rounded"
+#: dist/editor_blocks.js:2
+msgid "Labels"
 msgstr ""
 
 #: dist/translation-strings.php:692
-msgid "Animate"
+#: dist/editor_blocks.js:2
+msgid "Content Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:693
-msgid "Accessibility Label"
+#: dist/editor_blocks.js:2
+msgid "Expired Message"
 msgstr ""
 
 #: dist/translation-strings.php:694
-msgid "Progress Bar Text"
+#: dist/editor_blocks.js:2
+msgid "Days Label"
 msgstr ""
 
 #: dist/translation-strings.php:695
-msgid "Progress Prefix"
+#: dist/editor_blocks.js:2
+msgid "Hours Label"
 msgstr ""
 
 #: dist/translation-strings.php:696
-msgid "Progress Suffix"
+#: dist/editor_blocks.js:2
+msgid "Minutes Label"
 msgstr ""
 
 #: dist/translation-strings.php:697
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:142
-msgctxt "Content placeholder"
-msgid "Description for this block. Use this space for describing your block. Any text will do."
+msgid "Seconds Label"
 msgstr ""
 
 #: dist/translation-strings.php:698
 #: dist/editor_blocks.js:2
-msgid "Content Position"
+msgid "100"
 msgstr ""
 
 #: dist/translation-strings.php:699
-#: src/stk-block-types.php:962
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:576
-msgid "Timeline"
+msgid "One column"
 msgstr ""
 
 #: dist/translation-strings.php:700
 #: dist/editor_blocks.js:2
-msgid "Accent Anchor Position"
+msgid "50 / 50"
 msgstr ""
 
 #: dist/translation-strings.php:701
 #: dist/editor_blocks.js:2
-msgid "Succeeding timeline blocks will also use this value."
+msgid "Two columns; equal split"
 msgstr ""
 
 #: dist/translation-strings.php:702
 #: dist/editor_blocks.js:2
-msgid "%s Border Radius"
+msgid "30 / 70"
 msgstr ""
 
 #: dist/translation-strings.php:703
 #: dist/editor_blocks.js:2
-msgid "Line Thickness"
+msgid "Two columns; one-third, two-thirds split"
 msgstr ""
 
 #: dist/translation-strings.php:704
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:232
-msgid "Horizontal Offset"
+msgid "70 / 30"
 msgstr ""
 
 #: dist/translation-strings.php:705
 #: dist/editor_blocks.js:2
-msgctxt "option title"
-msgid "%s #%d"
+msgid "Two columns; two-thirds, one-third split"
 msgstr ""
 
 #: dist/translation-strings.php:706
 #: dist/editor_blocks.js:2
-msgid "Timeline Accent Color"
+msgid "33 / 33 / 33"
 msgstr ""
 
 #: dist/translation-strings.php:707
 #: dist/editor_blocks.js:2
-msgid "Timeline Background Color"
+msgid "Three columns; equal split"
 msgstr ""
 
 #: dist/translation-strings.php:708
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:422
-msgctxt "Nth Title"
-msgid "%s %d"
+#: dist/editor_blocks.js:2
+msgid "25 / 50 / 25"
 msgstr ""
 
 #: dist/translation-strings.php:709
-msgid "Wave"
+#: dist/editor_blocks.js:2
+msgid "Three columns; wide center column"
 msgstr ""
 
 #: dist/translation-strings.php:710
-msgid "Straight"
+#: dist/editor_blocks.js:2
+msgid "25 / 25 / 25 / 25"
 msgstr ""
 
 #: dist/translation-strings.php:711
-msgid "Slant"
+#: dist/editor_blocks.js:2
+msgid "Four columns; equal split"
 msgstr ""
 
 #: dist/translation-strings.php:712
-msgid "Curve"
+#: dist/editor_blocks.js:2
+msgid "1,234.56"
 msgstr ""
 
 #: dist/translation-strings.php:713
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Design"
+#: dist/editor_blocks.js:2
+msgid "Counter"
 msgstr ""
 
 #: dist/translation-strings.php:714
-msgid "Separator Height"
+#: dist/editor_blocks.js:2
+msgid "Duration (ms)"
 msgstr ""
 
 #: dist/translation-strings.php:715
-msgid "Adjusts the height of the separator to stretch or compress vertically"
+#: dist/editor_blocks.js:2
+msgid "1,234,567"
 msgstr ""
 
 #: dist/translation-strings.php:716
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Separator Width"
+#: dist/editor_blocks.js:2
+msgid "Open the Design Library and select a pre-designed block or layout."
 msgstr ""
 
 #: dist/translation-strings.php:717
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:430
-msgid "Shadow / Outline"
+#: dist/editor_blocks.js:2
+msgid "Open Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:718
-msgid "Adjusts the intensity of the separator shadow and makes the separator more prominent"
+#: dist/editor_blocks.js:2
+msgid "Description for this block. Use this space for describing your block."
 msgstr ""
 
 #: dist/translation-strings.php:719
-msgid "Invert Design"
+#: dist/editor_blocks.js:2
+msgctxt "Content placeholder"
+msgid "Description for this block. Use this space for describing your block."
 msgstr ""
 
 #: dist/translation-strings.php:720
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Bring to Front"
+#: dist/editor_blocks.js:2
+msgid "Overlap Shape 1"
 msgstr ""
 
 #: dist/translation-strings.php:721
-msgid "Brings the separator layer in front of other block elements"
+#: dist/editor_blocks.js:2
+msgid "Overlap Shape 2"
 msgstr ""
 
 #: dist/translation-strings.php:722
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Top Separator"
+#: dist/editor_blocks.js:2
+msgid "Overlap Shape 3"
 msgstr ""
 
 #: dist/translation-strings.php:723
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Bottom Separator"
+#: dist/editor_blocks.js:2
+msgid "Overlap Shape 4"
 msgstr ""
 
 #: dist/translation-strings.php:724
-msgid "Transform & Transition"
+#: dist/editor_blocks.js:2
+msgid "Overlap Shape 5"
 msgstr ""
 
 #: dist/translation-strings.php:725
-msgid "Use theme heading margins"
+#: dist/editor_blocks.js:2
+msgid "Overlap Background 1"
 msgstr ""
 
 #: dist/translation-strings.php:726
-msgid "Font Family"
+#: dist/editor_blocks.js:2
+msgid "Overlap Background 2"
 msgstr ""
 
 #: dist/translation-strings.php:727
-msgid "Sets the font set to be used for the element"
+#: dist/editor_blocks.js:2
+msgid "Overlap Background 3"
 msgstr ""
 
 #: dist/translation-strings.php:728
-msgid "Weight"
+#: dist/editor_blocks.js:2
+msgid "Overlap Background 4"
 msgstr ""
 
 #: dist/translation-strings.php:729
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:209
-msgid "Normal"
+msgid "Overlap Background 5"
 msgstr ""
 
 #: dist/translation-strings.php:730
-msgid "Bold"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Bar"
 msgstr ""
 
 #: dist/translation-strings.php:731
-msgid "Font weight"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Asterisks"
 msgstr ""
 
 #: dist/translation-strings.php:732
-msgid "Sets the thinness or thickness of text characters"
+#: dist/editor_blocks.js:2
+msgid "Height / Size"
 msgstr ""
 
 #: dist/translation-strings.php:733
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:261
-msgid "Transform"
+#: dist/editor_blocks.js:2
+msgid "Float"
 msgstr ""
 
 #: dist/translation-strings.php:734
-msgid "Uppercase"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Large Mid"
 msgstr ""
 
 #: dist/translation-strings.php:735
-msgid "Lowercase"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:325
+msgid "Offset"
 msgstr ""
 
 #: dist/translation-strings.php:736
-msgid "Capitalize"
+#: dist/editor_blocks.js:2
+msgid "Zizag"
 msgstr ""
 
 #: dist/translation-strings.php:737
-msgid "Sets the usage of upper or lower case"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Zigzag"
 msgstr ""
 
 #: dist/translation-strings.php:738
-msgid "Font Style"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Some short text that can be expanded to show more details."
 msgstr ""
 
 #: dist/translation-strings.php:739
-msgid "Italic"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Show more"
 msgstr ""
 
 #: dist/translation-strings.php:740
-msgid "Oblique"
+#: dist/editor_blocks.js:2
+msgid "Some long text that will be expanded when the show more button is clicked by the visitor."
 msgstr ""
 
 #: dist/translation-strings.php:741
-msgid "Line-Height"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Show less"
 msgstr ""
 
 #: dist/translation-strings.php:742
-msgid "Line height"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Less text"
 msgstr ""
 
 #: dist/translation-strings.php:743
-msgid "Sets the vertical distance between lines of text"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "More text"
 msgstr ""
 
 #: dist/translation-strings.php:744
-msgid "Letter Spacing"
+#: dist/editor_blocks.js:2
+msgid "Add heading text here"
 msgstr ""
 
 #: dist/translation-strings.php:745
-msgid "Letter spacing"
+#: src/stk-block-types.php:943
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:369
+msgid "Text"
 msgstr ""
 
 #: dist/translation-strings.php:746
-msgid "Sets the distance or space between letters"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Top Line"
 msgstr ""
 
 #: dist/translation-strings.php:747
-msgid "Font size"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Line Color"
 msgstr ""
 
 #: dist/translation-strings.php:748
-msgid "Sets the size of text characters"
+#: dist/editor_blocks.js:2
+msgid "Margin"
 msgstr ""
 
 #: dist/translation-strings.php:749
-msgid "No matches found"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Bottom Line"
 msgstr ""
 
 #: dist/translation-strings.php:750
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:309
-msgid "Remove"
+#: dist/editor_blocks.js:2
+msgid "Header Title"
 msgstr ""
 
 #: dist/translation-strings.php:751
-msgid "#%s (no title)"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Half Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:752
-msgid "No posts found"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Center Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:753
-msgid "Pick a post"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Side Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:754
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:60
-msgid "Reset"
+#: dist/editor_blocks.js:2
+msgid "Half Layout"
 msgstr ""
 
 #: dist/translation-strings.php:755
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Start"
+#: dist/editor_blocks.js:2
+msgid "Half"
 msgstr ""
 
 #: dist/translation-strings.php:756
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Center"
+#: src/stk-block-types.php:484
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:509
+msgid "Icon Label"
 msgstr ""
 
 #: dist/translation-strings.php:757
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "End"
+#: dist/editor_blocks.js:2
+msgid "Snapping"
 msgstr ""
 
 #: dist/translation-strings.php:758
-msgid "Space Between"
+#: dist/editor_blocks.js:2
+msgid "Snap to Start"
 msgstr ""
 
 #: dist/translation-strings.php:759
-msgid "Space Around"
+#: dist/editor_blocks.js:2
+msgid "Snap to Center"
 msgstr ""
 
 #: dist/translation-strings.php:760
-msgid "Space Evenly"
+#: dist/editor_blocks.js:2
+msgid "No Snapping"
 msgstr ""
 
 #: dist/translation-strings.php:761
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Stretch"
+#: dist/editor_blocks.js:2
+msgid "Item Width"
 msgstr ""
 
 #: dist/translation-strings.php:762
-msgid "Baseline"
+#: dist/editor_blocks.js:2
+msgid "Left Offset"
 msgstr ""
 
 #: dist/translation-strings.php:763
-msgid "Unit"
+#: dist/editor_blocks.js:2
+msgid "Scrollbar"
 msgstr ""
 
 #: dist/translation-strings.php:764
-msgid "Normal State"
+#: dist/editor_blocks.js:2
+msgid "Track Color"
 msgstr ""
 
 #: dist/translation-strings.php:765
-msgid "Hovered State"
+#: dist/editor_blocks.js:2
+msgid "Thumb Color"
 msgstr ""
 
 #: dist/translation-strings.php:766
-msgid "Parent Hovered State"
+#: dist/editor_blocks.js:2
+msgid "Thumb Radius"
 msgstr ""
 
 #: dist/translation-strings.php:767
-msgid "Collapsed"
+#: dist/editor_blocks.js:2
+msgid "123"
 msgstr ""
 
 #: dist/translation-strings.php:768
-msgid "Parent Hovered"
+#: dist/editor_blocks.js:2
+msgid "456"
 msgstr ""
 
 #: dist/translation-strings.php:769
-msgid "Add a Container Background to a parent block to enable this state."
+#: dist/editor_blocks.js:2
+msgid "789"
 msgstr ""
 
 #: dist/translation-strings.php:770
-msgid "Multiply"
+#: src/stk-block-types.php:446
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:507
+msgid "Icon Box"
 msgstr ""
 
 #: dist/translation-strings.php:771
-msgid "Screen"
+#: dist/editor_blocks.js:2
+msgid "Pill"
 msgstr ""
 
 #: dist/translation-strings.php:772
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay"
+#: dist/editor_blocks.js:2
+msgid "Image Caption"
 msgstr ""
 
 #: dist/translation-strings.php:773
-msgid "Lighten"
+#: dist/editor_blocks.js:2
+msgid "Caption"
 msgstr ""
 
 #: dist/translation-strings.php:774
-msgid "Color Dodge"
+#: dist/editor_blocks.js:2
+msgid "Caption Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:775
-msgid "Color Burn"
+#: dist/editor_blocks.js:2
+msgid "Unordered List"
 msgstr ""
 
 #: dist/translation-strings.php:776
-msgid "Hard Light"
+#: dist/editor_blocks.js:2
+msgid "Ordered List"
 msgstr ""
 
 #: dist/translation-strings.php:777
-msgid "Soft Light"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "List"
 msgstr ""
 
 #: dist/translation-strings.php:778
-msgid "Difference"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Grid"
 msgstr ""
 
 #: dist/translation-strings.php:779
-msgid "Exclusion"
+#: src/stk-block-types.php:239
+#: src/stk-block-types.php:692
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:370
+msgid "Number"
 msgstr ""
 
 #: dist/translation-strings.php:780
-msgid "Hue"
+#: dist/editor_blocks.js:2
+msgid "Padded Number"
 msgstr ""
 
 #: dist/translation-strings.php:781
-msgid "Saturation"
+#: dist/editor_blocks.js:2
+msgid "Lowercase Roman"
 msgstr ""
 
 #: dist/translation-strings.php:782
-msgid "Luminosity"
+#: dist/editor_blocks.js:2
+msgid "Uppercase Roman"
 msgstr ""
 
 #: dist/translation-strings.php:783
-msgid "Initial"
+#: dist/editor_blocks.js:2
+msgid "Lowercase Letters"
 msgstr ""
 
 #: dist/translation-strings.php:784
-msgid "Inherit"
+#: dist/editor_blocks.js:2
+msgid "Uppercase Letters"
 msgstr ""
 
 #: dist/translation-strings.php:785
-msgid "Unset"
+#: dist/editor_blocks.js:2
+msgid "List Item"
 msgstr ""
 
 #: dist/translation-strings.php:786
-msgid "Mix Blend Mode"
+#: dist/editor_blocks.js:2
+msgid "More noticeable when using wide layouts or list item borders"
 msgstr ""
 
 #: dist/translation-strings.php:787
 #: dist/editor_blocks.js:2
-msgid "Edit"
+msgid "List Display Style"
 msgstr ""
 
 #: dist/translation-strings.php:788
-msgid "Global Gradients"
+#: dist/editor_blocks.js:2
+msgid "Indentation"
 msgstr ""
 
 #: dist/translation-strings.php:789
 #: dist/editor_blocks.js:2
-msgid "Global Colors"
+msgid "Icons & Numbers"
 msgstr ""
 
 #: dist/translation-strings.php:790
-msgid "Add Column"
+#: dist/editor_blocks.js:2
+msgid "List Type"
 msgstr ""
 
 #: dist/translation-strings.php:791
-msgid "Adjust the individual widths of each column"
+#: dist/editor_blocks.js:2
+msgid "With Period"
 msgstr ""
 
 #: dist/translation-strings.php:792
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Column Widths"
+#: dist/editor_blocks.js:2
+msgid "Icon Vertical Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:793
-msgid "Group into Container"
+#: dist/editor_blocks.js:2
+msgid "This is more visible if you have long text in your list."
 msgstr ""
 
 #: dist/translation-strings.php:794
-msgid "Ungroup from Container"
+#: dist/editor_blocks.js:2
+msgid "Icon Vertical Offset"
 msgstr ""
 
 #: dist/translation-strings.php:795
-msgid "You can type in custom HTML attributes for this block in the field above."
+#: dist/editor_blocks.js:2
+msgid "Icon List Item Borders"
 msgstr ""
 
 #: dist/translation-strings.php:796
-msgid "Example:"
+#: dist/editor_blocks.js:2
+msgid "Line 1"
 msgstr ""
 
 #: dist/translation-strings.php:797
-msgid "Learn more about Custom Attributes"
+#: dist/editor_blocks.js:2
+msgid "Line 2"
 msgstr ""
 
 #: dist/translation-strings.php:798
-msgid "There is an error in your custom attribute"
+#: dist/editor_blocks.js:2
+msgid "Line 3"
 msgstr ""
 
 #: dist/translation-strings.php:799
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Layout"
+#: dist/editor_blocks.js:2
+msgid "Line 4"
 msgstr ""
 
 #: dist/translation-strings.php:800
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:304
-msgid "Dynamic Fields"
+#: dist/editor_blocks.js:2
+msgid "Line 5"
 msgstr ""
 
 #: dist/translation-strings.php:801
-#: dist/translation-strings.php:1693
-#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:160
-#: src/welcome/index.php:211
-#: src/welcome/index.php:224
-#: src/welcome/index.php:235
-#: src/welcome/index.php:348
-msgid "Go Premium"
+#: dist/editor_blocks.js:2
+msgid "Line 6"
 msgstr ""
 
 #: dist/translation-strings.php:802
-msgid "No designs found"
+#: src/stk-block-types.php:584
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:523
+msgid "Map"
 msgstr ""
 
 #: dist/translation-strings.php:803
-msgid "System Fonts"
+#: dist/editor_blocks.js:2
+msgid "Embedded content from Google Map Platform."
 msgstr ""
 
 #: dist/translation-strings.php:804
-msgid "Sans-Serif"
+#: dist/editor_blocks.js:2
+msgid "Some map features require a Google API Key."
 msgstr ""
 
 #: dist/translation-strings.php:805
-msgid "Serif"
+#: dist/editor_blocks.js:2
+msgid "Add API key here."
 msgstr ""
 
 #: dist/translation-strings.php:806
-msgid "Serif Alternative"
+#: dist/editor_blocks.js:2
+msgid "Location"
 msgstr ""
 
 #: dist/translation-strings.php:807
-msgid "Monospace"
+#: dist/editor_blocks.js:2
+msgid "Enter an address or location"
 msgstr ""
 
 #: dist/translation-strings.php:808
-msgid "Google Fonts"
+#: dist/editor_blocks.js:2
+msgid "Enable Dragging"
 msgstr ""
 
 #: dist/translation-strings.php:809
-msgid "Theme Fonts"
+#: dist/editor_blocks.js:2
+msgid "Full Screen Button"
 msgstr ""
 
 #: dist/translation-strings.php:810
-msgid "auto"
+#: dist/editor_blocks.js:2
+msgid "Map Type Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:811
-msgid "Individual sides"
+#: dist/editor_blocks.js:2
+msgid "Street View Button"
 msgstr ""
 
 #: dist/translation-strings.php:812
-msgid "All sides"
+#: dist/editor_blocks.js:2
+msgid "Zoom Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:813
-msgid "Top and Bottom"
+#: dist/editor_blocks.js:2
+msgid "Map Style"
 msgstr ""
 
 #: dist/translation-strings.php:814
-msgid "Left and Right"
+#: dist/editor_blocks.js:2
+msgid "Custom Map Style (Paste JSON here)"
 msgstr ""
 
 #: dist/translation-strings.php:815
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:263
-msgid "Top Left"
+#: dist/editor_blocks.js:2
+msgid "Learn how to use Custom Map Styles"
 msgstr ""
 
 #: dist/translation-strings.php:816
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:265
-msgid "Top Right"
+#: dist/editor_blocks.js:2
+msgid "Map Marker"
 msgstr ""
 
 #: dist/translation-strings.php:817
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:269
-msgid "Bottom Left"
+#: dist/editor_blocks.js:2
+msgid "Uploaded Icon and Icon Color settings are not fully compatible."
 msgstr ""
 
 #: dist/translation-strings.php:818
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:271
-msgid "Bottom Right"
+#: dist/editor_blocks.js:2
+msgid "Horizontal Icon Anchor Point"
 msgstr ""
 
 #: dist/translation-strings.php:819
-msgid "Font Size"
+#: dist/editor_blocks.js:2
+msgid "Vertical Icon Anchor Point"
 msgstr ""
 
 #: dist/translation-strings.php:820
-msgid "There are no blocks in this group, please add one."
+#: dist/editor_blocks.js:2
+msgid "Map Example"
 msgstr ""
 
 #: dist/translation-strings.php:821
-msgid "Add Block"
+#: dist/editor_blocks.js:2
+msgid "Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled."
 msgstr ""
 
 #: dist/translation-strings.php:822
-#: src/stk-block-types.php:953
-#: dist/translation-strings.js:575
-msgid "Paragraph"
+#: dist/editor_blocks.js:2
+msgid "Silver"
 msgstr ""
 
 #: dist/translation-strings.php:823
-msgid "Stop showing tooltips"
+#: dist/editor_blocks.js:2
+msgid "Retro"
 msgstr ""
 
 #: dist/translation-strings.php:824
-msgid "Describe the purpose of the image"
+#: dist/editor_blocks.js:2
+msgid "Dark"
 msgstr ""
 
 #: dist/translation-strings.php:825
-msgid "Leave empty if the image is purely decorative."
+#: dist/editor_blocks.js:2
+msgid "Night"
 msgstr ""
 
 #: dist/translation-strings.php:826
-msgid "Alt Text (Alternative Text)"
+#: dist/editor_blocks.js:2
+msgid "Aubergine"
 msgstr ""
 
 #: dist/translation-strings.php:827
-msgid "Type to search icon"
+#: dist/editor_blocks.js:2
+msgid "Embedded content from Google Maps Platform."
 msgstr ""
 
 #: dist/translation-strings.php:828
-msgid "Icon Settings"
+#: dist/editor_blocks.js:2
+msgid "01"
 msgstr ""
 
 #: dist/translation-strings.php:829
-msgid "Upload SVG"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:310
+msgctxt "Text placeholder"
+msgid "Text for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:830
-msgid "Clear icon"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Box"
 msgstr ""
 
 #: dist/translation-strings.php:831
-msgid "Drop your SVG here"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Captioned"
 msgstr ""
 
 #: dist/translation-strings.php:832
-msgid "preview"
+#: dist/editor_blocks.js:2
+msgid "$"
 msgstr ""
 
 #: dist/translation-strings.php:833
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Circle"
+#: dist/editor_blocks.js:2
+msgid "99"
 msgstr ""
 
 #: dist/translation-strings.php:834
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:349
-msgid "Blob %s"
+#: dist/editor_blocks.js:2
+msgid ".00"
 msgstr ""
 
 #: dist/translation-strings.php:835
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:223
-msgid "Blur"
+#: src/stk-block-types.php:646
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:534
+msgid "Posts"
 msgstr ""
 
 #: dist/translation-strings.php:836
-msgid "Brightness"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "No posts found."
 msgstr ""
 
 #: dist/translation-strings.php:837
-msgid "Contrast"
+#: dist/editor_blocks.js:2
+msgid "Content Arrangement"
 msgstr ""
 
 #: dist/translation-strings.php:838
-msgid "Grayscale"
+#: dist/editor_blocks.js:2
+msgid "Sets the order of the items displayed (category, title, meta, excerpt, read more button, image) for each post"
 msgstr ""
 
 #: dist/translation-strings.php:839
-msgid "Hue Rotate"
+#: dist/editor_blocks.js:2
+msgid "Query"
 msgstr ""
 
 #: dist/translation-strings.php:840
-msgid "Invert"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:396
+msgid "Number of items"
 msgstr ""
 
 #: dist/translation-strings.php:841
-msgid "Saturate"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Order by"
 msgstr ""
 
 #: dist/translation-strings.php:842
-msgid "Sepia"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Newest to Oldest"
 msgstr ""
 
 #: dist/translation-strings.php:843
-msgid "Looking for other settings? They've moved to the %s tab."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Oldest to Newest"
 msgstr ""
 
 #: dist/translation-strings.php:844
-msgid "style"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "A → Z"
 msgstr ""
 
 #: dist/translation-strings.php:845
-msgid "Dismiss hint"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Z → A"
 msgstr ""
 
 #: dist/translation-strings.php:846
-msgid "layout"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Last Modified to Oldest"
 msgstr ""
 
 #: dist/translation-strings.php:847
-msgid "Click on any inner block in the editor to style it."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Oldest Modified to Last"
 msgstr ""
 
 #: dist/translation-strings.php:848
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "All"
+#: dist/editor_blocks.js:2
+msgid "Menu Order"
 msgstr ""
 
 #: dist/translation-strings.php:849
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Designs"
+#: dist/editor_blocks.js:2
+msgid "Random"
 msgstr ""
 
 #: dist/translation-strings.php:850
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "UI Kits"
+#: dist/editor_blocks.js:2
+msgid "Featured Image"
 msgstr ""
 
 #: dist/translation-strings.php:851
-msgid "Wireframes"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Category"
 msgstr ""
 
 #: dist/translation-strings.php:852
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Latest Design Library"
+#: dist/editor_blocks.js:2
+msgid "Excerpt"
 msgstr ""
 
 #: dist/translation-strings.php:853
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "V2 Design Library"
+#: dist/editor_blocks.js:2
+msgid "Meta"
 msgstr ""
 
 #: dist/translation-strings.php:854
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "E.g. light, dark, red, minimalist…"
+#: dist/editor_blocks.js:2
+msgid "Read More Link"
 msgstr ""
 
 #: dist/translation-strings.php:855
-msgid "Select Multiple"
+#: dist/editor_blocks.js:2
+msgid "Apply hover effect when container is hovered"
 msgstr ""
 
 #: dist/translation-strings.php:856
-msgid "Select"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:272
+msgid "Excerpt Length"
 msgstr ""
 
 #: dist/translation-strings.php:857
-msgid "Deselect All"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Show Author"
 msgstr ""
 
 #: dist/translation-strings.php:858
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Refresh Library"
+#: dist/editor_blocks.js:2
+msgid "Show Date"
 msgstr ""
 
 #: dist/translation-strings.php:859
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Large preview"
+#: dist/editor_blocks.js:2
+msgid "Show Comments"
 msgstr ""
 
 #: dist/translation-strings.php:860
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Medium preview"
+#: dist/editor_blocks.js:2
+msgid "Default (Dot)"
 msgstr ""
 
 #: dist/translation-strings.php:861
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Small preview"
+#: dist/editor_blocks.js:2
+msgid "Space"
 msgstr ""
 
 #: dist/translation-strings.php:862
-msgid "Add Designs"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Comma"
 msgstr ""
 
 #: dist/translation-strings.php:863
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Designs"
+#: dist/editor_blocks.js:2
+msgid "Dash"
 msgstr ""
 
 #: dist/translation-strings.php:864
-msgid "Pick a design to start from, this will override your block settings"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Pipe"
 msgstr ""
 
 #: dist/translation-strings.php:865
-msgid "Upload"
+#: dist/editor_blocks.js:2
+msgid "Sets the separators between meta items (dot, space, comma, dash, pipe)"
 msgstr ""
 
 #: dist/translation-strings.php:866
-msgid "Replace"
+#: dist/editor_blocks.js:2
+msgid "Add post links to images"
 msgstr ""
 
 #: dist/translation-strings.php:867
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Layout Tab"
+#: src/block/posts/index.php:265
+#: dist/editor_blocks.js:2
+msgid "Continue Reading"
 msgstr ""
 
 #: dist/translation-strings.php:868
-msgid "Style"
+#: dist/editor_blocks.js:2
+msgid "Read More Button"
 msgstr ""
 
 #: dist/translation-strings.php:869
-msgid "Style Tab"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "featured"
 msgstr ""
 
 #: dist/translation-strings.php:870
-msgid "Advanced"
+#: src/block/posts/index.php:59
+#: src/deprecated/v2/block/blog-posts/index.php:251
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "(Untitled)"
 msgstr ""
 
 #: dist/translation-strings.php:871
-msgid "Advanced Tab"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Image Card"
 msgstr ""
 
 #: dist/translation-strings.php:872
-msgid "Get More Image Shapes"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Portfolio"
 msgstr ""
 
 #: dist/translation-strings.php:873
-msgid "Mask images with a variety of blob-like shapes"
+#: dist/editor_blocks.js:2
+msgid "Portfolio 2"
 msgstr ""
 
 #: dist/translation-strings.php:874
-msgid "Choose from over 50 different shapes"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Vertical Card"
 msgstr ""
 
 #: dist/translation-strings.php:875
-msgid "Enhances the overall aesthetic of images"
+#: dist/editor_blocks.js:2
+msgid "Vertical Card 2"
 msgstr ""
 
 #: dist/translation-strings.php:876
-msgid "Use Dynamic Content"
+#: dist/editor_blocks.js:2
+msgid "Package inclusion one"
 msgstr ""
 
 #: dist/translation-strings.php:877
-msgid "Add dynamic content from posts or post meta"
+#: dist/editor_blocks.js:2
+msgid "Package inclusion two"
 msgstr ""
 
 #: dist/translation-strings.php:878
-msgid "Use third-party plugins as dynamic sources such as ACF, Meta Box, Toolset, and more"
+#: dist/editor_blocks.js:2
+msgid "Package inclusion three"
 msgstr ""
 
 #: dist/translation-strings.php:879
-msgid "Build custom loop design with the Native Query Loop"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:334
+msgid "one"
 msgstr ""
 
 #: dist/translation-strings.php:880
-msgid "Separator Layers"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:335
+msgid "two"
 msgstr ""
 
 #: dist/translation-strings.php:881
-msgid "Add a second and third layer to separators"
-msgstr ""
-
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:336
+msgid "three"
+msgstr ""
+
 #: dist/translation-strings.php:882
-msgid "Change layer color, size and opacity"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:337
+msgid "Package inclusion %s"
 msgstr ""
 
 #: dist/translation-strings.php:883
-msgid "Greater creativity in designing separators"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Compact"
 msgstr ""
 
 #: dist/translation-strings.php:884
-msgid "Elevate Your Icons"
+#: dist/editor_blocks.js:2
+msgid "Banner Layout"
 msgstr ""
 
 #: dist/translation-strings.php:885
-msgid "Liven up icons with gradient fills, multiple colors and background shapes"
+#: dist/editor_blocks.js:2
+msgid "Banner"
 msgstr ""
 
 #: dist/translation-strings.php:886
-msgid "More design options and customization for icons"
+#: dist/editor_blocks.js:2
+msgid "Colored Layout"
 msgstr ""
 
 #: dist/translation-strings.php:887
-msgid "Choose from over 50 background shapes"
+#: dist/editor_blocks.js:2
+msgid "Sectioned Layout"
 msgstr ""
 
 #: dist/translation-strings.php:888
-msgid "Greater visual interest and variety for your icons"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Sectioned"
 msgstr ""
 
 #: dist/translation-strings.php:889
-msgid "Liven up icons with background shapes"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Label"
 msgstr ""
 
 #: dist/translation-strings.php:890
-msgid "Adjust timing of CSS transitions"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Notification Type"
 msgstr ""
 
 #: dist/translation-strings.php:891
-msgid "Change X and Y position of blocks"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Success"
 msgstr ""
 
 #: dist/translation-strings.php:892
-msgid "Scale or rotate blocks"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Error"
 msgstr ""
 
 #: dist/translation-strings.php:893
-msgid "Perfect for hover animations"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Warning"
 msgstr ""
 
 #: dist/translation-strings.php:894
-msgid "Entrance fade-ins and animations when scrolling to blocks"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Information"
 msgstr ""
 
 #: dist/translation-strings.php:895
-msgid "Smooth scroll animations based on scrolling position"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Dismissible"
 msgstr ""
 
 #: dist/translation-strings.php:896
-msgid "Create a more visually engaging and interactive experience"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Side"
 msgstr ""
 
 #: dist/translation-strings.php:897
-msgid "Show or hide blocks based on conditions"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Bordered"
 msgstr ""
 
 #: dist/translation-strings.php:898
-msgid "Display blocks based on time, role, meta, custom PHP, option, taxonomy and more"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Outlined"
 msgstr ""
 
 #: dist/translation-strings.php:899
-msgid "Use multiple conditions"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Large Icon"
 msgstr ""
 
 #: dist/translation-strings.php:900
-msgid "Show targeted content and personalization"
+#: src/stk-block-types.php:782
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:554
+msgid "Spacer"
 msgstr ""
 
 #: dist/translation-strings.php:901
-msgid "Greater control over the visibility of content"
+#: dist/editor_blocks.js:2
+msgid "Type / to choose a block"
 msgstr ""
 
 #: dist/translation-strings.php:902
-msgid "Add custom CSS rules specific for each block"
+#: dist/editor_blocks.js:2
+msgid "Subtitle for this block."
 msgstr ""
 
 #: dist/translation-strings.php:903
-msgid "Support for media queries"
+#: dist/editor_blocks.js:2
+msgid "Classic"
 msgstr ""
 
 #: dist/translation-strings.php:904
-msgid "Fine-tune styling on a per block basis"
+#: dist/editor_blocks.js:2
+msgid "Centered Pills"
 msgstr ""
 
 #: dist/translation-strings.php:905
-msgid "Adjust Column Arrangement"
+#: dist/editor_blocks.js:2
+msgid "Are you sure you want to delete this tab?"
 msgstr ""
 
 #: dist/translation-strings.php:906
-msgid "Adjust the arrangement of columns when collapsed on tablet and mobile"
+#: dist/editor_blocks.js:2
+msgid "Tab Label"
 msgstr ""
 
 #: dist/translation-strings.php:907
-msgid "Ensure that content remains organized and easily readable on mobile"
+#: dist/editor_blocks.js:2
+msgid "Move left"
 msgstr ""
 
 #: dist/translation-strings.php:908
-msgid "This is a Premium Design"
+#: dist/editor_blocks.js:2
+msgid "Move right"
 msgstr ""
 
 #: dist/translation-strings.php:909
-msgid "Unlock access to the entire design library and set your website apart from the rest."
+#: dist/editor_blocks.js:2
+msgid "Add tab"
 msgstr ""
 
 #: dist/translation-strings.php:910
-msgid "Get More Post Options"
+#: dist/editor_blocks.js:2
+msgid "Duplicate tab"
 msgstr ""
 
 #: dist/translation-strings.php:911
-msgid "New Custom Post Type option"
+#: dist/editor_blocks.js:2
+msgid "Delete tab"
 msgstr ""
 
 #: dist/translation-strings.php:912
-msgid "Offset, exclude, include specific posts"
+#: dist/editor_blocks.js:2
+msgid "Fixed Icon Position"
 msgstr ""
 
 #: dist/translation-strings.php:913
-msgid "Hide the current post - great for synced patterns"
+#: dist/editor_blocks.js:2
+msgid "Tab Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:914
-msgid "This Is a Premium Feature"
+#: dist/editor_blocks.js:2
+msgid "Text Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:915
-#: src/welcome/index.php:274
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Learn More"
+#: dist/editor_blocks.js:2
+msgid "Scrollable Tabs on Mobile"
 msgstr ""
 
 #: dist/translation-strings.php:916
-msgid "View Demo"
+#: dist/editor_blocks.js:2
+msgid "Tab"
 msgstr ""
 
 #: dist/translation-strings.php:917
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "You can hide premium hints in the settings"
+#: dist/editor_blocks.js:2
+msgid "Tab Active State"
 msgstr ""
 
 #: dist/translation-strings.php:918
-msgid "Desktop"
+#: dist/editor_blocks.js:2
+msgid "Change icons individually by clicking on each tab's icon."
 msgstr ""
 
 #: dist/translation-strings.php:919
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Tablet"
+#: dist/editor_blocks.js:2
+msgid "Tab Anchors"
 msgstr ""
 
 #: dist/translation-strings.php:920
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Mobile"
+#: dist/editor_blocks.js:2
+msgid "Assign unique anchor names to each tab so you'll be able to link directly and open each one."
 msgstr ""
 
 #: dist/translation-strings.php:921
-msgid "Inset"
+#: dist/editor_blocks.js:2
+msgid "%s Anchor"
 msgstr ""
 
 #: dist/translation-strings.php:922
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:233
-msgid "Vertical Offset"
+#: dist/editor_blocks.js:2
+msgid "Tab Anchor"
 msgstr ""
 
 #: dist/translation-strings.php:923
-msgid "Shadow Spread"
+#: dist/editor_blocks.js:2
+msgid "Tab %d"
 msgstr ""
 
 #: dist/translation-strings.php:924
-msgid "Shadow Color"
+#: src/stk-block-types.php:880
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:567
+msgid "Tabs"
 msgstr ""
 
 #: dist/translation-strings.php:925
-msgid "Advanced Shadow Options"
+#: dist/editor_blocks.js:2
+msgid "Initial Tab Open"
 msgstr ""
 
 #: dist/translation-strings.php:926
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:299
-msgid "Custom"
+#: dist/editor_blocks.js:2
+msgid "Equal tab height"
 msgstr ""
 
 #: dist/translation-strings.php:927
-msgid "Shadow Settings"
+#: dist/editor_blocks.js:2
+msgid "Tab Orientation"
 msgstr ""
 
 #: dist/translation-strings.php:928
-msgid "Shadow/Outline"
+#: dist/editor_blocks.js:2
+msgid "Tab Panel Offset"
 msgstr ""
 
 #: dist/translation-strings.php:929
-msgid "Adjusts the intensity of the shadow/outline of the block and the appearance of the block border"
+#: dist/editor_blocks.js:2
+msgid "Tab Panel Effect"
 msgstr ""
 
 #: dist/translation-strings.php:930
-msgid "Column Arrangement"
+#: dist/editor_blocks.js:2
+msgid "Immediate"
 msgstr ""
 
 #: dist/translation-strings.php:931
-#: pro__premium_only/src/dynamic-content/sources/other-posts.php:259
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:18
-msgid "Post Type"
+#: dist/editor_blocks.js:2
+msgid "Unordered"
 msgstr ""
 
 #: dist/translation-strings.php:932
-msgid "Filter by Taxonomy"
+#: dist/editor_blocks.js:2
+msgctxt "%s is a heading level, e.g. H1"
+msgid "Include %s"
 msgstr ""
 
 #: dist/translation-strings.php:933
-msgid "Taxonomy Filter Type"
+#: dist/editor_blocks.js:2
+msgid "Auto-generate missing anchor ids"
 msgstr ""
 
 #: dist/translation-strings.php:934
-msgid "Included In"
+#: dist/editor_blocks.js:2
+msgid "Scrolling"
 msgstr ""
 
 #: dist/translation-strings.php:935
-msgid "Not In"
+#: dist/editor_blocks.js:2
+msgid "Use smooth scroll"
 msgstr ""
 
 #: dist/translation-strings.php:936
-msgid "Opens in new tab"
+#: dist/editor_blocks.js:2
+msgid "Scroll Top Offset "
 msgstr ""
 
 #: dist/translation-strings.php:937
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Nofollow link"
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Introduction"
 msgstr ""
 
 #: dist/translation-strings.php:938
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Sponsored"
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Chapter 1: Abstract"
 msgstr ""
 
 #: dist/translation-strings.php:939
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "UGC"
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Chapter 2: History"
 msgstr ""
 
 #: dist/translation-strings.php:940
-msgid "Search or type url"
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Chapter 3: Main Content"
 msgstr ""
 
 #: dist/translation-strings.php:941
-msgid "URL"
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Chapter 4: Additional Thoughts"
 msgstr ""
 
 #: dist/translation-strings.php:942
-msgid "Upgrade to Premium to get more design variations."
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Conclusion"
 msgstr ""
 
 #: dist/translation-strings.php:943
+#: src/stk-block-types.php:859
 #: dist/editor_blocks.js:2
-msgid "Color & Highlight"
+#: dist/translation-strings.js:562
+msgid "Table of Contents"
 msgstr ""
 
 #: dist/translation-strings.php:944
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Highlight"
+msgid "Include heading"
 msgstr ""
 
 #: dist/translation-strings.php:945
 #: dist/editor_blocks.js:2
-msgid "Low"
+msgid "Exclude heading"
 msgstr ""
 
 #: dist/translation-strings.php:946
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Highlight Text"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:341
+msgid "Name"
 msgstr ""
 
 #: dist/translation-strings.php:947
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Reset layout"
+msgid "Bubble"
 msgstr ""
 
 #: dist/translation-strings.php:948
 #: dist/editor_blocks.js:2
-msgid "Stackable Settings"
+msgid "Inverted Vertical"
 msgstr ""
 
 #: dist/translation-strings.php:949
-msgid "The page will now reload for the old blocks to load. Please reload it if it does not refresh automatically."
+#: dist/editor_blocks.js:2
+msgid "Play Video"
 msgstr ""
 
 #: dist/translation-strings.php:950
-msgid "Stackable V2 Block Detected"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Popup Option #1: Upload Video"
 msgstr ""
 
 #: dist/translation-strings.php:951
-msgid "Hello! 👋"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Use .mp4 format for videos"
 msgstr ""
 
 #: dist/translation-strings.php:952
-msgid "We noticed that the page you are editing contains old Stackable version 2 blocks. Starting Stackable version 3, old v2 blocks are not anymore loaded in the editor. This means that you would not be able to edit the old v2 blocks in the editor and any old v2 block would show a block error in the editor."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Popup Option #2: Video URL"
 msgstr ""
 
 #: dist/translation-strings.php:953
-msgid "Do you want to enable backward compatibility, so the old blocks will be loaded in the editor?"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Paste a Youtube / Vimeo URL"
 msgstr ""
 
 #: dist/translation-strings.php:954
-msgid "Yes, load V2 Blocks in the editor, but only when V2 blocks are present already"
+#: dist/editor_blocks.js:2
+msgid "Allow fullscreen"
 msgstr ""
 
 #: dist/translation-strings.php:955
-msgid "Yes, always load V2 blocks in the editor"
+#: dist/editor_blocks.js:2
+msgid "Allow download video"
 msgstr ""
 
 #: dist/translation-strings.php:956
-msgid "No, don't load V2 blocks in the editor"
+#: dist/editor_blocks.js:2
+msgid "Loop video"
 msgstr ""
 
 #: dist/translation-strings.php:957
 #: dist/editor_blocks.js:2
-msgid "Error saving block, please make sure you only have a %s block"
+msgid "Text for this block. Use this space for describing your block. Any text will do. Text for this block. You can use this space for describing your block."
 msgstr ""
 
 #: dist/translation-strings.php:958
-#: dist/editor_blocks.js:2
-msgid "Default %s Block saved"
+msgid "Facebook"
 msgstr ""
 
 #: dist/translation-strings.php:959
-#: dist/editor_blocks.js:2
-msgid "%s Block style saved"
+msgid "Twitter"
 msgstr ""
 
 #: dist/translation-strings.php:960
-#: dist/editor_blocks.js:2
-msgid "Default %s Block Saved!"
+msgid "Instagram"
 msgstr ""
 
 #: dist/translation-strings.php:961
-#: dist/editor_blocks.js:2
-msgid "Save as Default %s Block"
+msgid "Pinterest"
 msgstr ""
 
 #: dist/translation-strings.php:962
-#: dist/editor_blocks.js:2
-msgid "Default %s Block Deleted!"
+msgid "LinkedIn"
 msgstr ""
 
 #: dist/translation-strings.php:963
-#: dist/editor_blocks.js:2
-msgid "Reset Default %s Block"
+#: src/stk-block-types.php:992
+#: dist/translation-strings.js:582
+msgid "YouTube"
 msgstr ""
 
 #: dist/translation-strings.php:964
-#: dist/editor_blocks.js:2
-msgid "Couldn't update block styles, got this error:"
+msgid "Email"
 msgstr ""
 
 #: dist/translation-strings.php:965
 #: dist/editor_blocks.js:2
-msgid "Please refresh the page and try again."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:314
+msgctxt "Content placeholder"
+msgid "Description for this block. Use this space for describing your block. Any text will do."
 msgstr ""
 
 #: dist/translation-strings.php:966
-msgid "Facebook"
+#: dist/editor_blocks.js:2
+msgid "Content Position"
 msgstr ""
 
 #: dist/translation-strings.php:967
-msgid "Twitter"
+#: src/stk-block-types.php:962
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:576
+msgid "Timeline"
 msgstr ""
 
 #: dist/translation-strings.php:968
-msgid "Instagram"
+#: dist/editor_blocks.js:2
+msgid "Accent Anchor Position"
 msgstr ""
 
 #: dist/translation-strings.php:969
-msgid "Pinterest"
+#: dist/editor_blocks.js:2
+msgid "Succeeding timeline blocks will also use this value."
 msgstr ""
 
 #: dist/translation-strings.php:970
-msgid "LinkedIn"
+#: dist/editor_blocks.js:2
+msgid "%s Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:971
-#: src/stk-block-types.php:992
-#: dist/translation-strings.js:582
-msgid "YouTube"
+#: dist/editor_blocks.js:2
+msgid "Line Thickness"
 msgstr ""
 
 #: dist/translation-strings.php:972
-msgid "Email"
+#: dist/editor_blocks.js:2
+msgctxt "option title"
+msgid "%s #%d"
 msgstr ""
 
 #: dist/translation-strings.php:973
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image or Video"
+#: dist/editor_blocks.js:2
+msgid "Timeline Accent Color"
 msgstr ""
 
 #: dist/translation-strings.php:974
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image"
+#: dist/editor_blocks.js:2
+msgid "Timeline Background Color"
 msgstr ""
 
 #: dist/translation-strings.php:975
-msgid "Background Image Url"
+#: dist/deprecated/admin_welcome_v2.js:2
+msgid "Frontend JS & CSS Files"
 msgstr ""
 
 #: dist/translation-strings.php:976
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Media Tint Strength"
+#: dist/deprecated/admin_welcome_v2.js:2
+msgid "Load across entire site"
 msgstr ""
 
 #: dist/translation-strings.php:977
-msgid "Adjusts the intensity of the background media tint"
+#: dist/deprecated/admin_welcome_v2.js:2
+msgid "Load only in posts with Stackable blocks"
 msgstr ""
 
 #: dist/translation-strings.php:978
-msgid "Background Video Thumbnail"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/accordion/block.json
+#: src/deprecated/v2/block/accordion/block.json
+msgctxt "block title"
+msgid "Accordion"
 msgstr ""
 
 #: dist/translation-strings.php:979
-msgid "Note: Fixed Background works on Desktop and Android devices only."
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/deprecated/v2/block/text/block.json
+msgctxt "block title"
+msgid "Advanced Text"
 msgstr ""
 
 #: dist/translation-strings.php:980
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Fixed Background"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/deprecated/v2/block/heading/block.json
+msgctxt "block title"
+msgid "Advanced Heading"
 msgstr ""
 
 #: dist/translation-strings.php:981
-msgid "Keeps the background image fixed in place while scrolling"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/blockquote/block.json
+#: src/deprecated/v2/block/blockquote/block.json
+msgctxt "block title"
+msgid "Blockquote"
 msgstr ""
 
 #: dist/translation-strings.php:982
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Adv. Background Image Settings"
+#: dist/deprecated/admin_welcome_v2.js:2
+msgctxt "block title"
+msgid "Blog Posts"
 msgstr ""
 
 #: dist/translation-strings.php:983
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Image Position"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/button/block.json
+#: src/deprecated/v2/block/button/block.json
+msgctxt "block title"
+msgid "Button"
 msgstr ""
 
 #: dist/translation-strings.php:984
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:264
-msgid "Top Center"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/call-to-action/block.json
+#: src/deprecated/v2/block/call-to-action/block.json
+msgctxt "block title"
+msgid "Call to Action"
 msgstr ""
 
 #: dist/translation-strings.php:985
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:266
-msgid "Center Left"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/card/block.json
+#: src/deprecated/v2/block/card/block.json
+msgctxt "block title"
+msgid "Card"
 msgstr ""
 
 #: dist/translation-strings.php:986
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:267
-msgid "Center Center"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/columns/block.json
+msgctxt "block title"
+msgid "Columns"
 msgstr ""
 
 #: dist/translation-strings.php:987
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:268
-msgid "Center Right"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/deprecated/v2/block/container/block.json
+msgctxt "block title"
+msgid "Container"
 msgstr ""
 
 #: dist/translation-strings.php:988
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:270
-msgid "Bottom Center"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/count-up/block.json
+#: src/deprecated/v2/block/count-up/block.json
+msgctxt "block title"
+msgid "Count Up"
 msgstr ""
 
 #: dist/translation-strings.php:989
-msgid "Chooses which part of the background image will be the focal point"
+#: src/block/design-library/block.json
+msgctxt "block title"
+msgid "Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:990
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Image Repeat"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/divider/block.json
+#: src/deprecated/v2/block/divider/block.json
+msgctxt "block title"
+msgid "Divider"
 msgstr ""
 
 #: dist/translation-strings.php:991
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "No-Repeat"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/expand/block.json
+#: src/deprecated/v2/block/expand/block.json
+msgctxt "block title"
+msgid "Expand / Show More"
 msgstr ""
 
 #: dist/translation-strings.php:992
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Repeat"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/feature-grid/block.json
+#: src/deprecated/v2/block/feature-grid/block.json
+msgctxt "block title"
+msgid "Feature Grid"
 msgstr ""
 
 #: dist/translation-strings.php:993
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Repeat-X"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/feature/block.json
+#: src/deprecated/v2/block/feature/block.json
+msgctxt "block title"
+msgid "Feature"
 msgstr ""
 
 #: dist/translation-strings.php:994
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Repeat-Y"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/deprecated/v2/block/header/block.json
+msgctxt "block title"
+msgid "Header"
 msgstr ""
 
 #: dist/translation-strings.php:995
-msgid "Covers the background with tiled images"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/icon/block.json
+#: src/deprecated/v2/block/icon/block.json
+msgctxt "block title"
+msgid "Icon"
 msgstr ""
 
 #: dist/translation-strings.php:996
-msgid "Sets the display image size"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/icon-list/block.json
+#: src/deprecated/v2/block/icon-list/block.json
+msgctxt "block title"
+msgid "Icon List"
 msgstr ""
 
 #: dist/translation-strings.php:997
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Custom Size"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/image-box/block.json
+#: src/deprecated/v2/block/image-box/block.json
+msgctxt "block title"
+msgid "Image Box"
 msgstr ""
 
 #: dist/translation-strings.php:998
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Image Blend Mode"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/notification/block.json
+#: src/deprecated/v2/block/notification/block.json
+msgctxt "block title"
+msgid "Notification"
 msgstr ""
 
 #: dist/translation-strings.php:999
-msgid "Adjusts the radius of block corners to make them more rounded"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/number-box/block.json
+#: src/deprecated/v2/block/number-box/block.json
+msgctxt "block title"
+msgid "Number Box"
 msgstr ""
 
 #: dist/translation-strings.php:1000
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Link / URL"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/pricing-box/block.json
+#: src/deprecated/v2/block/pricing-box/block.json
+msgctxt "block title"
+msgid "Pricing Box"
 msgstr ""
 
 #: dist/translation-strings.php:1001
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:321
-msgid "Open in new tab"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/separator/block.json
+#: src/deprecated/v2/block/separator/block.json
+msgctxt "block title"
+msgid "Separator"
 msgstr ""
 
 #: dist/translation-strings.php:1002
-msgid "Open Link in Lightbox"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/spacer/block.json
+#: src/deprecated/v2/block/spacer/block.json
+msgctxt "block title"
+msgid "Spacer"
 msgstr ""
 
 #: dist/translation-strings.php:1003
-msgid "Displaying a Google Map in a Lightbox? Use the embed iframe URL instead. Need help finding it?"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/team-member/block.json
+#: src/deprecated/v2/block/team-member/block.json
+msgctxt "block title"
+msgid "Team Member"
 msgstr ""
 
 #: dist/translation-strings.php:1004
-msgid " Check out our docs."
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/testimonial/block.json
+#: src/deprecated/v2/block/testimonial/block.json
+msgctxt "block title"
+msgid "Testimonial"
 msgstr ""
 
 #: dist/translation-strings.php:1005
-msgid "Link rel"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/video-popup/block.json
+#: src/deprecated/v2/block/video-popup/block.json
+msgctxt "block title"
+msgid "Video Popup"
 msgstr ""
 
 #: dist/translation-strings.php:1006
-msgid "Link relationship keywords, e.g. nofollow noreferrer prefetch"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Image or Video"
 msgstr ""
 
 #: dist/translation-strings.php:1007
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Link Title"
+msgid "Background Image"
 msgstr ""
 
 #: dist/translation-strings.php:1008
-msgid "Also used for lightbox caption"
+msgid "Background Image Url"
 msgstr ""
 
 #: dist/translation-strings.php:1009
-msgid "Anchor ID"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Media Tint Strength"
 msgstr ""
 
 #: dist/translation-strings.php:1010
-msgid "Add an id attribute to the anchor tag."
+msgid "Adjusts the intensity of the background media tint"
 msgstr ""
 
 #: dist/translation-strings.php:1011
-msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding"
+msgid "Background Video Thumbnail"
 msgstr ""
 
 #: dist/translation-strings.php:1012
-msgid "Min. Height"
+msgid "Note: Fixed Background works on Desktop and Android devices only."
 msgstr ""
 
 #: dist/translation-strings.php:1013
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Max. Content Width"
+msgid "Fixed Background"
 msgstr ""
 
 #: dist/translation-strings.php:1014
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:447
-msgid "Content Vertical Align"
+msgid "Keeps the background image fixed in place while scrolling"
 msgstr ""
 
 #: dist/translation-strings.php:1015
-msgid "Adjusts the minimum allowable height of the block"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Adv. Background Image Settings"
 msgstr ""
 
 #: dist/translation-strings.php:1016
-msgid "Sets the placement of the content to top, center or bottom. Available when the min. block height is set to higher than default."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Image Position"
 msgstr ""
 
 #: dist/translation-strings.php:1017
-msgid "Adjusts the maximum allowable width of the block. The settings will depend on the block width you set on the toolbar."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:249
+msgid "Top Center"
 msgstr ""
 
 #: dist/translation-strings.php:1018
-msgid "Sets the placement of the content to left, center or right. Not available when block width is set to full width."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:251
+msgid "Center Left"
 msgstr ""
 
 #: dist/translation-strings.php:1019
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Paddings"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:252
+msgid "Center Center"
 msgstr ""
 
 #: dist/translation-strings.php:1020
-msgid "Margins"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:253
+msgid "Center Right"
 msgstr ""
 
 #: dist/translation-strings.php:1021
-msgid "Sets the block paddings, i.e the space between the inner columns and the block border"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:255
+msgid "Bottom Center"
 msgstr ""
 
 #: dist/translation-strings.php:1022
-msgid "Sets the block margin, i.e. the space outside the block between the block border and the next block."
+msgid "Chooses which part of the background image will be the focal point"
 msgstr ""
 
 #: dist/translation-strings.php:1023
-#: dist/deprecated/admin_welcome_v2.js:2
-msgid "Frontend JS & CSS Files"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Image Repeat"
 msgstr ""
 
 #: dist/translation-strings.php:1024
-#: dist/deprecated/admin_welcome_v2.js:2
-msgid "Load across entire site"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "No-Repeat"
 msgstr ""
 
 #: dist/translation-strings.php:1025
-#: dist/deprecated/admin_welcome_v2.js:2
-msgid "Load only in posts with Stackable blocks"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Repeat"
 msgstr ""
 
 #: dist/translation-strings.php:1026
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/accordion/block.json
-#: src/deprecated/v2/block/accordion/block.json
-msgctxt "block title"
-msgid "Accordion"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Repeat-X"
 msgstr ""
 
 #: dist/translation-strings.php:1027
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/deprecated/v2/block/text/block.json
-msgctxt "block title"
-msgid "Advanced Text"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Repeat-Y"
 msgstr ""
 
 #: dist/translation-strings.php:1028
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/deprecated/v2/block/heading/block.json
-msgctxt "block title"
-msgid "Advanced Heading"
+msgid "Covers the background with tiled images"
 msgstr ""
 
 #: dist/translation-strings.php:1029
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/blockquote/block.json
-#: src/deprecated/v2/block/blockquote/block.json
-msgctxt "block title"
-msgid "Blockquote"
+msgid "Sets the display image size"
 msgstr ""
 
 #: dist/translation-strings.php:1030
-#: dist/deprecated/admin_welcome_v2.js:2
-msgctxt "block title"
-msgid "Blog Posts"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Custom Size"
 msgstr ""
 
 #: dist/translation-strings.php:1031
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/button/block.json
-#: src/deprecated/v2/block/button/block.json
-msgctxt "block title"
-msgid "Button"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Image Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:1032
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/call-to-action/block.json
-#: src/deprecated/v2/block/call-to-action/block.json
-msgctxt "block title"
-msgid "Call to Action"
+msgid "Adjusts the radius of block corners to make them more rounded"
 msgstr ""
 
 #: dist/translation-strings.php:1033
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/card/block.json
-#: src/deprecated/v2/block/card/block.json
-msgctxt "block title"
-msgid "Card"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Link / URL"
 msgstr ""
 
 #: dist/translation-strings.php:1034
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/columns/block.json
-msgctxt "block title"
-msgid "Columns"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:283
+msgid "Open in new tab"
 msgstr ""
 
 #: dist/translation-strings.php:1035
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/deprecated/v2/block/container/block.json
-msgctxt "block title"
-msgid "Container"
+msgid "Open Link in Lightbox"
 msgstr ""
 
 #: dist/translation-strings.php:1036
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/count-up/block.json
-#: src/deprecated/v2/block/count-up/block.json
-msgctxt "block title"
-msgid "Count Up"
+msgid "Displaying a Google Map in a Lightbox? Use the embed iframe URL instead. Need help finding it?"
 msgstr ""
 
 #: dist/translation-strings.php:1037
-#: src/block/design-library/block.json
-msgctxt "block title"
-msgid "Design Library"
+msgid " Check out our docs."
 msgstr ""
 
 #: dist/translation-strings.php:1038
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/divider/block.json
-#: src/deprecated/v2/block/divider/block.json
-msgctxt "block title"
-msgid "Divider"
+msgid "Link rel"
 msgstr ""
 
 #: dist/translation-strings.php:1039
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/expand/block.json
-#: src/deprecated/v2/block/expand/block.json
-msgctxt "block title"
-msgid "Expand / Show More"
+msgid "Link relationship keywords, e.g. nofollow noreferrer prefetch"
 msgstr ""
 
 #: dist/translation-strings.php:1040
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/feature-grid/block.json
-#: src/deprecated/v2/block/feature-grid/block.json
-msgctxt "block title"
-msgid "Feature Grid"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Link Title"
 msgstr ""
 
 #: dist/translation-strings.php:1041
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/feature/block.json
-#: src/deprecated/v2/block/feature/block.json
-msgctxt "block title"
-msgid "Feature"
+msgid "Also used for lightbox caption"
 msgstr ""
 
 #: dist/translation-strings.php:1042
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/deprecated/v2/block/header/block.json
-msgctxt "block title"
-msgid "Header"
+msgid "Anchor ID"
 msgstr ""
 
 #: dist/translation-strings.php:1043
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/icon/block.json
-#: src/deprecated/v2/block/icon/block.json
-msgctxt "block title"
-msgid "Icon"
+msgid "Add an id attribute to the anchor tag."
 msgstr ""
 
 #: dist/translation-strings.php:1044
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/icon-list/block.json
-#: src/deprecated/v2/block/icon-list/block.json
-msgctxt "block title"
-msgid "Icon List"
+msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding"
 msgstr ""
 
 #: dist/translation-strings.php:1045
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/image-box/block.json
-#: src/deprecated/v2/block/image-box/block.json
-msgctxt "block title"
-msgid "Image Box"
+msgid "Min. Height"
 msgstr ""
 
 #: dist/translation-strings.php:1046
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/notification/block.json
-#: src/deprecated/v2/block/notification/block.json
-msgctxt "block title"
-msgid "Notification"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Max. Content Width"
 msgstr ""
 
 #: dist/translation-strings.php:1047
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/number-box/block.json
-#: src/deprecated/v2/block/number-box/block.json
-msgctxt "block title"
-msgid "Number Box"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:436
+msgid "Content Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:1048
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/pricing-box/block.json
-#: src/deprecated/v2/block/pricing-box/block.json
-msgctxt "block title"
-msgid "Pricing Box"
+msgid "Adjusts the minimum allowable height of the block"
 msgstr ""
 
 #: dist/translation-strings.php:1049
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/separator/block.json
-#: src/deprecated/v2/block/separator/block.json
-msgctxt "block title"
-msgid "Separator"
+msgid "Sets the placement of the content to top, center or bottom. Available when the min. block height is set to higher than default."
 msgstr ""
 
 #: dist/translation-strings.php:1050
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/spacer/block.json
-#: src/deprecated/v2/block/spacer/block.json
-msgctxt "block title"
-msgid "Spacer"
+msgid "Adjusts the maximum allowable width of the block. The settings will depend on the block width you set on the toolbar."
 msgstr ""
 
 #: dist/translation-strings.php:1051
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/team-member/block.json
-#: src/deprecated/v2/block/team-member/block.json
-msgctxt "block title"
-msgid "Team Member"
+msgid "Sets the placement of the content to left, center or right. Not available when block width is set to full width."
 msgstr ""
 
 #: dist/translation-strings.php:1052
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/testimonial/block.json
-#: src/deprecated/v2/block/testimonial/block.json
-msgctxt "block title"
-msgid "Testimonial"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1053
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/video-popup/block.json
-#: src/deprecated/v2/block/video-popup/block.json
-msgctxt "block title"
-msgid "Video Popup"
+msgid "Margins"
 msgstr ""
 
 #: dist/translation-strings.php:1054
+msgid "Sets the block paddings, i.e the space between the inner columns and the block border"
+msgstr ""
+
+#: dist/translation-strings.php:1055
+msgid "Sets the block margin, i.e. the space outside the block between the block border and the next block."
+msgstr ""
+
+#: dist/translation-strings.php:1056
 #: dist/editor_blocks.js:2
 msgid "Block Defaults"
 msgstr ""
 
-#: dist/translation-strings.php:1055
+#: dist/translation-strings.php:1057
 #: dist/editor_blocks.js:2
 msgid "Manage how Stackable blocks look when they're inserted."
 msgstr ""
 
-#: dist/translation-strings.php:1056
+#: dist/translation-strings.php:1058
 #: dist/editor_blocks.js:2
 msgid "Learn more about Block Defaults"
 msgstr ""
 
-#: dist/translation-strings.php:1057
+#: dist/translation-strings.php:1059
 #: dist/editor_blocks.js:2
 msgid "Any blocks that use this color will become unlinked with this global color. Delete this color?"
 msgstr ""
 
-#: dist/translation-strings.php:1058
+#: dist/translation-strings.php:1060
 #: dist/editor_blocks.js:2
 msgid "Custom Color %s"
 msgstr ""
 
-#: dist/translation-strings.php:1059
+#: dist/translation-strings.php:1061
 #: dist/editor_blocks.js:2
 msgid "Global Color Palette"
 msgstr ""
 
-#: dist/translation-strings.php:1060
+#: dist/translation-strings.php:1062
 #: dist/editor_blocks.js:2
 msgid "Change your color palette for all your blocks across your site."
 msgstr ""
 
-#: dist/translation-strings.php:1061
+#: dist/translation-strings.php:1063
 #: dist/editor_blocks.js:2
 msgid "Learn more about Global Colors"
 msgstr ""
 
-#: dist/translation-strings.php:1062
+#: dist/translation-strings.php:1064
 #: dist/editor_blocks.js:2
 msgid "Show Theme Colors"
 msgstr ""
 
-#: dist/translation-strings.php:1063
+#: dist/translation-strings.php:1065
 #: dist/editor_blocks.js:2
 msgid "Show Default Colors"
 msgstr ""
 
-#: dist/translation-strings.php:1064
+#: dist/translation-strings.php:1066
 #: dist/editor_blocks.js:2
 msgid "Show Site Editor Custom Colors"
 msgstr ""
 
-#: dist/translation-strings.php:1065
+#: dist/translation-strings.php:1067
 #: dist/editor_blocks.js:2
 msgid "Heading %d"
 msgstr ""
 
-#: dist/translation-strings.php:1066
+#: dist/translation-strings.php:1068
 #: src/stk-block-types.php:797
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
@@ -5572,1151 +5582,1151 @@ msgstr ""
 msgid "Subtitle"
 msgstr ""
 
-#: dist/translation-strings.php:1067
+#: dist/translation-strings.php:1069
 msgid "To apply this typography style, just add `%s` in your block\\'s Additional CSS classes. Also make sure that `%s` tag is set to avoid conflict with other typography styles"
 msgstr ""
 
-#: dist/translation-strings.php:1068
+#: dist/translation-strings.php:1070
 #: dist/editor_blocks.js:2
 msgid "Body Text"
 msgstr ""
 
-#: dist/translation-strings.php:1069
+#: dist/translation-strings.php:1071
 #: dist/editor_blocks.js:2
 msgid "Global Typography"
 msgstr ""
 
-#: dist/translation-strings.php:1070
+#: dist/translation-strings.php:1072
 #: dist/editor_blocks.js:2
 msgid "Change the typography of your headings for all your blocks in your site."
 msgstr ""
 
-#: dist/translation-strings.php:1071
+#: dist/translation-strings.php:1073
 #: dist/editor_blocks.js:2
 msgid "Learn more about Global Typography"
 msgstr ""
 
-#: dist/translation-strings.php:1072
+#: dist/translation-strings.php:1074
 #: dist/editor_blocks.js:2
 msgid "Apply Typography Styles to"
 msgstr ""
 
-#: dist/translation-strings.php:1073
+#: dist/translation-strings.php:1075
 #: dist/editor_blocks.js:2
 msgid "Stackable and native blocks only"
 msgstr ""
 
-#: dist/translation-strings.php:1074
+#: dist/translation-strings.php:1076
 #: dist/editor_blocks.js:2
 msgid "Stackable blocks only"
 msgstr ""
 
-#: dist/translation-strings.php:1075
+#: dist/translation-strings.php:1077
 #: dist/editor_blocks.js:2
 msgid "Stackable and all other blocks"
 msgstr ""
 
-#: dist/translation-strings.php:1076
+#: dist/translation-strings.php:1078
 #: dist/editor_blocks.js:2
 msgid "Reset %s Global Typography Style"
 msgstr ""
 
-#: dist/translation-strings.php:1077
+#: dist/translation-strings.php:1079
 #: dist/editor_blocks.js:2
 msgid "Resetting this typography style will revert all typography to its original style. Proceed?"
 msgstr ""
 
-#: dist/translation-strings.php:1078
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Align Top"
-msgstr ""
-
-#: dist/translation-strings.php:1079
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Align Bottom"
-msgstr ""
-
 #: dist/translation-strings.php:1080
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:240
-msgctxt "Panel title"
-msgid "%s #%d"
+msgid "Corporate"
 msgstr ""
 
 #: dist/translation-strings.php:1081
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Color Opacity"
+msgid "Basic"
 msgstr ""
 
 #: dist/translation-strings.php:1082
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Color Type"
+msgid "Lined to Colored"
 msgstr ""
 
 #: dist/translation-strings.php:1083
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Pick a layout or design"
+msgid "Reverse arrow"
 msgstr ""
 
 #: dist/translation-strings.php:1084
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Select a variation to start with."
+msgid "Closed State Background Color"
 msgstr ""
 
 #: dist/translation-strings.php:1085
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Or pick from our Design Library."
+msgid "Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1086
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Select a design from our library to start with."
+msgid "Title Color"
 msgstr ""
 
 #: dist/translation-strings.php:1087
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Skip"
+msgid "Arrow"
 msgstr ""
 
 #: dist/translation-strings.php:1088
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Open link in new tab"
+msgid "Border"
 msgstr ""
 
 #: dist/translation-strings.php:1089
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Basic"
+msgid "Spread"
 msgstr ""
 
 #: dist/translation-strings.php:1090
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Use social colors"
+msgid "Grouped"
 msgstr ""
 
 #: dist/translation-strings.php:1091
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Change to Normal Button on Hover"
+msgid "Collapse Buttons On"
 msgstr ""
 
 #: dist/translation-strings.php:1092
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Button Size"
+msgid "Don't collapse"
 msgstr ""
 
 #: dist/translation-strings.php:1093
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Tiny"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:220
+msgctxt "Panel title"
+msgid "%s #%d"
 msgstr ""
 
 #: dist/translation-strings.php:1094
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Small"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/translation-strings.js:377
+msgid "Description"
 msgstr ""
 
 #: dist/translation-strings.php:1095
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:315
-msgid "Medium"
+msgid "Description Color"
 msgstr ""
 
 #: dist/translation-strings.php:1096
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:316
-msgid "Large"
+msgid "Subtitle for this block"
 msgstr ""
 
 #: dist/translation-strings.php:1097
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Vertical Padding"
+#: dist/translation-strings.js:403
+msgid "Image Height"
 msgstr ""
 
 #: dist/translation-strings.php:1098
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Horizontal Padding"
+#: dist/translation-strings.js:404
+msgid "Image Width"
 msgstr ""
 
 #: dist/translation-strings.php:1099
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Adv. Icon Settings"
+msgid "Subtitle Color"
 msgstr ""
 
 #: dist/translation-strings.php:1100
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Spacing"
+msgid "Quotation Mark"
 msgstr ""
 
 #: dist/translation-strings.php:1101
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hover Opacity"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:178
+msgid "Horizontal Position"
 msgstr ""
 
 #: dist/translation-strings.php:1102
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hover Colors"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:179
+msgid "Vertical Position"
 msgstr ""
 
 #: dist/translation-strings.php:1103
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Free"
+msgid "Uneven"
 msgstr ""
 
 #: dist/translation-strings.php:1104
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Premium"
+msgid "Tiled"
 msgstr ""
 
 #: dist/translation-strings.php:1105
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:448
-msgid "Column Paddings"
+msgid "Layouts"
 msgstr ""
 
 #: dist/translation-strings.php:1106
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:404
-msgid "Image Width"
+msgid "No Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1107
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Force square image"
+msgid "Half-screen height"
 msgstr ""
 
 #: dist/translation-strings.php:1108
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Blend Mode"
+msgid "Full-screen height"
 msgstr ""
 
 #: dist/translation-strings.php:1109
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Shaped"
+msgid "Custom height"
 msgstr ""
 
 #: dist/translation-strings.php:1110
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:343
-msgid "Icon Color Type"
+msgid "Custom Height"
 msgstr ""
 
 #: dist/translation-strings.php:1111
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:237
-msgid "Multicolor"
+#: dist/translation-strings.js:434
+msgid "Column Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:1112
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Shape / Outline Color"
+msgid "Text Colors"
 msgstr ""
 
 #: dist/translation-strings.php:1113
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Shape Border Radius"
+msgid "Heading Color"
 msgstr ""
 
 #: dist/translation-strings.php:1114
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Outline Border Radius"
+msgid "Link Color"
 msgstr ""
 
 #: dist/translation-strings.php:1115
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Shape Padding"
+msgid "Link Hover Color"
 msgstr ""
 
 #: dist/translation-strings.php:1116
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Outline Padding"
+msgid "The colors above might not apply to some nested blocks."
 msgstr ""
 
 #: dist/translation-strings.php:1117
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Outline Width"
+msgid "Abstract"
 msgstr ""
 
 #: dist/translation-strings.php:1118
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image Position"
+msgid "Boxed"
 msgstr ""
 
 #: dist/translation-strings.php:1119
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image Repeat"
+msgid "Number Color"
 msgstr ""
 
 #: dist/translation-strings.php:1120
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image Size"
+msgid "Vertical Margin"
 msgstr ""
 
 #: dist/translation-strings.php:1121
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "All Block Designs"
+msgid "Short"
 msgstr ""
 
 #: dist/translation-strings.php:1122
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Free Designs"
+msgid "Tall"
 msgstr ""
 
 #: dist/translation-strings.php:1123
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Premium Designs"
+msgid "Restrict to Content Width"
 msgstr ""
 
 #: dist/translation-strings.php:1124
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "name"
-msgid "%s Link"
+msgid "Half Background"
 msgstr ""
 
 #: dist/translation-strings.php:1125
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Spread"
+msgid "Overlap Shape %s"
 msgstr ""
 
 #: dist/translation-strings.php:1126
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Grouped"
+msgid "Overlap Background %s"
 msgstr ""
 
 #: dist/translation-strings.php:1127
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Collapse Buttons On"
+msgid "Image Column Width"
 msgstr ""
 
 #: dist/translation-strings.php:1128
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Don't collapse"
+msgid "Reverse Horizontally"
 msgstr ""
 
 #: dist/translation-strings.php:1129
-#: dist/admin_custom_fields__premium_only.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/translation-strings.js:377
-msgid "Description"
+msgid "Container Width"
 msgstr ""
 
 #: dist/translation-strings.php:1130
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Title Color"
+msgid "Container Offset"
 msgstr ""
 
 #: dist/translation-strings.php:1131
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Description Color"
+msgid "Full Height"
 msgstr ""
 
 #: dist/translation-strings.php:1132
-msgid "Corporate"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Overlay Background"
 msgstr ""
 
 #: dist/translation-strings.php:1133
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Lined to Colored"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Color Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1134
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Reverse arrow"
+msgid "This affects other buttons in this block"
 msgstr ""
 
 #: dist/translation-strings.php:1135
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Closed State Background Color"
+msgid "Horizontal Card"
 msgstr ""
 
 #: dist/translation-strings.php:1136
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Padding"
+msgid "Content Order"
 msgstr ""
 
 #: dist/translation-strings.php:1137
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Arrow"
+msgid "Posts Settings"
 msgstr ""
 
 #: dist/translation-strings.php:1138
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Border"
+msgid "Read More"
 msgstr ""
 
 #: dist/translation-strings.php:1139
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Subtitle for this block"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:311
+msgid "Load More"
 msgstr ""
 
 #: dist/translation-strings.php:1140
+#: pro__premium_only/src/stk-block-types.php:43
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:403
-msgid "Image Height"
+#: dist/translation-strings.js:388
+msgid "Pagination"
 msgstr ""
 
 #: dist/translation-strings.php:1141
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Subtitle Color"
+msgid "Hover Color"
 msgstr ""
 
 #: dist/translation-strings.php:1142
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Quotation Mark"
+msgid "Customize Read More Link"
 msgstr ""
 
 #: dist/translation-strings.php:1143
+#: pro__premium_only/src/stk-block-types.php:15
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:199
-msgid "Horizontal Position"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:395
+msgid "Load More Button"
 msgstr ""
 
 #: dist/translation-strings.php:1144
+#: src/deprecated/v2/block/blog-posts/index.php:316
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:200
-msgid "Vertical Position"
+msgid "Continue reading"
 msgstr ""
 
 #: dist/translation-strings.php:1145
+#: src/deprecated/v2/block/blog-posts/attributes.php:1845
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Horizontal Card"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:386
+msgid "Next »"
 msgstr ""
 
 #: dist/translation-strings.php:1146
+#: src/deprecated/v2/block/blog-posts/attributes.php:1849
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Content Order"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:387
+msgid "« Previous"
 msgstr ""
 
 #: dist/translation-strings.php:1147
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Posts Settings"
+msgid "Number of Icons / Columns"
 msgstr ""
 
 #: dist/translation-strings.php:1148
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Read More"
+msgid "Title on Top"
 msgstr ""
 
 #: dist/translation-strings.php:1149
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:139
-msgid "Load More"
+msgid "Display as a grid (left to right & evenly spaced)"
 msgstr ""
 
 #: dist/translation-strings.php:1150
-#: pro__premium_only/src/stk-block-types.php:43
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:388
-msgid "Pagination"
+msgid "List Gap"
 msgstr ""
 
 #: dist/translation-strings.php:1151
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Hover Color"
+msgid "You can click on each icon in the Icon List block to change them individually."
 msgstr ""
 
 #: dist/translation-strings.php:1152
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Customize Read More Link"
+msgid "List Text"
 msgstr ""
 
 #: dist/translation-strings.php:1153
-#: pro__premium_only/src/stk-block-types.php:15
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:395
-msgid "Load More Button"
+msgid "Text for this block"
 msgstr ""
 
 #: dist/translation-strings.php:1154
-#: src/deprecated/v2/block/blog-posts/index.php:316
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Continue reading"
+msgid "Line %d"
 msgstr ""
 
 #: dist/translation-strings.php:1155
-#: src/deprecated/v2/block/blog-posts/attributes.php:1845
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:386
-msgid "Next »"
+msgid "Overlay Color Type"
 msgstr ""
 
 #: dist/translation-strings.php:1156
-#: src/deprecated/v2/block/blog-posts/attributes.php:1849
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:387
-msgid "« Previous"
+msgid "Overlay Hover Color"
 msgstr ""
 
 #: dist/translation-strings.php:1157
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Short"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:438
+msgid "Effects"
 msgstr ""
 
 #: dist/translation-strings.php:1158
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Tall"
+msgid "Image Hover Effect"
 msgstr ""
 
 #: dist/translation-strings.php:1159
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Half-screen height"
+msgid "Zoom In"
 msgstr ""
 
 #: dist/translation-strings.php:1160
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Full-screen height"
+msgid "Zoom Out"
 msgstr ""
 
 #: dist/translation-strings.php:1161
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Restrict to Content Width"
+msgid "Border Thickness"
 msgstr ""
 
 #: dist/translation-strings.php:1162
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Text Colors"
+msgid "Icon Location"
 msgstr ""
 
 #: dist/translation-strings.php:1163
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Heading Color"
+msgctxt "Nth Title with description"
+msgid "%s %d %s"
 msgstr ""
 
 #: dist/translation-strings.php:1164
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Link Color"
+msgid "Number Shape"
 msgstr ""
 
 #: dist/translation-strings.php:1165
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Link Hover Color"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:211
+msgid "Shape Size"
 msgstr ""
 
 #: dist/translation-strings.php:1166
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "The colors above might not apply to some nested blocks."
+msgid "Number Background Color"
 msgstr ""
 
 #: dist/translation-strings.php:1167
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Uneven"
+msgid "Separator Color"
 msgstr ""
 
 #: dist/translation-strings.php:1168
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Tiled"
+msgid "Padding Top"
 msgstr ""
 
 #: dist/translation-strings.php:1169
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Layouts"
+msgid "Padding Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:1170
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "No Paddings"
+msgid "Margin Top"
 msgstr ""
 
 #: dist/translation-strings.php:1171
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Custom height"
+msgid "Use this to pull up/down the separator to the block above it"
 msgstr ""
 
 #: dist/translation-strings.php:1172
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Custom Height"
+msgid "Margin Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:1173
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:445
-msgid "Column Vertical Align"
+msgid "Use this to pull up/down the separator to the block below it"
 msgstr ""
 
 #: dist/translation-strings.php:1174
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Vertical Margin"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:426
+msgid "Layer"
 msgstr ""
 
 #: dist/translation-strings.php:1175
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Half Background"
+msgid "Overlay Simple"
 msgstr ""
 
 #: dist/translation-strings.php:1176
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlap Shape %s"
+msgid "Social"
 msgstr ""
 
 #: dist/translation-strings.php:1177
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlap Background %s"
+msgid "Social Button Gap"
 msgstr ""
 
 #: dist/translation-strings.php:1178
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Image Column Width"
+msgid "Name Color"
 msgstr ""
 
 #: dist/translation-strings.php:1179
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Reverse Horizontally"
+msgid "Position Color"
 msgstr ""
 
 #: dist/translation-strings.php:1180
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Container Width"
+msgid "Vertical Inverse"
 msgstr ""
 
 #: dist/translation-strings.php:1181
+#: src/stk-block-types.php:924
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Container Offset"
+#: dist/translation-strings.js:572
+msgid "Testimonial"
 msgstr ""
 
 #: dist/translation-strings.php:1182
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Abstract"
+msgid "Testimonial Color"
 msgstr ""
 
 #: dist/translation-strings.php:1183
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Boxed"
+msgid "Play Button"
 msgstr ""
 
 #: dist/translation-strings.php:1184
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Number Color"
+msgid "Button Style"
 msgstr ""
 
 #: dist/translation-strings.php:1185
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Display as a grid (left to right & evenly spaced)"
+msgid "Normal Play Button"
 msgstr ""
 
 #: dist/translation-strings.php:1186
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "List Gap"
+msgid "Play Button with Circle"
 msgstr ""
 
 #: dist/translation-strings.php:1187
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "You can click on each icon in the Icon List block to change them individually."
+msgid "Outline Play Button"
 msgstr ""
 
 #: dist/translation-strings.php:1188
+#: src/stk-block-types.php:680
+#: src/stk-block-types.php:715
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "List Text"
+#: dist/translation-strings.js:539
+msgid "Price"
 msgstr ""
 
 #: dist/translation-strings.php:1189
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Text for this block"
+msgid "Sub Price"
 msgstr ""
 
 #: dist/translation-strings.php:1190
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Line %d"
+msgid "Price Prefix"
 msgstr ""
 
 #: dist/translation-strings.php:1191
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Full Height"
+msgid "Price Suffix"
 msgstr ""
 
 #: dist/translation-strings.php:1192
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Background"
+msgid "Side Title"
 msgstr ""
 
 #: dist/translation-strings.php:1193
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "This affects other buttons in this block"
+msgid "Reverse Title"
 msgstr ""
 
 #: dist/translation-strings.php:1194
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Number of Icons / Columns"
+msgid "Column Rule"
 msgstr ""
 
 #: dist/translation-strings.php:1195
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Title on Top"
+msgid "Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:1196
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Border Thickness"
+msgid "Subtitle on Top"
 msgstr ""
 
 #: dist/translation-strings.php:1197
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Icon Location"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Block Title"
 msgstr ""
 
 #: dist/translation-strings.php:1198
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Color Type"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Align Top"
 msgstr ""
 
 #: dist/translation-strings.php:1199
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Hover Color"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Align Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:1200
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:443
-msgid "Effects"
+msgid "Hover Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1201
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Image Hover Effect"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Hover Colors"
 msgstr ""
 
 #: dist/translation-strings.php:1202
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Zoom In"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Open link in new tab"
 msgstr ""
 
 #: dist/translation-strings.php:1203
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Zoom Out"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Use social colors"
 msgstr ""
 
 #: dist/translation-strings.php:1204
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgctxt "Nth Title with description"
-msgid "%s %d %s"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Change to Normal Button on Hover"
 msgstr ""
 
 #: dist/translation-strings.php:1205
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Number Shape"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Button Size"
 msgstr ""
 
 #: dist/translation-strings.php:1206
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:231
-msgid "Shape Size"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Tiny"
 msgstr ""
 
 #: dist/translation-strings.php:1207
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Number Background Color"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Small"
 msgstr ""
 
 #: dist/translation-strings.php:1208
-#: src/stk-block-types.php:680
-#: src/stk-block-types.php:715
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/translation-strings.js:539
-msgid "Price"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:277
+msgid "Medium"
 msgstr ""
 
 #: dist/translation-strings.php:1209
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Sub Price"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:278
+msgid "Large"
 msgstr ""
 
 #: dist/translation-strings.php:1210
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Price Prefix"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Vertical Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1211
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Price Suffix"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Horizontal Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1212
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Separator Color"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Adv. Icon Settings"
 msgstr ""
 
 #: dist/translation-strings.php:1213
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Padding Top"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Icon Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:1214
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Padding Bottom"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Free"
 msgstr ""
 
 #: dist/translation-strings.php:1215
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Margin Top"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Premium"
 msgstr ""
 
 #: dist/translation-strings.php:1216
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Use this to pull up/down the separator to the block above it"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Image Position"
 msgstr ""
 
 #: dist/translation-strings.php:1217
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Margin Bottom"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Image Repeat"
 msgstr ""
 
 #: dist/translation-strings.php:1218
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Use this to pull up/down the separator to the block below it"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Image Size"
 msgstr ""
 
 #: dist/translation-strings.php:1219
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:423
-msgid "Layer"
+msgid "Background Color Type"
 msgstr ""
 
 #: dist/translation-strings.php:1220
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Vertical Inverse"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Shaped"
 msgstr ""
 
 #: dist/translation-strings.php:1221
-#: src/stk-block-types.php:924
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/translation-strings.js:572
-msgid "Testimonial"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:354
+msgid "Icon Color Type"
 msgstr ""
 
 #: dist/translation-strings.php:1222
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Testimonial Color"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:217
+msgid "Multicolor"
 msgstr ""
 
 #: dist/translation-strings.php:1223
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Name Color"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Icon Shape / Outline Color"
 msgstr ""
 
 #: dist/translation-strings.php:1224
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Simple"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Icon Shape Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:1225
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Social"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Outline Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:1226
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Social Button Gap"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Icon Shape Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1227
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Position Color"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Outline Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1228
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Side Title"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Outline Width"
 msgstr ""
 
 #: dist/translation-strings.php:1229
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Reverse Title"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Force square image"
 msgstr ""
 
 #: dist/translation-strings.php:1230
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Column Rule"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:1231
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Vertical Align"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "All Block Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1232
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Subtitle on Top"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Free Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1233
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Title"
+msgid "Premium Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1234
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Play Button"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:437
+msgid "Column Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1235
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Button Style"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "name"
+msgid "%s Link"
 msgstr ""
 
 #: dist/translation-strings.php:1236
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Normal Play Button"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Column Spacing & More"
 msgstr ""
 
 #: dist/translation-strings.php:1237
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Play Button with Circle"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Block Background"
 msgstr ""
 
 #: dist/translation-strings.php:1238
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Outline Play Button"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Align center"
 msgstr ""
 
 #: dist/translation-strings.php:1239
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Column Spacing & More"
+msgid "Wide width"
 msgstr ""
 
 #: dist/translation-strings.php:1240
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "You will not lose your block content when changing designs."
+msgid "Full width"
 msgstr ""
 
 #: dist/translation-strings.php:1241
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Background"
+msgid "Change Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:1242
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Align center"
+msgid "You will not lose your block content when changing designs."
 msgstr ""
 
 #: dist/translation-strings.php:1243
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Wide width"
+msgid "Max Width"
 msgstr ""
 
 #: dist/translation-strings.php:1244
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Full width"
+msgid "Horizontal Align"
 msgstr ""
 
 #: dist/translation-strings.php:1245
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Change Alignment"
+msgid "Text Align"
 msgstr ""
 
 #: dist/translation-strings.php:1246
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Spacing"
+msgid "Block Description"
 msgstr ""
 
 #: dist/translation-strings.php:1247
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Min. Block Height"
+msgid "Container Link"
 msgstr ""
 
 #: dist/translation-strings.php:1248
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Margins"
+msgid "Link / URL #%d"
 msgstr ""
 
 #: dist/translation-strings.php:1249
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Paddings"
+msgid "Link %d Title"
 msgstr ""
 
 #: dist/translation-strings.php:1250
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Container Link"
+msgid "Pick a layout or design"
 msgstr ""
 
 #: dist/translation-strings.php:1251
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Link / URL #%d"
+msgid "Select a variation to start with."
 msgstr ""
 
 #: dist/translation-strings.php:1252
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Link %d Title"
+msgid "Or pick from our Design Library."
 msgstr ""
 
 #: dist/translation-strings.php:1253
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Max Width"
+msgid "Select a design from our library to start with."
 msgstr ""
 
 #: dist/translation-strings.php:1254
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Horizontal Align"
+msgid "Skip"
 msgstr ""
 
 #: dist/translation-strings.php:1255
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Text Align"
+msgid "Block Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:1256
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Description"
+msgid "Min. Block Height"
 msgstr ""
 
 #: dist/translation-strings.php:1257
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Check"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Block Margins"
 msgstr ""
 
 #: dist/translation-strings.php:1258
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Cross"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Block Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1259
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Star"
+msgid "Check"
 msgstr ""
 
 #: dist/translation-strings.php:1260
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Cross"
+msgstr ""
+
+#: dist/translation-strings.php:1261
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Star"
+msgstr ""
+
+#: dist/translation-strings.php:1262
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:9
 msgid "Login Status"
 msgstr ""
 
-#: dist/translation-strings.php:1261
+#: dist/translation-strings.php:1263
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:10
 msgid "Role"
 msgstr ""
 
-#: dist/translation-strings.php:1262
+#: dist/translation-strings.php:1264
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:11
 msgid "Date & Time"
 msgstr ""
 
-#: dist/translation-strings.php:1263
+#: dist/translation-strings.php:1265
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:12
 msgid "Custom PHP"
 msgstr ""
 
-#: dist/translation-strings.php:1264
+#: dist/translation-strings.php:1266
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:13
 msgid "Conditional Tag"
 msgstr ""
 
-#: dist/translation-strings.php:1265
+#: dist/translation-strings.php:1267
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:14
 msgid "Query String"
 msgstr ""
 
-#: dist/translation-strings.php:1266
+#: dist/translation-strings.php:1268
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:15
 msgid "Post Meta"
 msgstr ""
 
-#: dist/translation-strings.php:1267
+#: dist/translation-strings.php:1269
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:16
 msgid "Site Option"
 msgstr ""
 
-#: dist/translation-strings.php:1268
+#: dist/translation-strings.php:1270
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:17
 msgid "Post IDs"
 msgstr ""
 
-#: dist/translation-strings.php:1269
+#: dist/translation-strings.php:1271
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:235
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:19
 msgid "Post Taxonomy"
 msgstr ""
 
-#: dist/translation-strings.php:1270
+#: dist/translation-strings.php:1272
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:92
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:102
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:109
@@ -6749,542 +6759,542 @@ msgstr ""
 msgid "WooCommerce"
 msgstr ""
 
-#: dist/translation-strings.php:1271
+#: dist/translation-strings.php:1273
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:21
 msgid "Enter Conditional Tag"
 msgstr ""
 
-#: dist/translation-strings.php:1272
+#: dist/translation-strings.php:1274
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:22
 msgid "Home"
 msgstr ""
 
-#: dist/translation-strings.php:1273
+#: dist/translation-strings.php:1275
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:23
 msgid "Front Page"
 msgstr ""
 
-#: dist/translation-strings.php:1274
+#: dist/translation-strings.php:1276
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:24
 msgid "404 Not Found Page"
 msgstr ""
 
-#: dist/translation-strings.php:1275
+#: dist/translation-strings.php:1277
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:25
 msgid "Single Page"
 msgstr ""
 
-#: dist/translation-strings.php:1276
+#: dist/translation-strings.php:1278
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:26
 msgid "Attachment"
 msgstr ""
 
-#: dist/translation-strings.php:1277
+#: dist/translation-strings.php:1279
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:27
 msgid "Preview"
 msgstr ""
 
-#: dist/translation-strings.php:1278
+#: dist/translation-strings.php:1280
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:28
 msgid "Any Page"
 msgstr ""
 
-#: dist/translation-strings.php:1279
+#: dist/translation-strings.php:1281
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:29
 msgid "Privacy Policy Page"
 msgstr ""
 
-#: dist/translation-strings.php:1280
+#: dist/translation-strings.php:1282
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:30
 msgid "Any Archive Page"
 msgstr ""
 
-#: dist/translation-strings.php:1281
+#: dist/translation-strings.php:1283
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:31
 msgid "Category Page"
 msgstr ""
 
-#: dist/translation-strings.php:1282
+#: dist/translation-strings.php:1284
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:32
 msgid "Tag Page"
 msgstr ""
 
-#: dist/translation-strings.php:1283
+#: dist/translation-strings.php:1285
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:33
 msgid "Taxonomy Page"
 msgstr ""
 
-#: dist/translation-strings.php:1284
+#: dist/translation-strings.php:1286
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:34
 msgid "Author Page"
 msgstr ""
 
-#: dist/translation-strings.php:1285
+#: dist/translation-strings.php:1287
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:35
 msgid "Date Archive Page"
 msgstr ""
 
-#: dist/translation-strings.php:1286
+#: dist/translation-strings.php:1288
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:36
 msgid "Yearly Archive Page"
 msgstr ""
 
-#: dist/translation-strings.php:1287
+#: dist/translation-strings.php:1289
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:37
 msgid "Search Result Page"
 msgstr ""
 
-#: dist/translation-strings.php:1288
+#: dist/translation-strings.php:1290
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:38
 msgid "Trackback"
 msgstr ""
 
-#: dist/translation-strings.php:1289
+#: dist/translation-strings.php:1291
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:39
 msgid "Dynamic Sidebar"
 msgstr ""
 
-#: dist/translation-strings.php:1290
+#: dist/translation-strings.php:1292
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:40
 msgid "RTL Reading"
 msgstr ""
 
-#: dist/translation-strings.php:1291
+#: dist/translation-strings.php:1293
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:41
 msgid "Multisite"
 msgstr ""
 
-#: dist/translation-strings.php:1292
+#: dist/translation-strings.php:1294
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:42
 msgid "Main Site"
 msgstr ""
 
-#: dist/translation-strings.php:1293
+#: dist/translation-strings.php:1295
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:43
 msgid "Child Theme"
 msgstr ""
 
-#: dist/translation-strings.php:1294
+#: dist/translation-strings.php:1296
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:44
 msgid "Customize Preview"
 msgstr ""
 
-#: dist/translation-strings.php:1295
+#: dist/translation-strings.php:1297
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:45
 msgid "Multi-author Site"
 msgstr ""
 
-#: dist/translation-strings.php:1296
+#: dist/translation-strings.php:1298
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:46
 msgid "Feed"
 msgstr ""
 
-#: dist/translation-strings.php:1297
+#: dist/translation-strings.php:1299
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:47
 msgid "Sticky Post"
 msgstr ""
 
-#: dist/translation-strings.php:1298
+#: dist/translation-strings.php:1300
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:48
 msgid "Hierarchical Post Type"
 msgstr ""
 
-#: dist/translation-strings.php:1299
+#: dist/translation-strings.php:1301
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:49
 msgid "Archive Post Type"
 msgstr ""
 
-#: dist/translation-strings.php:1300
+#: dist/translation-strings.php:1302
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:50
 msgid "Comments Open"
 msgstr ""
 
-#: dist/translation-strings.php:1301
+#: dist/translation-strings.php:1303
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:51
 msgid "Pings Open"
 msgstr ""
 
-#: dist/translation-strings.php:1302
+#: dist/translation-strings.php:1304
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:52
 msgid "Has Excerpt"
 msgstr ""
 
-#: dist/translation-strings.php:1303
+#: dist/translation-strings.php:1305
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:53
 msgid "Has Post Thumbnail"
 msgstr ""
 
-#: dist/translation-strings.php:1304
+#: dist/translation-strings.php:1306
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:54
 msgid "Has Tags"
 msgstr ""
 
-#: dist/translation-strings.php:1305
+#: dist/translation-strings.php:1307
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:55
 msgid "Has Terms"
 msgstr ""
 
-#: dist/translation-strings.php:1306
+#: dist/translation-strings.php:1308
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:56
 msgid "Has Primary Nav Menu"
 msgstr ""
 
-#: dist/translation-strings.php:1307
+#: dist/translation-strings.php:1309
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:57
 msgid "The Custom PHP allows you to configure the block’s visibility based on the expression entered. If the expression evaluates to true, the block will be displayed."
 msgstr ""
 
-#: dist/translation-strings.php:1308
+#: dist/translation-strings.php:1310
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:58
 msgid "Sample PHP code:"
 msgstr ""
 
-#: dist/translation-strings.php:1309
+#: dist/translation-strings.php:1311
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:59
 msgid "If a syntax error is present, check your PHP code"
 msgstr ""
 
-#: dist/translation-strings.php:1310
+#: dist/translation-strings.php:1312
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:62
 msgid "Now"
 msgstr ""
 
-#: dist/translation-strings.php:1311
+#: dist/translation-strings.php:1313
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:64
 msgid "Never"
 msgstr ""
 
-#: dist/translation-strings.php:1312
+#: dist/translation-strings.php:1314
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:65
 msgid "Days of the Week"
 msgstr ""
 
-#: dist/translation-strings.php:1313
+#: dist/translation-strings.php:1315
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:66
 msgid "If set, the block will be displayed / hidden on selected days."
 msgstr ""
 
-#: dist/translation-strings.php:1314
+#: dist/translation-strings.php:1316
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:67
 msgid "Sunday"
 msgstr ""
 
-#: dist/translation-strings.php:1315
+#: dist/translation-strings.php:1317
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:68
 msgid "Monday"
 msgstr ""
 
-#: dist/translation-strings.php:1316
+#: dist/translation-strings.php:1318
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:69
 msgid "Tuesday"
 msgstr ""
 
-#: dist/translation-strings.php:1317
+#: dist/translation-strings.php:1319
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:70
 msgid "Wednesday"
 msgstr ""
 
-#: dist/translation-strings.php:1318
+#: dist/translation-strings.php:1320
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:71
 msgid "Thursday"
 msgstr ""
 
-#: dist/translation-strings.php:1319
+#: dist/translation-strings.php:1321
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:72
 msgid "Friday"
 msgstr ""
 
-#: dist/translation-strings.php:1320
+#: dist/translation-strings.php:1322
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:73
 msgid "Saturday"
 msgstr ""
 
-#: dist/translation-strings.php:1321
+#: dist/translation-strings.php:1323
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:75
 msgid "Logged-In Users"
 msgstr ""
 
-#: dist/translation-strings.php:1322
+#: dist/translation-strings.php:1324
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:76
 msgid "Logged-Out Users"
 msgstr ""
 
-#: dist/translation-strings.php:1323
+#: dist/translation-strings.php:1325
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:77
 msgid "Enter Post IDs"
 msgstr ""
 
-#: dist/translation-strings.php:1324
+#: dist/translation-strings.php:1326
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:78
 msgid "Post Meta Key"
 msgstr ""
 
-#: dist/translation-strings.php:1325
+#: dist/translation-strings.php:1327
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:79
 msgid "Operator"
 msgstr ""
 
-#: dist/translation-strings.php:1326
+#: dist/translation-strings.php:1328
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:80
 msgid "True"
 msgstr ""
 
-#: dist/translation-strings.php:1327
+#: dist/translation-strings.php:1329
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:81
 msgid "False"
 msgstr ""
 
-#: dist/translation-strings.php:1328
+#: dist/translation-strings.php:1330
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:82
 msgid "Equal"
 msgstr ""
 
-#: dist/translation-strings.php:1329
+#: dist/translation-strings.php:1331
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:83
 msgid "Not Equal"
 msgstr ""
 
-#: dist/translation-strings.php:1330
+#: dist/translation-strings.php:1332
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:84
 msgid "Less Than"
 msgstr ""
 
-#: dist/translation-strings.php:1331
+#: dist/translation-strings.php:1333
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:85
 msgid "Less Than & Equal To"
 msgstr ""
 
-#: dist/translation-strings.php:1332
+#: dist/translation-strings.php:1334
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:86
 msgid "Greater Than"
 msgstr ""
 
-#: dist/translation-strings.php:1333
+#: dist/translation-strings.php:1335
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:87
 msgid "Greater Than & Equal To"
 msgstr ""
 
-#: dist/translation-strings.php:1334
+#: dist/translation-strings.php:1336
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:88
 msgid "Contains"
 msgstr ""
 
-#: dist/translation-strings.php:1335
+#: dist/translation-strings.php:1337
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:89
 msgid "Does Not Contain"
 msgstr ""
 
-#: dist/translation-strings.php:1336
+#: dist/translation-strings.php:1338
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:90
 msgid "Regular Expression"
 msgstr ""
 
-#: dist/translation-strings.php:1337
+#: dist/translation-strings.php:1339
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:91
 msgid "Enter Value"
 msgstr ""
 
-#: dist/translation-strings.php:1338
+#: dist/translation-strings.php:1340
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:92
 msgid "Value to compare with the post meta value."
 msgstr ""
 
-#: dist/translation-strings.php:1339
+#: dist/translation-strings.php:1341
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:93
 msgid "Enter Post Types"
 msgstr ""
 
-#: dist/translation-strings.php:1340
+#: dist/translation-strings.php:1342
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:94
 msgid "Enter Queries"
 msgstr ""
 
-#: dist/translation-strings.php:1341
+#: dist/translation-strings.php:1343
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:95
 msgid "Enter one query string per line. The block will be displayed / hidden if any of the query strings match."
 msgstr ""
 
-#: dist/translation-strings.php:1342
+#: dist/translation-strings.php:1344
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:96
 msgid "Enter Role"
 msgstr ""
 
-#: dist/translation-strings.php:1343
+#: dist/translation-strings.php:1345
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:97
 msgid "Option Name"
 msgstr ""
 
-#: dist/translation-strings.php:1344
+#: dist/translation-strings.php:1346
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:98
 msgid "Value to compare with the option value."
 msgstr ""
 
-#: dist/translation-strings.php:1345
+#: dist/translation-strings.php:1347
 #: pro__premium_only/src/dynamic-content/sources/current-page.php:31
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:99
 msgid "Current Post"
 msgstr ""
 
-#: dist/translation-strings.php:1346
+#: dist/translation-strings.php:1348
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:100
 msgid "Choose Product"
 msgstr ""
 
-#: dist/translation-strings.php:1347
+#: dist/translation-strings.php:1349
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:101
 msgid "Property"
 msgstr ""
 
-#: dist/translation-strings.php:1348
+#: dist/translation-strings.php:1350
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:102
 msgid "Sales"
 msgstr ""
 
-#: dist/translation-strings.php:1349
+#: dist/translation-strings.php:1351
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:103
 msgid "Stock Quantity"
 msgstr ""
 
-#: dist/translation-strings.php:1350
+#: dist/translation-strings.php:1352
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:104
 msgid "Is Downloadable"
 msgstr ""
 
-#: dist/translation-strings.php:1351
+#: dist/translation-strings.php:1353
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:105
 msgid "Is Featured"
 msgstr ""
 
-#: dist/translation-strings.php:1352
+#: dist/translation-strings.php:1354
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:106
 msgid "Is in Stock"
 msgstr ""
 
-#: dist/translation-strings.php:1353
+#: dist/translation-strings.php:1355
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:107
 msgid "Is on Backorder"
 msgstr ""
 
-#: dist/translation-strings.php:1354
+#: dist/translation-strings.php:1356
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:108
 msgid "Is on Sale"
 msgstr ""
 
-#: dist/translation-strings.php:1355
+#: dist/translation-strings.php:1357
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:109
 msgid "Is Purchasable"
 msgstr ""
 
-#: dist/translation-strings.php:1356
+#: dist/translation-strings.php:1358
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:110
 msgid "Is Shipping Taxable"
 msgstr ""
 
-#: dist/translation-strings.php:1357
+#: dist/translation-strings.php:1359
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:111
 msgid "Is Sold Individually"
 msgstr ""
 
-#: dist/translation-strings.php:1358
+#: dist/translation-strings.php:1360
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:112
 msgid "Is Taxable"
 msgstr ""
 
-#: dist/translation-strings.php:1359
+#: dist/translation-strings.php:1361
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:113
 msgid "Value"
 msgstr ""
 
-#: dist/translation-strings.php:1360
+#: dist/translation-strings.php:1362
 #: pro__premium_only/src/dynamic-content/sources/acf.php:249
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:315
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:325
@@ -7295,1535 +7305,1535 @@ msgstr ""
 msgid "%s Placeholder"
 msgstr ""
 
-#: dist/translation-strings.php:1361
+#: dist/translation-strings.php:1363
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:115
 msgid "Placeholder"
 msgstr ""
 
-#: dist/translation-strings.php:1362
+#: dist/translation-strings.php:1364
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:116
 msgid "Full Access"
 msgstr ""
 
-#: dist/translation-strings.php:1363
+#: dist/translation-strings.php:1365
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:117
 msgid "Manager"
 msgstr ""
 
-#: dist/translation-strings.php:1364
+#: dist/translation-strings.php:1366
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:118
 msgid "No Access"
 msgstr ""
 
-#: dist/translation-strings.php:1365
+#: dist/translation-strings.php:1367
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:121
 msgid "Full editing mode"
 msgstr ""
 
-#: dist/translation-strings.php:1366
+#: dist/translation-strings.php:1368
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:122
 msgid "Content only editing"
 msgstr ""
 
-#: dist/translation-strings.php:1367
+#: dist/translation-strings.php:1369
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:123
 msgid "Let me enter my Font Awesome Pro Kit code"
 msgstr ""
 
-#: dist/translation-strings.php:1368
+#: dist/translation-strings.php:1370
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:124
 msgid "Don't show me this again"
 msgstr ""
 
-#: dist/translation-strings.php:1369
+#: dist/translation-strings.php:1371
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:125
 msgid "FontAwesome Pro Kit"
 msgstr ""
 
-#: dist/translation-strings.php:1370
+#: dist/translation-strings.php:1372
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:126
 msgid "Please wait…"
 msgstr ""
 
-#: dist/translation-strings.php:1371
+#: dist/translation-strings.php:1373
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:127
 msgid "Paste your Kit code %s"
 msgstr ""
 
-#: dist/translation-strings.php:1372
+#: dist/translation-strings.php:1374
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:128
 msgid "Please make sure you have Pro icons selected in your kit. Edit your kit settings at: "
 msgstr ""
 
-#: dist/translation-strings.php:1373
+#: dist/translation-strings.php:1375
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:129
 msgid "Click here to check again"
 msgstr ""
 
-#: dist/translation-strings.php:1374
+#: dist/translation-strings.php:1376
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:130
 msgid "Please enter a valid Font Awesome Pro Kit code."
 msgstr ""
 
-#: dist/translation-strings.php:1375
+#: dist/translation-strings.php:1377
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:131
 msgid "If you have Font Awesome Pro, you can use your Pro icons by inputting your Pro Kit code here."
 msgstr ""
 
-#: dist/translation-strings.php:1376
+#: dist/translation-strings.php:1378
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:132
 msgid "Need help? Read our guide."
 msgstr ""
 
-#: dist/translation-strings.php:1377
+#: dist/translation-strings.php:1379
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:141
+#: dist/translation-strings.js:313
 msgid "Number of Items"
 msgstr ""
 
-#: dist/translation-strings.php:1378
+#: dist/translation-strings.php:1380
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:143
+#: dist/translation-strings.js:315
 msgid "URL Query String"
 msgstr ""
 
-#: dist/translation-strings.php:1379
+#: dist/translation-strings.php:1381
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:144
+#: dist/translation-strings.js:316
 msgid "This is the string appended to the URL when changing pages."
 msgstr ""
 
-#: dist/translation-strings.php:1380
+#: dist/translation-strings.php:1382
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:145
+#: dist/translation-strings.js:317
 msgid "Show Next & Previous Button"
 msgstr ""
 
-#: dist/translation-strings.php:1381
+#: dist/translation-strings.php:1383
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:146
+#: dist/translation-strings.js:318
 msgid "Next Label"
 msgstr ""
 
-#: dist/translation-strings.php:1382
+#: dist/translation-strings.php:1384
 #: pro__premium_only/src/block/pagination/index.php:74
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:147
+#: dist/translation-strings.js:319
 msgid "Next"
 msgstr ""
 
-#: dist/translation-strings.php:1383
+#: dist/translation-strings.php:1385
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:148
+#: dist/translation-strings.js:320
 msgid "Previous Label"
 msgstr ""
 
-#: dist/translation-strings.php:1384
+#: dist/translation-strings.php:1386
 #: pro__premium_only/src/block/pagination/index.php:73
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:149
+#: dist/translation-strings.js:321
 msgid "Previous"
 msgstr ""
 
-#: dist/translation-strings.php:1385
+#: dist/translation-strings.php:1387
 #: pro__premium_only/src/block/pagination/index.php:278
 #: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:198
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:150
+#: dist/translation-strings.js:322
 msgid "Previous page"
 msgstr ""
 
-#: dist/translation-strings.php:1386
+#: dist/translation-strings.php:1388
 #: pro__premium_only/src/block/pagination/index.php:299
 #: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:219
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:151
+#: dist/translation-strings.js:323
 msgid "Page %s"
 msgstr ""
 
-#: dist/translation-strings.php:1387
+#: dist/translation-strings.php:1389
 #: pro__premium_only/src/block/pagination/index.php:324
 #: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:244
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:152
+#: dist/translation-strings.js:324
 msgid "Next page"
 msgstr ""
 
-#: dist/translation-strings.php:1388
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:161
-msgid "Sale"
-msgstr ""
-
-#: dist/translation-strings.php:1389
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:166
-msgid "Layer %s"
-msgstr ""
-
 #: dist/translation-strings.php:1390
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:168
-msgid "Layer Height"
+#: dist/translation-strings.js:333
+msgid "Sale"
 msgstr ""
 
 #: dist/translation-strings.php:1391
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:169
-msgid "Layer Width"
+#: dist/translation-strings.js:326
+msgid "Offset your posts by a specific number of items."
 msgstr ""
 
 #: dist/translation-strings.php:1392
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:172
-msgid "Layer Opacity"
+#: dist/translation-strings.js:327
+msgid "Exclude Post IDs"
 msgstr ""
 
 #: dist/translation-strings.php:1393
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:173
-msgid "Adjusts the transparency of the separator layer"
+#: dist/translation-strings.js:328
+msgid "Excludes specific IDs from the display. Enter post IDs separated by a commas"
 msgstr ""
 
 #: dist/translation-strings.php:1394
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:174
-msgid "Layer Blend mode"
+#: dist/translation-strings.js:329
+msgid "Hide the current post"
 msgstr ""
 
 #: dist/translation-strings.php:1395
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:175
-msgid "Sets how the sepator layer is blended into the background"
+#: dist/translation-strings.js:330
+msgid "Removes the current post from the posts list"
 msgstr ""
 
 #: dist/translation-strings.php:1396
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:197
-msgid "You can use this area to further customize your block. Any custom CSS added here will only affect this block."
+#: dist/translation-strings.js:331
+msgid "Display Specific Post IDs"
 msgstr ""
 
 #: dist/translation-strings.php:1397
-#: dist/translation-strings.js:274
-msgid "No saved designs yet"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:332
+msgid "Limit display to only these specific IDs. Enter post IDs separated by a commas"
 msgstr ""
 
 #: dist/translation-strings.php:1398
-#: dist/translation-strings.js:275
-msgid "Click here to save your block's design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:338
+msgid "Layer %s"
 msgstr ""
 
 #: dist/translation-strings.php:1399
-#: dist/translation-strings.js:276
-msgid "Error Getting Designs"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:225
+msgid "Layer Height"
 msgstr ""
 
 #: dist/translation-strings.php:1400
-#: dist/translation-strings.js:277
-msgid "Click here to retry fetching your saved designs"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:226
+msgid "Layer Width"
 msgstr ""
 
 #: dist/translation-strings.php:1401
-#: dist/translation-strings.js:278
-msgid "Save as new block design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:339
+msgid "Layer Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1402
-#: dist/translation-strings.js:279
-msgid "Manage saved designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:340
+msgid "Adjusts the transparency of the separator layer"
 msgstr ""
 
 #: dist/translation-strings.php:1403
-#: dist/translation-strings.js:280
-msgid "(default)"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:228
+msgid "Layer Blend mode"
 msgstr ""
 
 #: dist/translation-strings.php:1404
-#: dist/translation-strings.js:281
-msgid "Favorite"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:229
+msgid "Sets how the sepator layer is blended into the background"
 msgstr ""
 
 #: dist/translation-strings.php:1405
-#: dist/translation-strings.js:282
-msgid "Save Changes"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:160
+msgid "Delete Condition"
 msgstr ""
 
 #: dist/translation-strings.php:1406
-#: dist/translation-strings.js:283
-msgid "Saved Block Designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:161
+msgid "Deleting will remove this condition for the block. Proceed?"
 msgstr ""
 
 #: dist/translation-strings.php:1407
-#: dist/translation-strings.js:284
-msgid "Save designs to reuse them across your site. Note that using saved designs will override your current block settings."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:162
+msgid "Delete"
 msgstr ""
 
 #: dist/translation-strings.php:1408
-#: dist/translation-strings.js:285
-msgid "You have unsaved changes, discard them?"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:151
+msgid "Cancel"
 msgstr ""
 
 #: dist/translation-strings.php:1409
-#: dist/translation-strings.js:286
-msgid "Manage Saved Designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:163
+msgid "Condition Type"
 msgstr ""
 
 #: dist/translation-strings.php:1410
-#: dist/translation-strings.js:287
-msgid "Design Name"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:164
+msgid "Visibility"
 msgstr ""
 
 #: dist/translation-strings.php:1411
-#: dist/translation-strings.js:288
-msgid "Set as a favorite design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:165
+msgid "Show on condition match"
 msgstr ""
 
 #: dist/translation-strings.php:1412
-#: dist/translation-strings.js:289
-msgid "Design name"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:166
+msgid "Hide on condition match"
 msgstr ""
 
 #: dist/translation-strings.php:1413
-#: dist/translation-strings.js:290
-msgid "Set as default block design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:167
+msgid "No conditions yet. Add your first condition."
 msgstr ""
 
+#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1414
-#: dist/admin_custom_fields__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:181
-msgid "Cancel"
+#: dist/translation-strings.js:169
+msgid "OR"
 msgstr ""
 
+#. translators: This is the separator between conditions: OR / AND.
+#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1415
-#: dist/translation-strings.js:291
-msgid "My Block Design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:171
+msgid "AND"
 msgstr ""
 
+#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1416
-#: dist/translation-strings.js:292
-msgid "Save as New Block Design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:172
+msgid "Trigger if ANY condition matches"
 msgstr ""
 
 #: dist/translation-strings.php:1417
-#: dist/translation-strings.js:293
-msgid "Set as favorite"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:173
+msgid "Trigger if ALL conditions match"
 msgstr ""
 
 #: dist/translation-strings.php:1418
-#: dist/translation-strings.js:294
-msgid "Place at the top of the list of saved designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:174
+msgid "Add New"
 msgstr ""
 
 #: dist/translation-strings.php:1419
-#: dist/translation-strings.js:295
-msgid "New blocks created will use this design automatically"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:175
+msgid "Add New Condition"
 msgstr ""
 
 #: dist/translation-strings.php:1420
-#: dist/translation-strings.js:296
-msgid "Add New Design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:176
+msgid "Learn more about Conditional Display"
 msgstr ""
 
 #: dist/translation-strings.php:1421
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:297
-msgid "Show as link"
+#: dist/translation-strings.js:159
+msgid "You can use this area to further customize your block. Any custom CSS added here will only affect this block."
 msgstr ""
 
 #: dist/translation-strings.php:1422
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:298
-msgid "Custom Text"
+#: dist/translation-strings.js:177
+msgid "Media queries are supported. Use the widths 1024px and 768px for tablet and mobile breakpoints."
 msgstr ""
 
 #: dist/translation-strings.php:1423
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:300
-msgid "Date Format"
+#: dist/translation-strings.js:181
+msgid "Rotate"
 msgstr ""
 
 #: dist/translation-strings.php:1424
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:301
-msgid "Custom Format"
+#: dist/translation-strings.js:182
+msgid "Effect"
 msgstr ""
 
 #: dist/translation-strings.php:1425
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:302
-msgid "Change the date format of your dynamic content."
+#: dist/translation-strings.js:183
+msgid "Entrance Animation"
 msgstr ""
 
 #: dist/translation-strings.php:1426
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:303
-msgid "Learn more about date formats"
+#: dist/translation-strings.js:184
+msgid "Scroll Animation"
 msgstr ""
 
 #: dist/translation-strings.php:1427
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:305
-msgid "Dynamic Source"
+#: dist/translation-strings.js:185
+msgid "Start Position"
 msgstr ""
 
 #: dist/translation-strings.php:1428
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:306
-msgid "Field"
+#: dist/translation-strings.js:186
+msgid "Entrance Animation Speed"
 msgstr ""
 
 #: dist/translation-strings.php:1429
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:307
-msgid "Learn how to use Dynamic Content"
+#: dist/translation-strings.js:187
+msgid "Slow"
 msgstr ""
 
 #: dist/translation-strings.php:1430
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:308
-msgid "Apply"
+#: dist/translation-strings.js:189
+msgid "Fast"
 msgstr ""
 
 #: dist/translation-strings.php:1431
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:311
-msgid "Add Custom Format"
+#: dist/translation-strings.js:190
+msgid "Entrance Animation Delay"
 msgstr ""
 
 #: dist/translation-strings.php:1432
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:312
-msgid "Content Format"
+#: dist/translation-strings.js:191
+msgid "Smoothen Scroll Animation"
 msgstr ""
 
 #: dist/translation-strings.php:1433
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:313
-msgid "Add your custom format by adding %s."
+#: dist/translation-strings.js:192
+msgid "Use 3D Transforms"
 msgstr ""
 
 #: dist/translation-strings.php:1434
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:314
-msgid "Thumbnail"
+#: dist/translation-strings.js:193
+msgid "Perspective"
 msgstr ""
 
 #: dist/translation-strings.php:1435
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:318
-msgid "Image Quality"
+#: dist/translation-strings.js:194
+msgid "Exit Animation"
 msgstr ""
 
 #: dist/translation-strings.php:1436
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:320
-msgid "Text Field"
+#: dist/translation-strings.js:195
+msgid "This block has Transforms assigned to it, Motion Effects may not work as expected."
 msgstr ""
 
 #: dist/translation-strings.php:1437
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:322
-msgid "Taxonomy Type"
+#: dist/translation-strings.js:196
+msgid "Learn more about Motion Effects"
 msgstr ""
 
 #: dist/translation-strings.php:1438
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:323
-msgid "Display Option"
+#: dist/translation-strings.js:198
+msgid "Translate X"
 msgstr ""
 
 #: dist/translation-strings.php:1439
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:324
-msgid "All values"
+#: dist/translation-strings.js:199
+msgid "TranslateY"
 msgstr ""
 
 #: dist/translation-strings.php:1440
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:325
-msgid "%s value"
+#: dist/translation-strings.js:200
+msgid "TranslateZ"
 msgstr ""
 
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1441
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:59
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:102
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:230
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:326
-msgid "1st"
+#: dist/translation-strings.js:201
+msgid "RotateX"
 msgstr ""
 
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1442
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:107
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:231
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:327
-msgid "2nd"
+#: dist/translation-strings.js:202
+msgid "RotateY"
 msgstr ""
 
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1443
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:112
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:232
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:328
-msgid "3rd"
+#: dist/translation-strings.js:204
+msgid "Skew X"
 msgstr ""
 
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1444
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:117
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:233
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:329
-msgid "4th"
+#: dist/translation-strings.js:205
+msgid "Skew Y"
 msgstr ""
 
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1445
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:122
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:234
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:330
-msgid "5th"
+#: dist/translation-strings.js:210
+msgid "Shape Opacity"
 msgstr ""
 
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1446
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:127
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:235
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:331
-msgid "6th"
+#: dist/translation-strings.js:214
+msgid "Icon Color #%s"
 msgstr ""
 
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1447
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:132
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:236
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:332
-msgid "7th"
+#: dist/translation-strings.js:218
+msgid "Multicolor only works for custom uploaded icons that have multiple path elements or for Font Awesome Pro Duotones."
 msgstr ""
 
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1448
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:137
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:237
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:333
-msgid "8th"
+#: dist/translation-strings.js:223
+msgid "Separator Layer %s"
 msgstr ""
 
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1449
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:142
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:238
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:334
-msgid "9th"
+#: dist/translation-strings.js:230
+msgid "Transition Duration (secs)"
 msgstr ""
 
-#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1450
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:147
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:239
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:335
-msgid "10th"
+#: dist/translation-strings.js:231
+msgid "Transition Function"
 msgstr ""
 
 #: dist/translation-strings.php:1451
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:336
-msgid "Delimiter"
+#: dist/translation-strings.js:232
+msgid "Ease"
 msgstr ""
 
 #: dist/translation-strings.php:1452
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:337
-msgid "Strip HTML tags"
+#: dist/translation-strings.js:233
+msgid "Ease In"
 msgstr ""
 
 #: dist/translation-strings.php:1453
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:338
-msgid "If this option is false, the content rendered in the editor will still be stripped to prevent an error from occuring"
+#: dist/translation-strings.js:234
+msgid "Ease Out"
 msgstr ""
 
 #: dist/translation-strings.php:1454
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:339
-msgid "Display text when true"
+#: dist/translation-strings.js:235
+msgid "Ease In Out"
 msgstr ""
 
 #: dist/translation-strings.php:1455
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:340
-msgid "Display text when false"
+#: dist/translation-strings.js:236
+msgid "Linear"
 msgstr ""
 
 #: dist/translation-strings.php:1456
-#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:89
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:341
-msgid "Fields"
+#: dist/translation-strings.js:237
+msgid "Ease In Quad"
 msgstr ""
 
 #: dist/translation-strings.php:1457
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:342
-msgid "Attributes"
+#: dist/translation-strings.js:238
+msgid "Ease Out Quad"
 msgstr ""
 
 #: dist/translation-strings.php:1458
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:154
-msgid "Offset your posts by a specific number of items."
+#: dist/translation-strings.js:239
+msgid "Ease In Out Quad"
 msgstr ""
 
 #: dist/translation-strings.php:1459
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:155
-msgid "Exclude Post IDs"
+#: dist/translation-strings.js:240
+msgid "Ease In Expo"
 msgstr ""
 
 #: dist/translation-strings.php:1460
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:156
-msgid "Excludes specific IDs from the display. Enter post IDs separated by a commas"
+#: dist/translation-strings.js:241
+msgid "Ease Out Expo"
 msgstr ""
 
 #: dist/translation-strings.php:1461
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:157
-msgid "Hide the current post"
+#: dist/translation-strings.js:242
+msgid "Ease In Out Expo"
 msgstr ""
 
 #: dist/translation-strings.php:1462
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:158
-msgid "Removes the current post from the posts list"
+#: dist/translation-strings.js:243
+msgid "Ease In Back"
 msgstr ""
 
 #: dist/translation-strings.php:1463
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:159
-msgid "Display Specific Post IDs"
+#: dist/translation-strings.js:244
+msgid "Ease Out Back"
 msgstr ""
 
 #: dist/translation-strings.php:1464
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:160
-msgid "Limit display to only these specific IDs. Enter post IDs separated by a commas"
+#: dist/translation-strings.js:245
+msgid "Ease In Out Back"
 msgstr ""
 
 #: dist/translation-strings.php:1465
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:344
-msgid "Learn more how multicolor works"
+#: dist/translation-strings.js:247
+msgid "Transform Origin"
 msgstr ""
 
 #: dist/translation-strings.php:1466
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:345
-msgid "here"
+#: dist/translation-strings.js:257
+msgid "This block has Motion Effects assigned to it, applying transforms above may prevent the Motion Effects from working as expected."
 msgstr ""
 
 #: dist/translation-strings.php:1467
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:238
-msgid "Multicolor only works for custom uploaded icons that have multiple path elements or for Font Awesome Pro Duotones."
+#: dist/translation-strings.js:258
+msgid "Translate Y"
 msgstr ""
 
 #: dist/translation-strings.php:1468
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:347
-msgid "Outline Color"
+#: dist/translation-strings.js:133
+msgid "No saved designs yet"
 msgstr ""
 
 #: dist/translation-strings.php:1469
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:348
-msgid "Icon Shape Color"
+#: dist/translation-strings.js:134
+msgid "Click here to save your block's design"
 msgstr ""
 
 #: dist/translation-strings.php:1470
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:230
-msgid "Shape Opacity"
+#: dist/translation-strings.js:135
+msgid "Error Getting Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1471
-#: src/welcome/index.php:259
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:350
-msgid "Dynamic Content"
+#: dist/translation-strings.js:136
+msgid "Click here to retry fetching your saved designs"
 msgstr ""
 
 #: dist/translation-strings.php:1472
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:351
-msgid "Style copied successfully!"
+#: dist/translation-strings.js:137
+msgid "Save as new block design"
 msgstr ""
 
 #: dist/translation-strings.php:1473
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:352
-msgid "Style pasted successfully!"
+#: dist/translation-strings.js:138
+msgid "Manage saved designs"
 msgstr ""
 
 #: dist/translation-strings.php:1474
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:353
-msgid "Used to copy core/stackable block styles"
+#: dist/translation-strings.js:139
+msgid "(default)"
 msgstr ""
 
 #: dist/translation-strings.php:1475
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:354
-msgid "Used to paste core/stackable block styles"
+#: dist/translation-strings.js:140
+msgid "Favorite"
 msgstr ""
 
 #: dist/translation-strings.php:1476
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:355
-msgid "Adv Copy Styles"
+#: dist/translation-strings.js:141
+msgid "Save Changes"
 msgstr ""
 
 #: dist/translation-strings.php:1477
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:356
-msgid "Adv Paste Styles"
+#: dist/translation-strings.js:142
+msgid "Saved Block Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1478
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:357
-msgid "Copy & paste styles"
+#: dist/translation-strings.js:143
+msgid "Save designs to reuse them across your site. Note that using saved designs will override your current block settings."
 msgstr ""
 
 #: dist/translation-strings.php:1479
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:178
-msgid "Delete Condition"
+#: dist/translation-strings.js:144
+msgid "You have unsaved changes, discard them?"
 msgstr ""
 
 #: dist/translation-strings.php:1480
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:179
-msgid "Deleting will remove this condition for the block. Proceed?"
+#: dist/translation-strings.js:145
+msgid "Manage Saved Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1481
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:180
-msgid "Delete"
+#: dist/translation-strings.js:146
+msgid "Design Name"
 msgstr ""
 
 #: dist/translation-strings.php:1482
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:182
-msgid "Condition Type"
+#: dist/translation-strings.js:148
+msgid "Set as a favorite design"
 msgstr ""
 
 #: dist/translation-strings.php:1483
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:183
-msgid "Visibility"
+#: dist/translation-strings.js:149
+msgid "Design name"
 msgstr ""
 
 #: dist/translation-strings.php:1484
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:184
-msgid "Show on condition match"
+#: dist/translation-strings.js:150
+msgid "Set as default block design"
 msgstr ""
 
 #: dist/translation-strings.php:1485
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:185
-msgid "Hide on condition match"
+#: dist/translation-strings.js:152
+msgid "My Block Design"
 msgstr ""
 
 #: dist/translation-strings.php:1486
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:186
-msgid "No conditions yet. Add your first condition."
+#: dist/translation-strings.js:153
+msgid "Save as New Block Design"
 msgstr ""
 
-#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1487
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:188
-msgid "OR"
+#: dist/translation-strings.js:154
+msgid "Set as favorite"
 msgstr ""
-
-#. translators: This is the separator between conditions: OR / AND.
-#. translators: This is the separator between conditions: OR / AND.
+
 #: dist/translation-strings.php:1488
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:190
-msgid "AND"
+#: dist/translation-strings.js:155
+msgid "Place at the top of the list of saved designs"
 msgstr ""
 
-#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1489
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:191
-msgid "Trigger if ANY condition matches"
+#: dist/translation-strings.js:156
+msgid "New blocks created will use this design automatically"
 msgstr ""
 
 #: dist/translation-strings.php:1490
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:192
-msgid "Trigger if ALL conditions match"
+#: dist/translation-strings.js:157
+msgid "Add New Design"
 msgstr ""
 
 #: dist/translation-strings.php:1491
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:193
-msgid "Add New"
+#: dist/translation-strings.js:259
+msgid "Show as link"
 msgstr ""
 
 #: dist/translation-strings.php:1492
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:194
-msgid "Add New Condition"
+#: dist/translation-strings.js:260
+msgid "Custom Text"
 msgstr ""
 
 #: dist/translation-strings.php:1493
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:195
-msgid "Learn more about Conditional Display"
+#: dist/translation-strings.js:262
+msgid "Date Format"
 msgstr ""
 
 #: dist/translation-strings.php:1494
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:358
-msgid "Remove the selected block(s)."
+#: dist/translation-strings.js:263
+msgid "Custom Format"
 msgstr ""
 
 #: dist/translation-strings.php:1495
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:359
-msgid "Content Editing mode is enabled"
+#: dist/translation-strings.js:264
+msgid "Change the date format of your dynamic content."
 msgstr ""
 
 #: dist/translation-strings.php:1496
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:360
-msgid "To unlock Full Editing mode, please contact your administrator."
+#: dist/translation-strings.js:265
+msgid "Learn more about date formats"
 msgstr ""
 
 #: dist/translation-strings.php:1497
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:198
-msgid "Media queries are supported. Use the widths 1024px and 768px for tablet and mobile breakpoints."
+#: dist/translation-strings.js:267
+msgid "Dynamic Source"
 msgstr ""
 
 #: dist/translation-strings.php:1498
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:234
-msgid "Icon Color #%s"
+#: dist/translation-strings.js:268
+msgid "Field"
 msgstr ""
 
 #: dist/translation-strings.php:1499
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:244
-msgid "Transition Duration (secs)"
+#: dist/translation-strings.js:269
+msgid "Learn how to use Dynamic Content"
 msgstr ""
 
 #: dist/translation-strings.php:1500
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:245
-msgid "Transition Function"
+#: dist/translation-strings.js:270
+msgid "Apply"
 msgstr ""
 
 #: dist/translation-strings.php:1501
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:247
-msgid "Ease"
+#: dist/translation-strings.js:273
+msgid "Add Custom Format"
 msgstr ""
 
 #: dist/translation-strings.php:1502
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:248
-msgid "Ease In"
+#: dist/translation-strings.js:274
+msgid "Content Format"
 msgstr ""
 
 #: dist/translation-strings.php:1503
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:249
-msgid "Ease Out"
+#: dist/translation-strings.js:275
+msgid "Add your custom format by adding %s."
 msgstr ""
 
 #: dist/translation-strings.php:1504
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:250
-msgid "Ease In Out"
+#: dist/translation-strings.js:276
+msgid "Thumbnail"
 msgstr ""
 
 #: dist/translation-strings.php:1505
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:251
-msgid "Linear"
+#: dist/translation-strings.js:280
+msgid "Image Quality"
 msgstr ""
 
 #: dist/translation-strings.php:1506
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:252
-msgid "Ease In Quad"
+#: dist/translation-strings.js:282
+msgid "Text Field"
 msgstr ""
 
 #: dist/translation-strings.php:1507
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:253
-msgid "Ease Out Quad"
+#: dist/translation-strings.js:284
+msgid "Taxonomy Type"
 msgstr ""
 
 #: dist/translation-strings.php:1508
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:254
-msgid "Ease In Out Quad"
+#: dist/translation-strings.js:285
+msgid "Display Option"
 msgstr ""
 
 #: dist/translation-strings.php:1509
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:255
-msgid "Ease In Expo"
+#: dist/translation-strings.js:286
+msgid "All values"
 msgstr ""
 
 #: dist/translation-strings.php:1510
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:256
-msgid "Ease Out Expo"
+#: dist/translation-strings.js:287
+msgid "%s value"
 msgstr ""
 
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1511
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:59
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:102
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:230
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:257
-msgid "Ease In Out Expo"
+#: dist/translation-strings.js:288
+msgid "1st"
 msgstr ""
 
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1512
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:107
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:231
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:258
-msgid "Ease In Back"
+#: dist/translation-strings.js:289
+msgid "2nd"
 msgstr ""
 
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1513
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:112
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:232
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:259
-msgid "Ease Out Back"
+#: dist/translation-strings.js:290
+msgid "3rd"
 msgstr ""
 
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1514
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:117
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:233
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:260
-msgid "Ease In Out Back"
+#: dist/translation-strings.js:291
+msgid "4th"
 msgstr ""
 
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1515
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:122
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:234
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:262
-msgid "Transform Origin"
+#: dist/translation-strings.js:292
+msgid "5th"
 msgstr ""
 
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1516
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:127
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:235
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:272
-msgid "This block has Motion Effects assigned to it, applying transforms above may prevent the Motion Effects from working as expected."
+#: dist/translation-strings.js:293
+msgid "6th"
 msgstr ""
 
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1517
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:132
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:236
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:218
-msgid "Translate X"
+#: dist/translation-strings.js:294
+msgid "7th"
 msgstr ""
 
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1518
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:137
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:237
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:273
-msgid "Translate Y"
+#: dist/translation-strings.js:295
+msgid "8th"
 msgstr ""
 
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1519
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:142
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:238
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:202
-msgid "Rotate"
+#: dist/translation-strings.js:296
+msgid "9th"
 msgstr ""
 
+#. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #: dist/translation-strings.php:1520
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:361
-msgid "Field cannot be empty"
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:147
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:239
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:297
+msgid "10th"
 msgstr ""
 
 #: dist/translation-strings.php:1521
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:362
-msgid "Slug contains invalid characters"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:298
+msgid "Delimiter"
 msgstr ""
 
 #: dist/translation-strings.php:1522
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:363
-msgid "Slug must be unique"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:299
+msgid "Strip HTML tags"
 msgstr ""
 
 #: dist/translation-strings.php:1523
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:364
-msgid "https://"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:300
+msgid "If this option is false, the content rendered in the editor will still be stripped to prevent an error from occuring"
 msgstr ""
 
 #: dist/translation-strings.php:1524
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:365
-msgid "Link title"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:301
+msgid "Display text when true"
 msgstr ""
 
 #: dist/translation-strings.php:1525
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:366
-msgid "Do you want to delete this field?"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:302
+msgid "Display text when false"
 msgstr ""
 
 #: dist/translation-strings.php:1526
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:367
-msgid "Add New Field"
+#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:89
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:303
+msgid "Fields"
 msgstr ""
 
 #: dist/translation-strings.php:1527
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:368
-msgid "Field Type"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:304
+msgid "Attributes"
 msgstr ""
 
 #: dist/translation-strings.php:1528
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:371
-msgid "Date"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:355
+msgid "Learn more how multicolor works"
 msgstr ""
 
 #: dist/translation-strings.php:1529
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:372
-msgid "Time"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:356
+msgid "here"
 msgstr ""
 
 #: dist/translation-strings.php:1530
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:373
-msgid "Url"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:358
+msgid "Outline Color"
 msgstr ""
 
 #: dist/translation-strings.php:1531
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:374
-msgid "Field Name"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:359
+msgid "Icon Shape Color"
 msgstr ""
 
 #: dist/translation-strings.php:1532
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:375
-msgid "Field Slug"
+#: src/welcome/index.php:259
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:360
+msgid "Dynamic Content"
 msgstr ""
 
 #: dist/translation-strings.php:1533
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:376
-msgid "A unique string that will be used to identify this field. Must contain only letters, numbers, underscores and dashes."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:344
+msgid "Style copied successfully!"
 msgstr ""
 
 #: dist/translation-strings.php:1534
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:378
-msgid "Save field"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:345
+msgid "Style pasted successfully!"
 msgstr ""
 
 #: dist/translation-strings.php:1535
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:379
-msgid "Add a custom field now to start exploring the possibilities."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:346
+msgid "Used to copy core/stackable block styles"
 msgstr ""
 
 #: dist/translation-strings.php:1536
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:380
-msgid "Add field"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:347
+msgid "Used to paste core/stackable block styles"
 msgstr ""
 
 #: dist/translation-strings.php:1537
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:381
-msgid "You don't have any custom fields."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:348
+msgid "Adv Copy Styles"
 msgstr ""
 
 #: dist/translation-strings.php:1538
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:382
-msgid "Save changes"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:349
+msgid "Adv Paste Styles"
 msgstr ""
 
 #: dist/translation-strings.php:1539
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:383
-msgid "You have unsaved changes"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:350
+msgid "Copy & paste styles"
 msgstr ""
 
 #: dist/translation-strings.php:1540
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:384
-msgid "Error in saving content"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:351
+msgid "Remove the selected block(s)."
 msgstr ""
 
 #: dist/translation-strings.php:1541
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:243
-msgid "Separator Layer %s"
+#: dist/translation-strings.js:352
+msgid "Content Editing mode is enabled"
 msgstr ""
 
 #: dist/translation-strings.php:1542
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:203
-msgid "Effect"
+#: dist/translation-strings.js:353
+msgid "To unlock Full Editing mode, please contact your administrator."
 msgstr ""
 
 #: dist/translation-strings.php:1543
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:204
-msgid "Entrance Animation"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:361
+msgid "Field cannot be empty"
 msgstr ""
 
 #: dist/translation-strings.php:1544
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:205
-msgid "Scroll Animation"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:362
+msgid "Slug contains invalid characters"
 msgstr ""
 
 #: dist/translation-strings.php:1545
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:206
-msgid "Start Position"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:363
+msgid "Slug must be unique"
 msgstr ""
 
 #: dist/translation-strings.php:1546
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:207
-msgid "Entrance Animation Speed"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:364
+msgid "https://"
 msgstr ""
 
 #: dist/translation-strings.php:1547
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:208
-msgid "Slow"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:365
+msgid "Link title"
 msgstr ""
 
 #: dist/translation-strings.php:1548
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:210
-msgid "Fast"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:366
+msgid "Do you want to delete this field?"
 msgstr ""
 
 #: dist/translation-strings.php:1549
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:211
-msgid "Entrance Animation Delay"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:367
+msgid "Add New Field"
 msgstr ""
 
 #: dist/translation-strings.php:1550
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:212
-msgid "Smoothen Scroll Animation"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:368
+msgid "Field Type"
 msgstr ""
 
 #: dist/translation-strings.php:1551
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:213
-msgid "Use 3D Transforms"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:371
+msgid "Date"
 msgstr ""
 
 #: dist/translation-strings.php:1552
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:214
-msgid "Perspective"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:372
+msgid "Time"
 msgstr ""
 
 #: dist/translation-strings.php:1553
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:215
-msgid "Exit Animation"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:373
+msgid "Url"
 msgstr ""
 
 #: dist/translation-strings.php:1554
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:216
-msgid "This block has Transforms assigned to it, Motion Effects may not work as expected."
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:374
+msgid "Field Name"
 msgstr ""
 
 #: dist/translation-strings.php:1555
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:217
-msgid "Learn more about Motion Effects"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:375
+msgid "Field Slug"
 msgstr ""
 
 #: dist/translation-strings.php:1556
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:219
-msgid "TranslateY"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:376
+msgid "A unique string that will be used to identify this field. Must contain only letters, numbers, underscores and dashes."
 msgstr ""
 
 #: dist/translation-strings.php:1557
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:220
-msgid "TranslateZ"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:378
+msgid "Save field"
 msgstr ""
 
 #: dist/translation-strings.php:1558
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:221
-msgid "RotateX"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:379
+msgid "Add a custom field now to start exploring the possibilities."
 msgstr ""
 
 #: dist/translation-strings.php:1559
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:222
-msgid "RotateY"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:380
+msgid "Add field"
 msgstr ""
 
 #: dist/translation-strings.php:1560
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:224
-msgid "Skew X"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:381
+msgid "You don't have any custom fields."
 msgstr ""
 
 #: dist/translation-strings.php:1561
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:225
-msgid "Skew Y"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:382
+msgid "Save changes"
 msgstr ""
 
 #: dist/translation-strings.php:1562
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:435
-msgid "%s More"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:383
+msgid "You have unsaved changes"
 msgstr ""
 
 #: dist/translation-strings.php:1563
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:436
-msgid "Lift w/ shadow"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:384
+msgid "Error in saving content"
 msgstr ""
 
 #: dist/translation-strings.php:1564
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:437
-msgid "Staggered lift"
+#: dist/translation-strings.js:441
+msgid "%s More"
 msgstr ""
 
 #: dist/translation-strings.php:1565
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:438
-msgid "Staggered lift w/ shadow"
+#: dist/translation-strings.js:442
+msgid "Lift w/ shadow"
 msgstr ""
 
 #: dist/translation-strings.php:1566
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:439
-msgid "Scale w/ shadow"
+#: dist/translation-strings.js:443
+msgid "Staggered lift"
 msgstr ""
 
 #: dist/translation-strings.php:1567
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:440
-msgid "Lower"
+#: dist/translation-strings.js:444
+msgid "Staggered lift w/ shadow"
 msgstr ""
 
 #: dist/translation-strings.php:1568
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:441
-msgid "Grayscale Hover Effect"
+#: dist/translation-strings.js:445
+msgid "Scale w/ shadow"
 msgstr ""
 
 #: dist/translation-strings.php:1569
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:444
-msgid "Column / Container Spacing"
+#: dist/translation-strings.js:446
+msgid "Lower"
 msgstr ""
 
 #: dist/translation-strings.php:1570
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:446
-msgid "Min. Column Height"
+#: dist/translation-strings.js:447
+msgid "Grayscale Hover Effect"
 msgstr ""
 
 #: dist/translation-strings.php:1571
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:397
-msgid "Reverse columns"
+#: dist/translation-strings.js:433
+msgid "Column / Container Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:1572
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:398
-msgid "Collapsed Row Gap"
+#: dist/translation-strings.js:435
+msgid "Min. Column Height"
 msgstr ""
 
 #: dist/translation-strings.php:1573
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:399
-msgid "Collapsed Col. Arrangement"
-msgstr ""
-
-#: dist/translation-strings.php:1574
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:385
 msgid "Offset your posts by a specific number of items"
 msgstr ""
 
-#: dist/translation-strings.php:1575
+#: dist/translation-strings.php:1574
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:389
 msgid "Show previous and next buttons"
 msgstr ""
 
-#: dist/translation-strings.php:1576
+#: dist/translation-strings.php:1575
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:390
 msgid "Previous label"
 msgstr ""
 
-#: dist/translation-strings.php:1577
+#: dist/translation-strings.php:1576
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:391
 msgid "Next label"
 msgstr ""
 
-#: dist/translation-strings.php:1578
+#: dist/translation-strings.php:1577
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:392
 msgid "Hover & Active Opacity"
 msgstr ""
 
-#: dist/translation-strings.php:1579
+#: dist/translation-strings.php:1578
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:393
 msgid "Hover & Active Colors"
 msgstr ""
 
+#: dist/translation-strings.php:1579
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:397
+msgid "Reverse columns"
+msgstr ""
+
 #: dist/translation-strings.php:1580
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:408
-msgid "Override settings for column %d"
+#: dist/translation-strings.js:398
+msgid "Collapsed Row Gap"
 msgstr ""
 
 #: dist/translation-strings.php:1581
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:409
-msgid "Column Background"
+#: dist/translation-strings.js:399
+msgid "Collapsed Col. Arrangement"
+msgstr ""
+
+#: dist/translation-strings.php:1582
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:405
+msgid "Collapse image on Mobile"
+msgstr ""
+
+#: dist/translation-strings.php:1583
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:406
+msgid "Collapse image height"
+msgstr ""
+
+#: dist/translation-strings.php:1584
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:408
+msgid "Override settings for column %d"
 msgstr ""
 
-#: dist/translation-strings.php:1582
+#: dist/translation-strings.php:1585
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:405
-msgid "Collapse image on Mobile"
+#: dist/translation-strings.js:409
+msgid "Column Background"
 msgstr ""
 
-#: dist/translation-strings.php:1583
+#: dist/translation-strings.php:1586
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:406
-msgid "Collapse image height"
+#: dist/translation-strings.js:422
+msgid "Number Background"
 msgstr ""
 
-#: dist/translation-strings.php:1584
+#: dist/translation-strings.php:1587
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:411
 msgid "Tilt"
 msgstr ""
 
-#: dist/translation-strings.php:1585
+#: dist/translation-strings.php:1588
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:412
 msgid "Zoom & Tilt"
 msgstr ""
 
-#: dist/translation-strings.php:1586
+#: dist/translation-strings.php:1589
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:413
 msgid "Up"
 msgstr ""
 
-#: dist/translation-strings.php:1587
+#: dist/translation-strings.php:1590
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:414
 msgid "Down"
 msgstr ""
 
-#: dist/translation-strings.php:1588
+#: dist/translation-strings.php:1591
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:417
 msgid "Blur In"
 msgstr ""
 
-#: dist/translation-strings.php:1589
+#: dist/translation-strings.php:1592
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:418
 msgid "Blur Out"
 msgstr ""
 
-#: dist/translation-strings.php:1590
+#: dist/translation-strings.php:1593
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:419
 msgid "Grayscale In"
 msgstr ""
 
-#: dist/translation-strings.php:1591
+#: dist/translation-strings.php:1594
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:420
 msgid "Grayscale Out"
 msgstr ""
 
-#: dist/translation-strings.php:1592
+#: dist/translation-strings.php:1595
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:421
 msgid "Box Hover Effect"
 msgstr ""
 
-#: dist/translation-strings.php:1593
+#: dist/translation-strings.php:1596
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:426
-msgid "Column Header"
+#: dist/translation-strings.js:428
+msgid "Color on Hover"
 msgstr ""
 
-#: dist/translation-strings.php:1594
+#: dist/translation-strings.php:1597
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:427
-msgctxt "Nth Title"
-msgid "%s #%d"
+#: dist/translation-strings.js:423
+msgid "Column Header"
 msgstr ""
 
-#: dist/translation-strings.php:1595
+#: dist/translation-strings.php:1598
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/translation-strings.js:424
-msgid "Layer Color"
-msgstr ""
-
-#: dist/translation-strings.php:1596
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:425
-msgid "Number Background"
+msgctxt "Nth Title"
+msgid "%s #%d"
 msgstr ""
 
-#: dist/translation-strings.php:1597
+#: dist/translation-strings.php:1599
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:428
-msgid "Color on Hover"
+#: dist/translation-strings.js:432
+msgid "Bubble Background"
 msgstr ""
 
-#: dist/translation-strings.php:1598
+#: dist/translation-strings.php:1600
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:432
-msgid "Bubble Background"
+#: dist/translation-strings.js:427
+msgid "Layer Color"
 msgstr ""
 
-#: dist/translation-strings.php:1599
+#: dist/translation-strings.php:1601
 #: pro__premium_only/src/custom-fields.php:88
 msgid "Settings that control custom fields functionality and permissions."
 msgstr ""
 
-#: dist/translation-strings.php:1600
+#: dist/translation-strings.php:1602
 #: pro__premium_only/src/editor-mode.php:68
 msgid "Roles which only allow content only editing."
 msgstr ""
 
-#: dist/translation-strings.php:1601
+#: dist/translation-strings.php:1603
 #: pro__premium_only/src/icons.php:169
 msgid "Hold on! We noticed that you're using the Font Awesome plugin and that you're using a free Kit. If you have a FontAwesome Pro subscription, you can just set your Kit to use Pro Icons, and you should be able to use your Pro Icons inside your Stackable blocks. %sLearn more about this here.%s"
 msgstr ""
 
-#: dist/translation-strings.php:1602
+#: dist/translation-strings.php:1604
 #: pro__premium_only/src/icons.php:173
 msgid "Hold on! We noticed that you're using the Font Awesome plugin and that you're using the free CDN. If you have a FontAwesome Pro subscription, you can just set your CDN to use Pro Icons, and you should be able to use your Pro Icons inside your Stackable blocks. %sLearn more about this here.%s"
 msgstr ""
 
-#: dist/translation-strings.php:1603
+#: dist/translation-strings.php:1605
 #: pro__premium_only/src/icons.php:176
 #: pro__premium_only/src/icons.php:180
 msgid "Good news! We noticed that you're using the Font Awesome plugin. Your Font Awesome Pro icons are already available inside your Stackable blocks."
 msgstr ""
 
-#: dist/translation-strings.php:1604
+#: dist/translation-strings.php:1606
 #: pro__premium_only/src/icons.php:177
 msgid "Make sure you need to add your WordPress site to the %sallowed domains for your CDN%s."
 msgstr ""
 
-#: dist/translation-strings.php:1605
+#: dist/translation-strings.php:1607
 #: pro__premium_only/src/stk-block-types.php:16
 #: dist/translation-strings.js:449
 msgid "Load more button for your Stackable Posts block"
 msgstr ""
 
-#: dist/translation-strings.php:1606
+#: dist/translation-strings.php:1608
 #: pro__premium_only/src/stk-block-types.php:44
 #: dist/translation-strings.js:450
 msgid "Pagination for your Stackable Posts block"
 msgstr ""
 
-#: dist/translation-strings.php:1607
+#: dist/translation-strings.php:1609
 #: pro__premium_only/src/dynamic-content/init.php:304
 msgid "Invalid parameters. Please try again."
 msgstr ""
 
-#: dist/translation-strings.php:1608
+#: dist/translation-strings.php:1610
 #: pro__premium_only/src/welcome/icons.php:63
 msgid "Don't show Font Awesome plugin settings error"
 msgstr ""
 
-#: dist/translation-strings.php:1609
+#: dist/translation-strings.php:1611
 #: pro__premium_only/src/welcome/icons.php:75
 msgid "Font Awesome Kit ID"
 msgstr ""
 
-#: dist/translation-strings.php:1610
+#: dist/translation-strings.php:1612
 #: pro__premium_only/src/welcome/icons.php:87
 msgid "Font Awesome icon version to server"
 msgstr ""
 
-#: dist/translation-strings.php:1611
+#: dist/translation-strings.php:1613
 #: pro__premium_only/src/block/load-more/index.php:49
 #: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:28
 #: src/custom-block-styles.php:157
@@ -8831,7 +8841,7 @@ msgstr ""
 msgid "%s must be a string."
 msgstr ""
 
-#: dist/translation-strings.php:1612
+#: dist/translation-strings.php:1614
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:21
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:47
 #: src/deprecated/v2/disabled-blocks.php:62
@@ -8839,18 +8849,18 @@ msgstr ""
 msgid "Security error, please refresh the page and try again."
 msgstr ""
 
-#: dist/translation-strings.php:1613
+#: dist/translation-strings.php:1615
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:28
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:53
 msgid "Invalid arguments."
 msgstr ""
 
-#: dist/translation-strings.php:1614
+#: dist/translation-strings.php:1616
 #: pro__premium_only/src/dynamic-content/sources/acf.php:57
 msgid "ACF"
 msgstr ""
 
-#: dist/translation-strings.php:1615
+#: dist/translation-strings.php:1617
 #: pro__premium_only/src/dynamic-content/sources/acf.php:201
 #: pro__premium_only/src/dynamic-content/sources/acf.php:229
 #: pro__premium_only/src/dynamic-content/sources/custom-fields.php:97
@@ -8863,7 +8873,7 @@ msgstr ""
 msgid "The field type provided is not valid."
 msgstr ""
 
-#: dist/translation-strings.php:1616
+#: dist/translation-strings.php:1618
 #: pro__premium_only/src/dynamic-content/sources/acf.php:359
 #: pro__premium_only/src/dynamic-content/sources/acf.php:555
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:364
@@ -8876,27 +8886,27 @@ msgstr ""
 msgid "Text input is empty"
 msgstr ""
 
-#: dist/translation-strings.php:1617
+#: dist/translation-strings.php:1619
 #: pro__premium_only/src/dynamic-content/sources/acf.php:417
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:390
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:472
 msgid "`whenTrueText` and `whenFalseText` arguments are required."
 msgstr ""
 
-#: dist/translation-strings.php:1618
+#: dist/translation-strings.php:1620
 #: pro__premium_only/src/dynamic-content/sources/custom-fields.php:41
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:88
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:137
 msgid "Stackable Custom Fields"
 msgstr ""
 
-#: dist/translation-strings.php:1619
+#: dist/translation-strings.php:1621
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:62
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:86
 msgid "JetEngine"
 msgstr ""
 
-#: dist/translation-strings.php:1620
+#: dist/translation-strings.php:1622
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:53
 msgid "Latest Post"
 msgstr ""
@@ -8914,8 +8924,8 @@ msgstr ""
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1621
-#: dist/translation-strings.php:1624
+#: dist/translation-strings.php:1623
+#: dist/translation-strings.php:1626
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:57
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:59
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:102
@@ -8943,14 +8953,14 @@ msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1622
+#: dist/translation-strings.php:1624
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:57
 msgid "Nth"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1623
+#: dist/translation-strings.php:1625
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:57
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:59
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:219
@@ -8970,108 +8980,108 @@ msgstr ""
 msgid "Post"
 msgstr ""
 
-#: dist/translation-strings.php:1625
+#: dist/translation-strings.php:1627
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:74
 msgid "Meta Box"
 msgstr ""
 
-#: dist/translation-strings.php:1626
+#: dist/translation-strings.php:1628
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:196
 msgid "Meta Box | "
 msgstr ""
 
-#: dist/translation-strings.php:1627
+#: dist/translation-strings.php:1629
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:249
 msgid "Multiple select not supported in this field."
 msgstr ""
 
-#: dist/translation-strings.php:1628
+#: dist/translation-strings.php:1630
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:643
 msgid "You have not selected an image."
 msgstr ""
 
-#: dist/translation-strings.php:1629
+#: dist/translation-strings.php:1631
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:674
 msgid "Text fields are empty"
 msgstr ""
 
-#: dist/translation-strings.php:1630
+#: dist/translation-strings.php:1632
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:32
 msgid "Other Posts"
 msgstr ""
 
-#: dist/translation-strings.php:1631
+#: dist/translation-strings.php:1633
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:35
 msgid "Posts/Pages"
 msgstr ""
 
-#: dist/translation-strings.php:1632
+#: dist/translation-strings.php:1634
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:36
 msgid "Search for posts/pages"
 msgstr ""
 
-#: dist/translation-strings.php:1633
+#: dist/translation-strings.php:1635
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:118
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:180
 msgid "Detected Custom Fields"
 msgstr ""
 
-#: dist/translation-strings.php:1634
+#: dist/translation-strings.php:1636
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:218
 msgid "Post Title"
 msgstr ""
 
-#: dist/translation-strings.php:1635
+#: dist/translation-strings.php:1637
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:222
 msgid "Post URL"
 msgstr ""
 
-#: dist/translation-strings.php:1636
+#: dist/translation-strings.php:1638
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:227
 msgid "Post ID"
 msgstr ""
 
-#: dist/translation-strings.php:1637
+#: dist/translation-strings.php:1639
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:231
 msgid "Post Slug"
 msgstr ""
 
-#: dist/translation-strings.php:1638
+#: dist/translation-strings.php:1640
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:239
 msgid "Post Excerpt"
 msgstr ""
 
-#: dist/translation-strings.php:1639
+#: dist/translation-strings.php:1641
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:243
 msgid "Post Date"
 msgstr ""
 
-#: dist/translation-strings.php:1640
+#: dist/translation-strings.php:1642
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:247
 msgid "Post Date GMT"
 msgstr ""
 
-#: dist/translation-strings.php:1641
+#: dist/translation-strings.php:1643
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:251
 msgid "Post Modified"
 msgstr ""
 
-#: dist/translation-strings.php:1642
+#: dist/translation-strings.php:1644
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:255
 msgid "Post Modified GMT"
 msgstr ""
 
-#: dist/translation-strings.php:1643
+#: dist/translation-strings.php:1645
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:263
 msgid "Post Status"
 msgstr ""
 
-#: dist/translation-strings.php:1644
+#: dist/translation-strings.php:1646
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:268
 msgid "Author Name"
 msgstr ""
 
-#: dist/translation-strings.php:1645
+#: dist/translation-strings.php:1647
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:269
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:273
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:277
@@ -9082,68 +9092,68 @@ msgstr ""
 msgid "Author"
 msgstr ""
 
-#: dist/translation-strings.php:1646
+#: dist/translation-strings.php:1648
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:272
 msgid "Author ID"
 msgstr ""
 
-#: dist/translation-strings.php:1647
+#: dist/translation-strings.php:1649
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:276
 msgid "Author Posts URL"
 msgstr ""
 
-#: dist/translation-strings.php:1648
+#: dist/translation-strings.php:1650
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:281
 msgid "Author Profile Picture URL"
 msgstr ""
 
-#: dist/translation-strings.php:1649
+#: dist/translation-strings.php:1651
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:286
 msgid "Author Posts"
 msgstr ""
 
-#: dist/translation-strings.php:1650
+#: dist/translation-strings.php:1652
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:290
 msgid "Author First Name"
 msgstr ""
 
-#: dist/translation-strings.php:1651
+#: dist/translation-strings.php:1653
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:294
 msgid "Author Last Name"
 msgstr ""
 
-#: dist/translation-strings.php:1652
+#: dist/translation-strings.php:1654
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:299
 msgid "Comment Number"
 msgstr ""
 
-#: dist/translation-strings.php:1653
+#: dist/translation-strings.php:1655
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:300
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:304
 msgid "Comment"
 msgstr ""
 
-#: dist/translation-strings.php:1654
+#: dist/translation-strings.php:1656
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:303
 msgid "Comment Status"
 msgstr ""
 
-#: dist/translation-strings.php:1655
+#: dist/translation-strings.php:1657
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:308
 msgid "Featured Image URL"
 msgstr ""
 
-#: dist/translation-strings.php:1656
+#: dist/translation-strings.php:1658
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:309
 msgid "Media"
 msgstr ""
 
-#: dist/translation-strings.php:1657
+#: dist/translation-strings.php:1659
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:491
 msgid "Post not found."
 msgstr ""
 
-#: dist/translation-strings.php:1658
+#: dist/translation-strings.php:1660
 #: pro__premium_only/src/dynamic-content/sources/site.php:27
 #: pro__premium_only/src/dynamic-content/sources/site.php:45
 #: pro__premium_only/src/dynamic-content/sources/site.php:49
@@ -9151,173 +9161,173 @@ msgstr ""
 msgid "Site"
 msgstr ""
 
-#: dist/translation-strings.php:1659
+#: dist/translation-strings.php:1661
 #: pro__premium_only/src/dynamic-content/sources/site.php:44
 msgid "Site Tagline"
 msgstr ""
 
-#: dist/translation-strings.php:1660
+#: dist/translation-strings.php:1662
 #: pro__premium_only/src/dynamic-content/sources/site.php:48
 msgid "Site Title"
 msgstr ""
 
-#: dist/translation-strings.php:1661
+#: dist/translation-strings.php:1663
 #: pro__premium_only/src/dynamic-content/sources/site.php:52
 msgid "Site URL"
 msgstr ""
 
-#: dist/translation-strings.php:1662
+#: dist/translation-strings.php:1664
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:91
 msgid "Product Url"
 msgstr ""
 
-#: dist/translation-strings.php:1663
+#: dist/translation-strings.php:1665
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:101
 msgid "Product Name"
 msgstr ""
 
-#: dist/translation-strings.php:1664
+#: dist/translation-strings.php:1666
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:108
 msgid "Product Description"
 msgstr ""
 
-#: dist/translation-strings.php:1665
+#: dist/translation-strings.php:1667
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:115
 msgid "Product Short Description"
 msgstr ""
 
-#: dist/translation-strings.php:1666
+#: dist/translation-strings.php:1668
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:122
 msgid "Product Purchase Note"
 msgstr ""
 
-#: dist/translation-strings.php:1667
+#: dist/translation-strings.php:1669
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:129
 msgid "Product Image"
 msgstr ""
 
-#: dist/translation-strings.php:1668
+#: dist/translation-strings.php:1670
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:136
 msgid "Product Price"
 msgstr ""
 
-#: dist/translation-strings.php:1669
+#: dist/translation-strings.php:1671
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:143
 msgid "Product Price (Regular)"
 msgstr ""
 
-#: dist/translation-strings.php:1670
+#: dist/translation-strings.php:1672
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:150
 msgid "Product Price (No Tax)"
 msgstr ""
 
-#: dist/translation-strings.php:1671
+#: dist/translation-strings.php:1673
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:157
 msgid "Produce Price (Sale)"
 msgstr ""
 
-#: dist/translation-strings.php:1672
+#: dist/translation-strings.php:1674
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:164
 msgid "Product Date Created"
 msgstr ""
 
-#: dist/translation-strings.php:1673
+#: dist/translation-strings.php:1675
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:171
 msgid "Product Sale Date From"
 msgstr ""
 
-#: dist/translation-strings.php:1674
+#: dist/translation-strings.php:1676
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:178
 msgid "Product Sale Date To"
 msgstr ""
 
-#: dist/translation-strings.php:1675
+#: dist/translation-strings.php:1677
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:185
 msgid "Product Add to Cart URL"
 msgstr ""
 
-#: dist/translation-strings.php:1676
+#: dist/translation-strings.php:1678
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:193
 msgid "Product SKU"
 msgstr ""
 
-#: dist/translation-strings.php:1677
+#: dist/translation-strings.php:1679
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:200
 msgid "Product Total Sales"
 msgstr ""
 
-#: dist/translation-strings.php:1678
+#: dist/translation-strings.php:1680
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:207
 msgid "Product Total Stock"
 msgstr ""
 
-#: dist/translation-strings.php:1679
+#: dist/translation-strings.php:1681
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:214
 msgid "Product Low Stock"
 msgstr ""
 
-#: dist/translation-strings.php:1680
+#: dist/translation-strings.php:1682
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:221
 msgid "Product Weight"
 msgstr ""
 
-#: dist/translation-strings.php:1681
+#: dist/translation-strings.php:1683
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:228
 msgid "Product Width"
 msgstr ""
 
-#: dist/translation-strings.php:1682
+#: dist/translation-strings.php:1684
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:235
 msgid "Product Length"
 msgstr ""
 
-#: dist/translation-strings.php:1683
+#: dist/translation-strings.php:1685
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:242
 msgid "Product Height"
 msgstr ""
 
-#: dist/translation-strings.php:1684
+#: dist/translation-strings.php:1686
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:249
 msgid "Product Review Count"
 msgstr ""
 
-#: dist/translation-strings.php:1685
+#: dist/translation-strings.php:1687
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:256
 msgid "Product Tax Status"
 msgstr ""
 
-#: dist/translation-strings.php:1686
+#: dist/translation-strings.php:1688
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:263
 msgid "Product Tax Class"
 msgstr ""
 
-#: dist/translation-strings.php:1687
+#: dist/translation-strings.php:1689
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:270
 msgid "Product Tags"
 msgstr ""
 
-#: dist/translation-strings.php:1688
+#: dist/translation-strings.php:1690
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:277
 msgid "Product Attributes"
 msgstr ""
 
-#: dist/translation-strings.php:1689
+#: dist/translation-strings.php:1691
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:48
 msgid "Data from Stackable custom fields"
 msgstr ""
 
-#: dist/translation-strings.php:1690
+#: dist/translation-strings.php:1692
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:146
 #: src/welcome/index.php:229
 msgid "📋 Custom Fields"
 msgstr ""
 
-#: dist/translation-strings.php:1691
+#: dist/translation-strings.php:1693
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:151
 msgid "You can add small pieces of content here which you can use across your website - things like your contact email or the number of customers you've served. You can find these fields under the \"Site source\" area when placing \"Dynamic Content\" in your blocks. %sLearn more%s."
 msgstr ""
 
-#: dist/translation-strings.php:1692
+#: dist/translation-strings.php:1694
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:160
 #: src/welcome/index.php:224
 #: src/welcome/index.php:235
@@ -9341,7 +9351,7 @@ msgid "This map block uses settings that require a Google Maps API key, but it i
 msgstr ""
 
 #: src/block/posts/index.php:107
-#: src/block/posts/index.php:467
+#: src/block/posts/index.php:471
 #: src/deprecated/v2/block/blog-posts/index.php:289
 #: src/deprecated/v2/block/blog-posts/index.php:543
 msgid "%d comment"
@@ -9349,7 +9359,7 @@ msgid_plural "%d comments"
 msgstr[0] ""
 msgstr[1] ""
 
-#: src/block/posts/index.php:431
+#: src/block/posts/index.php:435
 #: src/deprecated/v2/block/blog-posts/index.php:265
 #: src/deprecated/v2/block/blog-posts/index.php:554
 msgid ", "
@@ -9470,6 +9480,10 @@ msgstr ""
 msgid "Disables image lazy loading when using images inside carousel-type blocks to prevent space or layout issues ."
 msgstr ""
 
+#: src/editor-settings.php:163
+msgid "If this is enabled, the default block when adding a new block will be the Stackable Text block."
+msgstr ""
+
 #: src/global-settings.php:106
 msgid "Stackable global color palette"
 msgstr ""
diff --git a/package.json b/package.json
index a58f8b5d8..fdadb9900 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "stackable",
-	"version": "3.13.5",
+	"version": "3.13.6",
 	"private": true,
 	"description": "Blocks for everyone",
 	"author": "Benjamin Intal of Gambit",
diff --git a/plugin.php b/plugin.php
index 7983906d1..cf98acb68 100644
--- a/plugin.php
+++ b/plugin.php
@@ -6,7 +6,7 @@
  * Author: Gambit Technologies, Inc
  * Author URI: http://gambit.ph
  * Text Domain: stackable-ultimate-gutenberg-blocks
- * Version: 3.13.5
+ * Version: 3.13.6
  *
  * @package Stackable
  */
@@ -24,7 +24,7 @@
 
 defined( 'STACKABLE_SHOW_PRO_NOTICES' ) || define( 'STACKABLE_SHOW_PRO_NOTICES', true );
 defined( 'STACKABLE_BUILD' ) || define( 'STACKABLE_BUILD', 'free' );
-defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.13.5' );
+defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.13.6' );
 defined( 'STACKABLE_FILE' ) || define( 'STACKABLE_FILE', __FILE__ );
 defined( 'STACKABLE_I18N' ) || define( 'STACKABLE_I18N', 'stackable-ultimate-gutenberg-blocks' ); // Plugin slug.
 defined( 'STACKABLE_DESIGN_LIBRARY_URL' ) || define( 'STACKABLE_DESIGN_LIBRARY_URL', 'https://storage.googleapis.com/stackable-plugin-assets' ); // Design Library CDN URL
diff --git a/readme.txt b/readme.txt
index 89c1f93b9..de7403543 100644
--- a/readme.txt
+++ b/readme.txt
@@ -4,7 +4,7 @@ Tags: blocks, gutenberg, gutenberg blocks, page builder, WordPress blocks
 Requires at least: 6.3
 Tested up to: 6.6.1
 Requires PHP: 7.3
-Stable tag: 3.13.5
+Stable tag: 3.13.6
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -295,6 +295,21 @@ Nope. Stackable only works with Gutenberg, the new WordPress editor.
 
 == Changelog ==
 
+= 3.13.6 =
+* New: Drastically improved performance of the Block Editor #3261
+* New: Added option to enable Stackable Text block as the default editor block #3279
+* New: Added `--stk-transition-default` CSS variable for easier transition customization #3266
+* Change: Disable Inner Column block margins in Carousel blocks #3173
+* Fixed: Posts block "<a" text may appear in post excerpts #3301
+* Fixed: Improved performance of Stackable Global Colors #3299
+* Fixed: Columns block: some settings may not work when used inside a Query Loop block #3109
+* Fixed: Carousel block: slide orders change if used inside a Columns block with different responsive column orders #3113
+* Fixed: Carousel block: fixed jumping and popup issues when infinite scrolling and autoplay are enabled #3287
+* Fixed: Posts block: Load more can load the wrong data if you have multiple Posts block in a page #3189
+* Fixed: Icon List block: transforming to this block can cause errors #3277
+* Fixed: Horizontal Scroller block: images no longer dragged when dragging to scroll #3280
+* Fixed: Timeline block: last timeline doesn't cut off in mobile view #3292
+
 = 3.13.5 =
 * Fixed: Otter Blocks compatibility #3276
 * Fixed: Carousel block: Same-page navigation now works properly #3098
diff --git a/src/components/font-family-control/google-fonts.json b/src/components/font-family-control/google-fonts.json
index 0f8e8f4cc..0d13799f2 100644
--- a/src/components/font-family-control/google-fonts.json
+++ b/src/components/font-family-control/google-fonts.json
@@ -652,7 +652,8 @@
       "800"
     ],
     "subsets": [
-      "arabic"
+      "arabic",
+      "latin"
     ]
   },
   {
@@ -1218,7 +1219,6 @@
       "700"
     ],
     "subsets": [
-      "cyrillic-ext",
       "latin",
       "latin-ext",
       "thai",
@@ -3295,6 +3295,17 @@
       "vietnamese"
     ]
   },
+  {
+    "family": "Bungee Tint",
+    "variants": [
+      "regular"
+    ],
+    "subsets": [
+      "latin",
+      "latin-ext",
+      "vietnamese"
+    ]
+  },
   {
     "family": "Butcherman",
     "variants": [
@@ -11181,6 +11192,16 @@
       "latin-ext"
     ]
   },
+  {
+    "family": "Matemasie",
+    "variants": [
+      "regular"
+    ],
+    "subsets": [
+      "latin",
+      "latin-ext"
+    ]
+  },
   {
     "family": "Material Icons",
     "variants": [
@@ -11665,6 +11686,24 @@
       "latin-ext"
     ]
   },
+  {
+    "family": "Moderustic",
+    "variants": [
+      "300",
+      "regular",
+      "500",
+      "600",
+      "700",
+      "800"
+    ],
+    "subsets": [
+      "cyrillic",
+      "cyrillic-ext",
+      "greek",
+      "latin",
+      "latin-ext"
+    ]
+  },
   {
     "family": "Mogra",
     "variants": [
@@ -12364,6 +12403,16 @@
       "latin-ext"
     ]
   },
+  {
+    "family": "New Amsterdam",
+    "variants": [
+      "regular"
+    ],
+    "subsets": [
+      "latin",
+      "latin-ext"
+    ]
+  },
   {
     "family": "New Rocker",
     "variants": [
@@ -19436,6 +19485,23 @@
       "vietnamese"
     ]
   },
+  {
+    "family": "SUSE",
+    "variants": [
+      "100",
+      "200",
+      "300",
+      "regular",
+      "500",
+      "600",
+      "700",
+      "800"
+    ],
+    "subsets": [
+      "latin",
+      "latin-ext"
+    ]
+  },
   {
     "family": "Sacramento",
     "variants": [
diff --git a/src/dynamic-breakpoints.php b/src/dynamic-breakpoints.php
index 7ddcd1c6c..4a43c6b6b 100644
--- a/src/dynamic-breakpoints.php
+++ b/src/dynamic-breakpoints.php
@@ -15,7 +15,7 @@
 	function stackable_get_responsive_css() {
 		// NOTE: THE VALUE BELOW IS AUTOMATICALLY GENERATED BY THE BUILD PROCESS.
 		return <<<STK_RESPONSIVE_CSS
-#start-resizable-editor-section{display:none}@media only screen and (min-width:1024px){:where(.has-text-align-left) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-feature>*>.stk-row{flex-wrap:var(--stk-feature-flex-wrap,nowrap)}.stk-row{flex-wrap:nowrap}.stk--hide-desktop,.stk--hide-desktop.stk-block{display:none!important}}@media only screen and (min-width:768px){:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(2)){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):last-child){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(3)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(2)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):last-child){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(4)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(3)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(2)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):last-child){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(5)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(4)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(3)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(2)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):last-child){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(6)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(5)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(4)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(3)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):nth-last-child(2)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(6):last-child){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical{grid-template-columns:auto 1fr auto}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:first-child{grid-column:1/2}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:last-child{grid-column:2/4}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:first-child{grid-column:1/3}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:last-child{grid-column:3/4}.stk-block .stk-block.aligncenter,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){margin-left:auto;margin-right:auto;max-width:var(--stk-block-default-width,var(--stk-block-width-default-detected,900px));width:100%}.stk-block .stk-block.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide{margin-left:auto;margin-right:auto;max-width:var(--stk-block-wide-width,var(--stk-block-width-wide-detected,80vw));width:100%}.stk-row.stk-columns-2>.stk-column{flex:1 1 50%;max-width:50%}.stk-row.stk-columns-3>.stk-column{flex:1 1 33.3333333333%;max-width:33.3333333333%}.stk-row.stk-columns-4>.stk-column{flex:1 1 25%;max-width:25%}.stk-row.stk-columns-5>.stk-column{flex:1 1 20%;max-width:20%}.stk-row.stk-columns-6>.stk-column{flex:1 1 16.6666666667%;max-width:16.6666666667%}.stk-row.stk-columns-7>.stk-column{flex:1 1 14.2857142857%;max-width:14.2857142857%}.stk-row.stk-columns-8>.stk-column{flex:1 1 12.5%;max-width:12.5%}.stk-row.stk-columns-9>.stk-column{flex:1 1 11.1111111111%;max-width:11.1111111111%}.stk-row.stk-columns-10>.stk-column{flex:1 1 10%;max-width:10%}}@media only screen and (min-width:768px) and (max-width:1023px){.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}:where(.has-text-align-left-tablet) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-tablet) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-tablet) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk--hide-tablet,.stk--hide-tablet.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}}@media only screen and (max-width:1023px){.stk-block-button{min-width:-moz-fit-content;min-width:fit-content}.stk-block.stk-block-divider.has-text-align-center-tablet{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-tablet{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-tablet{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-timeline.stk-block-timeline__ios-polyfill{--fixed-bg:linear-gradient(to bottom,var(--line-accent-bg-color,#000) 0,var(--line-accent-bg-color-2,#000) var(--line-accent-bg-location,50%))}.has-text-align-center-tablet{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-tablet{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-tablet{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-tablet{--stk-alignment-text-align:justify}.has-text-align-space-between-tablet{--stk-alignment-justify-content:space-between}.has-text-align-space-around-tablet{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-tablet{--stk-alignment-justify-content:space-evenly}}@media only screen and (max-width:767px){.stk-button-group:is(.stk--collapse-on-mobile)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block],.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.stk-block-carousel.stk--hide-mobile-arrows>.stk-block-carousel__content-wrapper>*>.stk-block-carousel__buttons,.stk-block-carousel.stk--hide-mobile-dots>.stk-block-carousel__content-wrapper>.stk-block-carousel__dots{display:none}:where(.has-text-align-left-mobile) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-mobile) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-mobile) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center-mobile{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-mobile{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-mobile{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block.stk-block-feature:is(.is-style-default,.is-style-horizontal)>.stk-container>.stk-inner-blocks.stk-block-content{flex-direction:column-reverse}.stk-block-posts{--stk-columns:1}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile){overflow-x:auto!important;width:100%}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile)::-webkit-scrollbar{height:0!important}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile) .stk-block-tab-labels__wrapper{flex-wrap:nowrap;min-width:-webkit-fill-available;min-width:fill-available;width:max-content}.stk-block-tabs>.stk-inner-blocks{grid-template-columns:1fr}.stk-block-tabs>.stk-inner-blocks>.stk-block-tab-labels:last-child{grid-row:1/2}.stk-block.stk-block-timeline{--content-line:0!important;padding-top:0}.stk-block-timeline>.stk-inner-blocks{align-items:flex-start;grid-template-columns:var(--line-dot-size,16px) 1fr;grid-template-rows:auto 1fr;padding-left:16px}.stk-block-timeline>.stk-inner-blocks:after{inset-inline-start:calc(var(--line-dot-size, 16px)/2 - var(--line-bg-width, 3px)/2 + 16px)}.stk-block-timeline .stk-block-timeline__middle{inset-block-start:8px;inset-inline-start:16px;position:absolute}.stk-block-timeline .stk-block-timeline__content{grid-column:2/3;grid-row:2/3;text-align:start}.stk-block-timeline .stk-block-timeline__date{grid-column:2/3;grid-row:1/2;text-align:start}.stk-block-timeline>.stk-inner-blocks:after{bottom:calc(100% - var(--line-dot-size, 16px)/2 - .5em);top:calc(var(--line-dot-size, 16px)/2 + .5em)}.stk-block-timeline+.stk-block-timeline>.stk-inner-blocks:after{top:-16px}:root{--stk-block-margin-bottom:16px;--stk-container-padding:24px 24px;--stk-container-padding-large:32px 24px;--stk-container-padding-small:8px 24px;--stk-column-margin:8px;--stk-block-background-padding:16px 16px}.stk-block .stk-block:is(.aligncenter,.alignwide),.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){width:100%}.stk-column{flex:1 1 100%;max-width:100%}.stk--hide-mobile,.stk--hide-mobile.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-mobile) .stk-block:is(.stk-block-button,.stk-block-icon-button),.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.has-text-align-center-mobile{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-mobile{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-mobile{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-mobile{--stk-alignment-text-align:justify}.has-text-align-space-between-mobile{--stk-alignment-justify-content:space-between}.has-text-align-space-around-mobile{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-mobile{--stk-alignment-justify-content:space-evenly}.entry-content .stk-block.stk-has-top-separator{padding-top:23vw}.entry-content .stk-block.stk-has-bottom-separator{padding-bottom:23vw}.entry-content .stk-block .stk-separator__wrapper{height:23vw}}#end-resizable-editor-section{display:none}
+#start-resizable-editor-section{display:none}@media only screen and (min-width:1024px){:where(.has-text-align-left) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-feature>*>.stk-row{flex-wrap:var(--stk-feature-flex-wrap,nowrap)}.stk-row{flex-wrap:nowrap}.stk--hide-desktop,.stk--hide-desktop.stk-block{display:none!important}}@media only screen and (min-width:768px){:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(2)){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):last-child){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(3)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(2)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):last-child){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(4)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(3)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(2)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):last-child){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(5)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(4)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(3)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(2)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):last-child){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(6)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(5)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(4)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(3)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):nth-last-child(2)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(6):last-child){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical{grid-template-columns:auto 1fr auto}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:first-child{grid-column:1/2}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:last-child{grid-column:2/4}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:first-child{grid-column:1/3}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:last-child{grid-column:3/4}.stk-block .stk-block.aligncenter,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){margin-left:auto;margin-right:auto;max-width:var(--stk-block-default-width,var(--stk-block-width-default-detected,900px));width:100%}.stk-block .stk-block.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide{margin-left:auto;margin-right:auto;max-width:var(--stk-block-wide-width,var(--stk-block-width-wide-detected,80vw));width:100%}.stk-row.stk-columns-2>.stk-column{flex:1 1 50%;max-width:50%}.stk-row.stk-columns-3>.stk-column{flex:1 1 33.3333333333%;max-width:33.3333333333%}.stk-row.stk-columns-4>.stk-column{flex:1 1 25%;max-width:25%}.stk-row.stk-columns-5>.stk-column{flex:1 1 20%;max-width:20%}.stk-row.stk-columns-6>.stk-column{flex:1 1 16.6666666667%;max-width:16.6666666667%}.stk-row.stk-columns-7>.stk-column{flex:1 1 14.2857142857%;max-width:14.2857142857%}.stk-row.stk-columns-8>.stk-column{flex:1 1 12.5%;max-width:12.5%}.stk-row.stk-columns-9>.stk-column{flex:1 1 11.1111111111%;max-width:11.1111111111%}.stk-row.stk-columns-10>.stk-column{flex:1 1 10%;max-width:10%}}@media only screen and (min-width:768px) and (max-width:1023px){.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}:where(.has-text-align-left-tablet) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-tablet) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-tablet) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk--hide-tablet,.stk--hide-tablet.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}}@media only screen and (max-width:1023px){.stk-block-button{min-width:-moz-fit-content;min-width:fit-content}.stk-block.stk-block-divider.has-text-align-center-tablet{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-tablet{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-tablet{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-timeline.stk-block-timeline__ios-polyfill{--fixed-bg:linear-gradient(to bottom,var(--line-accent-bg-color,#000) 0,var(--line-accent-bg-color-2,#000) var(--line-accent-bg-location,50%))}.has-text-align-center-tablet{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-tablet{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-tablet{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-tablet{--stk-alignment-text-align:justify}.has-text-align-space-between-tablet{--stk-alignment-justify-content:space-between}.has-text-align-space-around-tablet{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-tablet{--stk-alignment-justify-content:space-evenly}}@media only screen and (max-width:767px){.stk-button-group:is(.stk--collapse-on-mobile)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block],.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.stk-block-carousel.stk--hide-mobile-arrows>.stk-block-carousel__content-wrapper>*>.stk-block-carousel__buttons,.stk-block-carousel.stk--hide-mobile-dots>.stk-block-carousel__content-wrapper>.stk-block-carousel__dots{display:none}:where(.has-text-align-left-mobile) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-mobile) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-mobile) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center-mobile{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-mobile{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-mobile{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block.stk-block-feature:is(.is-style-default,.is-style-horizontal)>.stk-container>.stk-inner-blocks.stk-block-content{flex-direction:column-reverse}.stk-block-posts{--stk-columns:1}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile){overflow-x:auto!important;width:100%}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile)::-webkit-scrollbar{height:0!important}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile) .stk-block-tab-labels__wrapper{flex-wrap:nowrap;min-width:-webkit-fill-available;min-width:fill-available;width:max-content}.stk-block-tabs>.stk-inner-blocks{grid-template-columns:1fr}.stk-block-tabs>.stk-inner-blocks>.stk-block-tab-labels:last-child{grid-row:1/2}.stk-block.stk-block-timeline{--content-line:0!important;padding-top:0}.stk-block-timeline>.stk-inner-blocks{align-items:flex-start;grid-template-columns:var(--line-dot-size,16px) 1fr;grid-template-rows:auto 1fr;padding-left:16px}.stk-block-timeline>.stk-inner-blocks:after{inset-inline-start:calc(var(--line-dot-size, 16px)/2 - var(--line-bg-width, 3px)/2 + 16px)}.stk-block-timeline .stk-block-timeline__middle{inset-block-start:8px;inset-inline-start:16px;position:absolute}.stk-block-timeline .stk-block-timeline__content{grid-column:2/3;grid-row:2/3;text-align:start}.stk-block-timeline .stk-block-timeline__date{grid-column:2/3;grid-row:1/2;text-align:start}.stk-block-timeline>.stk-inner-blocks:after{bottom:calc(100% - var(--line-dot-size, 16px)/2 - .5em);top:calc(var(--line-dot-size, 16px)/2 + .5em)}.stk-block-timeline+.stk-block-timeline>.stk-inner-blocks:after{top:-16px}.entry-content .stk-block.stk-has-top-separator{padding-top:23vw}.entry-content .stk-block.stk-has-bottom-separator{padding-bottom:23vw}.entry-content .stk-block .stk-separator__wrapper{height:23vw}:root{--stk-block-margin-bottom:16px;--stk-container-padding:24px 24px;--stk-container-padding-large:32px 24px;--stk-container-padding-small:8px 24px;--stk-column-margin:8px;--stk-block-background-padding:16px 16px}.stk-block .stk-block:is(.aligncenter,.alignwide),.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){width:100%}.stk-column{flex:1 1 100%;max-width:100%}.stk--hide-mobile,.stk--hide-mobile.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-mobile) .stk-block:is(.stk-block-button,.stk-block-icon-button),.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.has-text-align-center-mobile{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-mobile{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-mobile{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-mobile{--stk-alignment-text-align:justify}.has-text-align-space-between-mobile{--stk-alignment-justify-content:space-between}.has-text-align-space-around-mobile{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-mobile{--stk-alignment-justify-content:space-evenly}}#end-resizable-editor-section{display:none}
 STK_RESPONSIVE_CSS;
 	}
 }

From 3b0b73145d42835c671cbfc820331116be0c5360 Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Mon, 23 Sep 2024 16:30:47 +0800
Subject: [PATCH 05/18] fix: margin bottom is list because of the editor
 performance update

---
 src/styles/editor-block.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/editor-block.scss b/src/styles/editor-block.scss
index 839a7e2a8..4c22c81bc 100644
--- a/src/styles/editor-block.scss
+++ b/src/styles/editor-block.scss
@@ -239,7 +239,7 @@
 	}
 	// Last of type since there's a .block-list-appender
 	// If the block parent is locked, there will be no appender block and data-is-drop-zone will not be present.
-	&:is([data-is-drop-zone="true"]) > [data-block]:nth-last-child(2) {
+	&:is([data-is-drop-zone="true"]) > [data-block]:nth-last-child(1) {
 		margin-bottom: 0;
 		&[data-type^="stackable/"] > .stk-block {
 			margin-bottom: 0;

From d2c090b5ca8b8fb5161e32b3ccd4f61eb9e54c1d Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Fri, 27 Sep 2024 00:30:54 +0800
Subject: [PATCH 06/18] fix (stylesheets): fix for stylesheets not loading
 sometimes

---
 src/init.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/init.php b/src/init.php
index c77791c88..d2087157d 100644
--- a/src/init.php
+++ b/src/init.php
@@ -40,7 +40,7 @@ function __construct() {
 			}
 
 			// Checks if a Stackable block is rendered in the frontend, then loads our scripts.
-			if ( is_frontend() ) {
+			if ( ! is_admin() ) {
 				add_filter( 'render_block', array( $this, 'load_frontend_scripts_conditionally' ), 10, 2 );
 				add_action( 'template_redirect', array( $this, 'load_frontend_scripts_conditionally_head' ) );
 			}

From a8189594327318b5528644d0352c029d9a51dde3 Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Fri, 27 Sep 2024 01:50:49 +0800
Subject: [PATCH 07/18] fix (kses): only do this when the user can edit posts

---
 src/kses.php | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/kses.php b/src/kses.php
index 511a3217c..5a41c6b3b 100644
--- a/src/kses.php
+++ b/src/kses.php
@@ -26,6 +26,11 @@
  * @return array Modified HTML tags & attributes.
  */
 function stackable_allow_wp_kses_allowed_html( $tags, $context ) {
+	// Only allow these tags if the user can edit posts.
+	if ( ! current_user_can( 'edit_posts' ) ) {
+		return $tags;
+	}
+
     $tags['style'] = array(
         'id' => true,
         'class' => true,

From 0db61e21787bdcc742ac012c977892c2ee9958ee Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <98727316+mxkae@users.noreply.github.com>
Date: Fri, 27 Sep 2024 09:30:16 +0800
Subject: [PATCH 08/18] fix: column arrangement no longer taking effect (#3328)

---
 src/block/carousel/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/block/carousel/style.scss b/src/block/carousel/style.scss
index 3e3b08901..256fe1a41 100644
--- a/src/block/carousel/style.scss
+++ b/src/block/carousel/style.scss
@@ -22,7 +22,7 @@
 	&.stk--is-slide[data-slides-to-show="1"] {
 		--gap: 0px;
 	}
-	.stk-block-carousel__slider .stk-block-column {
+	.stk-block-carousel__slider > .stk-block-column {
 		// Reset column order of carousel inner columns in case carousel is in columns block.
 		order: initial;
 	}

From 74393bacea15c42ce9e3d279d10151250d477d44 Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <98727316+mxkae@users.noreply.github.com>
Date: Fri, 27 Sep 2024 09:31:06 +0800
Subject: [PATCH 09/18] fix (kses): add use tag (#3323)

---
 src/kses.php | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/kses.php b/src/kses.php
index 5a41c6b3b..bc3f295cf 100644
--- a/src/kses.php
+++ b/src/kses.php
@@ -83,6 +83,9 @@ function stackable_allow_wp_kses_allowed_html( $tags, $context ) {
     $tags['clippath'] = array();
     $tags['filter'] = array();
     $tags['g'] = array();
+	$tags['use'] = array(
+		'xlink:href' => true,
+	);
     $tags['text'] = array(
         'font-size' => true,
         'font-family' => true,

From 8a54d521d429d0b77b64bfdae5fd25f2ce17777d Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Fri, 27 Sep 2024 09:32:44 +0800
Subject: [PATCH 10/18] fix: spaces to tabs

---
 src/kses.php | 320 +++++++++++++++++++++++++--------------------------
 1 file changed, 160 insertions(+), 160 deletions(-)

diff --git a/src/kses.php b/src/kses.php
index bc3f295cf..90fffc7ba 100644
--- a/src/kses.php
+++ b/src/kses.php
@@ -10,172 +10,172 @@
 
 if ( ! function_exists( 'stackable_allow_wp_kses_allowed_html' ) ) {
 
-/**
- * Fix block saving for Non-Super-Admins (no unfiltered_html capability).
- * For Non-Super-Admins, some styles & HTML tags/attributes are removed upon saving,
- * this allows Stackable HTML tags & attributes from being saved.
- *
- * For every Stackable block, add the HTML tags and attributes used here.
- *
- * @see The list of tags & attributes currently allowed: https://core.trac.wordpress.org/browser/tags/5.2/src/wp-includes/kses.php#L61
- * @see https://github.com/gambitph/Stackable/issues/184
- *
- * @param array $tags Allowed HTML tags & attributes.
- * @param string $context The context wherein the HTML is being filtered.
- *
- * @return array Modified HTML tags & attributes.
- */
-function stackable_allow_wp_kses_allowed_html( $tags, $context ) {
-	// Only allow these tags if the user can edit posts.
-	if ( ! current_user_can( 'edit_posts' ) ) {
-		return $tags;
-	}
+	/**
+	 * Fix block saving for Non-Super-Admins (no unfiltered_html capability).
+	 * For Non-Super-Admins, some styles & HTML tags/attributes are removed upon saving,
+	 * this allows Stackable HTML tags & attributes from being saved.
+	 *
+	 * For every Stackable block, add the HTML tags and attributes used here.
+	 *
+	 * @see The list of tags & attributes currently allowed: https://core.trac.wordpress.org/browser/tags/5.2/src/wp-includes/kses.php#L61
+	 * @see https://github.com/gambitph/Stackable/issues/184
+	 *
+	 * @param array $tags Allowed HTML tags & attributes.
+	 * @param string $context The context wherein the HTML is being filtered.
+	 *
+	 * @return array Modified HTML tags & attributes.
+	 */
+	function stackable_allow_wp_kses_allowed_html( $tags, $context ) {
+		// Only allow these tags if the user can edit posts.
+		if ( ! current_user_can( 'edit_posts' ) ) {
+			return $tags;
+		}
 
-    $tags['style'] = array(
-        'id' => true,
-        'class' => true,
-        'type' => true,
-    );
+		$tags['style'] = array(
+			'id' => true,
+			'class' => true,
+			'type' => true,
+		);
 
-    // Used by Separators & Icons.
-    $tags['svg'] = array(
-        'viewbox' => true,
-        'filter' => true,
-        'enablebackground' => true,
-        'xmlns' => true,
-        'class' => true,
-        'preserveaspectratio' => true,
-        'aria-hidden' => true,
-        'data-*' => true,
-        'role' => true,
-        'height' => true,
-        'width' => true,
-        'style' => true,
-    );
-    $tags['path'] = array(
-        'd' => true,
-    );
-    $tags['circle'] = array(
-        'cx' => true,
-        'cy' => true,
-        'r' => true,
-    );
-    $tags['polygon'] = array(
-        'points' => true,
-    );
-    $tags['polyline'] = array(
-        'points' => true,
-    );
-    $tags['rect'] = array(
-        'x' => true,
-        'y' => true,
-        'width' => true,
-        'height' => true,
-        'rx' => true,
-        'ry' => true,
-    );
-    $tags['line'] = array(
-        'x1' => true,
-        'x2' => true,
-        'y1' => true,
-        'y2' => true,
-    );
-    $tags['clippath'] = array();
-    $tags['filter'] = array();
-    $tags['g'] = array();
-	$tags['use'] = array(
-		'xlink:href' => true,
-	);
-    $tags['text'] = array(
-        'font-size' => true,
-        'font-family' => true,
-        'font-weight' => true,
-        'font-*' => true,
-    );
-    $tags['fegaussianblur'] = array(
-        'in' => true,
-        'stddeviation' => true,
-    );
-    $tags['fecomponenttransfer'] = array();
-    $tags['fefunca'] = array(
-        'type' => true,
-        'slope' => true,
-    );
-    $tags['femerge'] = array();
-    $tags['femergenode'] = array(
-        'in' => true,
-    );
-    // SVG gradients.
-    $tags['defs'] = array();
-    $tags['stop'] = array(
-        'offset' => true,
-        'style' => true,
-        'stop-color' => true,
-        'stop-opacity' => true,
-    );
-    $tags['lineargradient'] = array( // Intentionally made this lowercase since tags do not recognize caps.
-        'id' => true,
-        'x1' => true,
-        'x2' => true,
-        'y1' => true,
-        'y2' => true,
-        'gradientunits' => true,
-        'gradienttransform' => true,
-    );
+		// Used by Separators & Icons.
+		$tags['svg'] = array(
+			'viewbox' => true,
+			'filter' => true,
+			'enablebackground' => true,
+			'xmlns' => true,
+			'class' => true,
+			'preserveaspectratio' => true,
+			'aria-hidden' => true,
+			'data-*' => true,
+			'role' => true,
+			'height' => true,
+			'width' => true,
+			'style' => true,
+		);
+		$tags['path'] = array(
+			'd' => true,
+		);
+		$tags['circle'] = array(
+			'cx' => true,
+			'cy' => true,
+			'r' => true,
+		);
+		$tags['polygon'] = array(
+			'points' => true,
+		);
+		$tags['polyline'] = array(
+			'points' => true,
+		);
+		$tags['rect'] = array(
+			'x' => true,
+			'y' => true,
+			'width' => true,
+			'height' => true,
+			'rx' => true,
+			'ry' => true,
+		);
+		$tags['line'] = array(
+			'x1' => true,
+			'x2' => true,
+			'y1' => true,
+			'y2' => true,
+		);
+		$tags['clippath'] = array();
+		$tags['filter'] = array();
+		$tags['g'] = array();
+		$tags['use'] = array(
+			'xlink:href' => true,
+		);
+		$tags['text'] = array(
+			'font-size' => true,
+			'font-family' => true,
+			'font-weight' => true,
+			'font-*' => true,
+		);
+		$tags['fegaussianblur'] = array(
+			'in' => true,
+			'stddeviation' => true,
+		);
+		$tags['fecomponenttransfer'] = array();
+		$tags['fefunca'] = array(
+			'type' => true,
+			'slope' => true,
+		);
+		$tags['femerge'] = array();
+		$tags['femergenode'] = array(
+			'in' => true,
+		);
+		// SVG gradients.
+		$tags['defs'] = array();
+		$tags['stop'] = array(
+			'offset' => true,
+			'style' => true,
+			'stop-color' => true,
+			'stop-opacity' => true,
+		);
+		$tags['lineargradient'] = array( // Intentionally made this lowercase since tags do not recognize caps.
+			'id' => true,
+			'x1' => true,
+			'x2' => true,
+			'y1' => true,
+			'y2' => true,
+			'gradientunits' => true,
+			'gradienttransform' => true,
+		);
 
-    // Used by posts block.
-    $tags['time'] = array(
-        'datetime' => true,
-    );
+		// Used by posts block.
+		$tags['time'] = array(
+			'datetime' => true,
+		);
 
-    _stackable_svg_attributes( $tags, 'path' );
-    _stackable_svg_attributes( $tags, 'circle' );
-    _stackable_svg_attributes( $tags, 'polygon' );
-    _stackable_svg_attributes( $tags, 'polyline' );
-    _stackable_svg_attributes( $tags, 'line' );
-    _stackable_svg_attributes( $tags, 'rect' );
-    _stackable_svg_attributes( $tags, 'g' );
-    _stackable_svg_attributes( $tags, 'clippath' );
-    _stackable_svg_attributes( $tags, 'filter' );
-    _stackable_svg_attributes( $tags, 'text' );
+		_stackable_svg_attributes( $tags, 'path' );
+		_stackable_svg_attributes( $tags, 'circle' );
+		_stackable_svg_attributes( $tags, 'polygon' );
+		_stackable_svg_attributes( $tags, 'polyline' );
+		_stackable_svg_attributes( $tags, 'line' );
+		_stackable_svg_attributes( $tags, 'rect' );
+		_stackable_svg_attributes( $tags, 'g' );
+		_stackable_svg_attributes( $tags, 'clippath' );
+		_stackable_svg_attributes( $tags, 'filter' );
+		_stackable_svg_attributes( $tags, 'text' );
 
-    _stackable_common_attributes( $tags, 'div' );
-    _stackable_common_attributes( $tags, 'h1' );
-    _stackable_common_attributes( $tags, 'h2' );
-    _stackable_common_attributes( $tags, 'h3' );
-    _stackable_common_attributes( $tags, 'h4' );
-    _stackable_common_attributes( $tags, 'h5' );
-    _stackable_common_attributes( $tags, 'h6' );
-    _stackable_common_attributes( $tags, 'svg' );
+		_stackable_common_attributes( $tags, 'div' );
+		_stackable_common_attributes( $tags, 'h1' );
+		_stackable_common_attributes( $tags, 'h2' );
+		_stackable_common_attributes( $tags, 'h3' );
+		_stackable_common_attributes( $tags, 'h4' );
+		_stackable_common_attributes( $tags, 'h5' );
+		_stackable_common_attributes( $tags, 'h6' );
+		_stackable_common_attributes( $tags, 'svg' );
 
-    return $tags;
-}
+		return $tags;
+	}
 
-function _stackable_svg_attributes( &$tags, $tag ) {
-    $tags[ $tag ]['id'] = true;
-    $tags[ $tag ]['class'] = true;
-    $tags[ $tag ]['style'] = true;
-    $tags[ $tag ]['fill'] = true;
-    $tags[ $tag ]['fill-rule'] = true;
-    $tags[ $tag ]['fill-opacity'] = true;
-    $tags[ $tag ]['fill-*'] = true;
-    $tags[ $tag ]['clip-path'] = true;
-    $tags[ $tag ]['transform'] = true;
-    $tags[ $tag ]['stroke'] = true;
-    $tags[ $tag ]['stroke-width'] = true;
-    $tags[ $tag ]['stroke-linejoin'] = true;
-    $tags[ $tag ]['stroke-miterlimit'] = true;
-    $tags[ $tag ]['stroke-*'] = true;
-    $tags[ $tag ]['opacity'] = true;
-}
+	function _stackable_svg_attributes( &$tags, $tag ) {
+		$tags[ $tag ]['id'] = true;
+		$tags[ $tag ]['class'] = true;
+		$tags[ $tag ]['style'] = true;
+		$tags[ $tag ]['fill'] = true;
+		$tags[ $tag ]['fill-rule'] = true;
+		$tags[ $tag ]['fill-opacity'] = true;
+		$tags[ $tag ]['fill-*'] = true;
+		$tags[ $tag ]['clip-path'] = true;
+		$tags[ $tag ]['transform'] = true;
+		$tags[ $tag ]['stroke'] = true;
+		$tags[ $tag ]['stroke-width'] = true;
+		$tags[ $tag ]['stroke-linejoin'] = true;
+		$tags[ $tag ]['stroke-miterlimit'] = true;
+		$tags[ $tag ]['stroke-*'] = true;
+		$tags[ $tag ]['opacity'] = true;
+	}
 
-function _stackable_common_attributes( &$tags, $tag ) {
-    $tags[ $tag ]['aria-hidden'] = true; // Used by Separators & Icons
-    $tags[ $tag ]['aria-expanded'] = true; // Used by Expand block.
-    $tags[ $tag ]['aria-level'] = true; // Used by Accordion block.
-    $tags[ $tag ]['role'] = true; // Used by Accordion block.
-    $tags[ $tag ]['tabindex'] = true; // Used by Accordion block.
-}
+	function _stackable_common_attributes( &$tags, $tag ) {
+		$tags[ $tag ]['aria-hidden'] = true; // Used by Separators & Icons
+		$tags[ $tag ]['aria-expanded'] = true; // Used by Expand block.
+		$tags[ $tag ]['aria-level'] = true; // Used by Accordion block.
+		$tags[ $tag ]['role'] = true; // Used by Accordion block.
+		$tags[ $tag ]['tabindex'] = true; // Used by Accordion block.
+	}
 
-add_filter( 'wp_kses_allowed_html', 'stackable_allow_wp_kses_allowed_html', 10, 2 );
-}
\ No newline at end of file
+	add_filter( 'wp_kses_allowed_html', 'stackable_allow_wp_kses_allowed_html', 10, 2 );
+}

From 63be543b2e96ca4eea55a1ef6a52984605b41c4a Mon Sep 17 00:00:00 2001
From: Benjamin Intal <bfintal@gmail.com>
Date: Fri, 27 Sep 2024 16:44:00 +0800
Subject: [PATCH 11/18] fix (global colors): re-include color as fallback
 (#3331)

fixes #3329

Co-authored-by: bfintal@gmail.com <>
---
 src/plugins/global-settings/colors/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/global-settings/colors/index.js b/src/plugins/global-settings/colors/index.js
index 2b51a5378..938cd22e1 100644
--- a/src/plugins/global-settings/colors/index.js
+++ b/src/plugins/global-settings/colors/index.js
@@ -144,7 +144,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-colors', out
 // Convert hex colors to global colors in Stackable blocks.
 addFilter( 'stackable.color-palette-control.change', 'stackable/global-colors', ( value, colorObject ) => {
 	if ( colorObject && colorObject.slug.includes( 'stk-global-color' ) ) {
-		return `var(--${ colorObject.slug })`
+		return `var(--${ colorObject.slug }, ${ colorObject.color })`
 	}
 
 	return value

From 867c34a009b19df3930757e8d856bce68e5d6670 Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Fri, 27 Sep 2024 16:52:01 +0800
Subject: [PATCH 12/18] chore: version bump to 3.13.7

---
 .../stackable-ultimate-gutenberg-blocks.pot   | 5906 ++++++++---------
 package.json                                  |    2 +-
 plugin.php                                    |    4 +-
 readme.txt                                    |    9 +-
 .../font-family-control/google-fonts.json     |   26 +
 src/dynamic-breakpoints.php                   |    2 +-
 6 files changed, 2991 insertions(+), 2958 deletions(-)

diff --git a/languages/stackable-ultimate-gutenberg-blocks.pot b/languages/stackable-ultimate-gutenberg-blocks.pot
index b5be82b7c..fe681de42 100644
--- a/languages/stackable-ultimate-gutenberg-blocks.pot
+++ b/languages/stackable-ultimate-gutenberg-blocks.pot
@@ -2,14 +2,14 @@
 # This file is distributed under the same license as the Stackable - Gutenberg Blocks plugin.
 msgid ""
 msgstr ""
-"Project-Id-Version: Stackable - Gutenberg Blocks 3.13.6\n"
+"Project-Id-Version: Stackable - Gutenberg Blocks 3.13.7\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/stackable-ultimate-gutenberg-blocks\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2024-09-23T08:00:48+00:00\n"
+"POT-Creation-Date: 2024-09-27T08:48:16+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.5.0\n"
 
@@ -34,58 +34,74 @@ msgid "http://gambit.ph"
 msgstr ""
 
 #: dist/translation-strings.php:9
+#: src/welcome/index.php:29
+#: src/welcome/index.php:30
+#: src/welcome/index.php:161
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Stackable"
+msgstr ""
+
+#: dist/translation-strings.php:10
+msgid "Description for this block. You can use this space for describing your block."
+msgstr ""
+
+#: dist/translation-strings.php:11
+msgid "Description for this block. Use this space for describing your block. Any text will do."
+msgstr ""
+
+#: dist/translation-strings.php:12
 #: dist/admin_welcome.js:2
 msgid "Essential Blocks"
 msgstr ""
 
-#: dist/translation-strings.php:10
+#: dist/translation-strings.php:13
 #: dist/admin_welcome.js:2
 msgid "All the necessary building blocks you need to design anything."
 msgstr ""
 
-#: dist/translation-strings.php:11
+#: dist/translation-strings.php:14
 #: dist/admin_welcome.js:2
 msgid "Special Blocks"
 msgstr ""
 
-#: dist/translation-strings.php:12
+#: dist/translation-strings.php:15
 #: dist/admin_welcome.js:2
 msgid "Blocks with special functionality that will allow you to create distinctive designs."
 msgstr ""
 
-#: dist/translation-strings.php:13
+#: dist/translation-strings.php:16
 #: dist/admin_welcome.js:2
 msgid "Section Blocks"
 msgstr ""
 
-#: dist/translation-strings.php:14
+#: dist/translation-strings.php:17
 #: dist/admin_welcome.js:2
 msgid "Use these blocks act as templates to help you build sections effortlessly."
 msgstr ""
 
-#: dist/translation-strings.php:15
+#: dist/translation-strings.php:18
 #: dist/admin_welcome.js:2
 msgid "See example"
 msgstr ""
 
-#: dist/translation-strings.php:16
+#: dist/translation-strings.php:19
 #: dist/admin_welcome.js:2
 #: dist/deprecated/admin_welcome_v2.js:2
 msgid "Enable All"
 msgstr ""
 
-#: dist/translation-strings.php:17
+#: dist/translation-strings.php:20
 #: dist/admin_welcome.js:2
 #: dist/deprecated/admin_welcome_v2.js:2
 msgid "Disable All"
 msgstr ""
 
-#: dist/translation-strings.php:18
+#: dist/translation-strings.php:21
 #: dist/admin_welcome.js:2
 msgid "view demo"
 msgstr ""
 
-#: dist/translation-strings.php:19
+#: dist/translation-strings.php:22
 #: dist/admin_welcome.js:2
 #: dist/admin_welcome__premium_only.js:2
 #: dist/deprecated/admin_welcome_v2.js:2
@@ -93,7 +109,7 @@ msgstr ""
 msgid "Disabled"
 msgstr ""
 
-#: dist/translation-strings.php:20
+#: dist/translation-strings.php:23
 #: dist/admin_welcome.js:2
 #: dist/admin_welcome__premium_only.js:2
 #: dist/deprecated/admin_welcome_v2.js:2
@@ -101,12 +117,12 @@ msgstr ""
 msgid "Enabled"
 msgstr ""
 
-#: dist/translation-strings.php:21
+#: dist/translation-strings.php:24
 #: dist/admin_welcome.js:2
 msgid "Error getting Stackable settings. We got the following error. Please contact your administrator."
 msgstr ""
 
-#: dist/translation-strings.php:22
+#: dist/translation-strings.php:25
 #: src/stk-block-types.php:267
 #: dist/admin_welcome.js:2
 #: dist/editor_blocks.js:2
@@ -114,5404 +130,5388 @@ msgstr ""
 msgid "Design Library"
 msgstr ""
 
-#: dist/translation-strings.php:23
+#: dist/translation-strings.php:26
 #: dist/admin_welcome.js:2
 msgid "Adds a button on the top of the editor which gives access to a collection of pre-made block designs."
 msgstr ""
 
-#: dist/translation-strings.php:24
+#: dist/translation-strings.php:27
 #: dist/admin_welcome.js:2
 msgid "Optimize Inline CSS"
 msgstr ""
 
-#: dist/translation-strings.php:25
+#: dist/translation-strings.php:28
 #: dist/admin_welcome.js:2
 msgid "Optimize inlined CSS styles. If this is enabled, similar selectors will be combined together, helpful if you changed Block Defaults."
 msgstr ""
 
-#: dist/translation-strings.php:26
+#: dist/translation-strings.php:29
 #: dist/admin_welcome.js:2
 msgid "Auto-Collapse Panels"
 msgstr ""
 
-#: dist/translation-strings.php:27
+#: dist/translation-strings.php:30
 #: src/editor-settings.php:116
 #: dist/admin_welcome.js:2
 msgid "Collapse other inspector panels when opening another, keeping only one open at a time."
 msgstr ""
 
-#: dist/translation-strings.php:28
+#: dist/translation-strings.php:31
 #: dist/admin_welcome.js:2
 msgid "Block Linking (Beta)"
 msgstr ""
 
-#: dist/translation-strings.php:29
+#: dist/translation-strings.php:32
 #: src/editor-settings.php:128
 #: dist/admin_welcome.js:2
 msgid "Gives you the ability to link columns. Any changes you make on one column will automatically get applied on the other columns."
 msgstr ""
 
-#: dist/translation-strings.php:30
+#: dist/translation-strings.php:33
 #: src/welcome/index.php:217
 #: src/welcome/index.php:220
 #: dist/admin_welcome.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:219
+#: dist/translation-strings.js:240
 msgid "Learn more"
 msgstr ""
 
-#: dist/translation-strings.php:31
+#: dist/translation-strings.php:34
 #: dist/admin_welcome.js:2
 msgid "Nested Block Width"
 msgstr ""
 
-#: dist/translation-strings.php:32
+#: dist/translation-strings.php:35
 #: dist/admin_welcome.js:2
 msgid "The width used when a Columns block has its Content Width set to center. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula."
 msgstr ""
 
-#: dist/translation-strings.php:33
+#: dist/translation-strings.php:36
 #: dist/admin_welcome.js:2
 msgid "Nested Wide Block Width"
 msgstr ""
 
-#: dist/translation-strings.php:34
+#: dist/translation-strings.php:37
 #: dist/admin_welcome.js:2
 msgid "The width used when a Columns block has its Content Width set to wide. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula."
 msgstr ""
 
-#: dist/translation-strings.php:35
+#: dist/translation-strings.php:38
 #: dist/admin_welcome.js:2
 msgid "Google Maps API Key"
 msgstr ""
 
-#: dist/translation-strings.php:36
+#: dist/translation-strings.php:39
 #: dist/admin_welcome.js:2
 msgid "Lazy Load Images within Carousels"
 msgstr ""
 
-#: dist/translation-strings.php:37
+#: dist/translation-strings.php:40
 #: dist/admin_welcome.js:2
 msgid "Disable this if you encounter layout or spacing issues when using images inside carousel-type blocks because of image lazy loading."
 msgstr ""
 
-#: dist/translation-strings.php:38
+#: dist/translation-strings.php:41
 #: dist/admin_welcome.js:2
 msgid "Stackable Text as Default Block"
 msgstr ""
 
-#: dist/translation-strings.php:39
+#: dist/translation-strings.php:42
 #: dist/admin_welcome.js:2
 msgid "If enabled, Stackable Text blocks will be added by default instead of the native Paragraph Block."
 msgstr ""
 
-#: dist/translation-strings.php:40
+#: dist/translation-strings.php:43
 #: dist/admin_welcome.js:2
 msgid "Tablet Breakpoint"
 msgstr ""
 
-#: dist/translation-strings.php:41
+#: dist/translation-strings.php:44
 #: dist/admin_welcome.js:2
 msgid "Mobile Breakpoint"
 msgstr ""
 
-#: dist/translation-strings.php:42
+#: dist/translation-strings.php:45
 #: dist/admin_welcome.js:2
 msgid "Force Typography Styles"
 msgstr ""
 
-#: dist/translation-strings.php:43
+#: dist/translation-strings.php:46
 #: dist/admin_welcome.js:2
 msgid "Not forced"
 msgstr ""
 
-#: dist/translation-strings.php:44
+#: dist/translation-strings.php:47
 #: dist/admin_welcome.js:2
 msgid "Force styles"
 msgstr ""
 
-#: dist/translation-strings.php:45
+#: dist/translation-strings.php:48
 #: dist/admin_welcome.js:2
 msgid "FontAwesome Icon Library Version"
 msgstr ""
 
-#: dist/translation-strings.php:46
+#: dist/translation-strings.php:49
 #: dist/admin_welcome.js:2
 msgid "You are using the version set in your Font Awesome Pro Kit."
 msgstr ""
 
-#: dist/translation-strings.php:47
+#: dist/translation-strings.php:50
 #: dist/admin_welcome.js:2
 msgid "Show \"Go premium\" notices"
 msgstr ""
 
-#: dist/translation-strings.php:48
+#: dist/translation-strings.php:51
 #: dist/admin_welcome.js:2
 msgid "Don't show help video tooltips"
 msgstr ""
 
-#: dist/translation-strings.php:49
+#: dist/translation-strings.php:52
 #: dist/admin_welcome.js:2
 msgid "Generate Global Colors for native blocks"
 msgstr ""
 
-#: dist/translation-strings.php:50
+#: dist/translation-strings.php:53
 #: dist/admin_welcome.js:2
 msgid "🏠 Migration Settings"
 msgstr ""
 
-#: dist/translation-strings.php:51
+#: dist/translation-strings.php:54
 #: dist/admin_welcome.js:2
 msgid "Migrating from version 2 to version 3?"
 msgstr ""
 
-#: dist/translation-strings.php:52
+#: dist/translation-strings.php:55
 #: dist/admin_welcome.js:2
 msgid "Learn more about migration and the settings below"
 msgstr ""
 
-#: dist/translation-strings.php:53
+#: dist/translation-strings.php:56
 #: src/deprecated/v2/init.php:72
 #: dist/admin_welcome.js:2
 msgid "Load version 2 blocks in the editor"
 msgstr ""
 
-#: dist/translation-strings.php:54
+#: dist/translation-strings.php:57
 #: dist/admin_welcome.js:2
 msgid "Load version 2 blocks in the editor only when the page was using version 2 blocks"
 msgstr ""
 
-#: dist/translation-strings.php:55
+#: dist/translation-strings.php:58
 #: dist/admin_welcome.js:2
 msgid "Load version 2 frontend block stylesheet and scripts for backward compatibility"
 msgstr ""
 
-#: dist/translation-strings.php:56
+#: dist/translation-strings.php:59
 #: dist/admin_welcome.js:2
 msgid "Tutorials"
 msgstr ""
 
-#: dist/translation-strings.php:57
+#: dist/translation-strings.php:60
 #: dist/admin_welcome.js:2
 msgid "Get to know the plugin and start your journey with our brand new Stackable Courses."
 msgstr ""
 
-#: dist/translation-strings.php:58
+#: dist/translation-strings.php:61
 #: src/welcome/index.php:137
 #: dist/admin_welcome.js:2
 msgid "Documentation"
 msgstr ""
 
-#: dist/translation-strings.php:59
+#: dist/translation-strings.php:62
 #: dist/admin_welcome.js:2
 msgid "Visit our knowledge base for troubleshooting, guides, FAQs and updates."
 msgstr ""
 
-#: dist/translation-strings.php:60
+#: dist/translation-strings.php:63
 #: dist/admin_welcome.js:2
 msgid "Community"
 msgstr ""
 
-#: dist/translation-strings.php:61
+#: dist/translation-strings.php:64
 #: dist/admin_welcome.js:2
 msgid "Join our very active Stackable Community on Facebook."
 msgstr ""
 
-#: dist/translation-strings.php:62
+#: dist/translation-strings.php:65
 #: dist/admin_welcome.js:2
 msgid "The Basics of Stackable Blocks"
 msgstr ""
 
-#: dist/translation-strings.php:63
+#: dist/translation-strings.php:66
 #: dist/admin_welcome.js:2
 msgid "Learn how to personalize and tailor Stackable Blocks to match your website's unique style and design."
 msgstr ""
 
-#: dist/translation-strings.php:64
+#: dist/translation-strings.php:67
 #: dist/admin_welcome.js:2
 msgid "Flexbox Controls"
 msgstr ""
 
-#: dist/translation-strings.php:65
+#: dist/translation-strings.php:68
 #: dist/admin_welcome.js:2
 msgid "Explore the powerful Flexbox controls in Stackable that allow you to effortlessly create dynamic and responsive layouts."
 msgstr ""
 
-#: dist/translation-strings.php:66
+#: dist/translation-strings.php:69
 #: dist/admin_welcome.js:2
 msgid "Introduction to Hover Styles"
 msgstr ""
 
-#: dist/translation-strings.php:67
+#: dist/translation-strings.php:70
 #: dist/admin_welcome.js:2
 msgid "Discover the exciting world of hover styles in Stackable and learn how to add interactive and engaging effects to your website."
 msgstr ""
 
-#: dist/translation-strings.php:68
+#: dist/translation-strings.php:71
 #: dist/admin_welcome.js:2
 msgid "How to Use Image Settings"
 msgstr ""
 
-#: dist/translation-strings.php:69
+#: dist/translation-strings.php:72
 #: dist/admin_welcome.js:2
 msgid "Master the art of optimizing and enhancing images using Stackable's intuitive image settings for a visually captivating website."
 msgstr ""
 
-#: dist/translation-strings.php:70
+#: dist/translation-strings.php:73
 #: dist/admin_welcome.js:2
 msgid "Introduction to the Design Library"
 msgstr ""
 
-#: dist/translation-strings.php:71
+#: dist/translation-strings.php:74
 #: dist/admin_welcome.js:2
 msgid "Dive into the fundamentals of the Stackable Design Library and learn how to streamline your website development process with ease."
 msgstr ""
 
-#: dist/translation-strings.php:72
+#: dist/translation-strings.php:75
 #: dist/admin_welcome.js:2
 msgid "All About Typography in Stackable"
 msgstr ""
 
-#: dist/translation-strings.php:73
+#: dist/translation-strings.php:76
 #: dist/admin_welcome.js:2
 msgid "Unlock the full potential of typography in Stackable and gain insights on how to create visually stunning and impactful text designs."
 msgstr ""
 
-#: dist/translation-strings.php:74
+#: dist/translation-strings.php:77
 #: dist/admin_welcome.js:2
 msgid "Unleash the Full Potential of the WordPress Block Editor by Turning It into a Page Builder"
 msgstr ""
 
-#: dist/translation-strings.php:75
+#: dist/translation-strings.php:78
 #: dist/admin_welcome.js:2
 msgid "Learn the essentials in just a few minutes by watching this video. Scroll down to see more quick tutorials."
 msgstr ""
 
-#: dist/translation-strings.php:76
+#: dist/translation-strings.php:79
 #: src/welcome/index.php:114
 #: dist/admin_welcome.js:2
 msgid "Getting Started"
 msgstr ""
 
-#: dist/translation-strings.php:77
+#: dist/translation-strings.php:80
 #: dist/admin_welcome.js:2
 msgid "Create a new page"
 msgstr ""
 
-#: dist/translation-strings.php:78
+#: dist/translation-strings.php:81
 #: dist/admin_welcome.js:2
 msgid "Learn the essentials"
 msgstr ""
 
-#: dist/translation-strings.php:79
+#: dist/translation-strings.php:82
 #: dist/admin_welcome.js:2
 msgid "Check out our library of tutorials and guides"
 msgstr ""
 
-#: dist/translation-strings.php:80
+#: dist/translation-strings.php:83
 #: dist/admin_welcome.js:2
 msgid "Go to Stackable Learn"
 msgstr ""
 
-#: dist/translation-strings.php:81
-#: src/welcome/index.php:29
-#: src/welcome/index.php:30
-#: src/welcome/index.php:161
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Stackable"
-msgstr ""
-
-#: dist/translation-strings.php:82
-msgid "Description for this block. You can use this space for describing your block."
-msgstr ""
-
-#: dist/translation-strings.php:83
-msgid "Description for this block. Use this space for describing your block. Any text will do."
-msgstr ""
-
 #: dist/translation-strings.php:84
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:271
-msgid "Remove"
+#: dist/editor_blocks.js:2
+msgid "Quotation Mark Icons"
 msgstr ""
 
 #: dist/translation-strings.php:85
-msgid "#%s (no title)"
+#: dist/editor_blocks.js:2
+msgid "Pick another icon"
 msgstr ""
 
 #: dist/translation-strings.php:86
-msgid "No posts found"
+#: dist/editor_blocks.js:2
+msgid "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."
 msgstr ""
 
 #: dist/translation-strings.php:87
-msgid "Pick a post"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Round Thin"
 msgstr ""
 
 #: dist/translation-strings.php:88
-msgid "No matches found"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Round"
 msgstr ""
 
 #: dist/translation-strings.php:89
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:60
-msgid "Reset"
+#: dist/editor_blocks.js:2
+msgid "Round Thick"
 msgstr ""
 
 #: dist/translation-strings.php:90
-msgid "Align Left"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Round Fat"
 msgstr ""
 
 #: dist/translation-strings.php:91
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Align Center"
+#: dist/editor_blocks.js:2
+msgid "Square Thin"
 msgstr ""
 
 #: dist/translation-strings.php:92
-msgid "Align Right"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Square"
 msgstr ""
 
 #: dist/translation-strings.php:93
-msgid "Justified"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Square Simple"
 msgstr ""
 
 #: dist/translation-strings.php:94
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:394
-msgid "Align"
+msgid "Square Modern"
 msgstr ""
 
 #: dist/translation-strings.php:95
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Start"
+#: dist/editor_blocks.js:2
+msgid "Square Fat"
 msgstr ""
 
 #: dist/translation-strings.php:96
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Center"
+#: dist/editor_blocks.js:2
+msgctxt "Block layout name"
+msgid "%s Layout"
 msgstr ""
 
 #: dist/translation-strings.php:97
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "End"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:246
+msgid "Default"
 msgstr ""
 
 #: dist/translation-strings.php:98
-msgid "Space Between"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:133
+msgctxt "Content placeholder"
+msgid "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."
 msgstr ""
 
 #: dist/translation-strings.php:99
-msgid "Space Around"
+#: dist/editor_blocks.js:2
+msgid "Simple"
 msgstr ""
 
 #: dist/translation-strings.php:100
-msgid "Space Evenly"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Highlighted"
 msgstr ""
 
 #: dist/translation-strings.php:101
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Stretch"
+#: dist/editor_blocks.js:2
+msgid "Huge"
 msgstr ""
 
 #: dist/translation-strings.php:102
-msgid "Baseline"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Centered Quote"
 msgstr ""
 
 #: dist/translation-strings.php:103
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:415
-msgid "Left"
+msgid "Horizontal"
 msgstr ""
 
 #: dist/translation-strings.php:104
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:416
-msgid "Right"
+msgid "Vertical"
 msgstr ""
 
 #: dist/translation-strings.php:105
 #: dist/editor_blocks.js:2
-msgid "Top"
+msgid "%s Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:106
 #: dist/editor_blocks.js:2
-msgid "Bottom"
+msgid "Content"
 msgstr ""
 
 #: dist/translation-strings.php:107
-msgid "Unit"
+#: src/stk-block-types.php:51
+#: src/stk-block-types.php:96
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:464
+msgid "Button"
 msgstr ""
 
 #: dist/translation-strings.php:108
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:74
-msgid "None"
+msgid "Full Width Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:109
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:188
-msgid "Normal"
+msgid "Flex Wrap"
 msgstr ""
 
 #: dist/translation-strings.php:110
-msgid "Multiply"
+#: dist/editor_blocks.js:2
+msgid "No Wrap"
 msgstr ""
 
 #: dist/translation-strings.php:111
-msgid "Screen"
+#: dist/editor_blocks.js:2
+msgid "Wrap"
 msgstr ""
 
 #: dist/translation-strings.php:112
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay"
+#: dist/editor_blocks.js:2
+msgid "Wrap Reverse"
 msgstr ""
 
 #: dist/translation-strings.php:113
-msgid "Darken"
+#: dist/editor_blocks.js:2
+msgid "Button Text"
 msgstr ""
 
 #: dist/translation-strings.php:114
-msgid "Lighten"
+#: src/stk-block-types.php:88
+#: src/stk-block-types.php:462
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:463
+msgid "Icon Button"
 msgstr ""
 
 #: dist/translation-strings.php:115
-msgid "Color Dodge"
+#: src/stk-block-types.php:104
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:465
+msgid "Social Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:116
-msgid "Color Burn"
+#: src/stk-block-types.php:105
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:466
+msgid "Add social buttons."
 msgstr ""
 
 #: dist/translation-strings.php:117
-msgid "Hard Light"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Ghost"
 msgstr ""
 
 #: dist/translation-strings.php:118
-msgid "Soft Light"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Plain"
 msgstr ""
 
 #: dist/translation-strings.php:119
-msgid "Difference"
+#: src/stk-block-types.php:64
+#: src/stk-block-types.php:83
+#: src/stk-block-types.php:475
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:462
+msgid "Link"
 msgstr ""
 
 #: dist/translation-strings.php:120
-msgid "Exclusion"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Button text"
 msgstr ""
 
 #: dist/translation-strings.php:121
-msgid "Hue"
+#: dist/editor_blocks.js:2
+msgid "Call to action"
 msgstr ""
 
 #: dist/translation-strings.php:122
-msgid "Saturation"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:140
+msgid "General"
 msgstr ""
 
 #: dist/translation-strings.php:123
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:224
-msgid "Color"
+msgid "Open at the start"
 msgstr ""
 
 #: dist/translation-strings.php:124
-msgid "Luminosity"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Close adjacent on open"
 msgstr ""
 
 #: dist/translation-strings.php:125
-msgid "Initial"
+#: dist/editor_blocks.js:2
+msgid "Automatically closes adjacent accordion panels when clicked."
 msgstr ""
 
 #: dist/translation-strings.php:126
-msgid "Inherit"
+#: dist/editor_blocks.js:2
+msgid "Enable FAQ Schema"
 msgstr ""
 
 #: dist/translation-strings.php:127
-msgid "Unset"
+#: dist/editor_blocks.js:2
+msgid "Open Icon"
 msgstr ""
 
 #: dist/translation-strings.php:128
-msgid "Mix Blend Mode"
+#: dist/editor_blocks.js:2
+msgid "The open icon will appear when the accordion is opened"
 msgstr ""
 
 #: dist/translation-strings.php:129
-msgid "Normal State"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Title for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:130
-msgid "Hovered State"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:134
+msgctxt "Heading placeholder"
+msgid "Title for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:131
-msgid "Parent Hovered State"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:433
+msgid "Shadow"
 msgstr ""
 
 #: dist/translation-strings.php:132
-msgid "Collapsed"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Colored"
 msgstr ""
 
 #: dist/translation-strings.php:133
-msgid "Parent Hovered"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Plus"
 msgstr ""
 
 #: dist/translation-strings.php:134
-msgid "Add a Container Background to a parent block to enable this state."
+#: dist/editor_blocks.js:2
+msgid "Horizontal 2"
 msgstr ""
 
 #: dist/translation-strings.php:135
 #: dist/editor_blocks.js:2
-msgid "Borders"
+msgid "Horizontal 3"
 msgstr ""
 
 #: dist/translation-strings.php:136
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Solid"
+msgid "Split Centered"
 msgstr ""
 
 #: dist/translation-strings.php:137
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Dashed"
+msgid "Subtitle for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:138
 #: dist/editor_blocks.js:2
-msgid "Dotted"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:135
+msgctxt "Subtitle placeholder"
+msgid "Subtitle for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:139
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Border Width"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:136
+msgctxt "Button placeholder"
+msgid "Button"
 msgstr ""
 
 #: dist/translation-strings.php:140
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Border Color"
+msgid "Default 2"
 msgstr ""
 
 #: dist/translation-strings.php:141
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Edit"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:317
+msgid "Full"
 msgstr ""
 
 #: dist/translation-strings.php:142
-msgid "Global Gradients"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Faded"
 msgstr ""
 
 #: dist/translation-strings.php:143
 #: dist/editor_blocks.js:2
-msgid "Global Colors"
+msgid "Column Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:144
-msgid "Add Column"
+#: dist/editor_blocks.js:2
+msgid "Sets the paddings between the column content and the border."
 msgstr ""
 
 #: dist/translation-strings.php:145
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Column Widths"
+#: dist/editor_blocks.js:2
+msgid "Align Last Block to Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:146
-msgid "Adjust the individual widths of each column"
+#: dist/editor_blocks.js:2
+msgid "Slides"
 msgstr ""
 
 #: dist/translation-strings.php:147
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Custom Attributes"
+#: dist/editor_blocks.js:2
+msgid "Carousel Type"
 msgstr ""
 
 #: dist/translation-strings.php:148
-msgid "You can type in custom HTML attributes for this block in the field above."
+#: dist/editor_blocks.js:2
+msgid "Slide"
 msgstr ""
 
 #: dist/translation-strings.php:149
-msgid "Example:"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Fade"
 msgstr ""
 
 #: dist/translation-strings.php:150
-msgid "Learn more about Custom Attributes"
+#: dist/editor_blocks.js:2
+msgid "Infinite Scrolling"
 msgstr ""
 
 #: dist/translation-strings.php:151
-msgid "There is an error in your custom attribute"
+#: dist/editor_blocks.js:2
+msgid "Only visible in the frontend."
 msgstr ""
 
 #: dist/translation-strings.php:152
-#: dist/translation-strings.php:1695
-#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:160
-#: src/welcome/index.php:211
-#: src/welcome/index.php:224
-#: src/welcome/index.php:235
-#: src/welcome/index.php:348
-msgid "Go Premium"
+#: dist/editor_blocks.js:2
+msgid "Slides to Show"
 msgstr ""
 
 #: dist/translation-strings.php:153
-msgid "No designs found"
+#: dist/editor_blocks.js:2
+msgid "Slide Gap"
 msgstr ""
 
 #: dist/translation-strings.php:154
-msgid "Group into Container"
+#: dist/editor_blocks.js:2
+msgid "Fade duration"
 msgstr ""
 
 #: dist/translation-strings.php:155
-msgid "Ungroup from Container"
+#: dist/editor_blocks.js:2
+msgid "Autoplay"
 msgstr ""
 
 #: dist/translation-strings.php:156
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Layout"
+#: dist/editor_blocks.js:2
+msgid "Speed (ms)"
 msgstr ""
 
 #: dist/translation-strings.php:157
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:425
-msgctxt "Nth Title"
-msgid "%s %d"
+#: dist/editor_blocks.js:2
+msgid "Arrows"
 msgstr ""
 
 #: dist/translation-strings.php:158
-msgid "Wave"
+#: dist/editor_blocks.js:2
+msgid "Previous Slide Icon"
 msgstr ""
 
 #: dist/translation-strings.php:159
-msgid "Straight"
+#: dist/editor_blocks.js:2
+msgid "Next Slide Icon"
 msgstr ""
 
 #: dist/translation-strings.php:160
-msgid "Slant"
+#: dist/editor_blocks.js:2
+msgid "Arrow Position"
 msgstr ""
 
 #: dist/translation-strings.php:161
-msgid "Curve"
+#: dist/editor_blocks.js:2
+msgid "Inside"
 msgstr ""
 
 #: dist/translation-strings.php:162
-msgid "Rounded"
+#: dist/editor_blocks.js:2
+msgid "Outside"
 msgstr ""
 
 #: dist/translation-strings.php:163
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:266
-msgid "Dynamic Fields"
+#: dist/editor_blocks.js:2
+msgid "%s Justify"
 msgstr ""
 
 #: dist/translation-strings.php:164
-msgid "auto"
+#: dist/editor_blocks.js:2
+msgid "%s Offset"
 msgstr ""
 
 #: dist/translation-strings.php:165
-msgid "System Fonts"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Button Gap"
 msgstr ""
 
 #: dist/translation-strings.php:166
-msgid "Sans-Serif"
+#: dist/editor_blocks.js:2
+msgid "%s Color"
 msgstr ""
 
 #: dist/translation-strings.php:167
-msgid "Serif"
+#: src/stk-block-types.php:427
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:410
+msgid "Icon"
 msgstr ""
 
 #: dist/translation-strings.php:168
-msgid "Serif Alternative"
+#: dist/editor_blocks.js:2
+msgid "%s Width"
 msgstr ""
 
 #: dist/translation-strings.php:169
-msgid "Monospace"
+#: dist/editor_blocks.js:2
+msgid "%s Height"
 msgstr ""
 
 #: dist/translation-strings.php:170
-msgid "Google Fonts"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:429
+msgid "Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:171
-msgid "Theme Fonts"
+#: dist/editor_blocks.js:2
+msgid "%s Size"
 msgstr ""
 
 #: dist/translation-strings.php:172
-msgid "Font Family"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:171
+msgid "Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:173
-msgid "Individual sides"
+#: dist/editor_blocks.js:2
+msgid "Show %s on mobile"
 msgstr ""
 
 #: dist/translation-strings.php:174
-msgid "All sides"
+#: dist/editor_blocks.js:2
+msgid "arrows"
 msgstr ""
 
 #: dist/translation-strings.php:175
-msgid "Top and Bottom"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Dots"
 msgstr ""
 
 #: dist/translation-strings.php:176
-msgid "Left and Right"
+#: dist/editor_blocks.js:2
+msgid "Dot Style"
 msgstr ""
 
 #: dist/translation-strings.php:177
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:248
-msgid "Top Left"
+#: dist/editor_blocks.js:2
+msgid "Solid"
 msgstr ""
 
 #: dist/translation-strings.php:178
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:250
-msgid "Top Right"
+#: src/stk-block-types.php:871
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:566
+msgid "Outline"
 msgstr ""
 
 #: dist/translation-strings.php:179
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:254
-msgid "Bottom Left"
+#: dist/editor_blocks.js:2
+msgid "Dot"
 msgstr ""
 
 #: dist/translation-strings.php:180
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:256
-msgid "Bottom Right"
+#: dist/editor_blocks.js:2
+msgid "Active Dot"
 msgstr ""
 
 #: dist/translation-strings.php:181
-msgid "There are no blocks in this group, please add one."
+#: dist/editor_blocks.js:2
+msgid "%s Gap"
 msgstr ""
 
 #: dist/translation-strings.php:182
-msgid "Add Block"
+#: dist/editor_blocks.js:2
+msgid "To improve accessibility, the clickable area of the dots will not go below %s."
 msgstr ""
 
 #: dist/translation-strings.php:183
-msgid "Font Size"
+#: dist/editor_blocks.js:2
+msgid "dots"
 msgstr ""
 
 #: dist/translation-strings.php:184
-#: src/stk-block-types.php:363
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:500
-msgid "Heading"
+msgid "Accessibility"
 msgstr ""
 
 #: dist/translation-strings.php:185
-#: src/stk-block-types.php:953
-#: dist/translation-strings.js:575
-msgid "Paragraph"
+#: dist/editor_blocks.js:2
+msgid "%s label"
 msgstr ""
 
 #: dist/translation-strings.php:186
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "component"
-msgid "%s HTML Tag"
+#: dist/editor_blocks.js:2
+msgid "Previous slide"
 msgstr ""
 
 #: dist/translation-strings.php:187
-#: src/stk-block-types.php:373
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:309
-msgid "Title"
+msgid "Next slide"
 msgstr ""
 
 #: dist/translation-strings.php:188
-#: src/stk-block-types.php:427
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:410
-msgid "Icon"
+msgid "Use %%d to show the slide number."
 msgstr ""
 
 #: dist/translation-strings.php:189
-msgid "Type to search icon"
+#: dist/editor_blocks.js:2
+msgid "Slide N of N"
 msgstr ""
 
 #: dist/translation-strings.php:190
-msgid "Icon Settings"
+#: dist/editor_blocks.js:2
+msgid "Use two %%d to show the slide number and the total slides. e.g. Slide 1 of 3."
 msgstr ""
 
 #: dist/translation-strings.php:191
-msgid "Upload SVG"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Bar"
 msgstr ""
 
 #: dist/translation-strings.php:192
-msgid "Clear icon"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Asterisks"
 msgstr ""
 
 #: dist/translation-strings.php:193
-msgid "Drop your SVG here"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:167
+msgid "Color"
 msgstr ""
 
 #: dist/translation-strings.php:194
-msgid "preview"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Width"
 msgstr ""
 
 #: dist/translation-strings.php:195
-msgid "Describe the purpose of the image"
+#: dist/editor_blocks.js:2
+msgid "Height / Size"
 msgstr ""
 
 #: dist/translation-strings.php:196
-msgid "Leave empty if the image is purely decorative."
+#: dist/editor_blocks.js:2
+msgid "1,234.56"
 msgstr ""
 
 #: dist/translation-strings.php:197
-msgid "Alt Text (Alternative Text)"
+#: dist/editor_blocks.js:2
+msgid "Counter"
 msgstr ""
 
 #: dist/translation-strings.php:198
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:203
-msgid "Blur"
+#: dist/editor_blocks.js:2
+msgid "Duration (ms)"
 msgstr ""
 
 #: dist/translation-strings.php:199
-msgid "Brightness"
+#: dist/editor_blocks.js:2
+msgid "1,234,567"
 msgstr ""
 
 #: dist/translation-strings.php:200
-msgid "Contrast"
+#: dist/editor_blocks.js:2
+msgid "100"
 msgstr ""
 
 #: dist/translation-strings.php:201
-msgid "Grayscale"
+#: dist/editor_blocks.js:2
+msgid "One column"
 msgstr ""
 
 #: dist/translation-strings.php:202
-msgid "Hue Rotate"
+#: dist/editor_blocks.js:2
+msgid "50 / 50"
 msgstr ""
 
 #: dist/translation-strings.php:203
-msgid "Invert"
+#: dist/editor_blocks.js:2
+msgid "Two columns; equal split"
 msgstr ""
 
 #: dist/translation-strings.php:204
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:197
-msgid "Opacity"
+msgid "30 / 70"
 msgstr ""
 
 #: dist/translation-strings.php:205
-msgid "Saturate"
+#: dist/editor_blocks.js:2
+msgid "Two columns; one-third, two-thirds split"
 msgstr ""
 
 #: dist/translation-strings.php:206
-msgid "Sepia"
+#: dist/editor_blocks.js:2
+msgid "70 / 30"
 msgstr ""
 
 #: dist/translation-strings.php:207
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:281
-msgid "Image Size"
+msgid "Two columns; two-thirds, one-third split"
 msgstr ""
 
 #: dist/translation-strings.php:208
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:147
-msgid "Default"
+msgid "33 / 33 / 33"
 msgstr ""
 
 #: dist/translation-strings.php:209
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Square"
+msgid "Three columns; equal split"
 msgstr ""
 
 #: dist/translation-strings.php:210
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Circle"
+#: dist/editor_blocks.js:2
+msgid "25 / 50 / 25"
 msgstr ""
 
 #: dist/translation-strings.php:211
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:343
-msgid "Blob %s"
+#: dist/editor_blocks.js:2
+msgid "Three columns; wide center column"
 msgstr ""
 
 #: dist/translation-strings.php:212
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:207
-msgid "Shape"
+msgid "25 / 25 / 25 / 25"
 msgstr ""
 
 #: dist/translation-strings.php:213
-msgid "Upload"
+#: dist/editor_blocks.js:2
+msgid "Four columns; equal split"
 msgstr ""
 
 #: dist/translation-strings.php:214
-msgid "Replace"
+#: dist/editor_blocks.js:2
+msgid "Colon"
 msgstr ""
 
 #: dist/translation-strings.php:215
-msgid "Click on any inner block in the editor to style it."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Line"
 msgstr ""
 
 #: dist/translation-strings.php:216
-msgid "Looking for other settings? They've moved to the %s tab."
+#: src/stk-block-types.php:763
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:551
+msgid "Separator"
 msgstr ""
 
 #: dist/translation-strings.php:217
-msgid "style"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Size"
 msgstr ""
 
 #: dist/translation-strings.php:218
-msgid "Dismiss hint"
+#: dist/editor_blocks.js:2
+msgid "Top Offset"
 msgstr ""
 
 #: dist/translation-strings.php:219
-msgid "layout"
+#: dist/editor_blocks.js:2
+msgid "Due Date"
 msgstr ""
 
 #: dist/translation-strings.php:220
-#: src/welcome/index.php:119
-#: src/welcome/index.php:336
-msgid "Settings"
+#: dist/editor_blocks.js:2
+msgid "Recurring"
 msgstr ""
 
 #: dist/translation-strings.php:221
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Designs"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:74
+msgid "None"
 msgstr ""
 
 #: dist/translation-strings.php:222
-msgid "Pick a design to start from, this will override your block settings"
+#: dist/editor_blocks.js:2
+msgid "Hide Block"
 msgstr ""
 
 #: dist/translation-strings.php:223
-msgid "Stop showing tooltips"
+#: dist/editor_blocks.js:2
+msgid "Display Message Upon Expiration"
 msgstr ""
 
 #: dist/translation-strings.php:224
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Layout Tab"
+#: dist/editor_blocks.js:2
+msgid "Days"
 msgstr ""
 
 #: dist/translation-strings.php:225
-msgid "Style"
+#: dist/editor_blocks.js:2
+msgid "Hours"
 msgstr ""
 
 #: dist/translation-strings.php:226
-msgid "Style Tab"
+#: dist/editor_blocks.js:2
+msgid "Minutes"
 msgstr ""
 
 #: dist/translation-strings.php:227
-msgid "Advanced"
+#: dist/editor_blocks.js:2
+msgid "Seconds"
 msgstr ""
 
 #: dist/translation-strings.php:228
-msgid "Advanced Tab"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:63
+msgid "End Date"
 msgstr ""
 
 #: dist/translation-strings.php:229
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Auto"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:61
+msgid "Start Date"
 msgstr ""
 
 #: dist/translation-strings.php:230
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:407
-msgid "Column"
+#: dist/editor_blocks.js:2
+msgid "Timezone"
 msgstr ""
 
 #: dist/translation-strings.php:231
-msgid "Get More Image Shapes"
+#: dist/editor_blocks.js:2
+msgid "Action on Expiration"
 msgstr ""
 
 #: dist/translation-strings.php:232
-msgid "Mask images with a variety of blob-like shapes"
+#: dist/editor_blocks.js:2
+msgid "Countdown Duration"
 msgstr ""
 
 #: dist/translation-strings.php:233
-msgid "Choose from over 50 different shapes"
+#: dist/editor_blocks.js:2
+msgid "Restart Countdown After no. of Hours"
 msgstr ""
 
 #: dist/translation-strings.php:234
-msgid "Enhances the overall aesthetic of images"
+#: dist/editor_blocks.js:2
+msgid "Enable Double Digit"
 msgstr ""
 
 #: dist/translation-strings.php:235
-msgid "Use Dynamic Content"
+#: dist/editor_blocks.js:2
+msgid "Box Gap"
 msgstr ""
 
 #: dist/translation-strings.php:236
-msgid "Add dynamic content from posts or post meta"
+#: dist/editor_blocks.js:2
+msgid "Label Top Margin"
 msgstr ""
 
 #: dist/translation-strings.php:237
-msgid "Use third-party plugins as dynamic sources such as ACF, Meta Box, Toolset, and more"
+#: dist/editor_blocks.js:2
+msgid "Digits"
 msgstr ""
 
 #: dist/translation-strings.php:238
-msgid "Build custom loop design with the Native Query Loop"
+#: dist/editor_blocks.js:2
+msgid "Labels"
 msgstr ""
 
 #: dist/translation-strings.php:239
-msgid "Separator Layers"
+#: dist/editor_blocks.js:2
+msgid "Content Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:240
-msgid "Add a second and third layer to separators"
+#: dist/editor_blocks.js:2
+msgid "Expired Message"
 msgstr ""
 
 #: dist/translation-strings.php:241
-msgid "Change layer color, size and opacity"
+#: dist/editor_blocks.js:2
+msgid "Days Label"
 msgstr ""
 
 #: dist/translation-strings.php:242
-msgid "Greater creativity in designing separators"
+#: dist/editor_blocks.js:2
+msgid "Hours Label"
 msgstr ""
 
 #: dist/translation-strings.php:243
-msgid "Elevate Your Icons"
+#: dist/editor_blocks.js:2
+msgid "Minutes Label"
 msgstr ""
 
 #: dist/translation-strings.php:244
-msgid "Liven up icons with gradient fills, multiple colors and background shapes"
+#: dist/editor_blocks.js:2
+msgid "Seconds Label"
 msgstr ""
 
 #: dist/translation-strings.php:245
-msgid "More design options and customization for icons"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Stackable Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:246
-msgid "Choose from over 50 background shapes"
+#: dist/editor_blocks.js:2
+msgid "Open the Design Library and select a pre-designed block or layout."
 msgstr ""
 
 #: dist/translation-strings.php:247
-msgid "Greater visual interest and variety for your icons"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Open Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:248
-msgid "Liven up icons with background shapes"
+#: dist/editor_blocks.js:2
+msgid "Description for this block. Use this space for describing your block."
 msgstr ""
 
 #: dist/translation-strings.php:249
-msgid "Adjust timing of CSS transitions"
+#: dist/editor_blocks.js:2
+msgctxt "Content placeholder"
+msgid "Description for this block. Use this space for describing your block."
 msgstr ""
 
 #: dist/translation-strings.php:250
-msgid "Change X and Y position of blocks"
+#: dist/editor_blocks.js:2
+msgid "Overlap Shape 1"
 msgstr ""
 
 #: dist/translation-strings.php:251
-msgid "Scale or rotate blocks"
+#: dist/editor_blocks.js:2
+msgid "Overlap Shape 2"
 msgstr ""
 
 #: dist/translation-strings.php:252
-msgid "Perfect for hover animations"
+#: dist/editor_blocks.js:2
+msgid "Overlap Shape 3"
 msgstr ""
 
 #: dist/translation-strings.php:253
-msgid "Entrance fade-ins and animations when scrolling to blocks"
+#: dist/editor_blocks.js:2
+msgid "Overlap Shape 4"
 msgstr ""
 
 #: dist/translation-strings.php:254
-msgid "Smooth scroll animations based on scrolling position"
+#: dist/editor_blocks.js:2
+msgid "Overlap Shape 5"
 msgstr ""
 
 #: dist/translation-strings.php:255
-msgid "Create a more visually engaging and interactive experience"
+#: dist/editor_blocks.js:2
+msgid "Overlap Background 1"
 msgstr ""
 
 #: dist/translation-strings.php:256
-msgid "Show or hide blocks based on conditions"
+#: dist/editor_blocks.js:2
+msgid "Overlap Background 2"
 msgstr ""
 
 #: dist/translation-strings.php:257
-msgid "Display blocks based on time, role, meta, custom PHP, option, taxonomy and more"
+#: dist/editor_blocks.js:2
+msgid "Overlap Background 3"
 msgstr ""
 
 #: dist/translation-strings.php:258
-msgid "Use multiple conditions"
+#: dist/editor_blocks.js:2
+msgid "Overlap Background 4"
 msgstr ""
 
 #: dist/translation-strings.php:259
-msgid "Show targeted content and personalization"
+#: dist/editor_blocks.js:2
+msgid "Overlap Background 5"
 msgstr ""
 
 #: dist/translation-strings.php:260
-msgid "Greater control over the visibility of content"
+#: dist/editor_blocks.js:2
+msgid "Float"
 msgstr ""
 
 #: dist/translation-strings.php:261
-msgid "Add custom CSS rules specific for each block"
+#: src/stk-block-types.php:373
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:137
+msgid "Title"
 msgstr ""
 
 #: dist/translation-strings.php:262
-msgid "Support for media queries"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Large Mid"
 msgstr ""
 
 #: dist/translation-strings.php:263
-msgid "Fine-tune styling on a per block basis"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:153
+msgid "Offset"
 msgstr ""
 
 #: dist/translation-strings.php:264
-msgid "Adjust Column Arrangement"
+#: dist/editor_blocks.js:2
+msgid "Zizag"
 msgstr ""
 
 #: dist/translation-strings.php:265
-msgid "Adjust the arrangement of columns when collapsed on tablet and mobile"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Zigzag"
 msgstr ""
 
 #: dist/translation-strings.php:266
-msgid "Ensure that content remains organized and easily readable on mobile"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Some short text that can be expanded to show more details."
 msgstr ""
 
 #: dist/translation-strings.php:267
-msgid "This is a Premium Design"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Show more"
 msgstr ""
 
 #: dist/translation-strings.php:268
-msgid "Unlock access to the entire design library and set your website apart from the rest."
+#: dist/editor_blocks.js:2
+msgid "Some long text that will be expanded when the show more button is clicked by the visitor."
 msgstr ""
 
 #: dist/translation-strings.php:269
-msgid "Get More Post Options"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Show less"
 msgstr ""
 
 #: dist/translation-strings.php:270
-msgid "New Custom Post Type option"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Less text"
 msgstr ""
 
 #: dist/translation-strings.php:271
-msgid "Offset, exclude, include specific posts"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "More text"
 msgstr ""
 
 #: dist/translation-strings.php:272
-msgid "Hide the current post - great for synced patterns"
+#: dist/editor_blocks.js:2
+msgid "Add heading text here"
 msgstr ""
 
 #: dist/translation-strings.php:273
-msgid "This Is a Premium Feature"
+#: src/stk-block-types.php:943
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:369
+msgid "Text"
 msgstr ""
 
 #: dist/translation-strings.php:274
-#: src/welcome/index.php:274
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Learn More"
+#: dist/editor_blocks.js:2
+msgid "Top Line"
 msgstr ""
 
 #: dist/translation-strings.php:275
-msgid "View Demo"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Line Color"
 msgstr ""
 
 #: dist/translation-strings.php:276
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "You can hide premium hints in the settings"
+#: dist/editor_blocks.js:2
+msgid "Height"
 msgstr ""
 
 #: dist/translation-strings.php:277
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Width"
+msgid "Margin"
 msgstr ""
 
 #: dist/translation-strings.php:278
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "%s Width"
+#: dist/translation-strings.js:394
+msgid "Align"
 msgstr ""
 
 #: dist/translation-strings.php:279
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Height"
+msgid "Bottom Line"
 msgstr ""
 
 #: dist/translation-strings.php:280
 #: dist/editor_blocks.js:2
-msgid "%s Height"
+msgid "Snapping"
 msgstr ""
 
 #: dist/translation-strings.php:281
 #: dist/editor_blocks.js:2
-msgid "%s Size"
+msgid "Snap to Start"
 msgstr ""
 
 #: dist/translation-strings.php:282
-#: src/stk-block-types.php:552
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:402
-msgid "Image"
+#: dist/editor_blocks.js:2
+msgid "Snap to Center"
 msgstr ""
 
 #: dist/translation-strings.php:283
-msgid "Inset"
+#: dist/editor_blocks.js:2
+msgid "No Snapping"
 msgstr ""
 
 #: dist/translation-strings.php:284
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:212
-msgid "Horizontal Offset"
+msgid "Item Width"
 msgstr ""
 
 #: dist/translation-strings.php:285
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:213
-msgid "Vertical Offset"
+#: dist/editor_blocks.js:2
+msgid "Inner Column Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:286
-msgid "Shadow Spread"
+#: dist/editor_blocks.js:2
+msgid "Gap"
 msgstr ""
 
 #: dist/translation-strings.php:287
-msgid "Shadow Color"
+#: dist/editor_blocks.js:2
+msgid "Left Offset"
 msgstr ""
 
 #: dist/translation-strings.php:288
-msgid "Advanced Shadow Options"
+#: dist/editor_blocks.js:2
+msgid "Scrollbar"
 msgstr ""
 
 #: dist/translation-strings.php:289
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:261
-msgid "Custom"
+#: dist/editor_blocks.js:2
+msgid "Track Color"
 msgstr ""
 
 #: dist/translation-strings.php:290
-msgid "Shadow Settings"
+#: dist/editor_blocks.js:2
+msgid "Thumb Color"
 msgstr ""
 
 #: dist/translation-strings.php:291
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:430
-msgid "Shadow / Outline"
+#: dist/editor_blocks.js:2
+msgid "Thumb Radius"
 msgstr ""
 
 #: dist/translation-strings.php:292
-msgid "Shadow/Outline"
+#: dist/editor_blocks.js:2
+msgid "123"
 msgstr ""
 
 #: dist/translation-strings.php:293
-msgid "Adjusts the intensity of the shadow/outline of the block and the appearance of the block border"
+#: dist/editor_blocks.js:2
+msgid "456"
 msgstr ""
 
 #: dist/translation-strings.php:294
-msgid "Column Arrangement"
+#: dist/editor_blocks.js:2
+msgid "789"
 msgstr ""
 
 #: dist/translation-strings.php:295
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Spacing"
+msgid "Header Title"
 msgstr ""
 
 #: dist/translation-strings.php:296
-msgid "Desktop"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Half Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:297
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Tablet"
+#: dist/editor_blocks.js:2
+msgid "Center Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:298
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Mobile"
+#: dist/editor_blocks.js:2
+msgid "Side Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:299
-#: pro__premium_only/src/dynamic-content/sources/other-posts.php:259
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:18
-msgid "Post Type"
+#: dist/editor_blocks.js:2
+msgid "Half Layout"
 msgstr ""
 
 #: dist/translation-strings.php:300
-msgid "Filter by Taxonomy"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Half"
 msgstr ""
 
 #: dist/translation-strings.php:301
-msgid "Taxonomy Filter Type"
+#: src/stk-block-types.php:484
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:509
+msgid "Icon Label"
 msgstr ""
 
 #: dist/translation-strings.php:302
-msgid "Included In"
+#: src/stk-block-types.php:446
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:507
+msgid "Icon Box"
 msgstr ""
 
 #: dist/translation-strings.php:303
-msgid "Not In"
+#: dist/editor_blocks.js:2
+msgid "Pill"
 msgstr ""
 
 #: dist/translation-strings.php:304
-msgid "Sets the font set to be used for the element"
+#: dist/editor_blocks.js:2
+msgid "Icon Gap"
 msgstr ""
 
 #: dist/translation-strings.php:305
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Size"
+msgid "Unordered List"
 msgstr ""
 
 #: dist/translation-strings.php:306
-msgid "Font size"
+#: dist/editor_blocks.js:2
+msgid "Ordered List"
 msgstr ""
 
 #: dist/translation-strings.php:307
-msgid "Sets the size of text characters"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "List"
 msgstr ""
 
 #: dist/translation-strings.php:308
-msgid "Weight"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Grid"
 msgstr ""
 
 #: dist/translation-strings.php:309
-msgid "Bold"
+#: src/stk-block-types.php:239
+#: src/stk-block-types.php:692
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:370
+msgid "Number"
 msgstr ""
 
 #: dist/translation-strings.php:310
-msgid "Font weight"
+#: dist/editor_blocks.js:2
+msgid "Padded Number"
 msgstr ""
 
 #: dist/translation-strings.php:311
-msgid "Sets the thinness or thickness of text characters"
+#: dist/editor_blocks.js:2
+msgid "Lowercase Roman"
 msgstr ""
 
 #: dist/translation-strings.php:312
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:246
-msgid "Transform"
+#: dist/editor_blocks.js:2
+msgid "Uppercase Roman"
 msgstr ""
 
 #: dist/translation-strings.php:313
-msgid "Uppercase"
+#: dist/editor_blocks.js:2
+msgid "Lowercase Letters"
 msgstr ""
 
 #: dist/translation-strings.php:314
-msgid "Lowercase"
+#: dist/editor_blocks.js:2
+msgid "Uppercase Letters"
 msgstr ""
 
 #: dist/translation-strings.php:315
-msgid "Capitalize"
+#: dist/editor_blocks.js:2
+msgid "Dashed"
 msgstr ""
 
 #: dist/translation-strings.php:316
-msgid "Sets the usage of upper or lower case"
+#: dist/editor_blocks.js:2
+msgid "Dotted"
 msgstr ""
 
 #: dist/translation-strings.php:317
-msgid "Line-Height"
+#: dist/editor_blocks.js:2
+msgid "List Item"
 msgstr ""
 
 #: dist/translation-strings.php:318
-msgid "Line height"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Full Width"
 msgstr ""
 
 #: dist/translation-strings.php:319
-msgid "Sets the vertical distance between lines of text"
+#: dist/editor_blocks.js:2
+msgid "More noticeable when using wide layouts or list item borders"
 msgstr ""
 
 #: dist/translation-strings.php:320
-msgid "Letter Spacing"
+#: src/stk-block-types.php:206
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:478
+msgid "Columns"
 msgstr ""
 
 #: dist/translation-strings.php:321
-msgid "Letter spacing"
+#: dist/editor_blocks.js:2
+msgid "List Display Style"
 msgstr ""
 
 #: dist/translation-strings.php:322
-msgid "Sets the distance or space between letters"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:400
+msgid "Column Gap"
 msgstr ""
 
 #: dist/translation-strings.php:323
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Typography"
+#: dist/translation-strings.js:401
+msgid "Row Gap"
 msgstr ""
 
 #: dist/translation-strings.php:324
-msgid "Opens in new tab"
+#: dist/editor_blocks.js:2
+msgid "Indentation"
 msgstr ""
 
 #: dist/translation-strings.php:325
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Nofollow link"
+#: dist/editor_blocks.js:2
+msgid "Icons & Numbers"
 msgstr ""
 
 #: dist/translation-strings.php:326
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Sponsored"
+#: dist/editor_blocks.js:2
+msgid "List Type"
 msgstr ""
 
 #: dist/translation-strings.php:327
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "UGC"
+#: dist/editor_blocks.js:2
+msgid "With Period"
 msgstr ""
 
 #: dist/translation-strings.php:328
-msgid "Search or type url"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:243
+msgid "Icon Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:329
-msgid "URL"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Icon Rotation"
 msgstr ""
 
 #: dist/translation-strings.php:330
-msgid "Upgrade to Premium to get more design variations."
+#: dist/editor_blocks.js:2
+msgid "Icon Vertical Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:331
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "All"
+#: dist/editor_blocks.js:2
+msgid "This is more visible if you have long text in your list."
 msgstr ""
 
 #: dist/translation-strings.php:332
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Stackable Design Library"
+msgid "Icon Vertical Offset"
 msgstr ""
 
 #: dist/translation-strings.php:333
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Designs"
+#: dist/editor_blocks.js:2
+msgid "Icon List Item Borders"
 msgstr ""
 
 #: dist/translation-strings.php:334
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "UI Kits"
+#: dist/editor_blocks.js:2
+msgid "Borders"
 msgstr ""
 
 #: dist/translation-strings.php:335
-msgid "Wireframes"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Border Width"
 msgstr ""
 
 #: dist/translation-strings.php:336
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Latest Design Library"
+#: dist/editor_blocks.js:2
+msgid "Border Color"
 msgstr ""
 
 #: dist/translation-strings.php:337
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "V2 Design Library"
+#: dist/editor_blocks.js:2
+msgid "Line 1"
 msgstr ""
 
 #: dist/translation-strings.php:338
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "E.g. light, dark, red, minimalist…"
+#: dist/editor_blocks.js:2
+msgid "Line 2"
 msgstr ""
 
 #: dist/translation-strings.php:339
-msgid "Select Multiple"
+#: dist/editor_blocks.js:2
+msgid "Line 3"
 msgstr ""
 
 #: dist/translation-strings.php:340
-msgid "Select"
+#: dist/editor_blocks.js:2
+msgid "Line 4"
 msgstr ""
 
 #: dist/translation-strings.php:341
-msgid "Deselect All"
+#: dist/editor_blocks.js:2
+msgid "Line 5"
 msgstr ""
 
 #: dist/translation-strings.php:342
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Refresh Library"
+#: dist/editor_blocks.js:2
+msgid "Line 6"
 msgstr ""
 
 #: dist/translation-strings.php:343
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Large preview"
+#: dist/editor_blocks.js:2
+msgid "Image Caption"
 msgstr ""
 
 #: dist/translation-strings.php:344
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Medium preview"
+#: dist/editor_blocks.js:2
+msgid "Caption"
 msgstr ""
 
 #: dist/translation-strings.php:345
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Small preview"
+#: dist/editor_blocks.js:2
+msgid "Caption Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:346
-msgid "Add Designs"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:138
+msgctxt "Text placeholder"
+msgid "Text for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:347
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Color & Highlight"
+msgid "Box"
 msgstr ""
 
 #: dist/translation-strings.php:348
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Highlight"
+msgid "Captioned"
 msgstr ""
 
 #: dist/translation-strings.php:349
+#: src/stk-block-types.php:584
 #: dist/editor_blocks.js:2
-msgid "Low"
+#: dist/translation-strings.js:523
+msgid "Map"
 msgstr ""
 
 #: dist/translation-strings.php:350
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Text Color"
+msgid "Embedded content from Google Map Platform."
 msgstr ""
 
 #: dist/translation-strings.php:351
 #: dist/editor_blocks.js:2
-msgid "Highlight Color"
+msgid "Some map features require a Google API Key."
 msgstr ""
 
 #: dist/translation-strings.php:352
 #: dist/editor_blocks.js:2
-msgid "Highlight Text"
+msgid "Add API key here."
 msgstr ""
 
 #: dist/translation-strings.php:353
 #: dist/editor_blocks.js:2
-msgid "%s Alignment"
+msgid "Location"
 msgstr ""
 
 #: dist/translation-strings.php:354
 #: dist/editor_blocks.js:2
-msgid "Content"
+msgid "Enter an address or location"
 msgstr ""
 
 #: dist/translation-strings.php:355
-msgid "Content Min. Height"
+#: dist/editor_blocks.js:2
+msgid "Zoom"
 msgstr ""
 
 #: dist/translation-strings.php:356
-msgid "Content Max Width"
+#: dist/editor_blocks.js:2
+msgid "Enable Dragging"
 msgstr ""
 
 #: dist/translation-strings.php:357
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Content Horizontal Align"
+#: dist/editor_blocks.js:2
+msgid "Full Screen Button"
 msgstr ""
 
 #: dist/translation-strings.php:358
-msgid "Sets the placement of the column container to left, center or right. Not available when block width is set to full width."
+#: dist/editor_blocks.js:2
+msgid "Map Type Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:359
-msgid "Adjusts the placement of all content in the block to align left, center or right"
+#: dist/editor_blocks.js:2
+msgid "Street View Button"
 msgstr ""
 
 #: dist/translation-strings.php:360
 #: dist/editor_blocks.js:2
-msgid "%s Justify"
+msgid "Zoom Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:361
-msgid "Sets the horizontal position and spacing of the inner columns."
+#: dist/editor_blocks.js:2
+msgid "Map Style"
 msgstr ""
 
 #: dist/translation-strings.php:362
-msgid "Column contents need to be narrow for effect to show."
+#: dist/editor_blocks.js:2
+msgid "Custom Map Style (Paste JSON here)"
 msgstr ""
 
 #: dist/translation-strings.php:363
-msgid "Sets the vertical position of the inner columns relative to the columns block."
+#: dist/editor_blocks.js:2
+msgid "Learn how to use Custom Map Styles"
 msgstr ""
 
 #: dist/translation-strings.php:364
-msgid "%s Direction"
+#: dist/editor_blocks.js:2
+msgid "Map Marker"
 msgstr ""
 
 #: dist/translation-strings.php:365
-msgid "Inner Block"
+#: dist/editor_blocks.js:2
+msgid "Uploaded Icon and Icon Color settings are not fully compatible."
 msgstr ""
 
 #: dist/translation-strings.php:366
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Horizontal"
+msgid "Horizontal Icon Anchor Point"
 msgstr ""
 
 #: dist/translation-strings.php:367
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Vertical"
+msgid "Vertical Icon Anchor Point"
 msgstr ""
 
 #: dist/translation-strings.php:368
-msgid "Sets the horizontal/vertical position and spacing of the inner blocks."
+#: dist/editor_blocks.js:2
+msgid "Map Example"
 msgstr ""
 
 #: dist/translation-strings.php:369
-msgid "Aligns the horizontal/vertical position of the inner blocks."
+#: dist/editor_blocks.js:2
+msgid "Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled."
 msgstr ""
 
 #: dist/translation-strings.php:370
-msgid "Set Content Min. Height for alignment to display properly"
+#: dist/editor_blocks.js:2
+msgid "Silver"
 msgstr ""
 
 #: dist/translation-strings.php:371
-msgid "Inner Block Wrapping"
+#: dist/editor_blocks.js:2
+msgid "Retro"
 msgstr ""
 
 #: dist/translation-strings.php:372
 #: dist/editor_blocks.js:2
-msgid "No Wrap"
+msgid "Dark"
 msgstr ""
 
 #: dist/translation-strings.php:373
 #: dist/editor_blocks.js:2
-msgid "Wrap"
+msgid "Night"
 msgstr ""
 
 #: dist/translation-strings.php:374
-msgid "%s %s"
+#: dist/editor_blocks.js:2
+msgid "Aubergine"
 msgstr ""
 
 #: dist/translation-strings.php:375
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:400
-msgid "Column Gap"
+msgid "Embedded content from Google Maps Platform."
 msgstr ""
 
 #: dist/translation-strings.php:376
 #: dist/editor_blocks.js:2
-msgid "Gap"
+msgid "$"
 msgstr ""
 
 #: dist/translation-strings.php:377
-msgid "Sets the gap between the columns of inner blocks."
+#: dist/editor_blocks.js:2
+msgid "99"
 msgstr ""
 
 #: dist/translation-strings.php:378
-msgid "Sets the gap between inner blocks."
+#: dist/editor_blocks.js:2
+msgid ".00"
 msgstr ""
 
 #: dist/translation-strings.php:379
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:401
-msgid "Row Gap"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:228
+msgid "Shape"
 msgstr ""
 
 #: dist/translation-strings.php:380
-msgid "Sets the gap between the rows of inner blocks."
+#: dist/editor_blocks.js:2
+msgid "01"
 msgstr ""
 
 #: dist/translation-strings.php:381
+#: src/stk-block-types.php:646
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Address"
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:534
+msgid "Posts"
 msgstr ""
 
 #: dist/translation-strings.php:382
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Article"
+#: dist/editor_blocks.js:2
+msgid "No posts found."
 msgstr ""
 
 #: dist/translation-strings.php:383
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Aside"
+#: dist/editor_blocks.js:2
+msgid "Content Arrangement"
 msgstr ""
 
 #: dist/translation-strings.php:384
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Blockquote"
+#: dist/editor_blocks.js:2
+msgid "Sets the order of the items displayed (category, title, meta, excerpt, read more button, image) for each post"
 msgstr ""
 
 #: dist/translation-strings.php:385
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Div"
+#: dist/editor_blocks.js:2
+msgid "Query"
 msgstr ""
 
 #: dist/translation-strings.php:386
-msgctxt "HTML Tag"
-msgid "Details"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:396
+msgid "Number of items"
 msgstr ""
 
 #: dist/translation-strings.php:387
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Footer"
+#: dist/editor_blocks.js:2
+msgid "Order by"
 msgstr ""
 
 #: dist/translation-strings.php:388
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Header"
+#: dist/editor_blocks.js:2
+msgid "Newest to Oldest"
 msgstr ""
 
 #: dist/translation-strings.php:389
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Hgroup"
+#: dist/editor_blocks.js:2
+msgid "Oldest to Newest"
 msgstr ""
 
 #: dist/translation-strings.php:390
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Main"
+#: dist/editor_blocks.js:2
+msgid "A → Z"
 msgstr ""
 
 #: dist/translation-strings.php:391
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Nav"
+#: dist/editor_blocks.js:2
+msgid "Z → A"
 msgstr ""
 
 #: dist/translation-strings.php:392
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "HTML Tag"
-msgid "Section"
+#: dist/editor_blocks.js:2
+msgid "Last Modified to Oldest"
 msgstr ""
 
 #: dist/translation-strings.php:393
-msgctxt "HTML Tag"
-msgid "Summary"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Oldest Modified to Last"
 msgstr ""
 
 #: dist/translation-strings.php:394
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:312
-msgid "General"
+msgid "Menu Order"
 msgstr ""
 
 #: dist/translation-strings.php:395
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block"
+#: dist/editor_blocks.js:2
+msgid "Random"
 msgstr ""
 
 #: dist/translation-strings.php:396
-msgid "Overflow"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:397
-msgid "Hidden"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Featured Image"
 msgstr ""
 
 #: dist/translation-strings.php:398
-msgid "Scroll"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Category"
 msgstr ""
 
 #: dist/translation-strings.php:399
-msgid "Visible"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Excerpt"
 msgstr ""
 
 #: dist/translation-strings.php:400
-msgid "Clear"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Meta"
 msgstr ""
 
 #: dist/translation-strings.php:401
-msgid "Both"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Read More Link"
 msgstr ""
 
 #: dist/translation-strings.php:402
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:342
-msgid "Position"
+msgid "Apply hover effect when container is hovered"
 msgstr ""
 
 #: dist/translation-strings.php:403
-msgid "Adjusts the transparency of the entire block"
+#: dist/editor_blocks.js:2
+msgid "Highlight Color"
 msgstr ""
 
 #: dist/translation-strings.php:404
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Z-Index"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:310
+msgid "Excerpt Length"
 msgstr ""
 
 #: dist/translation-strings.php:405
-msgid "Sets the stack order of different blocks to make one appear in front of another. A block with a higher z-index will show up on top of another block with a lower z-index."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Show Author"
 msgstr ""
 
 #: dist/translation-strings.php:406
-msgid "Sticky position may not work across all themes"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Show Date"
 msgstr ""
 
 #: dist/translation-strings.php:407
-msgid "Static"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Show Comments"
 msgstr ""
 
 #: dist/translation-strings.php:408
-msgid "Relative"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Default (Dot)"
 msgstr ""
 
 #: dist/translation-strings.php:409
-msgid "Absolute"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Space"
 msgstr ""
 
 #: dist/translation-strings.php:410
-msgid "Sticky"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Comma"
 msgstr ""
 
 #: dist/translation-strings.php:411
-#: src/stk-block-types.php:64
-#: src/stk-block-types.php:83
-#: src/stk-block-types.php:475
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:462
-msgid "Link"
+msgid "Dash"
 msgstr ""
 
 #: dist/translation-strings.php:412
-msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding. Opens inner image block if no link is provided"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Pipe"
 msgstr ""
 
 #: dist/translation-strings.php:413
-msgid "Block Size & Spacing"
+#: dist/editor_blocks.js:2
+msgid "Sets the separators between meta items (dot, space, comma, dash, pipe)"
 msgstr ""
 
 #: dist/translation-strings.php:414
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Background"
+#: dist/editor_blocks.js:2
+msgid "Add post links to images"
 msgstr ""
 
 #: dist/translation-strings.php:415
-msgid "Borders & Shadows"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:319
+msgid "Image Size"
 msgstr ""
 
 #: dist/translation-strings.php:416
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:440
-msgid "Lift"
+#: dist/editor_blocks.js:2
+msgid "Sets the image display size to thumbnail, medium, large or full size. A smaller image size will also load faster."
 msgstr ""
 
 #: dist/translation-strings.php:417
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:180
-msgid "Scale"
+#: src/block/posts/index.php:265
+#: dist/editor_blocks.js:2
+msgid "Continue Reading"
 msgstr ""
 
 #: dist/translation-strings.php:418
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Lift & Scale"
+#: dist/editor_blocks.js:2
+msgid "Read More Button"
 msgstr ""
 
 #: dist/translation-strings.php:419
-msgid "Lift More"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "featured"
 msgstr ""
 
 #: dist/translation-strings.php:420
+#: src/block/posts/index.php:59
+#: src/deprecated/v2/block/blog-posts/index.php:251
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Scale More"
+#: dist/editor_blocks.js:2
+msgid "(Untitled)"
 msgstr ""
 
 #: dist/translation-strings.php:421
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Lift & Scale More"
+#: dist/editor_blocks.js:2
+msgid "Image Card"
 msgstr ""
 
 #: dist/translation-strings.php:422
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:448
-msgid "Hover Effect"
+#: dist/editor_blocks.js:2
+msgid "Portfolio"
 msgstr ""
 
 #: dist/translation-strings.php:423
-msgid "Hover effect"
+#: dist/editor_blocks.js:2
+msgid "Portfolio 2"
 msgstr ""
 
 #: dist/translation-strings.php:424
-msgid "Triggers animation or effects when you mouse over"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Vertical Card"
 msgstr ""
 
 #: dist/translation-strings.php:425
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:357
-msgid "Single"
+msgid "Vertical Card 2"
 msgstr ""
 
 #: dist/translation-strings.php:426
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:216
-msgid "Gradient"
+msgid "Package inclusion one"
 msgstr ""
 
 #: dist/translation-strings.php:427
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Button Color"
+#: dist/editor_blocks.js:2
+msgid "Package inclusion two"
 msgstr ""
 
 #: dist/translation-strings.php:428
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:221
-msgid "Icon Color"
+msgid "Package inclusion three"
 msgstr ""
 
 #: dist/translation-strings.php:429
-msgid "Button Colors"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:162
+msgid "one"
 msgstr ""
 
 #: dist/translation-strings.php:430
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Full Width"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:163
+msgid "two"
 msgstr ""
 
 #: dist/translation-strings.php:431
-msgid "Min. Button Height"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:164
+msgid "three"
 msgstr ""
 
 #: dist/translation-strings.php:432
-msgid "Button Width"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:165
+msgid "Package inclusion %s"
 msgstr ""
 
 #: dist/translation-strings.php:433
-msgid "Button Padding"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Compact"
 msgstr ""
 
 #: dist/translation-strings.php:434
-msgid "Button padding"
+#: dist/editor_blocks.js:2
+msgid "Banner Layout"
 msgstr ""
 
 #: dist/translation-strings.php:435
-msgid "Adjusts the space between the button text and button borders"
+#: dist/editor_blocks.js:2
+msgid "Banner"
 msgstr ""
 
 #: dist/translation-strings.php:436
-msgid "Button Size & Spacing"
+#: dist/editor_blocks.js:2
+msgid "Colored Layout"
 msgstr ""
 
 #: dist/translation-strings.php:437
-msgid "Button Borders & Shadows"
+#: dist/editor_blocks.js:2
+msgid "Sectioned Layout"
 msgstr ""
 
 #: dist/translation-strings.php:438
-msgid "Styles"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Sectioned"
 msgstr ""
 
 #: dist/translation-strings.php:439
-msgid "Conditional Display"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Notification Type"
 msgstr ""
 
 #: dist/translation-strings.php:440
-msgid "Block Width"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Success"
 msgstr ""
 
 #: dist/translation-strings.php:441
-msgid "Align Wide"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Error"
 msgstr ""
 
 #: dist/translation-strings.php:442
-msgid "Align Full"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Warning"
 msgstr ""
 
 #: dist/translation-strings.php:443
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Content Width"
+#: dist/editor_blocks.js:2
+msgid "Information"
 msgstr ""
 
 #: dist/translation-strings.php:444
-msgid "Set the content to be smaller than the block width"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Dismissible"
 msgstr ""
 
 #: dist/translation-strings.php:445
-msgid "When enabled, the last column will be cloned instead of adding a blank column."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Icon Size"
 msgstr ""
 
 #: dist/translation-strings.php:446
-#: src/stk-block-types.php:206
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:478
-msgid "Columns"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:242
+msgid "Icon Color"
 msgstr ""
 
 #: dist/translation-strings.php:447
-msgid "Allow Column Wrapping"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Side"
 msgstr ""
 
 #: dist/translation-strings.php:448
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Inner Column Spacing"
+msgid "Bordered"
 msgstr ""
 
 #: dist/translation-strings.php:449
-msgid "Sets column paddings, the space inside the block between the block elements and the column container border"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Outlined"
 msgstr ""
 
 #: dist/translation-strings.php:450
-msgid "Sets the distance between two or more columns"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Large Icon"
 msgstr ""
 
 #: dist/translation-strings.php:451
-#: src/stk-block-types.php:216
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:431
-msgid "Container"
+#: dist/editor_blocks.js:2
+msgid "Label"
 msgstr ""
 
 #: dist/translation-strings.php:452
-msgid "Container Min. Height"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:170
+msgid "Flip Horizontally"
 msgstr ""
 
 #: dist/translation-strings.php:453
-msgid "Max Container Width"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Flip Vertically"
 msgstr ""
 
 #: dist/translation-strings.php:454
-msgid "Container Horizontal Align"
+#: src/stk-block-types.php:782
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:554
+msgid "Spacer"
 msgstr ""
 
 #: dist/translation-strings.php:455
-msgid "Container Vertical Align"
+#: dist/editor_blocks.js:2
+msgid "Type / to choose a block"
 msgstr ""
 
 #: dist/translation-strings.php:456
-msgid "Container Background"
+#: dist/editor_blocks.js:2
+msgid "Subtitle for this block."
 msgstr ""
 
 #: dist/translation-strings.php:457
-msgid "Trigger hover state on nested blocks"
+#: dist/editor_blocks.js:2
+msgid "Tab %d"
 msgstr ""
 
 #: dist/translation-strings.php:458
-msgid "Container Borders & Shadow"
+#: src/stk-block-types.php:880
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:567
+msgid "Tabs"
 msgstr ""
 
 #: dist/translation-strings.php:459
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:158
-msgid "Custom CSS"
+#: dist/editor_blocks.js:2
+msgid "Initial Tab Open"
 msgstr ""
 
 #: dist/translation-strings.php:460
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Icon Size"
+msgid "Equal tab height"
 msgstr ""
 
 #: dist/translation-strings.php:461
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:222
-msgid "Icon Opacity"
+msgid "Tab Orientation"
 msgstr ""
 
 #: dist/translation-strings.php:462
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Icon Rotation"
+msgid "Tab Panel Offset"
 msgstr ""
 
 #: dist/translation-strings.php:463
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Icon Position"
+msgid "Tab Panel Effect"
 msgstr ""
 
 #: dist/translation-strings.php:464
 #: dist/editor_blocks.js:2
-msgid "Icon Gap"
+msgid "Immediate"
 msgstr ""
 
 #: dist/translation-strings.php:465
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:209
-msgid "Shape Color"
+#: dist/translation-strings.js:176
+msgid "Name"
 msgstr ""
 
 #: dist/translation-strings.php:466
-msgid "Shape Border Radius"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:177
+msgid "Position"
 msgstr ""
 
 #: dist/translation-strings.php:467
-msgid "Shape Padding"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Cover"
 msgstr ""
 
 #: dist/translation-strings.php:468
-msgid "Shape Outline Width"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Bubble"
 msgstr ""
 
 #: dist/translation-strings.php:469
-msgid "Shape Outline Color"
+#: dist/editor_blocks.js:2
+msgid "Inverted Vertical"
 msgstr ""
 
 #: dist/translation-strings.php:470
-msgid "Icon Shape"
+#: dist/editor_blocks.js:2
+msgid "Classic"
 msgstr ""
 
 #: dist/translation-strings.php:471
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:206
-msgid "Background Shape"
+#: dist/editor_blocks.js:2
+msgid "Centered Pills"
 msgstr ""
 
 #: dist/translation-strings.php:472
-msgid "Select Image"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:415
+msgid "Left"
 msgstr ""
 
 #: dist/translation-strings.php:473
-msgid "Image Url"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:416
+msgid "Right"
 msgstr ""
 
 #: dist/translation-strings.php:474
-msgid "Aspect Ratio"
+#: dist/editor_blocks.js:2
+msgid "Top"
 msgstr ""
 
 #: dist/translation-strings.php:475
-msgid "Original"
+#: dist/editor_blocks.js:2
+msgid "Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:476
-msgid "Square 1:1"
+#: dist/editor_blocks.js:2
+msgid "Are you sure you want to delete this tab?"
 msgstr ""
 
 #: dist/translation-strings.php:477
-msgid "Standard 4:3"
+#: dist/editor_blocks.js:2
+msgid "Tab Label"
 msgstr ""
 
 #: dist/translation-strings.php:478
-msgid "Classic 3:2"
+#: dist/editor_blocks.js:2
+msgid "Move left"
 msgstr ""
 
 #: dist/translation-strings.php:479
-msgid "Wide 16:9"
+#: dist/editor_blocks.js:2
+msgid "Move right"
 msgstr ""
 
 #: dist/translation-strings.php:480
-msgid "Cinematic 2:1"
+#: dist/editor_blocks.js:2
+msgid "Add tab"
 msgstr ""
 
 #: dist/translation-strings.php:481
-msgid "Ultra Wide 3:1"
+#: dist/editor_blocks.js:2
+msgid "Duplicate tab"
 msgstr ""
 
 #: dist/translation-strings.php:482
-msgid "Panoramic 4:1"
+#: dist/editor_blocks.js:2
+msgid "Delete tab"
 msgstr ""
 
 #: dist/translation-strings.php:483
-msgid "Portrait 3:4"
+#: dist/editor_blocks.js:2
+msgid "Fixed Icon Position"
 msgstr ""
 
 #: dist/translation-strings.php:484
-msgid "Classic Portrait 2:3"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Icon Position"
 msgstr ""
 
 #: dist/translation-strings.php:485
-msgid "Tall 9:16"
+#: dist/editor_blocks.js:2
+msgid "Tab Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:486
-msgid "Image width"
+#: dist/editor_blocks.js:2
+msgid "Text Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:487
-msgid "Adjusts the image width"
+#: dist/editor_blocks.js:2
+msgid "Scrollable Tabs on Mobile"
 msgstr ""
 
 #: dist/translation-strings.php:488
-msgid "Image height"
+#: dist/editor_blocks.js:2
+msgid "Tab"
 msgstr ""
 
 #: dist/translation-strings.php:489
-msgid "Adjusts the image height"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Text Color"
 msgstr ""
 
 #: dist/translation-strings.php:490
-msgid "Open Image in Lightbox"
+#: dist/editor_blocks.js:2
+msgid "Tab Active State"
 msgstr ""
 
 #: dist/translation-strings.php:491
-msgid "Image Alt"
+#: dist/editor_blocks.js:2
+msgid "Typography"
 msgstr ""
 
 #: dist/translation-strings.php:492
 #: dist/editor_blocks.js:2
-msgid "Zoom"
+msgid "Change icons individually by clicking on each tab's icon."
 msgstr ""
 
 #: dist/translation-strings.php:493
-msgid "Image Shadow"
+#: dist/editor_blocks.js:2
+msgid "Tab Anchors"
 msgstr ""
 
 #: dist/translation-strings.php:494
-msgid "Adjusts the intensity of the image shadow"
+#: dist/editor_blocks.js:2
+msgid "Assign unique anchor names to each tab so you'll be able to link directly and open each one."
 msgstr ""
 
 #: dist/translation-strings.php:495
 #: dist/editor_blocks.js:2
-msgid "Sets the image display size to thumbnail, medium, large or full size. A smaller image size will also load faster."
+msgid "%s Anchor"
 msgstr ""
 
 #: dist/translation-strings.php:496
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:429
-msgid "Border Radius"
+msgid "Tab Anchor"
 msgstr ""
 
 #: dist/translation-strings.php:497
-msgid "Adjusts the radius of image corners to make them more rounded"
+#: dist/editor_blocks.js:2
+msgid "Text for this block. Use this space for describing your block. Any text will do. Text for this block. You can use this space for describing your block."
 msgstr ""
 
 #: dist/translation-strings.php:498
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Color"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:142
+msgctxt "Content placeholder"
+msgid "Description for this block. Use this space for describing your block. Any text will do."
 msgstr ""
 
 #: dist/translation-strings.php:499
-msgid "Overlay Opacity"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:346
+msgid "Single"
 msgstr ""
 
 #: dist/translation-strings.php:500
-msgid "Overlay Blend Mode"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:237
+msgid "Gradient"
 msgstr ""
 
 #: dist/translation-strings.php:501
-msgid "Sets how the overlay color blends with the image"
+#: dist/editor_blocks.js:2
+msgid "Content Position"
 msgstr ""
 
 #: dist/translation-strings.php:502
-msgid "Focal point"
+#: src/stk-block-types.php:962
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:576
+msgid "Timeline"
 msgstr ""
 
 #: dist/translation-strings.php:503
-msgid "Image Fit"
+#: dist/editor_blocks.js:2
+msgid "Accent Anchor Position"
 msgstr ""
 
 #: dist/translation-strings.php:504
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Contain"
+#: dist/editor_blocks.js:2
+msgid "Succeeding timeline blocks will also use this value."
 msgstr ""
 
 #: dist/translation-strings.php:505
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Cover"
+msgid "%s Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:506
-msgid "Fill"
+#: dist/editor_blocks.js:2
+msgid "Line Thickness"
 msgstr ""
 
 #: dist/translation-strings.php:507
-msgid "Scale Down"
+#: dist/editor_blocks.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:233
+msgid "Horizontal Offset"
 msgstr ""
 
 #: dist/translation-strings.php:508
-msgid "Sets the fit to default, contain, cover, fill, none, and scale down. Image fit specifies how an image resizes in a container."
+#: dist/editor_blocks.js:2
+msgctxt "option title"
+msgid "%s #%d"
 msgstr ""
 
 #: dist/translation-strings.php:509
-msgid "Image Shape"
+#: dist/editor_blocks.js:2
+msgid "Timeline Accent Color"
 msgstr ""
 
 #: dist/translation-strings.php:510
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:208
-msgid "Change the shape of the image"
+#: dist/editor_blocks.js:2
+msgid "Timeline Background Color"
 msgstr ""
 
 #: dist/translation-strings.php:511
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Flip Shape Horizontally"
+#: dist/editor_blocks.js:2
+msgid "Unordered"
 msgstr ""
 
 #: dist/translation-strings.php:512
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Flip Shape Vertically"
+#: dist/editor_blocks.js:2
+msgctxt "%s is a heading level, e.g. H1"
+msgid "Include %s"
 msgstr ""
 
 #: dist/translation-strings.php:513
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Stretch Shape Mask"
+#: dist/editor_blocks.js:2
+msgid "Auto-generate missing anchor ids"
 msgstr ""
 
 #: dist/translation-strings.php:514
-msgid "Image Filter"
+#: dist/editor_blocks.js:2
+msgid "Scrolling"
 msgstr ""
 
 #: dist/translation-strings.php:515
-msgid "When linked, styling this block would also style other linked blocks in adjacent columns."
+#: dist/editor_blocks.js:2
+msgid "Use smooth scroll"
 msgstr ""
 
 #: dist/translation-strings.php:516
-msgid "Learn more about linking"
+#: dist/editor_blocks.js:2
+msgid "Scroll Top Offset "
 msgstr ""
 
 #: dist/translation-strings.php:517
-#: src/welcome/index.php:260
-msgid "Motion Effects"
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Introduction"
 msgstr ""
 
 #: dist/translation-strings.php:518
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Responsive"
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Chapter 1: Abstract"
 msgstr ""
 
 #: dist/translation-strings.php:519
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hide on Desktop"
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Chapter 2: History"
 msgstr ""
 
 #: dist/translation-strings.php:520
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hide on Tablet"
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Chapter 3: Main Content"
 msgstr ""
 
 #: dist/translation-strings.php:521
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hide on Mobile"
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Chapter 4: Additional Thoughts"
 msgstr ""
 
 #: dist/translation-strings.php:522
-#: src/stk-block-types.php:744
-#: dist/translation-strings.js:549
-msgid "Progress Circle"
+#: dist/editor_blocks.js:2
+msgctxt "Table of Contents example text"
+msgid "Conclusion"
 msgstr ""
 
 #: dist/translation-strings.php:523
-#: src/stk-block-types.php:725
-#: dist/translation-strings.js:546
-msgid "Progress Bar"
+#: src/stk-block-types.php:859
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:562
+msgid "Table of Contents"
 msgstr ""
 
 #: dist/translation-strings.php:524
-msgid "Progress"
+#: dist/editor_blocks.js:2
+msgid "Include heading"
 msgstr ""
 
 #: dist/translation-strings.php:525
-msgid "Maximum Progress"
+#: dist/editor_blocks.js:2
+msgid "Exclude heading"
 msgstr ""
 
 #: dist/translation-strings.php:526
-msgid "Apply border radius to bar"
+#: src/stk-block-types.php:363
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+#: dist/translation-strings.js:500
+msgid "Heading"
 msgstr ""
 
 #: dist/translation-strings.php:527
-msgid "Thickness"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Address"
 msgstr ""
 
 #: dist/translation-strings.php:528
-msgid "Bar Color #%s"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Article"
 msgstr ""
 
 #: dist/translation-strings.php:529
-msgid "Bar Color"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Aside"
 msgstr ""
 
 #: dist/translation-strings.php:530
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:215
-msgid "Gradient Direction (degrees)"
+msgctxt "HTML Tag"
+msgid "Blockquote"
 msgstr ""
 
 #: dist/translation-strings.php:531
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Adv. Gradient Color Settings"
+msgctxt "HTML Tag"
+msgid "Div"
 msgstr ""
 
 #: dist/translation-strings.php:532
-msgid "Gradient Direction"
+msgctxt "HTML Tag"
+msgid "Details"
 msgstr ""
 
 #: dist/translation-strings.php:533
-msgid "Sets the direction (in degrees) of the colors"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Footer"
 msgstr ""
 
 #: dist/translation-strings.php:534
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Color %d Location"
+msgctxt "HTML Tag"
+msgid "Header"
 msgstr ""
 
 #: dist/translation-strings.php:535
-msgid "Sets the placement of each color in relation to the other color"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Hgroup"
 msgstr ""
 
 #: dist/translation-strings.php:536
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Gradient Blend Mode"
+msgctxt "HTML Tag"
+msgid "Main"
 msgstr ""
 
 #: dist/translation-strings.php:537
-msgid "Sets how this background gradient/image blends into the other background"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "HTML Tag"
+msgid "Nav"
 msgstr ""
 
 #: dist/translation-strings.php:538
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Color"
+msgctxt "HTML Tag"
+msgid "Section"
 msgstr ""
 
 #: dist/translation-strings.php:539
-msgid "Animate"
+msgctxt "HTML Tag"
+msgid "Summary"
 msgstr ""
 
 #: dist/translation-strings.php:540
-msgid "Accessibility Label"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgctxt "component"
+msgid "%s HTML Tag"
 msgstr ""
 
 #: dist/translation-strings.php:541
-msgid "Progress Bar Text"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Block"
 msgstr ""
 
 #: dist/translation-strings.php:542
-msgid "Progress Prefix"
+msgid "Overflow"
 msgstr ""
 
 #: dist/translation-strings.php:543
-msgid "Progress Suffix"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Auto"
 msgstr ""
 
 #: dist/translation-strings.php:544
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Design"
+msgid "Hidden"
 msgstr ""
 
 #: dist/translation-strings.php:545
-msgid "Separator Height"
+msgid "Scroll"
 msgstr ""
 
 #: dist/translation-strings.php:546
-msgid "Adjusts the height of the separator to stretch or compress vertically"
+msgid "Visible"
 msgstr ""
 
 #: dist/translation-strings.php:547
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Separator Width"
+msgid "Clear"
 msgstr ""
 
 #: dist/translation-strings.php:548
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:439
-msgid "Shadow"
+msgid "Both"
 msgstr ""
 
 #: dist/translation-strings.php:549
-msgid "Adjusts the intensity of the separator shadow and makes the separator more prominent"
+msgid "Adjusts the transparency of the entire block"
 msgstr ""
 
 #: dist/translation-strings.php:550
-msgid "Invert Design"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Z-Index"
 msgstr ""
 
 #: dist/translation-strings.php:551
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:227
-msgid "Flip Horizontally"
+msgid "Sets the stack order of different blocks to make one appear in front of another. A block with a higher z-index will show up on top of another block with a lower z-index."
 msgstr ""
 
 #: dist/translation-strings.php:552
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Flip Vertically"
+msgid "Sticky position may not work across all themes"
 msgstr ""
 
 #: dist/translation-strings.php:553
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Bring to Front"
+msgid "Static"
 msgstr ""
 
 #: dist/translation-strings.php:554
-msgid "Brings the separator layer in front of other block elements"
+msgid "Relative"
 msgstr ""
 
 #: dist/translation-strings.php:555
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Top Separator"
+msgid "Absolute"
 msgstr ""
 
 #: dist/translation-strings.php:556
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Bottom Separator"
+msgid "Sticky"
 msgstr ""
 
 #: dist/translation-strings.php:557
-msgid "Transform & Transition"
+msgid "Align Left"
 msgstr ""
 
 #: dist/translation-strings.php:558
-msgid "Use theme heading margins"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Align Center"
 msgstr ""
 
 #: dist/translation-strings.php:559
-msgid "Font Style"
+msgid "Align Right"
 msgstr ""
 
 #: dist/translation-strings.php:560
-msgid "Italic"
+msgid "Justified"
 msgstr ""
 
 #: dist/translation-strings.php:561
-msgid "Oblique"
+msgid "Content Min. Height"
 msgstr ""
 
 #: dist/translation-strings.php:562
-#: dist/editor_blocks.js:2
-msgid "Stackable Settings"
+msgid "Content Max Width"
 msgstr ""
 
 #: dist/translation-strings.php:563
-#: dist/editor_blocks.js:2
-msgid "Reset layout"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Content Horizontal Align"
 msgstr ""
 
 #: dist/translation-strings.php:564
-#: dist/editor_blocks.js:2
-msgid "Error saving block, please make sure you only have a %s block"
+msgid "Sets the placement of the column container to left, center or right. Not available when block width is set to full width."
 msgstr ""
 
 #: dist/translation-strings.php:565
-#: dist/editor_blocks.js:2
-msgid "Default %s Block saved"
+msgid "Adjusts the placement of all content in the block to align left, center or right"
 msgstr ""
 
 #: dist/translation-strings.php:566
-#: dist/editor_blocks.js:2
-msgid "%s Block style saved"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:407
+msgid "Column"
 msgstr ""
 
 #: dist/translation-strings.php:567
-#: dist/editor_blocks.js:2
-msgid "Default %s Block Saved!"
+msgid "Sets the horizontal position and spacing of the inner columns."
 msgstr ""
 
 #: dist/translation-strings.php:568
-#: dist/editor_blocks.js:2
-msgid "Save as Default %s Block"
+msgid "Column contents need to be narrow for effect to show."
 msgstr ""
 
 #: dist/translation-strings.php:569
-#: dist/editor_blocks.js:2
-msgid "Default %s Block Deleted!"
+msgid "Sets the vertical position of the inner columns relative to the columns block."
 msgstr ""
 
 #: dist/translation-strings.php:570
-#: dist/editor_blocks.js:2
-msgid "Reset Default %s Block"
+msgid "%s Direction"
 msgstr ""
 
 #: dist/translation-strings.php:571
-#: dist/editor_blocks.js:2
-msgid "Couldn't update block styles, got this error:"
+msgid "Inner Block"
 msgstr ""
 
 #: dist/translation-strings.php:572
-#: dist/editor_blocks.js:2
-msgid "Please refresh the page and try again."
+msgid "Sets the horizontal/vertical position and spacing of the inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:573
-msgid "The page will now reload for the old blocks to load. Please reload it if it does not refresh automatically."
+msgid "Aligns the horizontal/vertical position of the inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:574
-msgid "Stackable V2 Block Detected"
+msgid "Set Content Min. Height for alignment to display properly"
 msgstr ""
 
 #: dist/translation-strings.php:575
-msgid "Hello! 👋"
+msgid "Inner Block Wrapping"
 msgstr ""
 
 #: dist/translation-strings.php:576
-msgid "We noticed that the page you are editing contains old Stackable version 2 blocks. Starting Stackable version 3, old v2 blocks are not anymore loaded in the editor. This means that you would not be able to edit the old v2 blocks in the editor and any old v2 block would show a block error in the editor."
+msgid "%s %s"
 msgstr ""
 
 #: dist/translation-strings.php:577
-msgid "Do you want to enable backward compatibility, so the old blocks will be loaded in the editor?"
+msgid "Sets the gap between the columns of inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:578
-msgid "Yes, load V2 Blocks in the editor, but only when V2 blocks are present already"
+msgid "Sets the gap between inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:579
-msgid "Yes, always load V2 blocks in the editor"
+msgid "Sets the gap between the rows of inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:580
-msgid "No, don't load V2 blocks in the editor"
+msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding. Opens inner image block if no link is provided"
 msgstr ""
 
 #: dist/translation-strings.php:581
 #: dist/editor_blocks.js:2
-msgid "Quotation Mark Icons"
+msgid "Play Video"
 msgstr ""
 
 #: dist/translation-strings.php:582
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Pick another icon"
+msgid "Popup Option #1: Upload Video"
 msgstr ""
 
 #: dist/translation-strings.php:583
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "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."
+msgid "Use .mp4 format for videos"
 msgstr ""
 
 #: dist/translation-strings.php:584
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Round Thin"
+msgid "Popup Option #2: Video URL"
 msgstr ""
 
 #: dist/translation-strings.php:585
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Round"
+msgid "Paste a Youtube / Vimeo URL"
 msgstr ""
 
 #: dist/translation-strings.php:586
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Round Thick"
+msgid "Allow fullscreen"
 msgstr ""
 
 #: dist/translation-strings.php:587
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Round Fat"
+msgid "Allow download video"
 msgstr ""
 
 #: dist/translation-strings.php:588
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Square Thin"
+msgid "Loop video"
 msgstr ""
 
 #: dist/translation-strings.php:589
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Square Simple"
+msgid "Styles"
 msgstr ""
 
 #: dist/translation-strings.php:590
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Square Modern"
+msgid "Darken"
 msgstr ""
 
 #: dist/translation-strings.php:591
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Square Fat"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:434
+msgid "Lift"
 msgstr ""
 
 #: dist/translation-strings.php:592
-#: dist/editor_blocks.js:2
-msgctxt "Block layout name"
-msgid "%s Layout"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:183
+msgid "Scale"
 msgstr ""
 
 #: dist/translation-strings.php:593
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:306
-msgctxt "Content placeholder"
-msgid "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."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Lift & Scale"
 msgstr ""
 
 #: dist/translation-strings.php:594
-#: dist/editor_blocks.js:2
-msgid "Simple"
+msgid "Lift More"
 msgstr ""
 
 #: dist/translation-strings.php:595
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Highlighted"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Scale More"
 msgstr ""
 
 #: dist/translation-strings.php:596
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Huge"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Lift & Scale More"
 msgstr ""
 
 #: dist/translation-strings.php:597
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Centered Quote"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:442
+msgid "Hover Effect"
 msgstr ""
 
 #: dist/translation-strings.php:598
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Title for This Block"
+msgid "Hover effect"
 msgstr ""
 
 #: dist/translation-strings.php:599
-#: src/stk-block-types.php:51
-#: src/stk-block-types.php:96
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:464
-msgid "Button"
+msgid "Triggers animation or effects when you mouse over"
 msgstr ""
 
 #: dist/translation-strings.php:600
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:305
-msgctxt "Heading placeholder"
-msgid "Title for This Block"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Button Color"
 msgstr ""
 
 #: dist/translation-strings.php:601
-#: dist/editor_blocks.js:2
-msgid "Horizontal 2"
+msgid "Button Colors"
 msgstr ""
 
 #: dist/translation-strings.php:602
-#: dist/editor_blocks.js:2
-msgid "Horizontal 3"
+msgid "Min. Button Height"
 msgstr ""
 
 #: dist/translation-strings.php:603
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Split Centered"
+msgid "Button Width"
 msgstr ""
 
 #: dist/translation-strings.php:604
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Ghost"
+msgid "Button Padding"
 msgstr ""
 
 #: dist/translation-strings.php:605
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Plain"
+msgid "Button padding"
 msgstr ""
 
 #: dist/translation-strings.php:606
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Button text"
+msgid "Adjusts the space between the button text and button borders"
 msgstr ""
 
 #: dist/translation-strings.php:607
-#: dist/editor_blocks.js:2
-msgid "Call to action"
+msgid "Button Size & Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:608
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Open at the start"
+msgid "Button Borders & Shadows"
 msgstr ""
 
 #: dist/translation-strings.php:609
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Close adjacent on open"
+msgid "Block Size & Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:610
-#: dist/editor_blocks.js:2
-msgid "Automatically closes adjacent accordion panels when clicked."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Background"
 msgstr ""
 
 #: dist/translation-strings.php:611
-#: dist/editor_blocks.js:2
-msgid "Enable FAQ Schema"
+msgid "Borders & Shadows"
 msgstr ""
 
 #: dist/translation-strings.php:612
-#: dist/editor_blocks.js:2
-msgid "Open Icon"
+msgid "When enabled, the last column will be cloned instead of adding a blank column."
 msgstr ""
 
 #: dist/translation-strings.php:613
-#: dist/editor_blocks.js:2
-msgid "The open icon will appear when the accordion is opened"
+#: src/welcome/index.php:119
+#: src/welcome/index.php:336
+msgid "Settings"
 msgstr ""
 
 #: dist/translation-strings.php:614
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Colored"
+msgid "Allow Column Wrapping"
 msgstr ""
 
 #: dist/translation-strings.php:615
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Plus"
+msgid "Sets column paddings, the space inside the block between the block elements and the column container border"
 msgstr ""
 
 #: dist/translation-strings.php:616
-#: dist/editor_blocks.js:2
-msgid "Full Width Buttons"
+msgid "Sets the distance between two or more columns"
 msgstr ""
 
 #: dist/translation-strings.php:617
-#: dist/editor_blocks.js:2
-msgid "Flex Wrap"
+msgid "Conditional Display"
 msgstr ""
 
 #: dist/translation-strings.php:618
-#: dist/editor_blocks.js:2
-msgid "Wrap Reverse"
+msgid "Block Width"
 msgstr ""
 
 #: dist/translation-strings.php:619
-#: dist/editor_blocks.js:2
-msgid "Button Text"
+msgid "Align Wide"
 msgstr ""
 
 #: dist/translation-strings.php:620
-#: src/stk-block-types.php:88
-#: src/stk-block-types.php:462
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:463
-msgid "Icon Button"
+msgid "Align Full"
 msgstr ""
 
 #: dist/translation-strings.php:621
-#: src/stk-block-types.php:104
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:465
-msgid "Social Buttons"
+msgid "Content Width"
 msgstr ""
 
 #: dist/translation-strings.php:622
-#: src/stk-block-types.php:105
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:466
-msgid "Add social buttons."
+msgid "Set the content to be smaller than the block width"
 msgstr ""
 
 #: dist/translation-strings.php:623
-#: dist/editor_blocks.js:2
-msgid "Column Spacing"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:178
+msgid "Custom CSS"
 msgstr ""
 
 #: dist/translation-strings.php:624
-#: dist/editor_blocks.js:2
-msgid "Sets the paddings between the column content and the border."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Custom Attributes"
 msgstr ""
 
 #: dist/translation-strings.php:625
-#: dist/editor_blocks.js:2
-msgid "Align Last Block to Bottom"
+#: src/stk-block-types.php:216
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:431
+msgid "Container"
 msgstr ""
 
 #: dist/translation-strings.php:626
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Subtitle for This Block"
+msgid "Container Min. Height"
 msgstr ""
 
 #: dist/translation-strings.php:627
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:307
-msgctxt "Subtitle placeholder"
-msgid "Subtitle for This Block"
+msgid "Max Container Width"
 msgstr ""
 
 #: dist/translation-strings.php:628
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:308
-msgctxt "Button placeholder"
-msgid "Button"
+msgid "Container Horizontal Align"
 msgstr ""
 
 #: dist/translation-strings.php:629
-#: dist/editor_blocks.js:2
-msgid "Default 2"
+msgid "Container Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:630
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:279
-msgid "Full"
+msgid "Container Background"
 msgstr ""
 
 #: dist/translation-strings.php:631
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Faded"
+msgid "Trigger hover state on nested blocks"
 msgstr ""
 
 #: dist/translation-strings.php:632
-#: dist/editor_blocks.js:2
-msgid "Slides"
+msgid "Container Borders & Shadow"
 msgstr ""
 
 #: dist/translation-strings.php:633
-#: dist/editor_blocks.js:2
-msgid "Carousel Type"
+#: src/welcome/index.php:260
+msgid "Motion Effects"
 msgstr ""
 
 #: dist/translation-strings.php:634
-#: dist/editor_blocks.js:2
-msgid "Slide"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:230
+msgid "Shape Color"
 msgstr ""
 
 #: dist/translation-strings.php:635
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Fade"
+msgid "Shape Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:636
-#: dist/editor_blocks.js:2
-msgid "Infinite Scrolling"
+msgid "Shape Padding"
 msgstr ""
 
 #: dist/translation-strings.php:637
-#: dist/editor_blocks.js:2
-msgid "Only visible in the frontend."
+msgid "Shape Outline Width"
 msgstr ""
 
 #: dist/translation-strings.php:638
-#: dist/editor_blocks.js:2
-msgid "Slides to Show"
+msgid "Shape Outline Color"
 msgstr ""
 
 #: dist/translation-strings.php:639
-#: dist/editor_blocks.js:2
-msgid "Slide Gap"
+msgid "Icon Shape"
 msgstr ""
 
 #: dist/translation-strings.php:640
-#: dist/editor_blocks.js:2
-msgid "Fade duration"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:227
+msgid "Background Shape"
 msgstr ""
 
 #: dist/translation-strings.php:641
-#: dist/editor_blocks.js:2
-msgid "Autoplay"
+msgid "When linked, styling this block would also style other linked blocks in adjacent columns."
 msgstr ""
 
 #: dist/translation-strings.php:642
-#: dist/editor_blocks.js:2
-msgid "Speed (ms)"
+msgid "Learn more about linking"
 msgstr ""
 
 #: dist/translation-strings.php:643
-#: dist/editor_blocks.js:2
-msgid "Arrows"
+msgid "Select Image"
 msgstr ""
 
 #: dist/translation-strings.php:644
-#: dist/editor_blocks.js:2
-msgid "Previous Slide Icon"
+msgid "Image Url"
 msgstr ""
 
 #: dist/translation-strings.php:645
-#: dist/editor_blocks.js:2
-msgid "Next Slide Icon"
+msgid "Aspect Ratio"
 msgstr ""
 
 #: dist/translation-strings.php:646
-#: dist/editor_blocks.js:2
-msgid "Arrow Position"
+msgid "Original"
 msgstr ""
 
 #: dist/translation-strings.php:647
-#: dist/editor_blocks.js:2
-msgid "Inside"
+msgid "Square 1:1"
 msgstr ""
 
 #: dist/translation-strings.php:648
-#: dist/editor_blocks.js:2
-msgid "Outside"
+msgid "Standard 4:3"
 msgstr ""
 
 #: dist/translation-strings.php:649
-#: dist/editor_blocks.js:2
-msgid "%s Offset"
+msgid "Classic 3:2"
 msgstr ""
 
 #: dist/translation-strings.php:650
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Button Gap"
+msgid "Wide 16:9"
 msgstr ""
 
 #: dist/translation-strings.php:651
-#: dist/editor_blocks.js:2
-msgid "%s Color"
+msgid "Cinematic 2:1"
 msgstr ""
 
 #: dist/translation-strings.php:652
-#: dist/editor_blocks.js:2
-msgid "Show %s on mobile"
+msgid "Ultra Wide 3:1"
 msgstr ""
 
 #: dist/translation-strings.php:653
-#: dist/editor_blocks.js:2
-msgid "arrows"
+msgid "Panoramic 4:1"
 msgstr ""
 
 #: dist/translation-strings.php:654
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Dots"
+msgid "Portrait 3:4"
 msgstr ""
 
 #: dist/translation-strings.php:655
-#: dist/editor_blocks.js:2
-msgid "Dot Style"
+msgid "Classic Portrait 2:3"
 msgstr ""
 
 #: dist/translation-strings.php:656
-#: src/stk-block-types.php:871
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:566
-msgid "Outline"
+msgid "Tall 9:16"
 msgstr ""
 
 #: dist/translation-strings.php:657
-#: dist/editor_blocks.js:2
-msgid "Dot"
+msgid "Image width"
 msgstr ""
 
 #: dist/translation-strings.php:658
-#: dist/editor_blocks.js:2
-msgid "Active Dot"
+msgid "Adjusts the image width"
 msgstr ""
 
 #: dist/translation-strings.php:659
-#: dist/editor_blocks.js:2
-msgid "%s Gap"
+msgid "Image height"
 msgstr ""
 
 #: dist/translation-strings.php:660
-#: dist/editor_blocks.js:2
-msgid "To improve accessibility, the clickable area of the dots will not go below %s."
+msgid "Adjusts the image height"
 msgstr ""
 
 #: dist/translation-strings.php:661
-#: dist/editor_blocks.js:2
-msgid "dots"
+msgid "Open Image in Lightbox"
 msgstr ""
 
 #: dist/translation-strings.php:662
-#: dist/editor_blocks.js:2
-msgid "Accessibility"
+msgid "Image Alt"
 msgstr ""
 
 #: dist/translation-strings.php:663
-#: dist/editor_blocks.js:2
-msgid "%s label"
+msgid "Image Shadow"
 msgstr ""
 
 #: dist/translation-strings.php:664
-#: dist/editor_blocks.js:2
-msgid "Previous slide"
+msgid "Adjusts the intensity of the image shadow"
 msgstr ""
 
 #: dist/translation-strings.php:665
-#: dist/editor_blocks.js:2
-msgid "Next slide"
+msgid "Adjusts the radius of image corners to make them more rounded"
 msgstr ""
 
 #: dist/translation-strings.php:666
-#: dist/editor_blocks.js:2
-msgid "Use %%d to show the slide number."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Overlay Color"
 msgstr ""
 
 #: dist/translation-strings.php:667
-#: dist/editor_blocks.js:2
-msgid "Slide N of N"
+msgid "Overlay Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:668
-#: dist/editor_blocks.js:2
-msgid "Use two %%d to show the slide number and the total slides. e.g. Slide 1 of 3."
+msgid "Overlay Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:669
-#: dist/editor_blocks.js:2
-msgid "Colon"
+msgid "Sets how the overlay color blends with the image"
 msgstr ""
 
 #: dist/translation-strings.php:670
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Line"
+msgid "Focal point"
 msgstr ""
 
 #: dist/translation-strings.php:671
-#: src/stk-block-types.php:763
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:551
-msgid "Separator"
+msgid "Image Fit"
 msgstr ""
 
 #: dist/translation-strings.php:672
-#: dist/editor_blocks.js:2
-msgid "Top Offset"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Contain"
 msgstr ""
 
 #: dist/translation-strings.php:673
-#: dist/editor_blocks.js:2
-msgid "Due Date"
+msgid "Fill"
 msgstr ""
 
 #: dist/translation-strings.php:674
-#: dist/editor_blocks.js:2
-msgid "Recurring"
+msgid "Scale Down"
 msgstr ""
 
 #: dist/translation-strings.php:675
-#: dist/editor_blocks.js:2
-msgid "Hide Block"
+msgid "Sets the fit to default, contain, cover, fill, none, and scale down. Image fit specifies how an image resizes in a container."
 msgstr ""
 
 #: dist/translation-strings.php:676
-#: dist/editor_blocks.js:2
-msgid "Display Message Upon Expiration"
+msgid "Image Shape"
 msgstr ""
 
 #: dist/translation-strings.php:677
-#: dist/editor_blocks.js:2
-msgid "Days"
-msgstr ""
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:229
+msgid "Change the shape of the image"
+msgstr ""
 
 #: dist/translation-strings.php:678
-#: dist/editor_blocks.js:2
-msgid "Hours"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Flip Shape Horizontally"
 msgstr ""
 
 #: dist/translation-strings.php:679
-#: dist/editor_blocks.js:2
-msgid "Minutes"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Flip Shape Vertically"
 msgstr ""
 
 #: dist/translation-strings.php:680
-#: dist/editor_blocks.js:2
-msgid "Seconds"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Stretch Shape Mask"
 msgstr ""
 
 #: dist/translation-strings.php:681
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:63
-msgid "End Date"
+msgid "Image Filter"
 msgstr ""
 
 #: dist/translation-strings.php:682
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:61
-msgid "Start Date"
+#: src/stk-block-types.php:552
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:402
+msgid "Image"
 msgstr ""
 
 #: dist/translation-strings.php:683
-#: dist/editor_blocks.js:2
-msgid "Timezone"
+#: src/stk-block-types.php:744
+#: dist/translation-strings.js:549
+msgid "Progress Circle"
 msgstr ""
 
 #: dist/translation-strings.php:684
-#: dist/editor_blocks.js:2
-msgid "Action on Expiration"
+#: src/stk-block-types.php:725
+#: dist/translation-strings.js:546
+msgid "Progress Bar"
 msgstr ""
 
 #: dist/translation-strings.php:685
-#: dist/editor_blocks.js:2
-msgid "Countdown Duration"
+msgid "Progress"
 msgstr ""
 
 #: dist/translation-strings.php:686
-#: dist/editor_blocks.js:2
-msgid "Restart Countdown After no. of Hours"
+msgid "Maximum Progress"
 msgstr ""
 
 #: dist/translation-strings.php:687
-#: dist/editor_blocks.js:2
-msgid "Enable Double Digit"
+msgid "Apply border radius to bar"
 msgstr ""
 
 #: dist/translation-strings.php:688
-#: dist/editor_blocks.js:2
-msgid "Box Gap"
+msgid "Thickness"
 msgstr ""
 
 #: dist/translation-strings.php:689
-#: dist/editor_blocks.js:2
-msgid "Label Top Margin"
+msgid "Bar Color #%s"
 msgstr ""
 
 #: dist/translation-strings.php:690
-#: dist/editor_blocks.js:2
-msgid "Digits"
+msgid "Bar Color"
 msgstr ""
 
 #: dist/translation-strings.php:691
-#: dist/editor_blocks.js:2
-msgid "Labels"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:236
+msgid "Gradient Direction (degrees)"
 msgstr ""
 
 #: dist/translation-strings.php:692
-#: dist/editor_blocks.js:2
-msgid "Content Alignment"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Adv. Gradient Color Settings"
 msgstr ""
 
 #: dist/translation-strings.php:693
-#: dist/editor_blocks.js:2
-msgid "Expired Message"
+msgid "Gradient Direction"
 msgstr ""
 
 #: dist/translation-strings.php:694
-#: dist/editor_blocks.js:2
-msgid "Days Label"
+msgid "Sets the direction (in degrees) of the colors"
 msgstr ""
 
 #: dist/translation-strings.php:695
-#: dist/editor_blocks.js:2
-msgid "Hours Label"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Color %d Location"
 msgstr ""
 
 #: dist/translation-strings.php:696
-#: dist/editor_blocks.js:2
-msgid "Minutes Label"
+msgid "Sets the placement of each color in relation to the other color"
 msgstr ""
 
 #: dist/translation-strings.php:697
-#: dist/editor_blocks.js:2
-msgid "Seconds Label"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Gradient Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:698
-#: dist/editor_blocks.js:2
-msgid "100"
+msgid "Sets how this background gradient/image blends into the other background"
 msgstr ""
 
 #: dist/translation-strings.php:699
-#: dist/editor_blocks.js:2
-msgid "One column"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Color"
 msgstr ""
 
 #: dist/translation-strings.php:700
-#: dist/editor_blocks.js:2
-msgid "50 / 50"
+msgid "Rounded"
 msgstr ""
 
 #: dist/translation-strings.php:701
-#: dist/editor_blocks.js:2
-msgid "Two columns; equal split"
+msgid "Animate"
 msgstr ""
 
 #: dist/translation-strings.php:702
-#: dist/editor_blocks.js:2
-msgid "30 / 70"
+msgid "Accessibility Label"
 msgstr ""
 
 #: dist/translation-strings.php:703
-#: dist/editor_blocks.js:2
-msgid "Two columns; one-third, two-thirds split"
+msgid "Progress Bar Text"
 msgstr ""
 
 #: dist/translation-strings.php:704
-#: dist/editor_blocks.js:2
-msgid "70 / 30"
+msgid "Progress Prefix"
 msgstr ""
 
 #: dist/translation-strings.php:705
-#: dist/editor_blocks.js:2
-msgid "Two columns; two-thirds, one-third split"
+msgid "Progress Suffix"
 msgstr ""
 
 #: dist/translation-strings.php:706
-#: dist/editor_blocks.js:2
-msgid "33 / 33 / 33"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Responsive"
 msgstr ""
 
 #: dist/translation-strings.php:707
-#: dist/editor_blocks.js:2
-msgid "Three columns; equal split"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Hide on Desktop"
 msgstr ""
 
 #: dist/translation-strings.php:708
-#: dist/editor_blocks.js:2
-msgid "25 / 50 / 25"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Hide on Tablet"
 msgstr ""
 
 #: dist/translation-strings.php:709
-#: dist/editor_blocks.js:2
-msgid "Three columns; wide center column"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Hide on Mobile"
 msgstr ""
 
 #: dist/translation-strings.php:710
-#: dist/editor_blocks.js:2
-msgid "25 / 25 / 25 / 25"
+msgid "Transform & Transition"
 msgstr ""
 
 #: dist/translation-strings.php:711
-#: dist/editor_blocks.js:2
-msgid "Four columns; equal split"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:425
+msgctxt "Nth Title"
+msgid "%s %d"
 msgstr ""
 
 #: dist/translation-strings.php:712
-#: dist/editor_blocks.js:2
-msgid "1,234.56"
+msgid "Wave"
 msgstr ""
 
 #: dist/translation-strings.php:713
-#: dist/editor_blocks.js:2
-msgid "Counter"
+msgid "Straight"
 msgstr ""
 
 #: dist/translation-strings.php:714
-#: dist/editor_blocks.js:2
-msgid "Duration (ms)"
+msgid "Slant"
 msgstr ""
 
 #: dist/translation-strings.php:715
-#: dist/editor_blocks.js:2
-msgid "1,234,567"
+msgid "Curve"
 msgstr ""
 
 #: dist/translation-strings.php:716
-#: dist/editor_blocks.js:2
-msgid "Open the Design Library and select a pre-designed block or layout."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Design"
 msgstr ""
 
 #: dist/translation-strings.php:717
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Open Design Library"
+msgid "Separator Height"
 msgstr ""
 
 #: dist/translation-strings.php:718
-#: dist/editor_blocks.js:2
-msgid "Description for this block. Use this space for describing your block."
+msgid "Adjusts the height of the separator to stretch or compress vertically"
 msgstr ""
 
 #: dist/translation-strings.php:719
-#: dist/editor_blocks.js:2
-msgctxt "Content placeholder"
-msgid "Description for this block. Use this space for describing your block."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Separator Width"
 msgstr ""
 
 #: dist/translation-strings.php:720
-#: dist/editor_blocks.js:2
-msgid "Overlap Shape 1"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:430
+msgid "Shadow / Outline"
 msgstr ""
 
 #: dist/translation-strings.php:721
-#: dist/editor_blocks.js:2
-msgid "Overlap Shape 2"
+msgid "Adjusts the intensity of the separator shadow and makes the separator more prominent"
 msgstr ""
 
 #: dist/translation-strings.php:722
-#: dist/editor_blocks.js:2
-msgid "Overlap Shape 3"
+msgid "Invert Design"
 msgstr ""
 
 #: dist/translation-strings.php:723
-#: dist/editor_blocks.js:2
-msgid "Overlap Shape 4"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Bring to Front"
 msgstr ""
 
 #: dist/translation-strings.php:724
-#: dist/editor_blocks.js:2
-msgid "Overlap Shape 5"
+msgid "Brings the separator layer in front of other block elements"
 msgstr ""
 
 #: dist/translation-strings.php:725
-#: dist/editor_blocks.js:2
-msgid "Overlap Background 1"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Top Separator"
 msgstr ""
 
 #: dist/translation-strings.php:726
-#: dist/editor_blocks.js:2
-msgid "Overlap Background 2"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Bottom Separator"
 msgstr ""
 
 #: dist/translation-strings.php:727
-#: dist/editor_blocks.js:2
-msgid "Overlap Background 3"
+msgid "Use theme heading margins"
 msgstr ""
 
 #: dist/translation-strings.php:728
-#: dist/editor_blocks.js:2
-msgid "Overlap Background 4"
+msgid "Font Family"
 msgstr ""
 
 #: dist/translation-strings.php:729
-#: dist/editor_blocks.js:2
-msgid "Overlap Background 5"
+msgid "Sets the font set to be used for the element"
 msgstr ""
 
 #: dist/translation-strings.php:730
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Bar"
+msgid "Weight"
 msgstr ""
 
 #: dist/translation-strings.php:731
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Asterisks"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:191
+msgid "Normal"
 msgstr ""
 
 #: dist/translation-strings.php:732
-#: dist/editor_blocks.js:2
-msgid "Height / Size"
+msgid "Bold"
 msgstr ""
 
 #: dist/translation-strings.php:733
-#: dist/editor_blocks.js:2
-msgid "Float"
+msgid "Font weight"
 msgstr ""
 
 #: dist/translation-strings.php:734
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Large Mid"
+msgid "Sets the thinness or thickness of text characters"
 msgstr ""
 
 #: dist/translation-strings.php:735
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:325
-msgid "Offset"
+#: dist/translation-strings.js:261
+msgid "Transform"
 msgstr ""
 
 #: dist/translation-strings.php:736
-#: dist/editor_blocks.js:2
-msgid "Zizag"
+msgid "Uppercase"
 msgstr ""
 
 #: dist/translation-strings.php:737
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Zigzag"
+msgid "Lowercase"
 msgstr ""
 
 #: dist/translation-strings.php:738
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Some short text that can be expanded to show more details."
+msgid "Capitalize"
 msgstr ""
 
 #: dist/translation-strings.php:739
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Show more"
+msgid "Sets the usage of upper or lower case"
 msgstr ""
 
 #: dist/translation-strings.php:740
-#: dist/editor_blocks.js:2
-msgid "Some long text that will be expanded when the show more button is clicked by the visitor."
+msgid "Font Style"
 msgstr ""
 
 #: dist/translation-strings.php:741
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Show less"
+msgid "Italic"
 msgstr ""
 
 #: dist/translation-strings.php:742
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Less text"
+msgid "Oblique"
 msgstr ""
 
 #: dist/translation-strings.php:743
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "More text"
+msgid "Line-Height"
 msgstr ""
 
 #: dist/translation-strings.php:744
-#: dist/editor_blocks.js:2
-msgid "Add heading text here"
+msgid "Line height"
 msgstr ""
 
 #: dist/translation-strings.php:745
-#: src/stk-block-types.php:943
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:369
-msgid "Text"
+msgid "Sets the vertical distance between lines of text"
 msgstr ""
 
 #: dist/translation-strings.php:746
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Top Line"
+msgid "Letter Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:747
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Line Color"
+msgid "Letter spacing"
 msgstr ""
 
 #: dist/translation-strings.php:748
-#: dist/editor_blocks.js:2
-msgid "Margin"
+msgid "Sets the distance or space between letters"
 msgstr ""
 
 #: dist/translation-strings.php:749
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Bottom Line"
+msgid "Font size"
 msgstr ""
 
 #: dist/translation-strings.php:750
-#: dist/editor_blocks.js:2
-msgid "Header Title"
+msgid "Sets the size of text characters"
 msgstr ""
 
 #: dist/translation-strings.php:751
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Half Overlay"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:309
+msgid "Remove"
 msgstr ""
 
 #: dist/translation-strings.php:752
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Center Overlay"
+msgid "#%s (no title)"
 msgstr ""
 
 #: dist/translation-strings.php:753
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Side Overlay"
+msgid "No posts found"
 msgstr ""
 
 #: dist/translation-strings.php:754
-#: dist/editor_blocks.js:2
-msgid "Half Layout"
+msgid "Pick a post"
 msgstr ""
 
 #: dist/translation-strings.php:755
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Half"
+msgid "No matches found"
 msgstr ""
 
 #: dist/translation-strings.php:756
-#: src/stk-block-types.php:484
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:509
-msgid "Icon Label"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:60
+msgid "Reset"
 msgstr ""
 
 #: dist/translation-strings.php:757
-#: dist/editor_blocks.js:2
-msgid "Snapping"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Start"
 msgstr ""
 
 #: dist/translation-strings.php:758
-#: dist/editor_blocks.js:2
-msgid "Snap to Start"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Center"
 msgstr ""
 
 #: dist/translation-strings.php:759
-#: dist/editor_blocks.js:2
-msgid "Snap to Center"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "End"
 msgstr ""
 
 #: dist/translation-strings.php:760
-#: dist/editor_blocks.js:2
-msgid "No Snapping"
+msgid "Space Between"
 msgstr ""
 
 #: dist/translation-strings.php:761
-#: dist/editor_blocks.js:2
-msgid "Item Width"
+msgid "Space Around"
 msgstr ""
 
 #: dist/translation-strings.php:762
-#: dist/editor_blocks.js:2
-msgid "Left Offset"
+msgid "Space Evenly"
 msgstr ""
 
 #: dist/translation-strings.php:763
-#: dist/editor_blocks.js:2
-msgid "Scrollbar"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Stretch"
 msgstr ""
 
 #: dist/translation-strings.php:764
-#: dist/editor_blocks.js:2
-msgid "Track Color"
+msgid "Baseline"
 msgstr ""
 
 #: dist/translation-strings.php:765
-#: dist/editor_blocks.js:2
-msgid "Thumb Color"
+msgid "Unit"
 msgstr ""
 
 #: dist/translation-strings.php:766
-#: dist/editor_blocks.js:2
-msgid "Thumb Radius"
+msgid "Normal State"
 msgstr ""
 
 #: dist/translation-strings.php:767
-#: dist/editor_blocks.js:2
-msgid "123"
+msgid "Hovered State"
 msgstr ""
 
 #: dist/translation-strings.php:768
-#: dist/editor_blocks.js:2
-msgid "456"
+msgid "Parent Hovered State"
 msgstr ""
 
 #: dist/translation-strings.php:769
-#: dist/editor_blocks.js:2
-msgid "789"
+msgid "Collapsed"
 msgstr ""
 
 #: dist/translation-strings.php:770
-#: src/stk-block-types.php:446
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:507
-msgid "Icon Box"
+msgid "Parent Hovered"
 msgstr ""
 
 #: dist/translation-strings.php:771
-#: dist/editor_blocks.js:2
-msgid "Pill"
+msgid "Add a Container Background to a parent block to enable this state."
 msgstr ""
 
 #: dist/translation-strings.php:772
-#: dist/editor_blocks.js:2
-msgid "Image Caption"
+msgid "Multiply"
 msgstr ""
 
 #: dist/translation-strings.php:773
-#: dist/editor_blocks.js:2
-msgid "Caption"
+msgid "Screen"
 msgstr ""
 
 #: dist/translation-strings.php:774
-#: dist/editor_blocks.js:2
-msgid "Caption Alignment"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:775
-#: dist/editor_blocks.js:2
-msgid "Unordered List"
+msgid "Lighten"
 msgstr ""
 
 #: dist/translation-strings.php:776
-#: dist/editor_blocks.js:2
-msgid "Ordered List"
+msgid "Color Dodge"
 msgstr ""
 
 #: dist/translation-strings.php:777
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "List"
+msgid "Color Burn"
 msgstr ""
 
 #: dist/translation-strings.php:778
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Grid"
+msgid "Hard Light"
 msgstr ""
 
 #: dist/translation-strings.php:779
-#: src/stk-block-types.php:239
-#: src/stk-block-types.php:692
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:370
-msgid "Number"
+msgid "Soft Light"
 msgstr ""
 
 #: dist/translation-strings.php:780
-#: dist/editor_blocks.js:2
-msgid "Padded Number"
+msgid "Difference"
 msgstr ""
 
 #: dist/translation-strings.php:781
-#: dist/editor_blocks.js:2
-msgid "Lowercase Roman"
+msgid "Exclusion"
 msgstr ""
 
 #: dist/translation-strings.php:782
-#: dist/editor_blocks.js:2
-msgid "Uppercase Roman"
+msgid "Hue"
 msgstr ""
 
 #: dist/translation-strings.php:783
-#: dist/editor_blocks.js:2
-msgid "Lowercase Letters"
+msgid "Saturation"
 msgstr ""
 
 #: dist/translation-strings.php:784
-#: dist/editor_blocks.js:2
-msgid "Uppercase Letters"
+msgid "Luminosity"
 msgstr ""
 
 #: dist/translation-strings.php:785
-#: dist/editor_blocks.js:2
-msgid "List Item"
+msgid "Initial"
 msgstr ""
 
 #: dist/translation-strings.php:786
-#: dist/editor_blocks.js:2
-msgid "More noticeable when using wide layouts or list item borders"
+msgid "Inherit"
 msgstr ""
 
 #: dist/translation-strings.php:787
-#: dist/editor_blocks.js:2
-msgid "List Display Style"
+msgid "Unset"
 msgstr ""
 
 #: dist/translation-strings.php:788
-#: dist/editor_blocks.js:2
-msgid "Indentation"
+msgid "Mix Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:789
 #: dist/editor_blocks.js:2
-msgid "Icons & Numbers"
+msgid "Edit"
 msgstr ""
 
 #: dist/translation-strings.php:790
-#: dist/editor_blocks.js:2
-msgid "List Type"
+msgid "Global Gradients"
 msgstr ""
 
 #: dist/translation-strings.php:791
 #: dist/editor_blocks.js:2
-msgid "With Period"
+msgid "Global Colors"
 msgstr ""
 
 #: dist/translation-strings.php:792
-#: dist/editor_blocks.js:2
-msgid "Icon Vertical Alignment"
+msgid "Add Column"
 msgstr ""
 
 #: dist/translation-strings.php:793
-#: dist/editor_blocks.js:2
-msgid "This is more visible if you have long text in your list."
+msgid "Adjust the individual widths of each column"
 msgstr ""
 
 #: dist/translation-strings.php:794
-#: dist/editor_blocks.js:2
-msgid "Icon Vertical Offset"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Column Widths"
 msgstr ""
 
 #: dist/translation-strings.php:795
-#: dist/editor_blocks.js:2
-msgid "Icon List Item Borders"
+msgid "Group into Container"
 msgstr ""
 
 #: dist/translation-strings.php:796
-#: dist/editor_blocks.js:2
-msgid "Line 1"
+msgid "Ungroup from Container"
 msgstr ""
 
 #: dist/translation-strings.php:797
-#: dist/editor_blocks.js:2
-msgid "Line 2"
+msgid "You can type in custom HTML attributes for this block in the field above."
 msgstr ""
 
 #: dist/translation-strings.php:798
-#: dist/editor_blocks.js:2
-msgid "Line 3"
+msgid "Example:"
 msgstr ""
 
 #: dist/translation-strings.php:799
-#: dist/editor_blocks.js:2
-msgid "Line 4"
+msgid "Learn more about Custom Attributes"
 msgstr ""
 
 #: dist/translation-strings.php:800
-#: dist/editor_blocks.js:2
-msgid "Line 5"
+msgid "There is an error in your custom attribute"
 msgstr ""
 
 #: dist/translation-strings.php:801
-#: dist/editor_blocks.js:2
-msgid "Line 6"
+#: dist/translation-strings.php:1695
+#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:160
+#: src/welcome/index.php:211
+#: src/welcome/index.php:224
+#: src/welcome/index.php:235
+#: src/welcome/index.php:348
+msgid "Go Premium"
 msgstr ""
 
 #: dist/translation-strings.php:802
-#: src/stk-block-types.php:584
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:523
-msgid "Map"
+msgid "No designs found"
 msgstr ""
 
 #: dist/translation-strings.php:803
-#: dist/editor_blocks.js:2
-msgid "Embedded content from Google Map Platform."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Layout"
 msgstr ""
 
 #: dist/translation-strings.php:804
-#: dist/editor_blocks.js:2
-msgid "Some map features require a Google API Key."
+msgid "System Fonts"
 msgstr ""
 
 #: dist/translation-strings.php:805
-#: dist/editor_blocks.js:2
-msgid "Add API key here."
+msgid "Sans-Serif"
 msgstr ""
 
 #: dist/translation-strings.php:806
-#: dist/editor_blocks.js:2
-msgid "Location"
+msgid "Serif"
 msgstr ""
 
 #: dist/translation-strings.php:807
-#: dist/editor_blocks.js:2
-msgid "Enter an address or location"
+msgid "Serif Alternative"
 msgstr ""
 
 #: dist/translation-strings.php:808
-#: dist/editor_blocks.js:2
-msgid "Enable Dragging"
+msgid "Monospace"
 msgstr ""
 
 #: dist/translation-strings.php:809
-#: dist/editor_blocks.js:2
-msgid "Full Screen Button"
+msgid "Google Fonts"
 msgstr ""
 
 #: dist/translation-strings.php:810
-#: dist/editor_blocks.js:2
-msgid "Map Type Buttons"
+msgid "Theme Fonts"
 msgstr ""
 
 #: dist/translation-strings.php:811
-#: dist/editor_blocks.js:2
-msgid "Street View Button"
+msgid "Font Size"
 msgstr ""
 
 #: dist/translation-strings.php:812
-#: dist/editor_blocks.js:2
-msgid "Zoom Buttons"
+msgid "auto"
 msgstr ""
 
 #: dist/translation-strings.php:813
-#: dist/editor_blocks.js:2
-msgid "Map Style"
+msgid "Individual sides"
 msgstr ""
 
 #: dist/translation-strings.php:814
-#: dist/editor_blocks.js:2
-msgid "Custom Map Style (Paste JSON here)"
+msgid "All sides"
 msgstr ""
 
 #: dist/translation-strings.php:815
-#: dist/editor_blocks.js:2
-msgid "Learn how to use Custom Map Styles"
+msgid "Top and Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:816
-#: dist/editor_blocks.js:2
-msgid "Map Marker"
+msgid "Left and Right"
 msgstr ""
 
 #: dist/translation-strings.php:817
-#: dist/editor_blocks.js:2
-msgid "Uploaded Icon and Icon Color settings are not fully compatible."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:263
+msgid "Top Left"
 msgstr ""
 
 #: dist/translation-strings.php:818
-#: dist/editor_blocks.js:2
-msgid "Horizontal Icon Anchor Point"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:265
+msgid "Top Right"
 msgstr ""
 
 #: dist/translation-strings.php:819
-#: dist/editor_blocks.js:2
-msgid "Vertical Icon Anchor Point"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:269
+msgid "Bottom Left"
 msgstr ""
 
 #: dist/translation-strings.php:820
-#: dist/editor_blocks.js:2
-msgid "Map Example"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:271
+msgid "Bottom Right"
 msgstr ""
 
 #: dist/translation-strings.php:821
-#: dist/editor_blocks.js:2
-msgid "Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:304
+msgid "Dynamic Fields"
 msgstr ""
 
 #: dist/translation-strings.php:822
-#: dist/editor_blocks.js:2
-msgid "Silver"
+msgid "There are no blocks in this group, please add one."
 msgstr ""
 
 #: dist/translation-strings.php:823
-#: dist/editor_blocks.js:2
-msgid "Retro"
+msgid "Add Block"
 msgstr ""
 
 #: dist/translation-strings.php:824
-#: dist/editor_blocks.js:2
-msgid "Dark"
+msgid "Stop showing tooltips"
 msgstr ""
 
 #: dist/translation-strings.php:825
-#: dist/editor_blocks.js:2
-msgid "Night"
+#: src/stk-block-types.php:953
+#: dist/translation-strings.js:575
+msgid "Paragraph"
 msgstr ""
 
 #: dist/translation-strings.php:826
-#: dist/editor_blocks.js:2
-msgid "Aubergine"
+msgid "Type to search icon"
 msgstr ""
 
 #: dist/translation-strings.php:827
-#: dist/editor_blocks.js:2
-msgid "Embedded content from Google Maps Platform."
+msgid "Icon Settings"
 msgstr ""
 
 #: dist/translation-strings.php:828
-#: dist/editor_blocks.js:2
-msgid "01"
+msgid "Upload SVG"
 msgstr ""
 
 #: dist/translation-strings.php:829
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:310
-msgctxt "Text placeholder"
-msgid "Text for This Block"
+msgid "Clear icon"
 msgstr ""
 
 #: dist/translation-strings.php:830
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Box"
+msgid "Drop your SVG here"
 msgstr ""
 
 #: dist/translation-strings.php:831
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Captioned"
+msgid "Describe the purpose of the image"
 msgstr ""
 
 #: dist/translation-strings.php:832
-#: dist/editor_blocks.js:2
-msgid "$"
+msgid "Leave empty if the image is purely decorative."
 msgstr ""
 
 #: dist/translation-strings.php:833
-#: dist/editor_blocks.js:2
-msgid "99"
+msgid "Alt Text (Alternative Text)"
 msgstr ""
 
 #: dist/translation-strings.php:834
-#: dist/editor_blocks.js:2
-msgid ".00"
+msgid "preview"
 msgstr ""
 
 #: dist/translation-strings.php:835
-#: src/stk-block-types.php:646
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:534
-msgid "Posts"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:205
+msgid "Blur"
 msgstr ""
 
 #: dist/translation-strings.php:836
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "No posts found."
+msgid "Brightness"
 msgstr ""
 
 #: dist/translation-strings.php:837
-#: dist/editor_blocks.js:2
-msgid "Content Arrangement"
+msgid "Contrast"
 msgstr ""
 
 #: dist/translation-strings.php:838
-#: dist/editor_blocks.js:2
-msgid "Sets the order of the items displayed (category, title, meta, excerpt, read more button, image) for each post"
+msgid "Grayscale"
 msgstr ""
 
 #: dist/translation-strings.php:839
-#: dist/editor_blocks.js:2
-msgid "Query"
+msgid "Hue Rotate"
 msgstr ""
 
 #: dist/translation-strings.php:840
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:396
-msgid "Number of items"
+msgid "Invert"
 msgstr ""
 
 #: dist/translation-strings.php:841
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Order by"
+msgid "Saturate"
 msgstr ""
 
 #: dist/translation-strings.php:842
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Newest to Oldest"
+msgid "Sepia"
 msgstr ""
 
 #: dist/translation-strings.php:843
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Oldest to Newest"
+msgid "Upload"
 msgstr ""
 
 #: dist/translation-strings.php:844
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "A → Z"
+msgid "Replace"
 msgstr ""
 
 #: dist/translation-strings.php:845
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Z → A"
+msgid "Circle"
 msgstr ""
 
 #: dist/translation-strings.php:846
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Last Modified to Oldest"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:349
+msgid "Blob %s"
 msgstr ""
 
 #: dist/translation-strings.php:847
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Oldest Modified to Last"
+msgid "Click on any inner block in the editor to style it."
 msgstr ""
 
 #: dist/translation-strings.php:848
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Menu Order"
+msgid "Looking for other settings? They've moved to the %s tab."
 msgstr ""
 
 #: dist/translation-strings.php:849
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Random"
+msgid "style"
 msgstr ""
 
 #: dist/translation-strings.php:850
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Featured Image"
+msgid "Dismiss hint"
 msgstr ""
 
 #: dist/translation-strings.php:851
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Category"
+msgid "layout"
 msgstr ""
 
 #: dist/translation-strings.php:852
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Excerpt"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Designs"
 msgstr ""
 
 #: dist/translation-strings.php:853
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Meta"
+msgid "Pick a design to start from, this will override your block settings"
 msgstr ""
 
 #: dist/translation-strings.php:854
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Read More Link"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Layout Tab"
 msgstr ""
 
 #: dist/translation-strings.php:855
-#: dist/editor_blocks.js:2
-msgid "Apply hover effect when container is hovered"
+msgid "Style"
 msgstr ""
 
 #: dist/translation-strings.php:856
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:272
-msgid "Excerpt Length"
+msgid "Style Tab"
 msgstr ""
 
 #: dist/translation-strings.php:857
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Show Author"
+msgid "Advanced"
 msgstr ""
 
 #: dist/translation-strings.php:858
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Show Date"
+msgid "Advanced Tab"
 msgstr ""
 
 #: dist/translation-strings.php:859
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Show Comments"
+msgid "Desktop"
 msgstr ""
 
 #: dist/translation-strings.php:860
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Default (Dot)"
+msgid "Tablet"
 msgstr ""
 
 #: dist/translation-strings.php:861
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Space"
+msgid "Mobile"
 msgstr ""
 
 #: dist/translation-strings.php:862
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Comma"
+msgid "Get More Image Shapes"
 msgstr ""
 
 #: dist/translation-strings.php:863
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Dash"
+msgid "Mask images with a variety of blob-like shapes"
 msgstr ""
 
 #: dist/translation-strings.php:864
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Pipe"
+msgid "Choose from over 50 different shapes"
 msgstr ""
 
 #: dist/translation-strings.php:865
-#: dist/editor_blocks.js:2
-msgid "Sets the separators between meta items (dot, space, comma, dash, pipe)"
+msgid "Enhances the overall aesthetic of images"
 msgstr ""
 
 #: dist/translation-strings.php:866
-#: dist/editor_blocks.js:2
-msgid "Add post links to images"
+msgid "Use Dynamic Content"
 msgstr ""
 
 #: dist/translation-strings.php:867
-#: src/block/posts/index.php:265
-#: dist/editor_blocks.js:2
-msgid "Continue Reading"
+msgid "Add dynamic content from posts or post meta"
 msgstr ""
 
 #: dist/translation-strings.php:868
-#: dist/editor_blocks.js:2
-msgid "Read More Button"
+msgid "Use third-party plugins as dynamic sources such as ACF, Meta Box, Toolset, and more"
 msgstr ""
 
 #: dist/translation-strings.php:869
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "featured"
+msgid "Build custom loop design with the Native Query Loop"
 msgstr ""
 
 #: dist/translation-strings.php:870
-#: src/block/posts/index.php:59
-#: src/deprecated/v2/block/blog-posts/index.php:251
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "(Untitled)"
+msgid "Separator Layers"
 msgstr ""
 
 #: dist/translation-strings.php:871
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Image Card"
+msgid "Add a second and third layer to separators"
 msgstr ""
 
 #: dist/translation-strings.php:872
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Portfolio"
+msgid "Change layer color, size and opacity"
 msgstr ""
 
 #: dist/translation-strings.php:873
-#: dist/editor_blocks.js:2
-msgid "Portfolio 2"
+msgid "Greater creativity in designing separators"
 msgstr ""
 
 #: dist/translation-strings.php:874
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Vertical Card"
+msgid "Elevate Your Icons"
 msgstr ""
 
 #: dist/translation-strings.php:875
-#: dist/editor_blocks.js:2
-msgid "Vertical Card 2"
+msgid "Liven up icons with gradient fills, multiple colors and background shapes"
 msgstr ""
 
 #: dist/translation-strings.php:876
-#: dist/editor_blocks.js:2
-msgid "Package inclusion one"
+msgid "More design options and customization for icons"
 msgstr ""
 
 #: dist/translation-strings.php:877
-#: dist/editor_blocks.js:2
-msgid "Package inclusion two"
+msgid "Choose from over 50 background shapes"
 msgstr ""
 
 #: dist/translation-strings.php:878
-#: dist/editor_blocks.js:2
-msgid "Package inclusion three"
+msgid "Greater visual interest and variety for your icons"
 msgstr ""
 
 #: dist/translation-strings.php:879
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:334
-msgid "one"
+msgid "Liven up icons with background shapes"
 msgstr ""
 
 #: dist/translation-strings.php:880
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:335
-msgid "two"
+msgid "Adjust timing of CSS transitions"
 msgstr ""
 
 #: dist/translation-strings.php:881
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:336
-msgid "three"
+msgid "Change X and Y position of blocks"
 msgstr ""
 
 #: dist/translation-strings.php:882
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:337
-msgid "Package inclusion %s"
+msgid "Scale or rotate blocks"
 msgstr ""
 
 #: dist/translation-strings.php:883
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Compact"
+msgid "Perfect for hover animations"
 msgstr ""
 
 #: dist/translation-strings.php:884
-#: dist/editor_blocks.js:2
-msgid "Banner Layout"
+msgid "Entrance fade-ins and animations when scrolling to blocks"
 msgstr ""
 
 #: dist/translation-strings.php:885
-#: dist/editor_blocks.js:2
-msgid "Banner"
+msgid "Smooth scroll animations based on scrolling position"
 msgstr ""
 
 #: dist/translation-strings.php:886
-#: dist/editor_blocks.js:2
-msgid "Colored Layout"
+msgid "Create a more visually engaging and interactive experience"
 msgstr ""
 
 #: dist/translation-strings.php:887
-#: dist/editor_blocks.js:2
-msgid "Sectioned Layout"
+msgid "Show or hide blocks based on conditions"
 msgstr ""
 
 #: dist/translation-strings.php:888
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Sectioned"
+msgid "Display blocks based on time, role, meta, custom PHP, option, taxonomy and more"
 msgstr ""
 
 #: dist/translation-strings.php:889
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Label"
+msgid "Use multiple conditions"
 msgstr ""
 
 #: dist/translation-strings.php:890
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Notification Type"
+msgid "Show targeted content and personalization"
 msgstr ""
 
 #: dist/translation-strings.php:891
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Success"
+msgid "Greater control over the visibility of content"
 msgstr ""
 
 #: dist/translation-strings.php:892
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Error"
+msgid "Add custom CSS rules specific for each block"
 msgstr ""
 
 #: dist/translation-strings.php:893
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Warning"
+msgid "Support for media queries"
 msgstr ""
 
 #: dist/translation-strings.php:894
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Information"
+msgid "Fine-tune styling on a per block basis"
 msgstr ""
 
 #: dist/translation-strings.php:895
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Dismissible"
+msgid "Adjust Column Arrangement"
 msgstr ""
 
 #: dist/translation-strings.php:896
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Side"
+msgid "Adjust the arrangement of columns when collapsed on tablet and mobile"
 msgstr ""
 
 #: dist/translation-strings.php:897
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Bordered"
+msgid "Ensure that content remains organized and easily readable on mobile"
 msgstr ""
 
 #: dist/translation-strings.php:898
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Outlined"
+msgid "This is a Premium Design"
 msgstr ""
 
 #: dist/translation-strings.php:899
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Large Icon"
+msgid "Unlock access to the entire design library and set your website apart from the rest."
 msgstr ""
 
 #: dist/translation-strings.php:900
-#: src/stk-block-types.php:782
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:554
-msgid "Spacer"
+msgid "Get More Post Options"
 msgstr ""
 
 #: dist/translation-strings.php:901
-#: dist/editor_blocks.js:2
-msgid "Type / to choose a block"
+msgid "New Custom Post Type option"
 msgstr ""
 
 #: dist/translation-strings.php:902
-#: dist/editor_blocks.js:2
-msgid "Subtitle for this block."
+msgid "Offset, exclude, include specific posts"
 msgstr ""
 
 #: dist/translation-strings.php:903
-#: dist/editor_blocks.js:2
-msgid "Classic"
+msgid "Hide the current post - great for synced patterns"
 msgstr ""
 
 #: dist/translation-strings.php:904
-#: dist/editor_blocks.js:2
-msgid "Centered Pills"
+msgid "This Is a Premium Feature"
 msgstr ""
 
 #: dist/translation-strings.php:905
-#: dist/editor_blocks.js:2
-msgid "Are you sure you want to delete this tab?"
+#: src/welcome/index.php:274
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Learn More"
 msgstr ""
 
 #: dist/translation-strings.php:906
-#: dist/editor_blocks.js:2
-msgid "Tab Label"
+msgid "View Demo"
 msgstr ""
 
 #: dist/translation-strings.php:907
-#: dist/editor_blocks.js:2
-msgid "Move left"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "You can hide premium hints in the settings"
 msgstr ""
 
 #: dist/translation-strings.php:908
-#: dist/editor_blocks.js:2
-msgid "Move right"
+msgid "Inset"
 msgstr ""
 
 #: dist/translation-strings.php:909
-#: dist/editor_blocks.js:2
-msgid "Add tab"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:234
+msgid "Vertical Offset"
 msgstr ""
 
 #: dist/translation-strings.php:910
-#: dist/editor_blocks.js:2
-msgid "Duplicate tab"
+msgid "Shadow Spread"
 msgstr ""
 
 #: dist/translation-strings.php:911
-#: dist/editor_blocks.js:2
-msgid "Delete tab"
+msgid "Shadow Color"
 msgstr ""
 
 #: dist/translation-strings.php:912
-#: dist/editor_blocks.js:2
-msgid "Fixed Icon Position"
+msgid "Advanced Shadow Options"
 msgstr ""
 
 #: dist/translation-strings.php:913
-#: dist/editor_blocks.js:2
-msgid "Tab Alignment"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:299
+msgid "Custom"
 msgstr ""
 
 #: dist/translation-strings.php:914
-#: dist/editor_blocks.js:2
-msgid "Text Alignment"
+msgid "Shadow Settings"
 msgstr ""
 
 #: dist/translation-strings.php:915
-#: dist/editor_blocks.js:2
-msgid "Scrollable Tabs on Mobile"
+msgid "Shadow/Outline"
 msgstr ""
 
 #: dist/translation-strings.php:916
-#: dist/editor_blocks.js:2
-msgid "Tab"
+msgid "Adjusts the intensity of the shadow/outline of the block and the appearance of the block border"
 msgstr ""
 
 #: dist/translation-strings.php:917
-#: dist/editor_blocks.js:2
-msgid "Tab Active State"
+msgid "Column Arrangement"
 msgstr ""
 
 #: dist/translation-strings.php:918
-#: dist/editor_blocks.js:2
-msgid "Change icons individually by clicking on each tab's icon."
+#: pro__premium_only/src/dynamic-content/sources/other-posts.php:259
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:18
+msgid "Post Type"
 msgstr ""
 
 #: dist/translation-strings.php:919
-#: dist/editor_blocks.js:2
-msgid "Tab Anchors"
+msgid "Filter by Taxonomy"
 msgstr ""
 
 #: dist/translation-strings.php:920
-#: dist/editor_blocks.js:2
-msgid "Assign unique anchor names to each tab so you'll be able to link directly and open each one."
+msgid "Taxonomy Filter Type"
 msgstr ""
 
 #: dist/translation-strings.php:921
-#: dist/editor_blocks.js:2
-msgid "%s Anchor"
+msgid "Included In"
 msgstr ""
 
 #: dist/translation-strings.php:922
-#: dist/editor_blocks.js:2
-msgid "Tab Anchor"
+msgid "Not In"
 msgstr ""
 
 #: dist/translation-strings.php:923
-#: dist/editor_blocks.js:2
-msgid "Tab %d"
+msgid "Opens in new tab"
 msgstr ""
 
 #: dist/translation-strings.php:924
-#: src/stk-block-types.php:880
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:567
-msgid "Tabs"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Nofollow link"
 msgstr ""
 
 #: dist/translation-strings.php:925
-#: dist/editor_blocks.js:2
-msgid "Initial Tab Open"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Sponsored"
 msgstr ""
 
 #: dist/translation-strings.php:926
-#: dist/editor_blocks.js:2
-msgid "Equal tab height"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "UGC"
 msgstr ""
 
 #: dist/translation-strings.php:927
-#: dist/editor_blocks.js:2
-msgid "Tab Orientation"
+msgid "Search or type url"
 msgstr ""
 
 #: dist/translation-strings.php:928
-#: dist/editor_blocks.js:2
-msgid "Tab Panel Offset"
+msgid "URL"
 msgstr ""
 
 #: dist/translation-strings.php:929
-#: dist/editor_blocks.js:2
-msgid "Tab Panel Effect"
+msgid "Upgrade to Premium to get more design variations."
 msgstr ""
 
 #: dist/translation-strings.php:930
-#: dist/editor_blocks.js:2
-msgid "Immediate"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "All"
 msgstr ""
 
 #: dist/translation-strings.php:931
-#: dist/editor_blocks.js:2
-msgid "Unordered"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Block Designs"
 msgstr ""
 
 #: dist/translation-strings.php:932
-#: dist/editor_blocks.js:2
-msgctxt "%s is a heading level, e.g. H1"
-msgid "Include %s"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "UI Kits"
 msgstr ""
 
 #: dist/translation-strings.php:933
-#: dist/editor_blocks.js:2
-msgid "Auto-generate missing anchor ids"
+msgid "Wireframes"
 msgstr ""
 
 #: dist/translation-strings.php:934
-#: dist/editor_blocks.js:2
-msgid "Scrolling"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Latest Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:935
-#: dist/editor_blocks.js:2
-msgid "Use smooth scroll"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "V2 Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:936
-#: dist/editor_blocks.js:2
-msgid "Scroll Top Offset "
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "E.g. light, dark, red, minimalist…"
 msgstr ""
 
 #: dist/translation-strings.php:937
-#: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Introduction"
+msgid "Select Multiple"
 msgstr ""
 
 #: dist/translation-strings.php:938
-#: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 1: Abstract"
+msgid "Select"
 msgstr ""
 
 #: dist/translation-strings.php:939
-#: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 2: History"
+msgid "Deselect All"
 msgstr ""
 
 #: dist/translation-strings.php:940
-#: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 3: Main Content"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Refresh Library"
 msgstr ""
 
 #: dist/translation-strings.php:941
-#: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 4: Additional Thoughts"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Large preview"
 msgstr ""
 
 #: dist/translation-strings.php:942
-#: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Conclusion"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Medium preview"
 msgstr ""
 
 #: dist/translation-strings.php:943
-#: src/stk-block-types.php:859
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:562
-msgid "Table of Contents"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Small preview"
 msgstr ""
 
 #: dist/translation-strings.php:944
-#: dist/editor_blocks.js:2
-msgid "Include heading"
+msgid "Add Designs"
 msgstr ""
 
 #: dist/translation-strings.php:945
 #: dist/editor_blocks.js:2
-msgid "Exclude heading"
+msgid "Color & Highlight"
 msgstr ""
 
 #: dist/translation-strings.php:946
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:341
-msgid "Name"
+msgid "Highlight"
 msgstr ""
 
 #: dist/translation-strings.php:947
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Bubble"
+msgid "Low"
 msgstr ""
 
 #: dist/translation-strings.php:948
 #: dist/editor_blocks.js:2
-msgid "Inverted Vertical"
+msgid "Highlight Text"
 msgstr ""
 
 #: dist/translation-strings.php:949
 #: dist/editor_blocks.js:2
-msgid "Play Video"
+msgid "Stackable Settings"
 msgstr ""
 
 #: dist/translation-strings.php:950
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Popup Option #1: Upload Video"
+msgid "Reset layout"
 msgstr ""
 
 #: dist/translation-strings.php:951
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Use .mp4 format for videos"
+msgid "Error saving block, please make sure you only have a %s block"
 msgstr ""
 
 #: dist/translation-strings.php:952
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Popup Option #2: Video URL"
+msgid "Default %s Block saved"
 msgstr ""
 
 #: dist/translation-strings.php:953
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Paste a Youtube / Vimeo URL"
+msgid "%s Block style saved"
 msgstr ""
 
 #: dist/translation-strings.php:954
 #: dist/editor_blocks.js:2
-msgid "Allow fullscreen"
+msgid "Default %s Block Saved!"
 msgstr ""
 
 #: dist/translation-strings.php:955
 #: dist/editor_blocks.js:2
-msgid "Allow download video"
+msgid "Save as Default %s Block"
 msgstr ""
 
 #: dist/translation-strings.php:956
 #: dist/editor_blocks.js:2
-msgid "Loop video"
+msgid "Default %s Block Deleted!"
 msgstr ""
 
 #: dist/translation-strings.php:957
 #: dist/editor_blocks.js:2
-msgid "Text for this block. Use this space for describing your block. Any text will do. Text for this block. You can use this space for describing your block."
+msgid "Reset Default %s Block"
 msgstr ""
 
 #: dist/translation-strings.php:958
-msgid "Facebook"
+#: dist/editor_blocks.js:2
+msgid "Couldn't update block styles, got this error:"
 msgstr ""
 
 #: dist/translation-strings.php:959
-msgid "Twitter"
+#: dist/editor_blocks.js:2
+msgid "Please refresh the page and try again."
 msgstr ""
 
 #: dist/translation-strings.php:960
-msgid "Instagram"
+msgid "The page will now reload for the old blocks to load. Please reload it if it does not refresh automatically."
 msgstr ""
 
 #: dist/translation-strings.php:961
-msgid "Pinterest"
+msgid "Stackable V2 Block Detected"
 msgstr ""
 
 #: dist/translation-strings.php:962
-msgid "LinkedIn"
+msgid "Hello! 👋"
 msgstr ""
 
 #: dist/translation-strings.php:963
-#: src/stk-block-types.php:992
-#: dist/translation-strings.js:582
-msgid "YouTube"
+msgid "We noticed that the page you are editing contains old Stackable version 2 blocks. Starting Stackable version 3, old v2 blocks are not anymore loaded in the editor. This means that you would not be able to edit the old v2 blocks in the editor and any old v2 block would show a block error in the editor."
 msgstr ""
 
 #: dist/translation-strings.php:964
-msgid "Email"
+msgid "Do you want to enable backward compatibility, so the old blocks will be loaded in the editor?"
 msgstr ""
 
 #: dist/translation-strings.php:965
-#: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:314
-msgctxt "Content placeholder"
-msgid "Description for this block. Use this space for describing your block. Any text will do."
+msgid "Yes, load V2 Blocks in the editor, but only when V2 blocks are present already"
 msgstr ""
 
 #: dist/translation-strings.php:966
-#: dist/editor_blocks.js:2
-msgid "Content Position"
+msgid "Yes, always load V2 blocks in the editor"
 msgstr ""
 
 #: dist/translation-strings.php:967
-#: src/stk-block-types.php:962
-#: dist/editor_blocks.js:2
-#: dist/translation-strings.js:576
-msgid "Timeline"
+msgid "No, don't load V2 blocks in the editor"
 msgstr ""
 
 #: dist/translation-strings.php:968
-#: dist/editor_blocks.js:2
-msgid "Accent Anchor Position"
+msgid "Facebook"
 msgstr ""
 
 #: dist/translation-strings.php:969
-#: dist/editor_blocks.js:2
-msgid "Succeeding timeline blocks will also use this value."
+msgid "Twitter"
 msgstr ""
 
 #: dist/translation-strings.php:970
-#: dist/editor_blocks.js:2
-msgid "%s Border Radius"
+msgid "Instagram"
 msgstr ""
 
 #: dist/translation-strings.php:971
-#: dist/editor_blocks.js:2
-msgid "Line Thickness"
+msgid "Pinterest"
 msgstr ""
 
 #: dist/translation-strings.php:972
-#: dist/editor_blocks.js:2
-msgctxt "option title"
-msgid "%s #%d"
+msgid "LinkedIn"
 msgstr ""
 
 #: dist/translation-strings.php:973
-#: dist/editor_blocks.js:2
-msgid "Timeline Accent Color"
+#: src/stk-block-types.php:992
+#: dist/translation-strings.js:582
+msgid "YouTube"
 msgstr ""
 
 #: dist/translation-strings.php:974
-#: dist/editor_blocks.js:2
-msgid "Timeline Background Color"
+msgid "Email"
 msgstr ""
 
 #: dist/translation-strings.php:975
-#: dist/deprecated/admin_welcome_v2.js:2
-msgid "Frontend JS & CSS Files"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Image or Video"
 msgstr ""
 
 #: dist/translation-strings.php:976
-#: dist/deprecated/admin_welcome_v2.js:2
-msgid "Load across entire site"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Image"
 msgstr ""
 
 #: dist/translation-strings.php:977
-#: dist/deprecated/admin_welcome_v2.js:2
-msgid "Load only in posts with Stackable blocks"
+msgid "Background Image Url"
 msgstr ""
 
 #: dist/translation-strings.php:978
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/accordion/block.json
-#: src/deprecated/v2/block/accordion/block.json
-msgctxt "block title"
-msgid "Accordion"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Media Tint Strength"
 msgstr ""
 
 #: dist/translation-strings.php:979
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/deprecated/v2/block/text/block.json
-msgctxt "block title"
-msgid "Advanced Text"
+msgid "Adjusts the intensity of the background media tint"
 msgstr ""
 
 #: dist/translation-strings.php:980
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/deprecated/v2/block/heading/block.json
-msgctxt "block title"
-msgid "Advanced Heading"
+msgid "Background Video Thumbnail"
 msgstr ""
 
 #: dist/translation-strings.php:981
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/blockquote/block.json
-#: src/deprecated/v2/block/blockquote/block.json
-msgctxt "block title"
-msgid "Blockquote"
+msgid "Note: Fixed Background works on Desktop and Android devices only."
 msgstr ""
 
 #: dist/translation-strings.php:982
-#: dist/deprecated/admin_welcome_v2.js:2
-msgctxt "block title"
-msgid "Blog Posts"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Fixed Background"
 msgstr ""
 
 #: dist/translation-strings.php:983
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/button/block.json
-#: src/deprecated/v2/block/button/block.json
-msgctxt "block title"
-msgid "Button"
+msgid "Keeps the background image fixed in place while scrolling"
 msgstr ""
 
 #: dist/translation-strings.php:984
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/call-to-action/block.json
-#: src/deprecated/v2/block/call-to-action/block.json
-msgctxt "block title"
-msgid "Call to Action"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Adv. Background Image Settings"
 msgstr ""
 
 #: dist/translation-strings.php:985
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/card/block.json
-#: src/deprecated/v2/block/card/block.json
-msgctxt "block title"
-msgid "Card"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Image Position"
 msgstr ""
 
 #: dist/translation-strings.php:986
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/columns/block.json
-msgctxt "block title"
-msgid "Columns"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:264
+msgid "Top Center"
 msgstr ""
 
 #: dist/translation-strings.php:987
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/deprecated/v2/block/container/block.json
-msgctxt "block title"
-msgid "Container"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:266
+msgid "Center Left"
 msgstr ""
 
 #: dist/translation-strings.php:988
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/count-up/block.json
-#: src/deprecated/v2/block/count-up/block.json
-msgctxt "block title"
-msgid "Count Up"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:267
+msgid "Center Center"
 msgstr ""
 
 #: dist/translation-strings.php:989
-#: src/block/design-library/block.json
-msgctxt "block title"
-msgid "Design Library"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:268
+msgid "Center Right"
 msgstr ""
 
 #: dist/translation-strings.php:990
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/divider/block.json
-#: src/deprecated/v2/block/divider/block.json
-msgctxt "block title"
-msgid "Divider"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:270
+msgid "Bottom Center"
 msgstr ""
 
 #: dist/translation-strings.php:991
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/expand/block.json
-#: src/deprecated/v2/block/expand/block.json
-msgctxt "block title"
-msgid "Expand / Show More"
+msgid "Chooses which part of the background image will be the focal point"
 msgstr ""
 
 #: dist/translation-strings.php:992
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/feature-grid/block.json
-#: src/deprecated/v2/block/feature-grid/block.json
-msgctxt "block title"
-msgid "Feature Grid"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Image Repeat"
 msgstr ""
 
 #: dist/translation-strings.php:993
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/feature/block.json
-#: src/deprecated/v2/block/feature/block.json
-msgctxt "block title"
-msgid "Feature"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "No-Repeat"
 msgstr ""
 
 #: dist/translation-strings.php:994
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/deprecated/v2/block/header/block.json
-msgctxt "block title"
-msgid "Header"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Repeat"
 msgstr ""
 
 #: dist/translation-strings.php:995
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/icon/block.json
-#: src/deprecated/v2/block/icon/block.json
-msgctxt "block title"
-msgid "Icon"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Repeat-X"
 msgstr ""
 
 #: dist/translation-strings.php:996
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/icon-list/block.json
-#: src/deprecated/v2/block/icon-list/block.json
-msgctxt "block title"
-msgid "Icon List"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Repeat-Y"
 msgstr ""
 
 #: dist/translation-strings.php:997
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/image-box/block.json
-#: src/deprecated/v2/block/image-box/block.json
-msgctxt "block title"
-msgid "Image Box"
+msgid "Covers the background with tiled images"
 msgstr ""
 
 #: dist/translation-strings.php:998
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/notification/block.json
-#: src/deprecated/v2/block/notification/block.json
-msgctxt "block title"
-msgid "Notification"
+msgid "Sets the display image size"
 msgstr ""
 
 #: dist/translation-strings.php:999
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/number-box/block.json
-#: src/deprecated/v2/block/number-box/block.json
-msgctxt "block title"
-msgid "Number Box"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Custom Size"
 msgstr ""
 
 #: dist/translation-strings.php:1000
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/pricing-box/block.json
-#: src/deprecated/v2/block/pricing-box/block.json
-msgctxt "block title"
-msgid "Pricing Box"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Image Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:1001
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/separator/block.json
-#: src/deprecated/v2/block/separator/block.json
-msgctxt "block title"
-msgid "Separator"
+msgid "Adjusts the radius of block corners to make them more rounded"
 msgstr ""
 
 #: dist/translation-strings.php:1002
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/spacer/block.json
-#: src/deprecated/v2/block/spacer/block.json
-msgctxt "block title"
-msgid "Spacer"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Link / URL"
 msgstr ""
 
 #: dist/translation-strings.php:1003
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/team-member/block.json
-#: src/deprecated/v2/block/team-member/block.json
-msgctxt "block title"
-msgid "Team Member"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:321
+msgid "Open in new tab"
 msgstr ""
 
 #: dist/translation-strings.php:1004
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/testimonial/block.json
-#: src/deprecated/v2/block/testimonial/block.json
-msgctxt "block title"
-msgid "Testimonial"
+msgid "Open Link in Lightbox"
 msgstr ""
 
 #: dist/translation-strings.php:1005
-#: dist/deprecated/admin_welcome_v2.js:2
-#: src/block/video-popup/block.json
-#: src/deprecated/v2/block/video-popup/block.json
-msgctxt "block title"
-msgid "Video Popup"
+msgid "Displaying a Google Map in a Lightbox? Use the embed iframe URL instead. Need help finding it?"
 msgstr ""
 
 #: dist/translation-strings.php:1006
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image or Video"
+msgid " Check out our docs."
 msgstr ""
 
 #: dist/translation-strings.php:1007
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image"
+msgid "Link rel"
 msgstr ""
 
 #: dist/translation-strings.php:1008
-msgid "Background Image Url"
+msgid "Link relationship keywords, e.g. nofollow noreferrer prefetch"
 msgstr ""
 
 #: dist/translation-strings.php:1009
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Media Tint Strength"
+msgid "Link Title"
 msgstr ""
 
 #: dist/translation-strings.php:1010
-msgid "Adjusts the intensity of the background media tint"
+msgid "Also used for lightbox caption"
 msgstr ""
 
 #: dist/translation-strings.php:1011
-msgid "Background Video Thumbnail"
+msgid "Anchor ID"
 msgstr ""
 
 #: dist/translation-strings.php:1012
-msgid "Note: Fixed Background works on Desktop and Android devices only."
+msgid "Add an id attribute to the anchor tag."
 msgstr ""
 
 #: dist/translation-strings.php:1013
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Fixed Background"
+msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding"
 msgstr ""
 
 #: dist/translation-strings.php:1014
-msgid "Keeps the background image fixed in place while scrolling"
+msgid "Min. Height"
 msgstr ""
 
 #: dist/translation-strings.php:1015
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Adv. Background Image Settings"
+msgid "Max. Content Width"
 msgstr ""
 
 #: dist/translation-strings.php:1016
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Image Position"
+#: dist/translation-strings.js:447
+msgid "Content Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:1017
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:249
-msgid "Top Center"
+msgid "Adjusts the minimum allowable height of the block"
 msgstr ""
 
 #: dist/translation-strings.php:1018
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:251
-msgid "Center Left"
+msgid "Sets the placement of the content to top, center or bottom. Available when the min. block height is set to higher than default."
 msgstr ""
 
 #: dist/translation-strings.php:1019
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:252
-msgid "Center Center"
+msgid "Adjusts the maximum allowable width of the block. The settings will depend on the block width you set on the toolbar."
 msgstr ""
 
 #: dist/translation-strings.php:1020
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:253
-msgid "Center Right"
+msgid "Sets the placement of the content to left, center or right. Not available when block width is set to full width."
 msgstr ""
 
 #: dist/translation-strings.php:1021
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:255
-msgid "Bottom Center"
+msgid "Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1022
-msgid "Chooses which part of the background image will be the focal point"
+msgid "Margins"
 msgstr ""
 
 #: dist/translation-strings.php:1023
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Image Repeat"
+msgid "Sets the block paddings, i.e the space between the inner columns and the block border"
 msgstr ""
 
 #: dist/translation-strings.php:1024
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "No-Repeat"
+msgid "Sets the block margin, i.e. the space outside the block between the block border and the next block."
 msgstr ""
 
 #: dist/translation-strings.php:1025
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Repeat"
+#: dist/deprecated/admin_welcome_v2.js:2
+msgid "Frontend JS & CSS Files"
 msgstr ""
 
 #: dist/translation-strings.php:1026
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Repeat-X"
+#: dist/deprecated/admin_welcome_v2.js:2
+msgid "Load across entire site"
 msgstr ""
 
 #: dist/translation-strings.php:1027
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Repeat-Y"
+#: dist/deprecated/admin_welcome_v2.js:2
+msgid "Load only in posts with Stackable blocks"
 msgstr ""
 
 #: dist/translation-strings.php:1028
-msgid "Covers the background with tiled images"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/accordion/block.json
+#: src/deprecated/v2/block/accordion/block.json
+msgctxt "block title"
+msgid "Accordion"
 msgstr ""
 
 #: dist/translation-strings.php:1029
-msgid "Sets the display image size"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/deprecated/v2/block/text/block.json
+msgctxt "block title"
+msgid "Advanced Text"
 msgstr ""
 
 #: dist/translation-strings.php:1030
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Custom Size"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/deprecated/v2/block/heading/block.json
+msgctxt "block title"
+msgid "Advanced Heading"
 msgstr ""
 
 #: dist/translation-strings.php:1031
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Image Blend Mode"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/blockquote/block.json
+#: src/deprecated/v2/block/blockquote/block.json
+msgctxt "block title"
+msgid "Blockquote"
 msgstr ""
 
 #: dist/translation-strings.php:1032
-msgid "Adjusts the radius of block corners to make them more rounded"
+#: dist/deprecated/admin_welcome_v2.js:2
+msgctxt "block title"
+msgid "Blog Posts"
 msgstr ""
 
 #: dist/translation-strings.php:1033
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Link / URL"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/button/block.json
+#: src/deprecated/v2/block/button/block.json
+msgctxt "block title"
+msgid "Button"
 msgstr ""
 
 #: dist/translation-strings.php:1034
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:283
-msgid "Open in new tab"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/call-to-action/block.json
+#: src/deprecated/v2/block/call-to-action/block.json
+msgctxt "block title"
+msgid "Call to Action"
 msgstr ""
 
 #: dist/translation-strings.php:1035
-msgid "Open Link in Lightbox"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/card/block.json
+#: src/deprecated/v2/block/card/block.json
+msgctxt "block title"
+msgid "Card"
 msgstr ""
 
 #: dist/translation-strings.php:1036
-msgid "Displaying a Google Map in a Lightbox? Use the embed iframe URL instead. Need help finding it?"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/columns/block.json
+msgctxt "block title"
+msgid "Columns"
 msgstr ""
 
 #: dist/translation-strings.php:1037
-msgid " Check out our docs."
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/deprecated/v2/block/container/block.json
+msgctxt "block title"
+msgid "Container"
 msgstr ""
 
 #: dist/translation-strings.php:1038
-msgid "Link rel"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/count-up/block.json
+#: src/deprecated/v2/block/count-up/block.json
+msgctxt "block title"
+msgid "Count Up"
 msgstr ""
 
 #: dist/translation-strings.php:1039
-msgid "Link relationship keywords, e.g. nofollow noreferrer prefetch"
+#: src/block/design-library/block.json
+msgctxt "block title"
+msgid "Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:1040
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Link Title"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/divider/block.json
+#: src/deprecated/v2/block/divider/block.json
+msgctxt "block title"
+msgid "Divider"
 msgstr ""
 
 #: dist/translation-strings.php:1041
-msgid "Also used for lightbox caption"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/expand/block.json
+#: src/deprecated/v2/block/expand/block.json
+msgctxt "block title"
+msgid "Expand / Show More"
 msgstr ""
 
 #: dist/translation-strings.php:1042
-msgid "Anchor ID"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/feature-grid/block.json
+#: src/deprecated/v2/block/feature-grid/block.json
+msgctxt "block title"
+msgid "Feature Grid"
 msgstr ""
 
 #: dist/translation-strings.php:1043
-msgid "Add an id attribute to the anchor tag."
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/feature/block.json
+#: src/deprecated/v2/block/feature/block.json
+msgctxt "block title"
+msgid "Feature"
 msgstr ""
 
 #: dist/translation-strings.php:1044
-msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/deprecated/v2/block/header/block.json
+msgctxt "block title"
+msgid "Header"
 msgstr ""
 
 #: dist/translation-strings.php:1045
-msgid "Min. Height"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/icon/block.json
+#: src/deprecated/v2/block/icon/block.json
+msgctxt "block title"
+msgid "Icon"
 msgstr ""
 
 #: dist/translation-strings.php:1046
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Max. Content Width"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/icon-list/block.json
+#: src/deprecated/v2/block/icon-list/block.json
+msgctxt "block title"
+msgid "Icon List"
 msgstr ""
 
 #: dist/translation-strings.php:1047
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:436
-msgid "Content Vertical Align"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/image-box/block.json
+#: src/deprecated/v2/block/image-box/block.json
+msgctxt "block title"
+msgid "Image Box"
 msgstr ""
 
 #: dist/translation-strings.php:1048
-msgid "Adjusts the minimum allowable height of the block"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/notification/block.json
+#: src/deprecated/v2/block/notification/block.json
+msgctxt "block title"
+msgid "Notification"
 msgstr ""
 
 #: dist/translation-strings.php:1049
-msgid "Sets the placement of the content to top, center or bottom. Available when the min. block height is set to higher than default."
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/number-box/block.json
+#: src/deprecated/v2/block/number-box/block.json
+msgctxt "block title"
+msgid "Number Box"
 msgstr ""
 
 #: dist/translation-strings.php:1050
-msgid "Adjusts the maximum allowable width of the block. The settings will depend on the block width you set on the toolbar."
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/pricing-box/block.json
+#: src/deprecated/v2/block/pricing-box/block.json
+msgctxt "block title"
+msgid "Pricing Box"
 msgstr ""
 
 #: dist/translation-strings.php:1051
-msgid "Sets the placement of the content to left, center or right. Not available when block width is set to full width."
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/separator/block.json
+#: src/deprecated/v2/block/separator/block.json
+msgctxt "block title"
+msgid "Separator"
 msgstr ""
 
 #: dist/translation-strings.php:1052
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Paddings"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/spacer/block.json
+#: src/deprecated/v2/block/spacer/block.json
+msgctxt "block title"
+msgid "Spacer"
 msgstr ""
 
 #: dist/translation-strings.php:1053
-msgid "Margins"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/team-member/block.json
+#: src/deprecated/v2/block/team-member/block.json
+msgctxt "block title"
+msgid "Team Member"
 msgstr ""
 
 #: dist/translation-strings.php:1054
-msgid "Sets the block paddings, i.e the space between the inner columns and the block border"
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/testimonial/block.json
+#: src/deprecated/v2/block/testimonial/block.json
+msgctxt "block title"
+msgid "Testimonial"
 msgstr ""
 
 #: dist/translation-strings.php:1055
-msgid "Sets the block margin, i.e. the space outside the block between the block border and the next block."
+#: dist/deprecated/admin_welcome_v2.js:2
+#: src/block/video-popup/block.json
+#: src/deprecated/v2/block/video-popup/block.json
+msgctxt "block title"
+msgid "Video Popup"
 msgstr ""
 
 #: dist/translation-strings.php:1056
@@ -5706,7 +5706,7 @@ msgstr ""
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:220
+#: dist/translation-strings.js:241
 msgctxt "Panel title"
 msgid "%s #%d"
 msgstr ""
@@ -5726,284 +5726,284 @@ msgstr ""
 
 #: dist/translation-strings.php:1096
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Subtitle for this block"
+msgid "Quotation Mark"
 msgstr ""
 
 #: dist/translation-strings.php:1097
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:403
-msgid "Image Height"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:181
+msgid "Horizontal Position"
 msgstr ""
 
 #: dist/translation-strings.php:1098
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:404
-msgid "Image Width"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:182
+msgid "Vertical Position"
 msgstr ""
 
 #: dist/translation-strings.php:1099
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Subtitle Color"
+msgid "Horizontal Card"
 msgstr ""
 
 #: dist/translation-strings.php:1100
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Quotation Mark"
+msgid "Content Order"
 msgstr ""
 
 #: dist/translation-strings.php:1101
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:178
-msgid "Horizontal Position"
+msgid "Posts Settings"
 msgstr ""
 
 #: dist/translation-strings.php:1102
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:179
-msgid "Vertical Position"
+msgid "Read More"
 msgstr ""
 
 #: dist/translation-strings.php:1103
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Uneven"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:139
+msgid "Load More"
 msgstr ""
 
 #: dist/translation-strings.php:1104
+#: pro__premium_only/src/stk-block-types.php:43
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Tiled"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:388
+msgid "Pagination"
 msgstr ""
 
 #: dist/translation-strings.php:1105
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Layouts"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:404
+msgid "Image Width"
 msgstr ""
 
 #: dist/translation-strings.php:1106
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "No Paddings"
+#: dist/translation-strings.js:403
+msgid "Image Height"
 msgstr ""
 
 #: dist/translation-strings.php:1107
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Half-screen height"
+msgid "Hover Color"
 msgstr ""
 
 #: dist/translation-strings.php:1108
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Full-screen height"
+msgid "Customize Read More Link"
 msgstr ""
 
 #: dist/translation-strings.php:1109
+#: pro__premium_only/src/stk-block-types.php:15
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Custom height"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:395
+msgid "Load More Button"
 msgstr ""
 
 #: dist/translation-strings.php:1110
+#: src/deprecated/v2/block/blog-posts/index.php:316
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Custom Height"
+msgid "Continue reading"
 msgstr ""
 
 #: dist/translation-strings.php:1111
+#: src/deprecated/v2/block/blog-posts/attributes.php:1845
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:434
-msgid "Column Vertical Align"
+#: dist/translation-strings.js:386
+msgid "Next »"
 msgstr ""
 
 #: dist/translation-strings.php:1112
+#: src/deprecated/v2/block/blog-posts/attributes.php:1849
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Text Colors"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:387
+msgid "« Previous"
 msgstr ""
 
 #: dist/translation-strings.php:1113
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Heading Color"
+msgid "Subtitle for this block"
 msgstr ""
 
 #: dist/translation-strings.php:1114
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Link Color"
+msgid "Subtitle Color"
 msgstr ""
 
 #: dist/translation-strings.php:1115
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Link Hover Color"
+msgid "Text Colors"
 msgstr ""
 
 #: dist/translation-strings.php:1116
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "The colors above might not apply to some nested blocks."
+msgid "Heading Color"
 msgstr ""
 
 #: dist/translation-strings.php:1117
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Abstract"
+msgid "Link Color"
 msgstr ""
 
 #: dist/translation-strings.php:1118
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Boxed"
+msgid "Link Hover Color"
 msgstr ""
 
 #: dist/translation-strings.php:1119
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Number Color"
+msgid "The colors above might not apply to some nested blocks."
 msgstr ""
 
 #: dist/translation-strings.php:1120
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Vertical Margin"
+msgid "Uneven"
 msgstr ""
 
 #: dist/translation-strings.php:1121
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Short"
+msgid "Tiled"
 msgstr ""
 
 #: dist/translation-strings.php:1122
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Tall"
+msgid "Layouts"
 msgstr ""
 
 #: dist/translation-strings.php:1123
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Restrict to Content Width"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "No Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1124
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Half Background"
+msgid "Half-screen height"
 msgstr ""
 
 #: dist/translation-strings.php:1125
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlap Shape %s"
+msgid "Full-screen height"
 msgstr ""
 
 #: dist/translation-strings.php:1126
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlap Background %s"
+msgid "Custom height"
 msgstr ""
 
 #: dist/translation-strings.php:1127
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Image Column Width"
+msgid "Custom Height"
 msgstr ""
 
 #: dist/translation-strings.php:1128
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Reverse Horizontally"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:445
+msgid "Column Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:1129
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Container Width"
+msgid "Vertical Margin"
 msgstr ""
 
 #: dist/translation-strings.php:1130
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Container Offset"
+msgid "Abstract"
 msgstr ""
 
 #: dist/translation-strings.php:1131
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Full Height"
+msgid "Boxed"
 msgstr ""
 
 #: dist/translation-strings.php:1132
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Background"
+msgid "Number Color"
 msgstr ""
 
 #: dist/translation-strings.php:1133
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Color Opacity"
+msgid "Short"
 msgstr ""
 
 #: dist/translation-strings.php:1134
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "This affects other buttons in this block"
+msgid "Tall"
 msgstr ""
 
 #: dist/translation-strings.php:1135
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Horizontal Card"
+msgid "Restrict to Content Width"
 msgstr ""
 
 #: dist/translation-strings.php:1136
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Content Order"
+msgid "Half Background"
 msgstr ""
 
 #: dist/translation-strings.php:1137
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Posts Settings"
+msgid "Overlap Shape %s"
 msgstr ""
 
 #: dist/translation-strings.php:1138
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Read More"
+msgid "Overlap Background %s"
 msgstr ""
 
 #: dist/translation-strings.php:1139
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:311
-msgid "Load More"
+msgid "Image Column Width"
 msgstr ""
 
 #: dist/translation-strings.php:1140
-#: pro__premium_only/src/stk-block-types.php:43
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:388
-msgid "Pagination"
+msgid "Reverse Horizontally"
 msgstr ""
 
 #: dist/translation-strings.php:1141
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Hover Color"
+msgid "Container Width"
 msgstr ""
 
 #: dist/translation-strings.php:1142
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Customize Read More Link"
+msgid "Container Offset"
 msgstr ""
 
 #: dist/translation-strings.php:1143
-#: pro__premium_only/src/stk-block-types.php:15
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:395
-msgid "Load More Button"
+msgid "Full Height"
 msgstr ""
 
 #: dist/translation-strings.php:1144
-#: src/deprecated/v2/block/blog-posts/index.php:316
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Continue reading"
+msgid "Overlay Background"
 msgstr ""
 
 #: dist/translation-strings.php:1145
-#: src/deprecated/v2/block/blog-posts/attributes.php:1845
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:386
-msgid "Next »"
+msgid "Background Color Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1146
-#: src/deprecated/v2/block/blog-posts/attributes.php:1849
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:387
-msgid "« Previous"
+msgid "This affects other buttons in this block"
 msgstr ""
 
 #: dist/translation-strings.php:1147
@@ -6048,230 +6048,230 @@ msgstr ""
 
 #: dist/translation-strings.php:1155
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Color Type"
+msgid "Border Thickness"
 msgstr ""
 
 #: dist/translation-strings.php:1156
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Hover Color"
+msgid "Icon Location"
 msgstr ""
 
 #: dist/translation-strings.php:1157
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:438
-msgid "Effects"
+msgid "Overlay Color Type"
 msgstr ""
 
 #: dist/translation-strings.php:1158
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Image Hover Effect"
+msgid "Overlay Hover Color"
 msgstr ""
 
 #: dist/translation-strings.php:1159
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Zoom In"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:443
+msgid "Effects"
 msgstr ""
 
 #: dist/translation-strings.php:1160
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Zoom Out"
+msgid "Image Hover Effect"
 msgstr ""
 
 #: dist/translation-strings.php:1161
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Border Thickness"
+msgid "Zoom In"
 msgstr ""
 
 #: dist/translation-strings.php:1162
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Icon Location"
+msgid "Zoom Out"
 msgstr ""
 
 #: dist/translation-strings.php:1163
+#: src/stk-block-types.php:680
+#: src/stk-block-types.php:715
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgctxt "Nth Title with description"
-msgid "%s %d %s"
+#: dist/translation-strings.js:539
+msgid "Price"
 msgstr ""
 
 #: dist/translation-strings.php:1164
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Number Shape"
+msgid "Sub Price"
 msgstr ""
 
 #: dist/translation-strings.php:1165
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:211
-msgid "Shape Size"
+msgid "Price Prefix"
 msgstr ""
 
 #: dist/translation-strings.php:1166
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Number Background Color"
+msgid "Price Suffix"
 msgstr ""
 
 #: dist/translation-strings.php:1167
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Separator Color"
+msgctxt "Nth Title with description"
+msgid "%s %d %s"
 msgstr ""
 
 #: dist/translation-strings.php:1168
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Padding Top"
+msgid "Number Shape"
 msgstr ""
 
 #: dist/translation-strings.php:1169
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Padding Bottom"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:232
+msgid "Shape Size"
 msgstr ""
 
 #: dist/translation-strings.php:1170
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Margin Top"
+msgid "Number Background Color"
 msgstr ""
 
 #: dist/translation-strings.php:1171
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Use this to pull up/down the separator to the block above it"
+msgid "Separator Color"
 msgstr ""
 
 #: dist/translation-strings.php:1172
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Margin Bottom"
+msgid "Padding Top"
 msgstr ""
 
 #: dist/translation-strings.php:1173
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Use this to pull up/down the separator to the block below it"
+msgid "Padding Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:1174
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:426
-msgid "Layer"
+msgid "Margin Top"
 msgstr ""
 
 #: dist/translation-strings.php:1175
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Simple"
+msgid "Use this to pull up/down the separator to the block above it"
 msgstr ""
 
 #: dist/translation-strings.php:1176
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Social"
+msgid "Margin Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:1177
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Social Button Gap"
+msgid "Use this to pull up/down the separator to the block below it"
 msgstr ""
 
 #: dist/translation-strings.php:1178
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Name Color"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:426
+msgid "Layer"
 msgstr ""
 
 #: dist/translation-strings.php:1179
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Position Color"
+msgid "Overlay Simple"
 msgstr ""
 
 #: dist/translation-strings.php:1180
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Vertical Inverse"
+msgid "Social"
 msgstr ""
 
 #: dist/translation-strings.php:1181
-#: src/stk-block-types.php:924
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/translation-strings.js:572
-msgid "Testimonial"
+msgid "Social Button Gap"
 msgstr ""
 
 #: dist/translation-strings.php:1182
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Testimonial Color"
+msgid "Name Color"
 msgstr ""
 
 #: dist/translation-strings.php:1183
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Play Button"
+msgid "Position Color"
 msgstr ""
 
 #: dist/translation-strings.php:1184
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Button Style"
+msgid "Vertical Inverse"
 msgstr ""
 
 #: dist/translation-strings.php:1185
+#: src/stk-block-types.php:924
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Normal Play Button"
+#: dist/translation-strings.js:572
+msgid "Testimonial"
 msgstr ""
 
 #: dist/translation-strings.php:1186
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Play Button with Circle"
+msgid "Testimonial Color"
 msgstr ""
 
 #: dist/translation-strings.php:1187
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Outline Play Button"
+msgid "Side Title"
 msgstr ""
 
 #: dist/translation-strings.php:1188
-#: src/stk-block-types.php:680
-#: src/stk-block-types.php:715
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/translation-strings.js:539
-msgid "Price"
+msgid "Reverse Title"
 msgstr ""
 
 #: dist/translation-strings.php:1189
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Sub Price"
+msgid "Column Rule"
 msgstr ""
 
 #: dist/translation-strings.php:1190
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Price Prefix"
+msgid "Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:1191
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Price Suffix"
+msgid "Subtitle on Top"
 msgstr ""
 
 #: dist/translation-strings.php:1192
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Side Title"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Block Title"
 msgstr ""
 
 #: dist/translation-strings.php:1193
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Reverse Title"
+msgid "Play Button"
 msgstr ""
 
 #: dist/translation-strings.php:1194
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Column Rule"
+msgid "Button Style"
 msgstr ""
 
 #: dist/translation-strings.php:1195
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Vertical Align"
+msgid "Normal Play Button"
 msgstr ""
 
 #: dist/translation-strings.php:1196
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Subtitle on Top"
+msgid "Play Button with Circle"
 msgstr ""
 
 #: dist/translation-strings.php:1197
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Title"
+msgid "Outline Play Button"
 msgstr ""
 
 #: dist/translation-strings.php:1198
@@ -6289,220 +6289,220 @@ msgstr ""
 #: dist/translation-strings.php:1200
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hover Opacity"
+msgid "Background Color Type"
 msgstr ""
 
 #: dist/translation-strings.php:1201
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hover Colors"
+msgid "Hover Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1202
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Open link in new tab"
+msgid "Hover Colors"
 msgstr ""
 
 #: dist/translation-strings.php:1203
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Use social colors"
+msgid "Open link in new tab"
 msgstr ""
 
 #: dist/translation-strings.php:1204
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Change to Normal Button on Hover"
+msgid "Use social colors"
 msgstr ""
 
 #: dist/translation-strings.php:1205
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Button Size"
+msgid "Change to Normal Button on Hover"
 msgstr ""
 
 #: dist/translation-strings.php:1206
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Tiny"
+msgid "Button Size"
 msgstr ""
 
 #: dist/translation-strings.php:1207
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Small"
+msgid "Tiny"
 msgstr ""
 
 #: dist/translation-strings.php:1208
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:277
-msgid "Medium"
+msgid "Small"
 msgstr ""
 
 #: dist/translation-strings.php:1209
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:278
-msgid "Large"
+#: dist/translation-strings.js:315
+msgid "Medium"
 msgstr ""
 
 #: dist/translation-strings.php:1210
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Vertical Padding"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:316
+msgid "Large"
 msgstr ""
 
 #: dist/translation-strings.php:1211
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Horizontal Padding"
+msgid "Vertical Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1212
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Adv. Icon Settings"
+msgid "Horizontal Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1213
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Spacing"
+msgid "Adv. Icon Settings"
 msgstr ""
 
 #: dist/translation-strings.php:1214
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Free"
+msgid "Icon Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:1215
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Premium"
+#: dist/translation-strings.js:448
+msgid "Column Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1216
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image Position"
+msgid "Free"
 msgstr ""
 
 #: dist/translation-strings.php:1217
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image Repeat"
+msgid "Premium"
 msgstr ""
 
 #: dist/translation-strings.php:1218
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image Size"
+msgid "Shaped"
 msgstr ""
 
 #: dist/translation-strings.php:1219
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Color Type"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:343
+msgid "Icon Color Type"
 msgstr ""
 
 #: dist/translation-strings.php:1220
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Shaped"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:238
+msgid "Multicolor"
 msgstr ""
 
 #: dist/translation-strings.php:1221
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:354
-msgid "Icon Color Type"
+msgid "Icon Shape / Outline Color"
 msgstr ""
 
 #: dist/translation-strings.php:1222
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:217
-msgid "Multicolor"
+msgid "Icon Shape Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:1223
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Shape / Outline Color"
+msgid "Outline Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:1224
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Shape Border Radius"
+msgid "Icon Shape Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1225
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Outline Border Radius"
+msgid "Outline Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1226
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Shape Padding"
+msgid "Outline Width"
 msgstr ""
 
 #: dist/translation-strings.php:1227
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Outline Padding"
+msgid "Background Image Position"
 msgstr ""
 
 #: dist/translation-strings.php:1228
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Outline Width"
+msgid "Background Image Repeat"
 msgstr ""
 
 #: dist/translation-strings.php:1229
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Force square image"
+msgid "Background Image Size"
 msgstr ""
 
 #: dist/translation-strings.php:1230
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Blend Mode"
+msgid "Force square image"
 msgstr ""
 
 #: dist/translation-strings.php:1231
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "All Block Designs"
+msgid "Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:1232
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Free Designs"
+msgid "All Block Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1233
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Premium Designs"
+msgid "Free Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1234
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:437
-msgid "Column Paddings"
+msgid "Premium Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1235
@@ -6515,139 +6515,139 @@ msgstr ""
 #: dist/translation-strings.php:1236
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Column Spacing & More"
+msgid "Pick a layout or design"
 msgstr ""
 
 #: dist/translation-strings.php:1237
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Background"
+msgid "Select a variation to start with."
 msgstr ""
 
 #: dist/translation-strings.php:1238
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Align center"
+msgid "Or pick from our Design Library."
 msgstr ""
 
 #: dist/translation-strings.php:1239
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Wide width"
+msgid "Select a design from our library to start with."
 msgstr ""
 
 #: dist/translation-strings.php:1240
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Full width"
+msgid "Skip"
 msgstr ""
 
 #: dist/translation-strings.php:1241
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Change Alignment"
+msgid "Column Spacing & More"
 msgstr ""
 
 #: dist/translation-strings.php:1242
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "You will not lose your block content when changing designs."
+msgid "Block Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:1243
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Max Width"
+msgid "Min. Block Height"
 msgstr ""
 
 #: dist/translation-strings.php:1244
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Horizontal Align"
+msgid "Block Margins"
 msgstr ""
 
 #: dist/translation-strings.php:1245
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Text Align"
+msgid "Block Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1246
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Description"
+msgid "Block Background"
 msgstr ""
 
 #: dist/translation-strings.php:1247
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Container Link"
+msgid "Align center"
 msgstr ""
 
 #: dist/translation-strings.php:1248
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Link / URL #%d"
+msgid "Wide width"
 msgstr ""
 
 #: dist/translation-strings.php:1249
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Link %d Title"
+msgid "Full width"
 msgstr ""
 
 #: dist/translation-strings.php:1250
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Pick a layout or design"
+msgid "Change Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:1251
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Select a variation to start with."
+msgid "You will not lose your block content when changing designs."
 msgstr ""
 
 #: dist/translation-strings.php:1252
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Or pick from our Design Library."
+msgid "Max Width"
 msgstr ""
 
 #: dist/translation-strings.php:1253
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Select a design from our library to start with."
+msgid "Horizontal Align"
 msgstr ""
 
 #: dist/translation-strings.php:1254
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Skip"
+msgid "Text Align"
 msgstr ""
 
 #: dist/translation-strings.php:1255
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Spacing"
+msgid "Block Description"
 msgstr ""
 
 #: dist/translation-strings.php:1256
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Min. Block Height"
+msgid "Container Link"
 msgstr ""
 
 #: dist/translation-strings.php:1257
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Margins"
+msgid "Link / URL #%d"
 msgstr ""
 
 #: dist/translation-strings.php:1258
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Paddings"
+msgid "Link %d Title"
 msgstr ""
 
 #: dist/translation-strings.php:1259
@@ -6666,67 +6666,84 @@ msgid "Star"
 msgstr ""
 
 #: dist/translation-strings.php:1262
+#: pro__premium_only/src/dynamic-content/sources/acf.php:249
+#: pro__premium_only/src/dynamic-content/sources/jetengine.php:315
+#: pro__premium_only/src/dynamic-content/sources/jetengine.php:325
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:284
+#: pro__premium_only/src/dynamic-content/sources/metabox.php:329
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:114
+msgid "%s Placeholder"
+msgstr ""
+
+#: dist/translation-strings.php:1263
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:115
+msgid "Placeholder"
+msgstr ""
+
+#: dist/translation-strings.php:1264
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:9
 msgid "Login Status"
 msgstr ""
 
-#: dist/translation-strings.php:1263
+#: dist/translation-strings.php:1265
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:10
 msgid "Role"
 msgstr ""
 
-#: dist/translation-strings.php:1264
+#: dist/translation-strings.php:1266
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:11
 msgid "Date & Time"
 msgstr ""
 
-#: dist/translation-strings.php:1265
+#: dist/translation-strings.php:1267
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:12
 msgid "Custom PHP"
 msgstr ""
 
-#: dist/translation-strings.php:1266
+#: dist/translation-strings.php:1268
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:13
 msgid "Conditional Tag"
 msgstr ""
 
-#: dist/translation-strings.php:1267
+#: dist/translation-strings.php:1269
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:14
 msgid "Query String"
 msgstr ""
 
-#: dist/translation-strings.php:1268
+#: dist/translation-strings.php:1270
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:15
 msgid "Post Meta"
 msgstr ""
 
-#: dist/translation-strings.php:1269
+#: dist/translation-strings.php:1271
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:16
 msgid "Site Option"
 msgstr ""
 
-#: dist/translation-strings.php:1270
+#: dist/translation-strings.php:1272
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:17
 msgid "Post IDs"
 msgstr ""
 
-#: dist/translation-strings.php:1271
+#: dist/translation-strings.php:1273
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:235
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:19
 msgid "Post Taxonomy"
 msgstr ""
 
-#: dist/translation-strings.php:1272
+#: dist/translation-strings.php:1274
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:92
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:102
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:109
@@ -6759,558 +6776,541 @@ msgstr ""
 msgid "WooCommerce"
 msgstr ""
 
-#: dist/translation-strings.php:1273
+#: dist/translation-strings.php:1275
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:21
 msgid "Enter Conditional Tag"
 msgstr ""
 
-#: dist/translation-strings.php:1274
+#: dist/translation-strings.php:1276
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:22
 msgid "Home"
 msgstr ""
 
-#: dist/translation-strings.php:1275
+#: dist/translation-strings.php:1277
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:23
 msgid "Front Page"
 msgstr ""
 
-#: dist/translation-strings.php:1276
+#: dist/translation-strings.php:1278
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:24
 msgid "404 Not Found Page"
 msgstr ""
 
-#: dist/translation-strings.php:1277
+#: dist/translation-strings.php:1279
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:25
 msgid "Single Page"
 msgstr ""
 
-#: dist/translation-strings.php:1278
+#: dist/translation-strings.php:1280
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:26
 msgid "Attachment"
 msgstr ""
 
-#: dist/translation-strings.php:1279
+#: dist/translation-strings.php:1281
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:27
 msgid "Preview"
 msgstr ""
 
-#: dist/translation-strings.php:1280
+#: dist/translation-strings.php:1282
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:28
 msgid "Any Page"
 msgstr ""
 
-#: dist/translation-strings.php:1281
+#: dist/translation-strings.php:1283
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:29
 msgid "Privacy Policy Page"
 msgstr ""
 
-#: dist/translation-strings.php:1282
+#: dist/translation-strings.php:1284
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:30
 msgid "Any Archive Page"
 msgstr ""
 
-#: dist/translation-strings.php:1283
+#: dist/translation-strings.php:1285
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:31
 msgid "Category Page"
 msgstr ""
 
-#: dist/translation-strings.php:1284
+#: dist/translation-strings.php:1286
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:32
 msgid "Tag Page"
 msgstr ""
 
-#: dist/translation-strings.php:1285
+#: dist/translation-strings.php:1287
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:33
 msgid "Taxonomy Page"
 msgstr ""
 
-#: dist/translation-strings.php:1286
+#: dist/translation-strings.php:1288
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:34
 msgid "Author Page"
 msgstr ""
 
-#: dist/translation-strings.php:1287
+#: dist/translation-strings.php:1289
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:35
 msgid "Date Archive Page"
 msgstr ""
 
-#: dist/translation-strings.php:1288
+#: dist/translation-strings.php:1290
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:36
 msgid "Yearly Archive Page"
 msgstr ""
 
-#: dist/translation-strings.php:1289
+#: dist/translation-strings.php:1291
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:37
 msgid "Search Result Page"
 msgstr ""
 
-#: dist/translation-strings.php:1290
+#: dist/translation-strings.php:1292
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:38
 msgid "Trackback"
 msgstr ""
 
-#: dist/translation-strings.php:1291
+#: dist/translation-strings.php:1293
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:39
 msgid "Dynamic Sidebar"
 msgstr ""
 
-#: dist/translation-strings.php:1292
+#: dist/translation-strings.php:1294
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:40
 msgid "RTL Reading"
 msgstr ""
 
-#: dist/translation-strings.php:1293
+#: dist/translation-strings.php:1295
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:41
 msgid "Multisite"
 msgstr ""
 
-#: dist/translation-strings.php:1294
+#: dist/translation-strings.php:1296
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:42
 msgid "Main Site"
 msgstr ""
 
-#: dist/translation-strings.php:1295
+#: dist/translation-strings.php:1297
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:43
 msgid "Child Theme"
 msgstr ""
 
-#: dist/translation-strings.php:1296
+#: dist/translation-strings.php:1298
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:44
 msgid "Customize Preview"
 msgstr ""
 
-#: dist/translation-strings.php:1297
+#: dist/translation-strings.php:1299
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:45
 msgid "Multi-author Site"
 msgstr ""
 
-#: dist/translation-strings.php:1298
+#: dist/translation-strings.php:1300
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:46
 msgid "Feed"
 msgstr ""
 
-#: dist/translation-strings.php:1299
+#: dist/translation-strings.php:1301
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:47
 msgid "Sticky Post"
 msgstr ""
 
-#: dist/translation-strings.php:1300
+#: dist/translation-strings.php:1302
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:48
 msgid "Hierarchical Post Type"
 msgstr ""
 
-#: dist/translation-strings.php:1301
+#: dist/translation-strings.php:1303
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:49
 msgid "Archive Post Type"
 msgstr ""
 
-#: dist/translation-strings.php:1302
+#: dist/translation-strings.php:1304
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:50
 msgid "Comments Open"
 msgstr ""
 
-#: dist/translation-strings.php:1303
+#: dist/translation-strings.php:1305
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:51
 msgid "Pings Open"
 msgstr ""
 
-#: dist/translation-strings.php:1304
+#: dist/translation-strings.php:1306
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:52
 msgid "Has Excerpt"
 msgstr ""
 
-#: dist/translation-strings.php:1305
+#: dist/translation-strings.php:1307
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:53
 msgid "Has Post Thumbnail"
 msgstr ""
 
-#: dist/translation-strings.php:1306
+#: dist/translation-strings.php:1308
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:54
 msgid "Has Tags"
 msgstr ""
 
-#: dist/translation-strings.php:1307
+#: dist/translation-strings.php:1309
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:55
 msgid "Has Terms"
 msgstr ""
 
-#: dist/translation-strings.php:1308
+#: dist/translation-strings.php:1310
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:56
 msgid "Has Primary Nav Menu"
 msgstr ""
 
-#: dist/translation-strings.php:1309
+#: dist/translation-strings.php:1311
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:57
 msgid "The Custom PHP allows you to configure the block’s visibility based on the expression entered. If the expression evaluates to true, the block will be displayed."
 msgstr ""
 
-#: dist/translation-strings.php:1310
+#: dist/translation-strings.php:1312
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:58
 msgid "Sample PHP code:"
 msgstr ""
 
-#: dist/translation-strings.php:1311
+#: dist/translation-strings.php:1313
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:59
 msgid "If a syntax error is present, check your PHP code"
 msgstr ""
 
-#: dist/translation-strings.php:1312
+#: dist/translation-strings.php:1314
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:62
 msgid "Now"
 msgstr ""
 
-#: dist/translation-strings.php:1313
+#: dist/translation-strings.php:1315
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:64
 msgid "Never"
 msgstr ""
 
-#: dist/translation-strings.php:1314
+#: dist/translation-strings.php:1316
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:65
 msgid "Days of the Week"
 msgstr ""
 
-#: dist/translation-strings.php:1315
+#: dist/translation-strings.php:1317
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:66
 msgid "If set, the block will be displayed / hidden on selected days."
 msgstr ""
 
-#: dist/translation-strings.php:1316
+#: dist/translation-strings.php:1318
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:67
 msgid "Sunday"
 msgstr ""
 
-#: dist/translation-strings.php:1317
+#: dist/translation-strings.php:1319
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:68
 msgid "Monday"
 msgstr ""
 
-#: dist/translation-strings.php:1318
+#: dist/translation-strings.php:1320
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:69
 msgid "Tuesday"
 msgstr ""
 
-#: dist/translation-strings.php:1319
+#: dist/translation-strings.php:1321
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:70
 msgid "Wednesday"
 msgstr ""
 
-#: dist/translation-strings.php:1320
+#: dist/translation-strings.php:1322
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:71
 msgid "Thursday"
 msgstr ""
 
-#: dist/translation-strings.php:1321
+#: dist/translation-strings.php:1323
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:72
 msgid "Friday"
 msgstr ""
 
-#: dist/translation-strings.php:1322
+#: dist/translation-strings.php:1324
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:73
 msgid "Saturday"
 msgstr ""
 
-#: dist/translation-strings.php:1323
+#: dist/translation-strings.php:1325
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:75
 msgid "Logged-In Users"
 msgstr ""
 
-#: dist/translation-strings.php:1324
+#: dist/translation-strings.php:1326
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:76
 msgid "Logged-Out Users"
 msgstr ""
 
-#: dist/translation-strings.php:1325
+#: dist/translation-strings.php:1327
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:77
 msgid "Enter Post IDs"
 msgstr ""
 
-#: dist/translation-strings.php:1326
+#: dist/translation-strings.php:1328
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:78
 msgid "Post Meta Key"
 msgstr ""
 
-#: dist/translation-strings.php:1327
+#: dist/translation-strings.php:1329
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:79
 msgid "Operator"
 msgstr ""
 
-#: dist/translation-strings.php:1328
+#: dist/translation-strings.php:1330
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:80
 msgid "True"
 msgstr ""
 
-#: dist/translation-strings.php:1329
+#: dist/translation-strings.php:1331
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:81
 msgid "False"
 msgstr ""
 
-#: dist/translation-strings.php:1330
+#: dist/translation-strings.php:1332
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:82
 msgid "Equal"
 msgstr ""
 
-#: dist/translation-strings.php:1331
+#: dist/translation-strings.php:1333
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:83
 msgid "Not Equal"
 msgstr ""
 
-#: dist/translation-strings.php:1332
+#: dist/translation-strings.php:1334
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:84
 msgid "Less Than"
 msgstr ""
 
-#: dist/translation-strings.php:1333
+#: dist/translation-strings.php:1335
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:85
 msgid "Less Than & Equal To"
 msgstr ""
 
-#: dist/translation-strings.php:1334
+#: dist/translation-strings.php:1336
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:86
 msgid "Greater Than"
 msgstr ""
 
-#: dist/translation-strings.php:1335
+#: dist/translation-strings.php:1337
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:87
 msgid "Greater Than & Equal To"
 msgstr ""
 
-#: dist/translation-strings.php:1336
+#: dist/translation-strings.php:1338
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:88
 msgid "Contains"
 msgstr ""
 
-#: dist/translation-strings.php:1337
+#: dist/translation-strings.php:1339
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:89
 msgid "Does Not Contain"
 msgstr ""
 
-#: dist/translation-strings.php:1338
+#: dist/translation-strings.php:1340
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:90
 msgid "Regular Expression"
 msgstr ""
 
-#: dist/translation-strings.php:1339
+#: dist/translation-strings.php:1341
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:91
 msgid "Enter Value"
 msgstr ""
 
-#: dist/translation-strings.php:1340
+#: dist/translation-strings.php:1342
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:92
 msgid "Value to compare with the post meta value."
 msgstr ""
 
-#: dist/translation-strings.php:1341
+#: dist/translation-strings.php:1343
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:93
 msgid "Enter Post Types"
 msgstr ""
 
-#: dist/translation-strings.php:1342
+#: dist/translation-strings.php:1344
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:94
 msgid "Enter Queries"
 msgstr ""
 
-#: dist/translation-strings.php:1343
+#: dist/translation-strings.php:1345
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:95
 msgid "Enter one query string per line. The block will be displayed / hidden if any of the query strings match."
 msgstr ""
 
-#: dist/translation-strings.php:1344
+#: dist/translation-strings.php:1346
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:96
 msgid "Enter Role"
 msgstr ""
 
-#: dist/translation-strings.php:1345
+#: dist/translation-strings.php:1347
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:97
 msgid "Option Name"
 msgstr ""
 
-#: dist/translation-strings.php:1346
+#: dist/translation-strings.php:1348
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:98
 msgid "Value to compare with the option value."
 msgstr ""
 
-#: dist/translation-strings.php:1347
+#: dist/translation-strings.php:1349
 #: pro__premium_only/src/dynamic-content/sources/current-page.php:31
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:99
 msgid "Current Post"
 msgstr ""
 
-#: dist/translation-strings.php:1348
+#: dist/translation-strings.php:1350
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:100
 msgid "Choose Product"
 msgstr ""
 
-#: dist/translation-strings.php:1349
+#: dist/translation-strings.php:1351
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:101
 msgid "Property"
 msgstr ""
 
-#: dist/translation-strings.php:1350
+#: dist/translation-strings.php:1352
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:102
 msgid "Sales"
 msgstr ""
 
-#: dist/translation-strings.php:1351
+#: dist/translation-strings.php:1353
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:103
 msgid "Stock Quantity"
 msgstr ""
 
-#: dist/translation-strings.php:1352
+#: dist/translation-strings.php:1354
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:104
 msgid "Is Downloadable"
 msgstr ""
 
-#: dist/translation-strings.php:1353
+#: dist/translation-strings.php:1355
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:105
 msgid "Is Featured"
 msgstr ""
 
-#: dist/translation-strings.php:1354
+#: dist/translation-strings.php:1356
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:106
 msgid "Is in Stock"
 msgstr ""
 
-#: dist/translation-strings.php:1355
+#: dist/translation-strings.php:1357
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:107
 msgid "Is on Backorder"
 msgstr ""
 
-#: dist/translation-strings.php:1356
+#: dist/translation-strings.php:1358
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:108
 msgid "Is on Sale"
 msgstr ""
 
-#: dist/translation-strings.php:1357
+#: dist/translation-strings.php:1359
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:109
 msgid "Is Purchasable"
 msgstr ""
 
-#: dist/translation-strings.php:1358
+#: dist/translation-strings.php:1360
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:110
 msgid "Is Shipping Taxable"
 msgstr ""
 
-#: dist/translation-strings.php:1359
+#: dist/translation-strings.php:1361
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:111
 msgid "Is Sold Individually"
 msgstr ""
 
-#: dist/translation-strings.php:1360
+#: dist/translation-strings.php:1362
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:112
 msgid "Is Taxable"
 msgstr ""
 
-#: dist/translation-strings.php:1361
+#: dist/translation-strings.php:1363
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:113
 msgid "Value"
 msgstr ""
 
-#: dist/translation-strings.php:1362
-#: pro__premium_only/src/dynamic-content/sources/acf.php:249
-#: pro__premium_only/src/dynamic-content/sources/jetengine.php:315
-#: pro__premium_only/src/dynamic-content/sources/jetengine.php:325
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:284
-#: pro__premium_only/src/dynamic-content/sources/metabox.php:329
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:114
-msgid "%s Placeholder"
-msgstr ""
-
-#: dist/translation-strings.php:1363
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:115
-msgid "Placeholder"
-msgstr ""
-
 #: dist/translation-strings.php:1364
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:116
@@ -7403,1022 +7403,1022 @@ msgstr ""
 
 #: dist/translation-strings.php:1379
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:313
-msgid "Number of Items"
+#: dist/translation-strings.js:154
+msgid "Offset your posts by a specific number of items."
 msgstr ""
 
 #: dist/translation-strings.php:1380
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:315
-msgid "URL Query String"
+#: dist/translation-strings.js:155
+msgid "Exclude Post IDs"
 msgstr ""
 
 #: dist/translation-strings.php:1381
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:316
-msgid "This is the string appended to the URL when changing pages."
+#: dist/translation-strings.js:156
+msgid "Excludes specific IDs from the display. Enter post IDs separated by a commas"
 msgstr ""
 
 #: dist/translation-strings.php:1382
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:317
-msgid "Show Next & Previous Button"
+#: dist/translation-strings.js:157
+msgid "Hide the current post"
 msgstr ""
 
 #: dist/translation-strings.php:1383
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:318
-msgid "Next Label"
+#: dist/translation-strings.js:158
+msgid "Removes the current post from the posts list"
 msgstr ""
 
 #: dist/translation-strings.php:1384
-#: pro__premium_only/src/block/pagination/index.php:74
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:319
-msgid "Next"
+#: dist/translation-strings.js:159
+msgid "Display Specific Post IDs"
 msgstr ""
 
 #: dist/translation-strings.php:1385
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:320
-msgid "Previous Label"
+#: dist/translation-strings.js:160
+msgid "Limit display to only these specific IDs. Enter post IDs separated by a commas"
 msgstr ""
 
 #: dist/translation-strings.php:1386
-#: pro__premium_only/src/block/pagination/index.php:73
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:321
-msgid "Previous"
+#: dist/translation-strings.js:161
+msgid "Sale"
 msgstr ""
 
 #: dist/translation-strings.php:1387
-#: pro__premium_only/src/block/pagination/index.php:278
-#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:198
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:322
-msgid "Previous page"
+#: dist/translation-strings.js:166
+msgid "Layer %s"
 msgstr ""
 
 #: dist/translation-strings.php:1388
-#: pro__premium_only/src/block/pagination/index.php:299
-#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:219
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:323
-msgid "Page %s"
+#: dist/translation-strings.js:168
+msgid "Layer Height"
 msgstr ""
 
 #: dist/translation-strings.php:1389
-#: pro__premium_only/src/block/pagination/index.php:324
-#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:244
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:324
-msgid "Next page"
+#: dist/translation-strings.js:169
+msgid "Layer Width"
 msgstr ""
 
 #: dist/translation-strings.php:1390
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:333
-msgid "Sale"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:172
+msgid "Layer Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1391
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:326
-msgid "Offset your posts by a specific number of items."
+#: dist/translation-strings.js:173
+msgid "Adjusts the transparency of the separator layer"
 msgstr ""
 
 #: dist/translation-strings.php:1392
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:327
-msgid "Exclude Post IDs"
+#: dist/translation-strings.js:174
+msgid "Layer Blend mode"
 msgstr ""
 
 #: dist/translation-strings.php:1393
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:328
-msgid "Excludes specific IDs from the display. Enter post IDs separated by a commas"
+#: dist/translation-strings.js:175
+msgid "Sets how the sepator layer is blended into the background"
 msgstr ""
 
 #: dist/translation-strings.php:1394
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:329
-msgid "Hide the current post"
+#: dist/translation-strings.js:208
+msgid "Delete Condition"
 msgstr ""
 
 #: dist/translation-strings.php:1395
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:330
-msgid "Removes the current post from the posts list"
+#: dist/translation-strings.js:209
+msgid "Deleting will remove this condition for the block. Proceed?"
 msgstr ""
 
 #: dist/translation-strings.php:1396
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:331
-msgid "Display Specific Post IDs"
+#: dist/translation-strings.js:210
+msgid "Delete"
 msgstr ""
 
 #: dist/translation-strings.php:1397
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/admin_custom_fields__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:332
-msgid "Limit display to only these specific IDs. Enter post IDs separated by a commas"
+#: dist/translation-strings.js:211
+msgid "Cancel"
 msgstr ""
 
 #: dist/translation-strings.php:1398
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:338
-msgid "Layer %s"
+#: dist/translation-strings.js:212
+msgid "Condition Type"
 msgstr ""
 
 #: dist/translation-strings.php:1399
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:225
-msgid "Layer Height"
+#: dist/translation-strings.js:213
+msgid "Visibility"
 msgstr ""
 
 #: dist/translation-strings.php:1400
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:226
-msgid "Layer Width"
+#: dist/translation-strings.js:214
+msgid "Show on condition match"
 msgstr ""
 
 #: dist/translation-strings.php:1401
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:339
-msgid "Layer Opacity"
+#: dist/translation-strings.js:215
+msgid "Hide on condition match"
 msgstr ""
 
 #: dist/translation-strings.php:1402
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:340
-msgid "Adjusts the transparency of the separator layer"
+#: dist/translation-strings.js:216
+msgid "No conditions yet. Add your first condition."
 msgstr ""
 
+#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1403
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:228
-msgid "Layer Blend mode"
+#: dist/translation-strings.js:218
+msgid "OR"
 msgstr ""
 
+#. translators: This is the separator between conditions: OR / AND.
+#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1404
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:229
-msgid "Sets how the sepator layer is blended into the background"
+#: dist/translation-strings.js:220
+msgid "AND"
 msgstr ""
 
+#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1405
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:160
-msgid "Delete Condition"
+#: dist/translation-strings.js:221
+msgid "Trigger if ANY condition matches"
 msgstr ""
 
 #: dist/translation-strings.php:1406
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:161
-msgid "Deleting will remove this condition for the block. Proceed?"
+#: dist/translation-strings.js:222
+msgid "Trigger if ALL conditions match"
 msgstr ""
 
 #: dist/translation-strings.php:1407
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:162
-msgid "Delete"
+#: dist/translation-strings.js:223
+msgid "Add New"
 msgstr ""
 
 #: dist/translation-strings.php:1408
-#: dist/admin_custom_fields__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:151
-msgid "Cancel"
+#: dist/translation-strings.js:224
+msgid "Add New Condition"
 msgstr ""
 
 #: dist/translation-strings.php:1409
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:163
-msgid "Condition Type"
+#: dist/translation-strings.js:225
+msgid "Learn more about Conditional Display"
 msgstr ""
 
 #: dist/translation-strings.php:1410
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:164
-msgid "Visibility"
+#: dist/translation-strings.js:179
+msgid "You can use this area to further customize your block. Any custom CSS added here will only affect this block."
 msgstr ""
 
 #: dist/translation-strings.php:1411
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:165
-msgid "Show on condition match"
+#: dist/translation-strings.js:180
+msgid "Media queries are supported. Use the widths 1024px and 768px for tablet and mobile breakpoints."
 msgstr ""
 
 #: dist/translation-strings.php:1412
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:166
-msgid "Hide on condition match"
+#: dist/translation-strings.js:184
+msgid "Rotate"
 msgstr ""
 
 #: dist/translation-strings.php:1413
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:167
-msgid "No conditions yet. Add your first condition."
+#: dist/translation-strings.js:185
+msgid "Effect"
 msgstr ""
 
-#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1414
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:169
-msgid "OR"
+#: dist/translation-strings.js:186
+msgid "Entrance Animation"
 msgstr ""
 
-#. translators: This is the separator between conditions: OR / AND.
-#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1415
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:171
-msgid "AND"
+#: dist/translation-strings.js:187
+msgid "Scroll Animation"
 msgstr ""
 
-#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1416
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:172
-msgid "Trigger if ANY condition matches"
+#: dist/translation-strings.js:188
+msgid "Start Position"
 msgstr ""
 
 #: dist/translation-strings.php:1417
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:173
-msgid "Trigger if ALL conditions match"
+#: dist/translation-strings.js:189
+msgid "Entrance Animation Speed"
 msgstr ""
 
 #: dist/translation-strings.php:1418
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:174
-msgid "Add New"
+#: dist/translation-strings.js:190
+msgid "Slow"
 msgstr ""
 
 #: dist/translation-strings.php:1419
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:175
-msgid "Add New Condition"
+#: dist/translation-strings.js:192
+msgid "Fast"
 msgstr ""
 
 #: dist/translation-strings.php:1420
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:176
-msgid "Learn more about Conditional Display"
+#: dist/translation-strings.js:193
+msgid "Entrance Animation Delay"
 msgstr ""
 
 #: dist/translation-strings.php:1421
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:159
-msgid "You can use this area to further customize your block. Any custom CSS added here will only affect this block."
+#: dist/translation-strings.js:194
+msgid "Smoothen Scroll Animation"
 msgstr ""
 
 #: dist/translation-strings.php:1422
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:177
-msgid "Media queries are supported. Use the widths 1024px and 768px for tablet and mobile breakpoints."
+#: dist/translation-strings.js:195
+msgid "Use 3D Transforms"
 msgstr ""
 
 #: dist/translation-strings.php:1423
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:181
-msgid "Rotate"
+#: dist/translation-strings.js:196
+msgid "Perspective"
 msgstr ""
 
 #: dist/translation-strings.php:1424
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:182
-msgid "Effect"
+#: dist/translation-strings.js:197
+msgid "Exit Animation"
 msgstr ""
 
 #: dist/translation-strings.php:1425
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:183
-msgid "Entrance Animation"
+#: dist/translation-strings.js:198
+msgid "This block has Transforms assigned to it, Motion Effects may not work as expected."
 msgstr ""
 
 #: dist/translation-strings.php:1426
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:184
-msgid "Scroll Animation"
+#: dist/translation-strings.js:199
+msgid "Learn more about Motion Effects"
 msgstr ""
 
 #: dist/translation-strings.php:1427
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:185
-msgid "Start Position"
+#: dist/translation-strings.js:200
+msgid "Translate X"
 msgstr ""
 
 #: dist/translation-strings.php:1428
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:186
-msgid "Entrance Animation Speed"
+#: dist/translation-strings.js:201
+msgid "TranslateY"
 msgstr ""
 
 #: dist/translation-strings.php:1429
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:187
-msgid "Slow"
+#: dist/translation-strings.js:202
+msgid "TranslateZ"
 msgstr ""
 
 #: dist/translation-strings.php:1430
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:189
-msgid "Fast"
+#: dist/translation-strings.js:203
+msgid "RotateX"
 msgstr ""
 
 #: dist/translation-strings.php:1431
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:190
-msgid "Entrance Animation Delay"
+#: dist/translation-strings.js:204
+msgid "RotateY"
 msgstr ""
 
 #: dist/translation-strings.php:1432
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:191
-msgid "Smoothen Scroll Animation"
+#: dist/translation-strings.js:206
+msgid "Skew X"
 msgstr ""
 
 #: dist/translation-strings.php:1433
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:192
-msgid "Use 3D Transforms"
+#: dist/translation-strings.js:207
+msgid "Skew Y"
 msgstr ""
 
 #: dist/translation-strings.php:1434
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:193
-msgid "Perspective"
+#: dist/translation-strings.js:143
+msgid "URL Query String"
 msgstr ""
 
 #: dist/translation-strings.php:1435
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:194
-msgid "Exit Animation"
+#: dist/translation-strings.js:144
+msgid "This is the string appended to the URL when changing pages."
 msgstr ""
 
 #: dist/translation-strings.php:1436
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:195
-msgid "This block has Transforms assigned to it, Motion Effects may not work as expected."
+#: dist/translation-strings.js:145
+msgid "Show Next & Previous Button"
 msgstr ""
 
 #: dist/translation-strings.php:1437
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:196
-msgid "Learn more about Motion Effects"
+#: dist/translation-strings.js:146
+msgid "Next Label"
 msgstr ""
 
 #: dist/translation-strings.php:1438
+#: pro__premium_only/src/block/pagination/index.php:74
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:198
-msgid "Translate X"
+#: dist/translation-strings.js:147
+msgid "Next"
 msgstr ""
 
 #: dist/translation-strings.php:1439
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:199
-msgid "TranslateY"
+#: dist/translation-strings.js:148
+msgid "Previous Label"
 msgstr ""
 
 #: dist/translation-strings.php:1440
+#: pro__premium_only/src/block/pagination/index.php:73
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:200
-msgid "TranslateZ"
+#: dist/translation-strings.js:149
+msgid "Previous"
 msgstr ""
 
 #: dist/translation-strings.php:1441
+#: pro__premium_only/src/block/pagination/index.php:278
+#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:198
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:201
-msgid "RotateX"
+#: dist/translation-strings.js:150
+msgid "Previous page"
 msgstr ""
 
 #: dist/translation-strings.php:1442
+#: pro__premium_only/src/block/pagination/index.php:299
+#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:219
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:202
-msgid "RotateY"
+#: dist/translation-strings.js:151
+msgid "Page %s"
 msgstr ""
 
 #: dist/translation-strings.php:1443
+#: pro__premium_only/src/block/pagination/index.php:324
+#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:244
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:204
-msgid "Skew X"
+#: dist/translation-strings.js:152
+msgid "Next page"
 msgstr ""
 
 #: dist/translation-strings.php:1444
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:205
-msgid "Skew Y"
-msgstr ""
-
-#: dist/translation-strings.php:1445
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:210
+#: dist/translation-strings.js:231
 msgid "Shape Opacity"
 msgstr ""
 
-#: dist/translation-strings.php:1446
+#: dist/translation-strings.php:1445
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:214
+#: dist/translation-strings.js:235
 msgid "Icon Color #%s"
 msgstr ""
 
-#: dist/translation-strings.php:1447
+#: dist/translation-strings.php:1446
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:218
+#: dist/translation-strings.js:239
 msgid "Multicolor only works for custom uploaded icons that have multiple path elements or for Font Awesome Pro Duotones."
 msgstr ""
 
-#: dist/translation-strings.php:1448
+#: dist/translation-strings.php:1447
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:223
+#: dist/translation-strings.js:226
 msgid "Separator Layer %s"
 msgstr ""
 
+#: dist/translation-strings.php:1448
+#: dist/translation-strings.js:274
+msgid "No saved designs yet"
+msgstr ""
+
 #: dist/translation-strings.php:1449
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:230
-msgid "Transition Duration (secs)"
+#: dist/translation-strings.js:275
+msgid "Click here to save your block's design"
 msgstr ""
 
 #: dist/translation-strings.php:1450
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:231
-msgid "Transition Function"
+#: dist/translation-strings.js:276
+msgid "Error Getting Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1451
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:232
-msgid "Ease"
+#: dist/translation-strings.js:277
+msgid "Click here to retry fetching your saved designs"
 msgstr ""
 
 #: dist/translation-strings.php:1452
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:233
-msgid "Ease In"
+#: dist/translation-strings.js:278
+msgid "Save as new block design"
 msgstr ""
 
 #: dist/translation-strings.php:1453
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:234
-msgid "Ease Out"
+#: dist/translation-strings.js:279
+msgid "Manage saved designs"
 msgstr ""
 
 #: dist/translation-strings.php:1454
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:235
-msgid "Ease In Out"
+#: dist/translation-strings.js:280
+msgid "(default)"
 msgstr ""
 
 #: dist/translation-strings.php:1455
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:236
-msgid "Linear"
+#: dist/translation-strings.js:281
+msgid "Favorite"
 msgstr ""
 
 #: dist/translation-strings.php:1456
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:237
-msgid "Ease In Quad"
+#: dist/translation-strings.js:282
+msgid "Save Changes"
 msgstr ""
 
 #: dist/translation-strings.php:1457
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:238
-msgid "Ease Out Quad"
+#: dist/translation-strings.js:283
+msgid "Saved Block Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1458
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:239
-msgid "Ease In Out Quad"
+#: dist/translation-strings.js:284
+msgid "Save designs to reuse them across your site. Note that using saved designs will override your current block settings."
 msgstr ""
 
 #: dist/translation-strings.php:1459
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:240
-msgid "Ease In Expo"
+#: dist/translation-strings.js:285
+msgid "You have unsaved changes, discard them?"
 msgstr ""
 
 #: dist/translation-strings.php:1460
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:241
-msgid "Ease Out Expo"
+#: dist/translation-strings.js:286
+msgid "Manage Saved Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1461
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:242
-msgid "Ease In Out Expo"
+#: dist/translation-strings.js:287
+msgid "Design Name"
 msgstr ""
 
 #: dist/translation-strings.php:1462
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:243
-msgid "Ease In Back"
+#: dist/translation-strings.js:288
+msgid "Set as a favorite design"
 msgstr ""
 
 #: dist/translation-strings.php:1463
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:244
-msgid "Ease Out Back"
+#: dist/translation-strings.js:289
+msgid "Design name"
 msgstr ""
 
 #: dist/translation-strings.php:1464
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:245
-msgid "Ease In Out Back"
+#: dist/translation-strings.js:290
+msgid "Set as default block design"
 msgstr ""
 
 #: dist/translation-strings.php:1465
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:247
-msgid "Transform Origin"
+#: dist/translation-strings.js:291
+msgid "My Block Design"
 msgstr ""
 
 #: dist/translation-strings.php:1466
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:257
-msgid "This block has Motion Effects assigned to it, applying transforms above may prevent the Motion Effects from working as expected."
+#: dist/translation-strings.js:292
+msgid "Save as New Block Design"
 msgstr ""
 
 #: dist/translation-strings.php:1467
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:258
-msgid "Translate Y"
+#: dist/translation-strings.js:293
+msgid "Set as favorite"
 msgstr ""
 
 #: dist/translation-strings.php:1468
-#: dist/translation-strings.js:133
-msgid "No saved designs yet"
+#: dist/translation-strings.js:294
+msgid "Place at the top of the list of saved designs"
 msgstr ""
 
 #: dist/translation-strings.php:1469
-#: dist/translation-strings.js:134
-msgid "Click here to save your block's design"
+#: dist/translation-strings.js:295
+msgid "New blocks created will use this design automatically"
 msgstr ""
 
 #: dist/translation-strings.php:1470
-#: dist/translation-strings.js:135
-msgid "Error Getting Designs"
+#: dist/translation-strings.js:296
+msgid "Add New Design"
 msgstr ""
 
 #: dist/translation-strings.php:1471
-#: dist/translation-strings.js:136
-msgid "Click here to retry fetching your saved designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:244
+msgid "Transition Duration (secs)"
 msgstr ""
 
 #: dist/translation-strings.php:1472
-#: dist/translation-strings.js:137
-msgid "Save as new block design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:245
+msgid "Transition Function"
 msgstr ""
 
 #: dist/translation-strings.php:1473
-#: dist/translation-strings.js:138
-msgid "Manage saved designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:247
+msgid "Ease"
 msgstr ""
 
 #: dist/translation-strings.php:1474
-#: dist/translation-strings.js:139
-msgid "(default)"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:248
+msgid "Ease In"
 msgstr ""
 
 #: dist/translation-strings.php:1475
-#: dist/translation-strings.js:140
-msgid "Favorite"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:249
+msgid "Ease Out"
 msgstr ""
 
 #: dist/translation-strings.php:1476
-#: dist/translation-strings.js:141
-msgid "Save Changes"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:250
+msgid "Ease In Out"
 msgstr ""
 
 #: dist/translation-strings.php:1477
-#: dist/translation-strings.js:142
-msgid "Saved Block Designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:251
+msgid "Linear"
 msgstr ""
 
 #: dist/translation-strings.php:1478
-#: dist/translation-strings.js:143
-msgid "Save designs to reuse them across your site. Note that using saved designs will override your current block settings."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:252
+msgid "Ease In Quad"
 msgstr ""
 
 #: dist/translation-strings.php:1479
-#: dist/translation-strings.js:144
-msgid "You have unsaved changes, discard them?"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:253
+msgid "Ease Out Quad"
 msgstr ""
 
 #: dist/translation-strings.php:1480
-#: dist/translation-strings.js:145
-msgid "Manage Saved Designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:254
+msgid "Ease In Out Quad"
 msgstr ""
 
 #: dist/translation-strings.php:1481
-#: dist/translation-strings.js:146
-msgid "Design Name"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:255
+msgid "Ease In Expo"
 msgstr ""
 
 #: dist/translation-strings.php:1482
-#: dist/translation-strings.js:148
-msgid "Set as a favorite design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:256
+msgid "Ease Out Expo"
 msgstr ""
 
 #: dist/translation-strings.php:1483
-#: dist/translation-strings.js:149
-msgid "Design name"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:257
+msgid "Ease In Out Expo"
 msgstr ""
 
 #: dist/translation-strings.php:1484
-#: dist/translation-strings.js:150
-msgid "Set as default block design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:258
+msgid "Ease In Back"
 msgstr ""
 
 #: dist/translation-strings.php:1485
-#: dist/translation-strings.js:152
-msgid "My Block Design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:259
+msgid "Ease Out Back"
 msgstr ""
 
 #: dist/translation-strings.php:1486
-#: dist/translation-strings.js:153
-msgid "Save as New Block Design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:260
+msgid "Ease In Out Back"
 msgstr ""
 
 #: dist/translation-strings.php:1487
-#: dist/translation-strings.js:154
-msgid "Set as favorite"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:262
+msgid "Transform Origin"
 msgstr ""
 
 #: dist/translation-strings.php:1488
-#: dist/translation-strings.js:155
-msgid "Place at the top of the list of saved designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:272
+msgid "This block has Motion Effects assigned to it, applying transforms above may prevent the Motion Effects from working as expected."
 msgstr ""
 
 #: dist/translation-strings.php:1489
-#: dist/translation-strings.js:156
-msgid "New blocks created will use this design automatically"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:273
+msgid "Translate Y"
 msgstr ""
 
 #: dist/translation-strings.php:1490
-#: dist/translation-strings.js:157
-msgid "Add New Design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:344
+msgid "Learn more how multicolor works"
 msgstr ""
 
 #: dist/translation-strings.php:1491
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:259
-msgid "Show as link"
+#: dist/translation-strings.js:345
+msgid "here"
 msgstr ""
 
 #: dist/translation-strings.php:1492
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:260
-msgid "Custom Text"
+#: dist/translation-strings.js:347
+msgid "Outline Color"
 msgstr ""
 
 #: dist/translation-strings.php:1493
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:262
-msgid "Date Format"
+#: dist/translation-strings.js:348
+msgid "Icon Shape Color"
 msgstr ""
 
 #: dist/translation-strings.php:1494
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:263
-msgid "Custom Format"
+#: dist/translation-strings.js:297
+msgid "Show as link"
 msgstr ""
 
 #: dist/translation-strings.php:1495
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:264
+#: dist/translation-strings.js:298
+msgid "Custom Text"
+msgstr ""
+
+#: dist/translation-strings.php:1496
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:300
+msgid "Date Format"
+msgstr ""
+
+#: dist/translation-strings.php:1497
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:301
+msgid "Custom Format"
+msgstr ""
+
+#: dist/translation-strings.php:1498
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:302
 msgid "Change the date format of your dynamic content."
 msgstr ""
 
-#: dist/translation-strings.php:1496
+#: dist/translation-strings.php:1499
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:265
+#: dist/translation-strings.js:303
 msgid "Learn more about date formats"
 msgstr ""
 
-#: dist/translation-strings.php:1497
+#: dist/translation-strings.php:1500
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:267
+#: dist/translation-strings.js:305
 msgid "Dynamic Source"
 msgstr ""
 
-#: dist/translation-strings.php:1498
+#: dist/translation-strings.php:1501
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:268
+#: dist/translation-strings.js:306
 msgid "Field"
 msgstr ""
 
-#: dist/translation-strings.php:1499
+#: dist/translation-strings.php:1502
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:269
+#: dist/translation-strings.js:307
 msgid "Learn how to use Dynamic Content"
 msgstr ""
 
-#: dist/translation-strings.php:1500
+#: dist/translation-strings.php:1503
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:270
+#: dist/translation-strings.js:308
 msgid "Apply"
 msgstr ""
 
-#: dist/translation-strings.php:1501
+#: dist/translation-strings.php:1504
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:273
+#: dist/translation-strings.js:311
 msgid "Add Custom Format"
 msgstr ""
 
-#: dist/translation-strings.php:1502
+#: dist/translation-strings.php:1505
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:274
+#: dist/translation-strings.js:312
 msgid "Content Format"
 msgstr ""
 
-#: dist/translation-strings.php:1503
+#: dist/translation-strings.php:1506
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:275
+#: dist/translation-strings.js:313
 msgid "Add your custom format by adding %s."
 msgstr ""
 
-#: dist/translation-strings.php:1504
+#: dist/translation-strings.php:1507
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:276
+#: dist/translation-strings.js:314
 msgid "Thumbnail"
 msgstr ""
 
-#: dist/translation-strings.php:1505
+#: dist/translation-strings.php:1508
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:280
+#: dist/translation-strings.js:318
 msgid "Image Quality"
 msgstr ""
 
-#: dist/translation-strings.php:1506
+#: dist/translation-strings.php:1509
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:282
+#: dist/translation-strings.js:320
 msgid "Text Field"
 msgstr ""
 
-#: dist/translation-strings.php:1507
+#: dist/translation-strings.php:1510
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:284
+#: dist/translation-strings.js:322
 msgid "Taxonomy Type"
 msgstr ""
 
-#: dist/translation-strings.php:1508
+#: dist/translation-strings.php:1511
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:285
+#: dist/translation-strings.js:323
 msgid "Display Option"
 msgstr ""
 
-#: dist/translation-strings.php:1509
+#: dist/translation-strings.php:1512
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:286
+#: dist/translation-strings.js:324
 msgid "All values"
 msgstr ""
 
-#: dist/translation-strings.php:1510
+#: dist/translation-strings.php:1513
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:287
+#: dist/translation-strings.js:325
 msgid "%s value"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1511
+#: dist/translation-strings.php:1514
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:59
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:102
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:230
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:288
+#: dist/translation-strings.js:326
 msgid "1st"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1512
+#: dist/translation-strings.php:1515
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:107
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:231
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:289
+#: dist/translation-strings.js:327
 msgid "2nd"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1513
+#: dist/translation-strings.php:1516
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:112
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:232
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:290
+#: dist/translation-strings.js:328
 msgid "3rd"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1514
+#: dist/translation-strings.php:1517
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:117
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:233
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:291
+#: dist/translation-strings.js:329
 msgid "4th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1515
+#: dist/translation-strings.php:1518
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:122
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:234
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:292
+#: dist/translation-strings.js:330
 msgid "5th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1516
+#: dist/translation-strings.php:1519
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:127
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:235
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:293
+#: dist/translation-strings.js:331
 msgid "6th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1517
+#: dist/translation-strings.php:1520
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:132
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:236
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:294
+#: dist/translation-strings.js:332
 msgid "7th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1518
+#: dist/translation-strings.php:1521
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:137
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:237
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:295
+#: dist/translation-strings.js:333
 msgid "8th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1519
+#: dist/translation-strings.php:1522
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:142
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:238
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:296
+#: dist/translation-strings.js:334
 msgid "9th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1520
+#: dist/translation-strings.php:1523
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:147
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:239
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:297
+#: dist/translation-strings.js:335
 msgid "10th"
 msgstr ""
 
-#: dist/translation-strings.php:1521
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:298
-msgid "Delimiter"
-msgstr ""
-
-#: dist/translation-strings.php:1522
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:299
-msgid "Strip HTML tags"
-msgstr ""
-
-#: dist/translation-strings.php:1523
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:300
-msgid "If this option is false, the content rendered in the editor will still be stripped to prevent an error from occuring"
-msgstr ""
-
 #: dist/translation-strings.php:1524
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:301
-msgid "Display text when true"
+#: dist/translation-strings.js:336
+msgid "Delimiter"
 msgstr ""
 
 #: dist/translation-strings.php:1525
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:302
-msgid "Display text when false"
+#: dist/translation-strings.js:337
+msgid "Strip HTML tags"
 msgstr ""
 
 #: dist/translation-strings.php:1526
-#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:89
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:303
-msgid "Fields"
+#: dist/translation-strings.js:338
+msgid "If this option is false, the content rendered in the editor will still be stripped to prevent an error from occuring"
 msgstr ""
 
 #: dist/translation-strings.php:1527
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:304
-msgid "Attributes"
+#: dist/translation-strings.js:339
+msgid "Display text when true"
 msgstr ""
 
 #: dist/translation-strings.php:1528
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:355
-msgid "Learn more how multicolor works"
+#: dist/translation-strings.js:340
+msgid "Display text when false"
 msgstr ""
 
 #: dist/translation-strings.php:1529
+#: src/welcome/index.php:259
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:356
-msgid "here"
+#: dist/translation-strings.js:350
+msgid "Dynamic Content"
 msgstr ""
 
 #: dist/translation-strings.php:1530
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:358
-msgid "Outline Color"
+#: dist/translation-strings.js:351
+msgid "Style copied successfully!"
 msgstr ""
 
 #: dist/translation-strings.php:1531
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:359
-msgid "Icon Shape Color"
+#: dist/translation-strings.js:352
+msgid "Style pasted successfully!"
 msgstr ""
 
 #: dist/translation-strings.php:1532
-#: src/welcome/index.php:259
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:360
-msgid "Dynamic Content"
+#: dist/translation-strings.js:353
+msgid "Used to copy core/stackable block styles"
 msgstr ""
 
 #: dist/translation-strings.php:1533
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:344
-msgid "Style copied successfully!"
+#: dist/translation-strings.js:354
+msgid "Used to paste core/stackable block styles"
 msgstr ""
 
 #: dist/translation-strings.php:1534
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:345
-msgid "Style pasted successfully!"
+#: dist/translation-strings.js:355
+msgid "Adv Copy Styles"
 msgstr ""
 
 #: dist/translation-strings.php:1535
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:346
-msgid "Used to copy core/stackable block styles"
+#: dist/translation-strings.js:356
+msgid "Adv Paste Styles"
 msgstr ""
 
 #: dist/translation-strings.php:1536
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:347
-msgid "Used to paste core/stackable block styles"
+#: dist/translation-strings.js:357
+msgid "Copy & paste styles"
 msgstr ""
 
 #: dist/translation-strings.php:1537
+#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:89
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:348
-msgid "Adv Copy Styles"
+#: dist/translation-strings.js:341
+msgid "Fields"
 msgstr ""
 
 #: dist/translation-strings.php:1538
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:349
-msgid "Adv Paste Styles"
+#: dist/translation-strings.js:342
+msgid "Attributes"
 msgstr ""
 
 #: dist/translation-strings.php:1539
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:350
-msgid "Copy & paste styles"
+#: dist/translation-strings.js:358
+msgid "Remove the selected block(s)."
 msgstr ""
 
 #: dist/translation-strings.php:1540
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:351
-msgid "Remove the selected block(s)."
+#: dist/translation-strings.js:359
+msgid "Content Editing mode is enabled"
 msgstr ""
 
 #: dist/translation-strings.php:1541
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:352
-msgid "Content Editing mode is enabled"
+#: dist/translation-strings.js:360
+msgid "To unlock Full Editing mode, please contact your administrator."
 msgstr ""
 
 #: dist/translation-strings.php:1542
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:353
-msgid "To unlock Full Editing mode, please contact your administrator."
+#: dist/translation-strings.js:141
+msgid "Number of Items"
 msgstr ""
 
 #: dist/translation-strings.php:1543
@@ -8549,134 +8549,134 @@ msgstr ""
 
 #: dist/translation-strings.php:1564
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:441
-msgid "%s More"
+#: dist/translation-strings.js:385
+msgid "Offset your posts by a specific number of items"
 msgstr ""
 
 #: dist/translation-strings.php:1565
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:442
-msgid "Lift w/ shadow"
+#: dist/translation-strings.js:389
+msgid "Show previous and next buttons"
 msgstr ""
 
 #: dist/translation-strings.php:1566
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:443
-msgid "Staggered lift"
+#: dist/translation-strings.js:390
+msgid "Previous label"
 msgstr ""
 
 #: dist/translation-strings.php:1567
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:444
-msgid "Staggered lift w/ shadow"
+#: dist/translation-strings.js:391
+msgid "Next label"
 msgstr ""
 
 #: dist/translation-strings.php:1568
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:445
-msgid "Scale w/ shadow"
+#: dist/translation-strings.js:392
+msgid "Hover & Active Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1569
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:446
-msgid "Lower"
+#: dist/translation-strings.js:393
+msgid "Hover & Active Colors"
 msgstr ""
 
 #: dist/translation-strings.php:1570
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:447
-msgid "Grayscale Hover Effect"
+#: dist/translation-strings.js:397
+msgid "Reverse columns"
 msgstr ""
 
 #: dist/translation-strings.php:1571
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:433
-msgid "Column / Container Spacing"
+#: dist/translation-strings.js:398
+msgid "Collapsed Row Gap"
 msgstr ""
 
 #: dist/translation-strings.php:1572
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:435
-msgid "Min. Column Height"
+#: dist/translation-strings.js:399
+msgid "Collapsed Col. Arrangement"
 msgstr ""
 
 #: dist/translation-strings.php:1573
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:385
-msgid "Offset your posts by a specific number of items"
+#: dist/translation-strings.js:405
+msgid "Collapse image on Mobile"
 msgstr ""
 
 #: dist/translation-strings.php:1574
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:389
-msgid "Show previous and next buttons"
+#: dist/translation-strings.js:406
+msgid "Collapse image height"
 msgstr ""
 
 #: dist/translation-strings.php:1575
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:390
-msgid "Previous label"
+#: dist/translation-strings.js:408
+msgid "Override settings for column %d"
 msgstr ""
 
 #: dist/translation-strings.php:1576
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:391
-msgid "Next label"
+#: dist/translation-strings.js:409
+msgid "Column Background"
 msgstr ""
 
 #: dist/translation-strings.php:1577
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:392
-msgid "Hover & Active Opacity"
+#: dist/translation-strings.js:411
+msgid "Tilt"
 msgstr ""
 
 #: dist/translation-strings.php:1578
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:393
-msgid "Hover & Active Colors"
+#: dist/translation-strings.js:412
+msgid "Zoom & Tilt"
 msgstr ""
 
 #: dist/translation-strings.php:1579
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:397
-msgid "Reverse columns"
+#: dist/translation-strings.js:413
+msgid "Up"
 msgstr ""
 
 #: dist/translation-strings.php:1580
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:398
-msgid "Collapsed Row Gap"
+#: dist/translation-strings.js:414
+msgid "Down"
 msgstr ""
 
 #: dist/translation-strings.php:1581
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:399
-msgid "Collapsed Col. Arrangement"
+#: dist/translation-strings.js:417
+msgid "Blur In"
 msgstr ""
 
 #: dist/translation-strings.php:1582
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:405
-msgid "Collapse image on Mobile"
+#: dist/translation-strings.js:418
+msgid "Blur Out"
 msgstr ""
 
 #: dist/translation-strings.php:1583
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:406
-msgid "Collapse image height"
+#: dist/translation-strings.js:419
+msgid "Grayscale In"
 msgstr ""
 
 #: dist/translation-strings.php:1584
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:408
-msgid "Override settings for column %d"
+#: dist/translation-strings.js:420
+msgid "Grayscale Out"
 msgstr ""
 
 #: dist/translation-strings.php:1585
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:409
-msgid "Column Background"
+#: dist/translation-strings.js:421
+msgid "Box Hover Effect"
 msgstr ""
 
 #: dist/translation-strings.php:1586
@@ -8687,87 +8687,87 @@ msgstr ""
 
 #: dist/translation-strings.php:1587
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:411
-msgid "Tilt"
+#: dist/translation-strings.js:423
+msgid "Column Header"
 msgstr ""
 
 #: dist/translation-strings.php:1588
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:412
-msgid "Zoom & Tilt"
+#: dist/translation-strings.js:424
+msgctxt "Nth Title"
+msgid "%s #%d"
 msgstr ""
 
 #: dist/translation-strings.php:1589
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:413
-msgid "Up"
+#: dist/translation-strings.js:427
+msgid "Layer Color"
 msgstr ""
 
 #: dist/translation-strings.php:1590
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:414
-msgid "Down"
+#: dist/translation-strings.js:428
+msgid "Color on Hover"
 msgstr ""
 
 #: dist/translation-strings.php:1591
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:417
-msgid "Blur In"
+#: dist/translation-strings.js:432
+msgid "Bubble Background"
 msgstr ""
 
 #: dist/translation-strings.php:1592
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:418
-msgid "Blur Out"
+#: dist/translation-strings.js:435
+msgid "%s More"
 msgstr ""
 
 #: dist/translation-strings.php:1593
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:419
-msgid "Grayscale In"
+#: dist/translation-strings.js:436
+msgid "Lift w/ shadow"
 msgstr ""
 
 #: dist/translation-strings.php:1594
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:420
-msgid "Grayscale Out"
+#: dist/translation-strings.js:437
+msgid "Staggered lift"
 msgstr ""
 
 #: dist/translation-strings.php:1595
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:421
-msgid "Box Hover Effect"
+#: dist/translation-strings.js:438
+msgid "Staggered lift w/ shadow"
 msgstr ""
 
 #: dist/translation-strings.php:1596
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:428
-msgid "Color on Hover"
+#: dist/translation-strings.js:439
+msgid "Scale w/ shadow"
 msgstr ""
 
 #: dist/translation-strings.php:1597
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:423
-msgid "Column Header"
+#: dist/translation-strings.js:440
+msgid "Lower"
 msgstr ""
 
 #: dist/translation-strings.php:1598
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:424
-msgctxt "Nth Title"
-msgid "%s #%d"
+#: dist/translation-strings.js:441
+msgid "Grayscale Hover Effect"
 msgstr ""
 
 #: dist/translation-strings.php:1599
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:432
-msgid "Bubble Background"
+#: dist/translation-strings.js:444
+msgid "Column / Container Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:1600
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:427
-msgid "Layer Color"
+#: dist/translation-strings.js:446
+msgid "Min. Column Height"
 msgstr ""
 
 #: dist/translation-strings.php:1601
@@ -8834,14 +8834,6 @@ msgid "Font Awesome icon version to server"
 msgstr ""
 
 #: dist/translation-strings.php:1613
-#: pro__premium_only/src/block/load-more/index.php:49
-#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:28
-#: src/custom-block-styles.php:157
-#: src/design-library/init.php:36
-msgid "%s must be a string."
-msgstr ""
-
-#: dist/translation-strings.php:1614
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:21
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:47
 #: src/deprecated/v2/disabled-blocks.php:62
@@ -8849,18 +8841,18 @@ msgstr ""
 msgid "Security error, please refresh the page and try again."
 msgstr ""
 
-#: dist/translation-strings.php:1615
+#: dist/translation-strings.php:1614
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:28
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:53
 msgid "Invalid arguments."
 msgstr ""
 
-#: dist/translation-strings.php:1616
+#: dist/translation-strings.php:1615
 #: pro__premium_only/src/dynamic-content/sources/acf.php:57
 msgid "ACF"
 msgstr ""
 
-#: dist/translation-strings.php:1617
+#: dist/translation-strings.php:1616
 #: pro__premium_only/src/dynamic-content/sources/acf.php:201
 #: pro__premium_only/src/dynamic-content/sources/acf.php:229
 #: pro__premium_only/src/dynamic-content/sources/custom-fields.php:97
@@ -8873,7 +8865,7 @@ msgstr ""
 msgid "The field type provided is not valid."
 msgstr ""
 
-#: dist/translation-strings.php:1618
+#: dist/translation-strings.php:1617
 #: pro__premium_only/src/dynamic-content/sources/acf.php:359
 #: pro__premium_only/src/dynamic-content/sources/acf.php:555
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:364
@@ -8886,27 +8878,27 @@ msgstr ""
 msgid "Text input is empty"
 msgstr ""
 
-#: dist/translation-strings.php:1619
+#: dist/translation-strings.php:1618
 #: pro__premium_only/src/dynamic-content/sources/acf.php:417
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:390
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:472
 msgid "`whenTrueText` and `whenFalseText` arguments are required."
 msgstr ""
 
-#: dist/translation-strings.php:1620
+#: dist/translation-strings.php:1619
 #: pro__premium_only/src/dynamic-content/sources/custom-fields.php:41
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:88
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:137
 msgid "Stackable Custom Fields"
 msgstr ""
 
-#: dist/translation-strings.php:1621
+#: dist/translation-strings.php:1620
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:62
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:86
 msgid "JetEngine"
 msgstr ""
 
-#: dist/translation-strings.php:1622
+#: dist/translation-strings.php:1621
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:53
 msgid "Latest Post"
 msgstr ""
@@ -8924,8 +8916,8 @@ msgstr ""
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1623
-#: dist/translation-strings.php:1626
+#: dist/translation-strings.php:1622
+#: dist/translation-strings.php:1625
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:57
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:59
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:102
@@ -8953,14 +8945,14 @@ msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1624
+#: dist/translation-strings.php:1623
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:57
 msgid "Nth"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1625
+#: dist/translation-strings.php:1624
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:57
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:59
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:219
@@ -8980,108 +8972,108 @@ msgstr ""
 msgid "Post"
 msgstr ""
 
-#: dist/translation-strings.php:1627
+#: dist/translation-strings.php:1626
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:74
 msgid "Meta Box"
 msgstr ""
 
-#: dist/translation-strings.php:1628
+#: dist/translation-strings.php:1627
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:196
 msgid "Meta Box | "
 msgstr ""
 
-#: dist/translation-strings.php:1629
+#: dist/translation-strings.php:1628
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:249
 msgid "Multiple select not supported in this field."
 msgstr ""
 
-#: dist/translation-strings.php:1630
+#: dist/translation-strings.php:1629
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:643
 msgid "You have not selected an image."
 msgstr ""
 
-#: dist/translation-strings.php:1631
+#: dist/translation-strings.php:1630
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:674
 msgid "Text fields are empty"
 msgstr ""
 
-#: dist/translation-strings.php:1632
+#: dist/translation-strings.php:1631
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:32
 msgid "Other Posts"
 msgstr ""
 
-#: dist/translation-strings.php:1633
+#: dist/translation-strings.php:1632
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:35
 msgid "Posts/Pages"
 msgstr ""
 
-#: dist/translation-strings.php:1634
+#: dist/translation-strings.php:1633
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:36
 msgid "Search for posts/pages"
 msgstr ""
 
-#: dist/translation-strings.php:1635
+#: dist/translation-strings.php:1634
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:118
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:180
 msgid "Detected Custom Fields"
 msgstr ""
 
-#: dist/translation-strings.php:1636
+#: dist/translation-strings.php:1635
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:218
 msgid "Post Title"
 msgstr ""
 
-#: dist/translation-strings.php:1637
+#: dist/translation-strings.php:1636
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:222
 msgid "Post URL"
 msgstr ""
 
-#: dist/translation-strings.php:1638
+#: dist/translation-strings.php:1637
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:227
 msgid "Post ID"
 msgstr ""
 
-#: dist/translation-strings.php:1639
+#: dist/translation-strings.php:1638
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:231
 msgid "Post Slug"
 msgstr ""
 
-#: dist/translation-strings.php:1640
+#: dist/translation-strings.php:1639
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:239
 msgid "Post Excerpt"
 msgstr ""
 
-#: dist/translation-strings.php:1641
+#: dist/translation-strings.php:1640
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:243
 msgid "Post Date"
 msgstr ""
 
-#: dist/translation-strings.php:1642
+#: dist/translation-strings.php:1641
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:247
 msgid "Post Date GMT"
 msgstr ""
 
-#: dist/translation-strings.php:1643
+#: dist/translation-strings.php:1642
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:251
 msgid "Post Modified"
 msgstr ""
 
-#: dist/translation-strings.php:1644
+#: dist/translation-strings.php:1643
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:255
 msgid "Post Modified GMT"
 msgstr ""
 
-#: dist/translation-strings.php:1645
+#: dist/translation-strings.php:1644
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:263
 msgid "Post Status"
 msgstr ""
 
-#: dist/translation-strings.php:1646
+#: dist/translation-strings.php:1645
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:268
 msgid "Author Name"
 msgstr ""
 
-#: dist/translation-strings.php:1647
+#: dist/translation-strings.php:1646
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:269
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:273
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:277
@@ -9092,68 +9084,68 @@ msgstr ""
 msgid "Author"
 msgstr ""
 
-#: dist/translation-strings.php:1648
+#: dist/translation-strings.php:1647
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:272
 msgid "Author ID"
 msgstr ""
 
-#: dist/translation-strings.php:1649
+#: dist/translation-strings.php:1648
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:276
 msgid "Author Posts URL"
 msgstr ""
 
-#: dist/translation-strings.php:1650
+#: dist/translation-strings.php:1649
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:281
 msgid "Author Profile Picture URL"
 msgstr ""
 
-#: dist/translation-strings.php:1651
+#: dist/translation-strings.php:1650
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:286
 msgid "Author Posts"
 msgstr ""
 
-#: dist/translation-strings.php:1652
+#: dist/translation-strings.php:1651
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:290
 msgid "Author First Name"
 msgstr ""
 
-#: dist/translation-strings.php:1653
+#: dist/translation-strings.php:1652
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:294
 msgid "Author Last Name"
 msgstr ""
 
-#: dist/translation-strings.php:1654
+#: dist/translation-strings.php:1653
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:299
 msgid "Comment Number"
 msgstr ""
 
-#: dist/translation-strings.php:1655
+#: dist/translation-strings.php:1654
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:300
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:304
 msgid "Comment"
 msgstr ""
 
-#: dist/translation-strings.php:1656
+#: dist/translation-strings.php:1655
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:303
 msgid "Comment Status"
 msgstr ""
 
-#: dist/translation-strings.php:1657
+#: dist/translation-strings.php:1656
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:308
 msgid "Featured Image URL"
 msgstr ""
 
-#: dist/translation-strings.php:1658
+#: dist/translation-strings.php:1657
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:309
 msgid "Media"
 msgstr ""
 
-#: dist/translation-strings.php:1659
+#: dist/translation-strings.php:1658
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:491
 msgid "Post not found."
 msgstr ""
 
-#: dist/translation-strings.php:1660
+#: dist/translation-strings.php:1659
 #: pro__premium_only/src/dynamic-content/sources/site.php:27
 #: pro__premium_only/src/dynamic-content/sources/site.php:45
 #: pro__premium_only/src/dynamic-content/sources/site.php:49
@@ -9161,156 +9153,164 @@ msgstr ""
 msgid "Site"
 msgstr ""
 
-#: dist/translation-strings.php:1661
+#: dist/translation-strings.php:1660
 #: pro__premium_only/src/dynamic-content/sources/site.php:44
 msgid "Site Tagline"
 msgstr ""
 
-#: dist/translation-strings.php:1662
+#: dist/translation-strings.php:1661
 #: pro__premium_only/src/dynamic-content/sources/site.php:48
 msgid "Site Title"
 msgstr ""
 
-#: dist/translation-strings.php:1663
+#: dist/translation-strings.php:1662
 #: pro__premium_only/src/dynamic-content/sources/site.php:52
 msgid "Site URL"
 msgstr ""
 
-#: dist/translation-strings.php:1664
+#: dist/translation-strings.php:1663
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:91
 msgid "Product Url"
 msgstr ""
 
-#: dist/translation-strings.php:1665
+#: dist/translation-strings.php:1664
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:101
 msgid "Product Name"
 msgstr ""
 
-#: dist/translation-strings.php:1666
+#: dist/translation-strings.php:1665
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:108
 msgid "Product Description"
 msgstr ""
 
-#: dist/translation-strings.php:1667
+#: dist/translation-strings.php:1666
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:115
 msgid "Product Short Description"
 msgstr ""
 
-#: dist/translation-strings.php:1668
+#: dist/translation-strings.php:1667
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:122
 msgid "Product Purchase Note"
 msgstr ""
 
-#: dist/translation-strings.php:1669
+#: dist/translation-strings.php:1668
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:129
 msgid "Product Image"
 msgstr ""
 
-#: dist/translation-strings.php:1670
+#: dist/translation-strings.php:1669
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:136
 msgid "Product Price"
 msgstr ""
 
-#: dist/translation-strings.php:1671
+#: dist/translation-strings.php:1670
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:143
 msgid "Product Price (Regular)"
 msgstr ""
 
-#: dist/translation-strings.php:1672
+#: dist/translation-strings.php:1671
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:150
 msgid "Product Price (No Tax)"
 msgstr ""
 
-#: dist/translation-strings.php:1673
+#: dist/translation-strings.php:1672
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:157
 msgid "Produce Price (Sale)"
 msgstr ""
 
-#: dist/translation-strings.php:1674
+#: dist/translation-strings.php:1673
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:164
 msgid "Product Date Created"
 msgstr ""
 
-#: dist/translation-strings.php:1675
+#: dist/translation-strings.php:1674
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:171
 msgid "Product Sale Date From"
 msgstr ""
 
-#: dist/translation-strings.php:1676
+#: dist/translation-strings.php:1675
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:178
 msgid "Product Sale Date To"
 msgstr ""
 
-#: dist/translation-strings.php:1677
+#: dist/translation-strings.php:1676
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:185
 msgid "Product Add to Cart URL"
 msgstr ""
 
-#: dist/translation-strings.php:1678
+#: dist/translation-strings.php:1677
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:193
 msgid "Product SKU"
 msgstr ""
 
-#: dist/translation-strings.php:1679
+#: dist/translation-strings.php:1678
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:200
 msgid "Product Total Sales"
 msgstr ""
 
-#: dist/translation-strings.php:1680
+#: dist/translation-strings.php:1679
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:207
 msgid "Product Total Stock"
 msgstr ""
 
-#: dist/translation-strings.php:1681
+#: dist/translation-strings.php:1680
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:214
 msgid "Product Low Stock"
 msgstr ""
 
-#: dist/translation-strings.php:1682
+#: dist/translation-strings.php:1681
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:221
 msgid "Product Weight"
 msgstr ""
 
-#: dist/translation-strings.php:1683
+#: dist/translation-strings.php:1682
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:228
 msgid "Product Width"
 msgstr ""
 
-#: dist/translation-strings.php:1684
+#: dist/translation-strings.php:1683
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:235
 msgid "Product Length"
 msgstr ""
 
-#: dist/translation-strings.php:1685
+#: dist/translation-strings.php:1684
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:242
 msgid "Product Height"
 msgstr ""
 
-#: dist/translation-strings.php:1686
+#: dist/translation-strings.php:1685
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:249
 msgid "Product Review Count"
 msgstr ""
 
-#: dist/translation-strings.php:1687
+#: dist/translation-strings.php:1686
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:256
 msgid "Product Tax Status"
 msgstr ""
 
-#: dist/translation-strings.php:1688
+#: dist/translation-strings.php:1687
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:263
 msgid "Product Tax Class"
 msgstr ""
 
-#: dist/translation-strings.php:1689
+#: dist/translation-strings.php:1688
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:270
 msgid "Product Tags"
 msgstr ""
 
-#: dist/translation-strings.php:1690
+#: dist/translation-strings.php:1689
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:277
 msgid "Product Attributes"
 msgstr ""
 
+#: dist/translation-strings.php:1690
+#: pro__premium_only/src/block/load-more/index.php:49
+#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:28
+#: src/custom-block-styles.php:157
+#: src/design-library/init.php:36
+msgid "%s must be a string."
+msgstr ""
+
 #: dist/translation-strings.php:1691
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:48
 msgid "Data from Stackable custom fields"
diff --git a/package.json b/package.json
index fdadb9900..4b032aa13 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "stackable",
-	"version": "3.13.6",
+	"version": "3.13.7",
 	"private": true,
 	"description": "Blocks for everyone",
 	"author": "Benjamin Intal of Gambit",
diff --git a/plugin.php b/plugin.php
index cf98acb68..a75967208 100644
--- a/plugin.php
+++ b/plugin.php
@@ -6,7 +6,7 @@
  * Author: Gambit Technologies, Inc
  * Author URI: http://gambit.ph
  * Text Domain: stackable-ultimate-gutenberg-blocks
- * Version: 3.13.6
+ * Version: 3.13.7
  *
  * @package Stackable
  */
@@ -24,7 +24,7 @@
 
 defined( 'STACKABLE_SHOW_PRO_NOTICES' ) || define( 'STACKABLE_SHOW_PRO_NOTICES', true );
 defined( 'STACKABLE_BUILD' ) || define( 'STACKABLE_BUILD', 'free' );
-defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.13.6' );
+defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.13.7' );
 defined( 'STACKABLE_FILE' ) || define( 'STACKABLE_FILE', __FILE__ );
 defined( 'STACKABLE_I18N' ) || define( 'STACKABLE_I18N', 'stackable-ultimate-gutenberg-blocks' ); // Plugin slug.
 defined( 'STACKABLE_DESIGN_LIBRARY_URL' ) || define( 'STACKABLE_DESIGN_LIBRARY_URL', 'https://storage.googleapis.com/stackable-plugin-assets' ); // Design Library CDN URL
diff --git a/readme.txt b/readme.txt
index de7403543..ccdb786f4 100644
--- a/readme.txt
+++ b/readme.txt
@@ -4,7 +4,7 @@ Tags: blocks, gutenberg, gutenberg blocks, page builder, WordPress blocks
 Requires at least: 6.3
 Tested up to: 6.6.1
 Requires PHP: 7.3
-Stable tag: 3.13.6
+Stable tag: 3.13.7
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -295,6 +295,13 @@ Nope. Stackable only works with Gutenberg, the new WordPress editor.
 
 == Changelog ==
 
+= 3.13.7 =
+* Fixed: Stylesheets can sometimes not load in the frontend
+* Fixed: SVG error when using custom SVGs with a use tag #3323
+* Fixed: Carousel block: column alignment stops working for nested columns #3327
+* Fixed: Global colors: color not copied over when pasting in another site #3329
+* Fixed: Only do kses fixes when the user can edit posts
+
 = 3.13.6 =
 * New: Drastically improved performance of the Block Editor #3261
 * New: Added option to enable Stackable Text block as the default editor block #3279
diff --git a/src/components/font-family-control/google-fonts.json b/src/components/font-family-control/google-fonts.json
index 0d13799f2..837bad223 100644
--- a/src/components/font-family-control/google-fonts.json
+++ b/src/components/font-family-control/google-fonts.json
@@ -5237,6 +5237,32 @@
       "latin-ext"
     ]
   },
+  {
+    "family": "Edu AU VIC WA NT Dots",
+    "variants": [
+      "regular",
+      "500",
+      "600",
+      "700"
+    ],
+    "subsets": [
+      "latin",
+      "latin-ext"
+    ]
+  },
+  {
+    "family": "Edu AU VIC WA NT Guides",
+    "variants": [
+      "regular",
+      "500",
+      "600",
+      "700"
+    ],
+    "subsets": [
+      "latin",
+      "latin-ext"
+    ]
+  },
   {
     "family": "Edu AU VIC WA NT Hand",
     "variants": [
diff --git a/src/dynamic-breakpoints.php b/src/dynamic-breakpoints.php
index 4a43c6b6b..5d09c1b54 100644
--- a/src/dynamic-breakpoints.php
+++ b/src/dynamic-breakpoints.php
@@ -15,7 +15,7 @@
 	function stackable_get_responsive_css() {
 		// NOTE: THE VALUE BELOW IS AUTOMATICALLY GENERATED BY THE BUILD PROCESS.
 		return <<<STK_RESPONSIVE_CSS
-#start-resizable-editor-section{display:none}@media only screen and (min-width:1024px){:where(.has-text-align-left) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-feature>*>.stk-row{flex-wrap:var(--stk-feature-flex-wrap,nowrap)}.stk-row{flex-wrap:nowrap}.stk--hide-desktop,.stk--hide-desktop.stk-block{display:none!important}}@media only screen and (min-width:768px){:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(2)){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):last-child){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(3)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(2)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):last-child){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(4)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(3)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(2)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):last-child){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(5)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(4)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(3)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(2)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):last-child){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(6)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(5)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(4)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(3)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):nth-last-child(2)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(6):last-child){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical{grid-template-columns:auto 1fr auto}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:first-child{grid-column:1/2}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:last-child{grid-column:2/4}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:first-child{grid-column:1/3}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:last-child{grid-column:3/4}.stk-block .stk-block.aligncenter,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){margin-left:auto;margin-right:auto;max-width:var(--stk-block-default-width,var(--stk-block-width-default-detected,900px));width:100%}.stk-block .stk-block.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide{margin-left:auto;margin-right:auto;max-width:var(--stk-block-wide-width,var(--stk-block-width-wide-detected,80vw));width:100%}.stk-row.stk-columns-2>.stk-column{flex:1 1 50%;max-width:50%}.stk-row.stk-columns-3>.stk-column{flex:1 1 33.3333333333%;max-width:33.3333333333%}.stk-row.stk-columns-4>.stk-column{flex:1 1 25%;max-width:25%}.stk-row.stk-columns-5>.stk-column{flex:1 1 20%;max-width:20%}.stk-row.stk-columns-6>.stk-column{flex:1 1 16.6666666667%;max-width:16.6666666667%}.stk-row.stk-columns-7>.stk-column{flex:1 1 14.2857142857%;max-width:14.2857142857%}.stk-row.stk-columns-8>.stk-column{flex:1 1 12.5%;max-width:12.5%}.stk-row.stk-columns-9>.stk-column{flex:1 1 11.1111111111%;max-width:11.1111111111%}.stk-row.stk-columns-10>.stk-column{flex:1 1 10%;max-width:10%}}@media only screen and (min-width:768px) and (max-width:1023px){.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}:where(.has-text-align-left-tablet) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-tablet) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-tablet) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk--hide-tablet,.stk--hide-tablet.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}}@media only screen and (max-width:1023px){.stk-block-button{min-width:-moz-fit-content;min-width:fit-content}.stk-block.stk-block-divider.has-text-align-center-tablet{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-tablet{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-tablet{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-timeline.stk-block-timeline__ios-polyfill{--fixed-bg:linear-gradient(to bottom,var(--line-accent-bg-color,#000) 0,var(--line-accent-bg-color-2,#000) var(--line-accent-bg-location,50%))}.has-text-align-center-tablet{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-tablet{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-tablet{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-tablet{--stk-alignment-text-align:justify}.has-text-align-space-between-tablet{--stk-alignment-justify-content:space-between}.has-text-align-space-around-tablet{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-tablet{--stk-alignment-justify-content:space-evenly}}@media only screen and (max-width:767px){.stk-button-group:is(.stk--collapse-on-mobile)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block],.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.stk-block-carousel.stk--hide-mobile-arrows>.stk-block-carousel__content-wrapper>*>.stk-block-carousel__buttons,.stk-block-carousel.stk--hide-mobile-dots>.stk-block-carousel__content-wrapper>.stk-block-carousel__dots{display:none}:where(.has-text-align-left-mobile) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-mobile) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-mobile) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center-mobile{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-mobile{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-mobile{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block.stk-block-feature:is(.is-style-default,.is-style-horizontal)>.stk-container>.stk-inner-blocks.stk-block-content{flex-direction:column-reverse}.stk-block-posts{--stk-columns:1}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile){overflow-x:auto!important;width:100%}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile)::-webkit-scrollbar{height:0!important}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile) .stk-block-tab-labels__wrapper{flex-wrap:nowrap;min-width:-webkit-fill-available;min-width:fill-available;width:max-content}.stk-block-tabs>.stk-inner-blocks{grid-template-columns:1fr}.stk-block-tabs>.stk-inner-blocks>.stk-block-tab-labels:last-child{grid-row:1/2}.stk-block.stk-block-timeline{--content-line:0!important;padding-top:0}.stk-block-timeline>.stk-inner-blocks{align-items:flex-start;grid-template-columns:var(--line-dot-size,16px) 1fr;grid-template-rows:auto 1fr;padding-left:16px}.stk-block-timeline>.stk-inner-blocks:after{inset-inline-start:calc(var(--line-dot-size, 16px)/2 - var(--line-bg-width, 3px)/2 + 16px)}.stk-block-timeline .stk-block-timeline__middle{inset-block-start:8px;inset-inline-start:16px;position:absolute}.stk-block-timeline .stk-block-timeline__content{grid-column:2/3;grid-row:2/3;text-align:start}.stk-block-timeline .stk-block-timeline__date{grid-column:2/3;grid-row:1/2;text-align:start}.stk-block-timeline>.stk-inner-blocks:after{bottom:calc(100% - var(--line-dot-size, 16px)/2 - .5em);top:calc(var(--line-dot-size, 16px)/2 + .5em)}.stk-block-timeline+.stk-block-timeline>.stk-inner-blocks:after{top:-16px}.entry-content .stk-block.stk-has-top-separator{padding-top:23vw}.entry-content .stk-block.stk-has-bottom-separator{padding-bottom:23vw}.entry-content .stk-block .stk-separator__wrapper{height:23vw}:root{--stk-block-margin-bottom:16px;--stk-container-padding:24px 24px;--stk-container-padding-large:32px 24px;--stk-container-padding-small:8px 24px;--stk-column-margin:8px;--stk-block-background-padding:16px 16px}.stk-block .stk-block:is(.aligncenter,.alignwide),.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){width:100%}.stk-column{flex:1 1 100%;max-width:100%}.stk--hide-mobile,.stk--hide-mobile.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-mobile) .stk-block:is(.stk-block-button,.stk-block-icon-button),.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.has-text-align-center-mobile{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-mobile{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-mobile{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-mobile{--stk-alignment-text-align:justify}.has-text-align-space-between-mobile{--stk-alignment-justify-content:space-between}.has-text-align-space-around-mobile{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-mobile{--stk-alignment-justify-content:space-evenly}}#end-resizable-editor-section{display:none}
+#start-resizable-editor-section{display:none}@media only screen and (min-width:1024px){:where(.has-text-align-left) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-feature>*>.stk-row{flex-wrap:var(--stk-feature-flex-wrap,nowrap)}.stk-row{flex-wrap:nowrap}.stk--hide-desktop,.stk--hide-desktop.stk-block{display:none!important}}@media only screen and (min-width:768px){:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(2)){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):last-child){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(3)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(2)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):last-child){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(4)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(3)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(2)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):last-child){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(5)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(4)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(3)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(2)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):last-child){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(6)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(5)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(4)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(3)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):nth-last-child(2)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(6):last-child){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical{grid-template-columns:auto 1fr auto}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:first-child{grid-column:1/2}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:last-child{grid-column:2/4}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:first-child{grid-column:1/3}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:last-child{grid-column:3/4}.stk-block .stk-block.aligncenter,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){margin-left:auto;margin-right:auto;max-width:var(--stk-block-default-width,var(--stk-block-width-default-detected,900px));width:100%}.stk-block .stk-block.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide{margin-left:auto;margin-right:auto;max-width:var(--stk-block-wide-width,var(--stk-block-width-wide-detected,80vw));width:100%}.stk-row.stk-columns-2>.stk-column{flex:1 1 50%;max-width:50%}.stk-row.stk-columns-3>.stk-column{flex:1 1 33.3333333333%;max-width:33.3333333333%}.stk-row.stk-columns-4>.stk-column{flex:1 1 25%;max-width:25%}.stk-row.stk-columns-5>.stk-column{flex:1 1 20%;max-width:20%}.stk-row.stk-columns-6>.stk-column{flex:1 1 16.6666666667%;max-width:16.6666666667%}.stk-row.stk-columns-7>.stk-column{flex:1 1 14.2857142857%;max-width:14.2857142857%}.stk-row.stk-columns-8>.stk-column{flex:1 1 12.5%;max-width:12.5%}.stk-row.stk-columns-9>.stk-column{flex:1 1 11.1111111111%;max-width:11.1111111111%}.stk-row.stk-columns-10>.stk-column{flex:1 1 10%;max-width:10%}}@media only screen and (min-width:768px) and (max-width:1023px){.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}:where(.has-text-align-left-tablet) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-tablet) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-tablet) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk--hide-tablet,.stk--hide-tablet.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}}@media only screen and (max-width:1023px){.stk-block-button{min-width:-moz-fit-content;min-width:fit-content}.stk-block.stk-block-divider.has-text-align-center-tablet{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-tablet{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-tablet{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-timeline.stk-block-timeline__ios-polyfill{--fixed-bg:linear-gradient(to bottom,var(--line-accent-bg-color,#000) 0,var(--line-accent-bg-color-2,#000) var(--line-accent-bg-location,50%))}.has-text-align-center-tablet{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-tablet{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-tablet{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-tablet{--stk-alignment-text-align:justify}.has-text-align-space-between-tablet{--stk-alignment-justify-content:space-between}.has-text-align-space-around-tablet{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-tablet{--stk-alignment-justify-content:space-evenly}}@media only screen and (max-width:767px){.stk-button-group:is(.stk--collapse-on-mobile)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block],.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.entry-content .stk-block.stk-has-top-separator{padding-top:23vw}.entry-content .stk-block.stk-has-bottom-separator{padding-bottom:23vw}.entry-content .stk-block .stk-separator__wrapper{height:23vw}.stk-block-carousel.stk--hide-mobile-arrows>.stk-block-carousel__content-wrapper>*>.stk-block-carousel__buttons,.stk-block-carousel.stk--hide-mobile-dots>.stk-block-carousel__content-wrapper>.stk-block-carousel__dots{display:none}:where(.has-text-align-left-mobile) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-mobile) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-mobile) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center-mobile{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-mobile{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-mobile{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block.stk-block-feature:is(.is-style-default,.is-style-horizontal)>.stk-container>.stk-inner-blocks.stk-block-content{flex-direction:column-reverse}.stk-block-posts{--stk-columns:1}.stk-block-tabs>.stk-inner-blocks{grid-template-columns:1fr}.stk-block-tabs>.stk-inner-blocks>.stk-block-tab-labels:last-child{grid-row:1/2}.stk-block.stk-block-timeline{--content-line:0!important;padding-top:0}.stk-block-timeline>.stk-inner-blocks{align-items:flex-start;grid-template-columns:var(--line-dot-size,16px) 1fr;grid-template-rows:auto 1fr;padding-left:16px}.stk-block-timeline>.stk-inner-blocks:after{inset-inline-start:calc(var(--line-dot-size, 16px)/2 - var(--line-bg-width, 3px)/2 + 16px)}.stk-block-timeline .stk-block-timeline__middle{inset-block-start:8px;inset-inline-start:16px;position:absolute}.stk-block-timeline .stk-block-timeline__content{grid-column:2/3;grid-row:2/3;text-align:start}.stk-block-timeline .stk-block-timeline__date{grid-column:2/3;grid-row:1/2;text-align:start}.stk-block-timeline>.stk-inner-blocks:after{bottom:calc(100% - var(--line-dot-size, 16px)/2 - .5em);top:calc(var(--line-dot-size, 16px)/2 + .5em)}.stk-block-timeline+.stk-block-timeline>.stk-inner-blocks:after{top:-16px}:root{--stk-block-margin-bottom:16px;--stk-container-padding:24px 24px;--stk-container-padding-large:32px 24px;--stk-container-padding-small:8px 24px;--stk-column-margin:8px;--stk-block-background-padding:16px 16px}.stk-block .stk-block:is(.aligncenter,.alignwide),.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){width:100%}.stk-column{flex:1 1 100%;max-width:100%}.stk--hide-mobile,.stk--hide-mobile.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-mobile) .stk-block:is(.stk-block-button,.stk-block-icon-button),.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.has-text-align-center-mobile{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-mobile{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-mobile{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-mobile{--stk-alignment-text-align:justify}.has-text-align-space-between-mobile{--stk-alignment-justify-content:space-between}.has-text-align-space-around-mobile{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-mobile{--stk-alignment-justify-content:space-evenly}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile){overflow-x:auto!important;width:100%}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile)::-webkit-scrollbar{height:0!important}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile) .stk-block-tab-labels__wrapper{flex-wrap:nowrap;min-width:-webkit-fill-available;min-width:fill-available;width:max-content}}#end-resizable-editor-section{display:none}
 STK_RESPONSIVE_CSS;
 	}
 }

From b285710e74f209288558bcfd1e121bc95c9eeb02 Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Tue, 1 Oct 2024 10:14:59 +0800
Subject: [PATCH 13/18] fix (kses): check whether the current_user_can function
 is available

---
 src/kses.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/kses.php b/src/kses.php
index 90fffc7ba..bfc83b1de 100644
--- a/src/kses.php
+++ b/src/kses.php
@@ -27,7 +27,7 @@
 	 */
 	function stackable_allow_wp_kses_allowed_html( $tags, $context ) {
 		// Only allow these tags if the user can edit posts.
-		if ( ! current_user_can( 'edit_posts' ) ) {
+		if ( ! function_exists( 'current_user_can' ) || ! current_user_can( 'edit_posts' ) ) {
 			return $tags;
 		}
 

From 1020d3d880b70f4716a5c1fee2d025c94354cba4 Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Tue, 1 Oct 2024 10:23:45 +0800
Subject: [PATCH 14/18] fix (kses): added additional check if
 wp_get_current_user is not available

---
 src/kses.php | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/kses.php b/src/kses.php
index bfc83b1de..69106ac50 100644
--- a/src/kses.php
+++ b/src/kses.php
@@ -26,8 +26,13 @@
 	 * @return array Modified HTML tags & attributes.
 	 */
 	function stackable_allow_wp_kses_allowed_html( $tags, $context ) {
+		// For some reason, there are server setups that can call this too early and wp_get_current_user() is not yet defined.
+		if ( ! function_exists( 'wp_get_current_user' ) || ! function_exists( 'current_user_can' ) ) {
+			return $tags;
+		}
+
 		// Only allow these tags if the user can edit posts.
-		if ( ! function_exists( 'current_user_can' ) || ! current_user_can( 'edit_posts' ) ) {
+		if ( ! current_user_can( 'edit_posts' ) ) {
 			return $tags;
 		}
 

From 3a71d1cfdb99a19609ef92156807305adbe2f761 Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <98727316+mxkae@users.noreply.github.com>
Date: Tue, 1 Oct 2024 15:09:51 +0800
Subject: [PATCH 15/18] fix (icon list): editor freezes when adding patterns
 with icon list (#3333)

* remove innerBlockProps

* fix freezing
---
 src/block/icon-list-item/edit.js        | 25 ++++++++++++++++++++-----
 src/block/icon-list/deprecated/index.js |  6 +++++-
 src/block/icon-list/edit.js             |  2 +-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/block/icon-list-item/edit.js b/src/block/icon-list-item/edit.js
index 656e4b847..4e464e42f 100644
--- a/src/block/icon-list-item/edit.js
+++ b/src/block/icon-list-item/edit.js
@@ -43,7 +43,9 @@ import { useBlockContext } from '~stackable/hooks'
 import { __ } from '@wordpress/i18n'
 import { compose, createHigherOrderComponent } from '@wordpress/compose'
 import { dispatch } from '@wordpress/data'
-import { useEffect, memo } from '@wordpress/element'
+import {
+	useEffect, useRef, memo,
+} from '@wordpress/element'
 
 const TABS = [ 'style', 'advanced' ]
 
@@ -68,15 +70,28 @@ const Edit = props => {
 		'stackable/uniqueId': parentUniqueId,
 	} = context
 
+	const updateOrderedTimeout = useRef()
+	const updateUniqueIdTimeout = useRef()
+
 	// Set the attributes so they can be used in Save.
 	useEffect( () => {
-		dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
-		setAttributes( { ordered } )
+		clearTimeout( updateOrderedTimeout.current )
+		if ( ordered !== props.attributes.ordered ) {
+			updateOrderedTimeout.current = setTimeout( () => {
+				dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
+				setAttributes( { ordered } )
+			}, 300 )
+		}
 	}, [ ordered ] )
 
 	useEffect( () => {
-		dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
-		setAttributes( { parentUniqueId } )
+		clearTimeout( updateUniqueIdTimeout.current )
+		if ( parentUniqueId !== props.attributes.parentUniqueId ) {
+			updateUniqueIdTimeout.current = setTimeout( () => {
+				dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
+				setAttributes( { parentUniqueId } )
+			}, 300 )
+		}
 	}, [ parentUniqueId ] )
 
 	const blockClassNames = classnames( [
diff --git a/src/block/icon-list/deprecated/index.js b/src/block/icon-list/deprecated/index.js
index 3339592e6..a137d3593 100644
--- a/src/block/icon-list/deprecated/index.js
+++ b/src/block/icon-list/deprecated/index.js
@@ -6,6 +6,7 @@ import {
 	deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity, deprecateTypographyGradientColor,
 	deprecateBlockShadowColor, deprecateContainerShadowColor,
 } from '~stackable/block-components'
+import { createUniqueClass } from '~stackable/util'
 
 import { createBlock } from '@wordpress/blocks'
 
@@ -109,10 +110,13 @@ const deprecated = [
 			} else {
 				const contents = textToArray( text )
 				const blocks = contents.map( ( content, index ) => {
-					return createBlock( 'stackable/icon-list-item', {
+					const newBlock = createBlock( 'stackable/icon-list-item', {
 						text: content,
 						icon: getUniqueIcon( icons, index ),
 					} )
+					newBlock.attributes.uniqueId = createUniqueClass( newBlock.clientId )
+
+					return newBlock
 				} )
 				innerBlocks = blocks
 			}
diff --git a/src/block/icon-list/edit.js b/src/block/icon-list/edit.js
index 586c6f2c2..95b5d9f4f 100644
--- a/src/block/icon-list/edit.js
+++ b/src/block/icon-list/edit.js
@@ -215,7 +215,7 @@ const Edit = props => {
 				className={ blockClassNames }
 			>
 				{ ! ordered && <IconSvgDef icon={ icon } uniqueId={ attributes.uniqueId } /> }
-				<ParentTagName { ...innerBlocksProps } >
+				<ParentTagName className={ tagNameClassNames } >
 					{ wrapList &&
 						<TagName className="stk-block-icon-list__group">
 							{ innerBlocksProps.children }

From b52a06c0263871fbd31b314e71a52b1beee3da9c Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <98727316+mxkae@users.noreply.github.com>
Date: Tue, 1 Oct 2024 16:35:34 +0800
Subject: [PATCH 16/18] fix (timeline block): set attribute timelineIsLast
 (#3292)

* update timelineIsLast attribute

* remove useBlockContext
---
 src/block/timeline/edit.js | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/block/timeline/edit.js b/src/block/timeline/edit.js
index 8f67c8661..b5edcf3f3 100644
--- a/src/block/timeline/edit.js
+++ b/src/block/timeline/edit.js
@@ -35,7 +35,7 @@ import {
 	getContentAlignmentClasses,
 	Typography,
 } from '~stackable/block-components'
-import { useBlockContext, useDeviceType } from '~stackable/hooks'
+import { useDeviceType } from '~stackable/hooks'
 import {
 	withBlockAttributeContext,
 	withBlockWrapperIsHovered,
@@ -52,7 +52,7 @@ import {
 } from '@wordpress/i18n'
 import { InnerBlocks } from '@wordpress/block-editor'
 import { addFilter } from '@wordpress/hooks'
-import { dispatch } from '@wordpress/data'
+import { dispatch, useSelect } from '@wordpress/data'
 import {
 	useEffect, useRef, useState, memo,
 } from '@wordpress/element'
@@ -96,9 +96,30 @@ const Edit = props => {
 	const separatorClass = getSeparatorClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	const typographyClass = getTypographyClasses( props.attributes )
+
 	const {
 		hasInnerBlocks, nextBlock, previousBlock, adjacentBlocks, blockIndex,
-	} = useBlockContext()
+	} = useSelect( select => {
+		const {
+			getBlockRootClientId, getBlocks, getBlockIndex,
+		} = select( 'core/block-editor' )
+
+		const parentClientId = getBlockRootClientId( clientId )
+		const adjacentBlocks = getBlocks( parentClientId )
+		const blockIndex = getBlockIndex( clientId )
+		const hasInnerBlocks = adjacentBlocks[ blockIndex ]?.innerBlocks?.length > 0
+		const nextBlock = blockIndex < adjacentBlocks.length - 1 ? adjacentBlocks[ blockIndex + 1 ] : undefined
+		const previousBlock = blockIndex > 0 ? adjacentBlocks[ blockIndex - 1 ] : undefined
+
+		return {
+			hasInnerBlocks,
+			nextBlock,
+			previousBlock,
+			adjacentBlocks,
+			blockIndex,
+		}
+	}, [ clientId ] )
+
 	const deviceType = useDeviceType()
 
 	const middleRef = useRef()
@@ -302,7 +323,7 @@ const Edit = props => {
 			dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
 			setAttributes( { timelineIsLast: false } )
 			isUpdating = true
-		} else if ( ( ! nextBlock || nextBlock.name !== 'stackable/timeline' ) && props.attributes.timelineIsLast ) {
+		} else if ( ( ! nextBlock || nextBlock.name !== 'stackable/timeline' ) && ! props.attributes.timelineIsLast ) {
 			dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
 			setAttributes( { timelineIsLast: true } )
 			isUpdating = true

From d75bd85dcf741e4e32b897326b198a21e290b978 Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <98727316+mxkae@users.noreply.github.com>
Date: Tue, 1 Oct 2024 17:50:57 +0800
Subject: [PATCH 17/18] fix (performance): remove old styles, use
 attributes.generatedCss (#3335)

---
 src/block/icon-list/deprecated/save.js  |   7 +-
 src/block/icon-list/deprecated/style.js | 274 ------------------------
 2 files changed, 1 insertion(+), 280 deletions(-)
 delete mode 100644 src/block/icon-list/deprecated/style.js

diff --git a/src/block/icon-list/deprecated/save.js b/src/block/icon-list/deprecated/save.js
index 8ba91c52a..f60b676e0 100644
--- a/src/block/icon-list/deprecated/save.js
+++ b/src/block/icon-list/deprecated/save.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { IconListStyles } from './style'
-
 /**
  * External dependencies
  */
@@ -44,7 +39,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<IconListStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Typography.Content
 				tagName={ tagName }
diff --git a/src/block/icon-list/deprecated/style.js b/src/block/icon-list/deprecated/style.js
deleted file mode 100644
index 1a805a17e..000000000
--- a/src/block/icon-list/deprecated/style.js
+++ /dev/null
@@ -1,274 +0,0 @@
-/**
- * Internal dependencies
- */
-// import { convertSVGStringToBase64 } from './util'
-
-/**
- * External dependencies
- */
-import {
-	Typography, MarginBottom, BlockDiv, Advanced, EffectsAnimations, Alignment, Transform,
-} from '~stackable/block-components'
-import { useBlockAttributesContext } from '~stackable/hooks'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
-
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element'
-
-const typographyOptions = {
-	selector: [
-		'ul li',
-		'ol li',
-	],
-	hoverSelector: [
-		'.%s:hover ul li',
-		'.%s:hover ol li',
-	],
-}
-
-const Styles = props => {
-	const propsToPass = {
-		...props,
-		version: props.version,
-		versionAdded: '3.0.0',
-		versionDeprecated: '',
-	}
-
-	const columns = props.columns ? props.columns : 1
-	const unborderedItems = props.listDisplayStyle === 'grid' ? columns : 1
-
-	return (
-		<>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-icon-list-item__content"
-				styleRule="gap"
-				attrName="iconGap"
-				key="iconGap"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector="ol"
-				styleRule="--stk-list-style-type"
-				attrName="listType"
-				key="listType"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--stk-icon-list-column-count"
-				attrName="columns"
-				key="columns"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--stk-icon-list-column-gap"
-				attrName="columnGap"
-				key="columnGap"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--stk-icon-list-row-gap"
-				attrName="rowGap"
-				key="rowGap"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ 'ul', 'ol' ] }
-				styleRule="paddingLeft"
-				attrName="indentation"
-				key="indentation"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				hover="all"
-				hoverSelector=".%s:hover"
-				styleRule="--stk-icon-list-marker-color"
-				attrName="markerColor"
-				key="markerColor"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				hover="all"
-				hoverSelector=".%s:hover"
-				styleRule="--stk-icon-list-icon-opacity"
-				attrName="iconOpacity"
-				key="iconOpacity"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				hover="all"
-				hoverSelector=".%s:hover"
-				styleRule="--stk-icon-list-icon-rotation"
-				attrName="iconRotation"
-				key="iconRotation"
-				valueCallback={ value => value + 'deg' }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=""
-				styleRule="--stk-icon-height"
-				attrName="iconSize"
-				key="iconSize"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector="ul .stk-block-icon-list-item__content .stk--svg-wrapper"
-				styleRule="marginRight"
-				attrName="iconSize"
-				key="iconMarginRight"
-				responsive="all"
-				valueCallback={ value => value === 0 ? '0px' : undefined }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-icon-list-item__content"
-				styleRule="alignItems"
-				attrName="iconVerticalAlignment"
-				key="iconVerticalAlignment"
-				responsive="all"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ 'ul .stk-block-icon-list-item__content .stk--inner-svg', 'ol .stk-block-icon-list-item__content .stk-block-icon-list-item__marker' ] }
-				styleRule="transform"
-				attrName="iconVerticalOffset"
-				key="iconVerticalOffset"
-				responsive="all"
-				format="translateY(%spx)"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-icon-list-item__marker::before"
-				styleRule="content"
-				attrName="hasPeriod"
-				key="hasPeriod"
-				valueCallback={ value => ! value ? `counter(stk-icon-list-counter, var(--stk-list-style-type, decimal))` : undefined }
-				enabledCallback={ getAttribute => getAttribute( 'ordered' ) }
-				dependencies={ [ 'ordered' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-icon-list-item__content"
-				styleRule="marginInline"
-				attrName="listAlignment"
-				key="listAlignment-marginInline"
-				responsive="all"
-				valueCallback={ value => value === 'center' ? 'auto' : value === 'right' ? 'auto 0' : value === 'left' ? '0 auto' : '' }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ 'ul', 'ol' ] }
-				responsive="all"
-				styleRule="width"
-				attrName="listFullWidth"
-				key="listFullWidth"
-				valueCallback={ value => ! value ? 'fit-content' : undefined }
-				enabledCallback={ getAttribute => getAttribute( 'listDisplayStyle' ) === 'grid' }
-				dependencies={ [ 'listDisplayStyle' ] }
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector=".stk-block-icon-list__group"
-				responsive="all"
-				styleRule="marginInline"
-				attrName="contentAlign"
-				key="contentAlign-group"
-				valueCallback={ value => value === 'center' ? 'auto' : value === 'right' ? 'auto 0' : value === 'left' ? '0 auto' : '' }
-				enabledCallback={ getAttribute => getAttribute( 'listDisplayStyle' ) !== 'grid' }
-				dependencies={ [ 'listDisplayStyle' ] }
-			/>
-
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after` ] }
-				styleRule="borderBottomStyle"
-				attrName="listItemBorderStyle"
-				key="listItemBorderStyle"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after` ] }
-				styleRule="borderWidth"
-				attrName="listItemBorderWidth"
-				key="listItemBorderWidth"
-				responsive="all"
-				format="%spx"
-			/>
-			<BlockCss
-				{ ...propsToPass }
-				selector={ [ `.wp-block-stackable-icon-list-item:not(:nth-last-child(-n + ${ unborderedItems }))::after` ] }
-				styleRule="borderColor"
-				attrName="listItemBorderColor"
-				key="listItemBorderColor"
-			/>
-		</>
-	)
-}
-
-export const IconListStyles = memo( props => {
-	const { columns, listDisplayStyle } = useBlockAttributesContext( attributes => ( {
-		columns: attributes.columns,
-		listDisplayStyle: attributes.listDisplayStyle,
-	} ) )
-
-	return (
-		<>
-			<Alignment.Style { ...props } />
-			<Typography.Style { ...props } { ...typographyOptions } />
-			<MarginBottom.Style { ...props } />
-			<BlockDiv.Style { ...props } />
-			<EffectsAnimations.Style { ...props } />
-			<Advanced.Style { ...props } />
-			<Transform.Style { ...props } />
-			<Styles { ...props } columns={ columns } listDisplayStyle={ listDisplayStyle } />
-		</>
-	)
-} )
-
-IconListStyles.defaultProps = {
-	version: '',
-}
-
-IconListStyles.Content = props => {
-	if ( props.attributes.generatedCss ) {
-		return <style>{ props.attributes.generatedCss }</style>
-	}
-	const columns = props.attributes.columns
-	const listDisplayStyle = props.attributes.listDisplayStyle
-	return (
-		<BlockCssCompiler>
-			<Alignment.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } />
-			<MarginBottom.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
-			<EffectsAnimations.Style.Content { ...props } />
-			<Advanced.Style.Content { ...props } />
-			<Transform.Style.Content { ...props } />
-			<Styles { ...props } columns={ columns } listDisplayStyle={ listDisplayStyle } />
-		</BlockCssCompiler>
-	)
-}
-
-IconListStyles.Content.defaultProps = {
-	version: '',
-	attributes: {},
-}

From 8e29e6077316783dbb67d28a4fc634ebbb6e1cf6 Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Tue, 1 Oct 2024 18:05:14 +0800
Subject: [PATCH 18/18] chore: version bump to 3.13.8

---
 .../stackable-ultimate-gutenberg-blocks.pot   | 4008 ++++++++---------
 package.json                                  |    2 +-
 plugin.php                                    |    4 +-
 readme.txt                                    |   10 +-
 .../font-family-control/google-fonts.json     |   33 +
 src/dynamic-breakpoints.php                   |    2 +-
 6 files changed, 2049 insertions(+), 2010 deletions(-)

diff --git a/languages/stackable-ultimate-gutenberg-blocks.pot b/languages/stackable-ultimate-gutenberg-blocks.pot
index fe681de42..a7f449564 100644
--- a/languages/stackable-ultimate-gutenberg-blocks.pot
+++ b/languages/stackable-ultimate-gutenberg-blocks.pot
@@ -2,14 +2,14 @@
 # This file is distributed under the same license as the Stackable - Gutenberg Blocks plugin.
 msgid ""
 msgstr ""
-"Project-Id-Version: Stackable - Gutenberg Blocks 3.13.7\n"
+"Project-Id-Version: Stackable - Gutenberg Blocks 3.13.8\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/stackable-ultimate-gutenberg-blocks\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2024-09-27T08:48:16+00:00\n"
+"POT-Creation-Date: 2024-10-01T10:04:43+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.5.0\n"
 
@@ -172,7 +172,7 @@ msgstr ""
 #: src/welcome/index.php:220
 #: dist/admin_welcome.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:240
+#: dist/translation-strings.js:195
 msgid "Learn more"
 msgstr ""
 
@@ -509,14 +509,14 @@ msgstr ""
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:246
+#: dist/translation-strings.js:208
 msgid "Default"
 msgstr ""
 
 #: dist/translation-strings.php:98
 #: dist/editor_blocks.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:133
+#: dist/translation-strings.js:236
 msgctxt "Content placeholder"
 msgid "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."
 msgstr ""
@@ -546,957 +546,957 @@ msgstr ""
 
 #: dist/translation-strings.php:103
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Horizontal"
+msgid "Ghost"
 msgstr ""
 
 #: dist/translation-strings.php:104
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Vertical"
+msgid "Plain"
 msgstr ""
 
 #: dist/translation-strings.php:105
+#: src/stk-block-types.php:64
+#: src/stk-block-types.php:83
+#: src/stk-block-types.php:475
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "%s Alignment"
+#: dist/translation-strings.js:462
+msgid "Link"
 msgstr ""
 
 #: dist/translation-strings.php:106
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Content"
+msgid "Button text"
 msgstr ""
 
 #: dist/translation-strings.php:107
-#: src/stk-block-types.php:51
-#: src/stk-block-types.php:96
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:464
-msgid "Button"
+msgid "Call to action"
 msgstr ""
 
 #: dist/translation-strings.php:108
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Full Width Buttons"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:243
+msgid "General"
 msgstr ""
 
 #: dist/translation-strings.php:109
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Flex Wrap"
+msgid "Open at the start"
 msgstr ""
 
 #: dist/translation-strings.php:110
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "No Wrap"
+msgid "Close adjacent on open"
 msgstr ""
 
 #: dist/translation-strings.php:111
 #: dist/editor_blocks.js:2
-msgid "Wrap"
+msgid "Automatically closes adjacent accordion panels when clicked."
 msgstr ""
 
 #: dist/translation-strings.php:112
 #: dist/editor_blocks.js:2
-msgid "Wrap Reverse"
+msgid "Enable FAQ Schema"
 msgstr ""
 
 #: dist/translation-strings.php:113
 #: dist/editor_blocks.js:2
-msgid "Button Text"
+msgid "Open Icon"
 msgstr ""
 
 #: dist/translation-strings.php:114
-#: src/stk-block-types.php:88
-#: src/stk-block-types.php:462
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:463
-msgid "Icon Button"
+msgid "The open icon will appear when the accordion is opened"
 msgstr ""
 
 #: dist/translation-strings.php:115
-#: src/stk-block-types.php:104
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:465
-msgid "Social Buttons"
+msgid "Title for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:116
-#: src/stk-block-types.php:105
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:466
-msgid "Add social buttons."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:237
+msgctxt "Heading placeholder"
+msgid "Title for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:117
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Ghost"
+#: dist/translation-strings.js:385
+msgid "Shadow"
 msgstr ""
 
 #: dist/translation-strings.php:118
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Plain"
+msgid "Colored"
 msgstr ""
 
 #: dist/translation-strings.php:119
-#: src/stk-block-types.php:64
-#: src/stk-block-types.php:83
-#: src/stk-block-types.php:475
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:462
-msgid "Link"
+msgid "Plus"
 msgstr ""
 
 #: dist/translation-strings.php:120
+#: src/stk-block-types.php:51
+#: src/stk-block-types.php:96
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Button text"
+#: dist/translation-strings.js:464
+msgid "Button"
 msgstr ""
 
 #: dist/translation-strings.php:121
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Call to action"
+msgid "Horizontal"
 msgstr ""
 
 #: dist/translation-strings.php:122
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:140
-msgid "General"
+msgid "Horizontal 2"
 msgstr ""
 
 #: dist/translation-strings.php:123
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Open at the start"
+msgid "Horizontal 3"
 msgstr ""
 
 #: dist/translation-strings.php:124
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Close adjacent on open"
+msgid "Split Centered"
 msgstr ""
 
 #: dist/translation-strings.php:125
 #: dist/editor_blocks.js:2
-msgid "Automatically closes adjacent accordion panels when clicked."
+msgid "Slides"
 msgstr ""
 
 #: dist/translation-strings.php:126
 #: dist/editor_blocks.js:2
-msgid "Enable FAQ Schema"
+msgid "Carousel Type"
 msgstr ""
 
 #: dist/translation-strings.php:127
 #: dist/editor_blocks.js:2
-msgid "Open Icon"
+msgid "Slide"
 msgstr ""
 
 #: dist/translation-strings.php:128
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "The open icon will appear when the accordion is opened"
+msgid "Fade"
 msgstr ""
 
 #: dist/translation-strings.php:129
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Title for This Block"
+msgid "Infinite Scrolling"
 msgstr ""
 
 #: dist/translation-strings.php:130
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:134
-msgctxt "Heading placeholder"
-msgid "Title for This Block"
+msgid "Only visible in the frontend."
 msgstr ""
 
 #: dist/translation-strings.php:131
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:433
-msgid "Shadow"
+msgid "Slides to Show"
 msgstr ""
 
 #: dist/translation-strings.php:132
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Colored"
+msgid "Slide Gap"
 msgstr ""
 
 #: dist/translation-strings.php:133
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Plus"
+msgid "Fade duration"
 msgstr ""
 
 #: dist/translation-strings.php:134
 #: dist/editor_blocks.js:2
-msgid "Horizontal 2"
+msgid "Autoplay"
 msgstr ""
 
 #: dist/translation-strings.php:135
 #: dist/editor_blocks.js:2
-msgid "Horizontal 3"
+msgid "Speed (ms)"
 msgstr ""
 
 #: dist/translation-strings.php:136
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Split Centered"
+msgid "Arrows"
 msgstr ""
 
 #: dist/translation-strings.php:137
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Subtitle for This Block"
+msgid "Previous Slide Icon"
 msgstr ""
 
 #: dist/translation-strings.php:138
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:135
-msgctxt "Subtitle placeholder"
-msgid "Subtitle for This Block"
+msgid "Next Slide Icon"
 msgstr ""
 
 #: dist/translation-strings.php:139
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:136
-msgctxt "Button placeholder"
-msgid "Button"
+msgid "Arrow Position"
 msgstr ""
 
 #: dist/translation-strings.php:140
 #: dist/editor_blocks.js:2
-msgid "Default 2"
+msgid "Inside"
 msgstr ""
 
 #: dist/translation-strings.php:141
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:317
-msgid "Full"
+msgid "Outside"
 msgstr ""
 
 #: dist/translation-strings.php:142
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Faded"
+msgid "%s Justify"
 msgstr ""
 
 #: dist/translation-strings.php:143
 #: dist/editor_blocks.js:2
-msgid "Column Spacing"
+msgid "%s Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:144
 #: dist/editor_blocks.js:2
-msgid "Sets the paddings between the column content and the border."
+msgid "%s Offset"
 msgstr ""
 
 #: dist/translation-strings.php:145
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Align Last Block to Bottom"
+msgid "Button Gap"
 msgstr ""
 
 #: dist/translation-strings.php:146
 #: dist/editor_blocks.js:2
-msgid "Slides"
+msgid "%s Color"
 msgstr ""
 
 #: dist/translation-strings.php:147
+#: src/stk-block-types.php:427
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Carousel Type"
+#: dist/translation-strings.js:421
+msgid "Icon"
 msgstr ""
 
 #: dist/translation-strings.php:148
 #: dist/editor_blocks.js:2
-msgid "Slide"
+msgid "%s Width"
 msgstr ""
 
 #: dist/translation-strings.php:149
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Fade"
+msgid "%s Height"
 msgstr ""
 
 #: dist/translation-strings.php:150
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Infinite Scrolling"
+#: dist/translation-strings.js:440
+msgid "Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:151
 #: dist/editor_blocks.js:2
-msgid "Only visible in the frontend."
+msgid "%s Size"
 msgstr ""
 
 #: dist/translation-strings.php:152
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Slides to Show"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:173
+msgid "Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:153
 #: dist/editor_blocks.js:2
-msgid "Slide Gap"
+msgid "Show %s on mobile"
 msgstr ""
 
 #: dist/translation-strings.php:154
 #: dist/editor_blocks.js:2
-msgid "Fade duration"
+msgid "arrows"
 msgstr ""
 
 #: dist/translation-strings.php:155
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Autoplay"
+msgid "Dots"
 msgstr ""
 
 #: dist/translation-strings.php:156
 #: dist/editor_blocks.js:2
-msgid "Speed (ms)"
+msgid "Dot Style"
 msgstr ""
 
 #: dist/translation-strings.php:157
 #: dist/editor_blocks.js:2
-msgid "Arrows"
+msgid "Solid"
 msgstr ""
 
 #: dist/translation-strings.php:158
+#: src/stk-block-types.php:871
 #: dist/editor_blocks.js:2
-msgid "Previous Slide Icon"
+#: dist/translation-strings.js:566
+msgid "Outline"
 msgstr ""
 
 #: dist/translation-strings.php:159
 #: dist/editor_blocks.js:2
-msgid "Next Slide Icon"
+msgid "Dot"
 msgstr ""
 
 #: dist/translation-strings.php:160
 #: dist/editor_blocks.js:2
-msgid "Arrow Position"
+msgid "Active Dot"
 msgstr ""
 
 #: dist/translation-strings.php:161
 #: dist/editor_blocks.js:2
-msgid "Inside"
+msgid "%s Gap"
 msgstr ""
 
 #: dist/translation-strings.php:162
 #: dist/editor_blocks.js:2
-msgid "Outside"
+msgid "To improve accessibility, the clickable area of the dots will not go below %s."
 msgstr ""
 
 #: dist/translation-strings.php:163
 #: dist/editor_blocks.js:2
-msgid "%s Justify"
+msgid "dots"
 msgstr ""
 
 #: dist/translation-strings.php:164
 #: dist/editor_blocks.js:2
-msgid "%s Offset"
+msgid "Accessibility"
 msgstr ""
 
 #: dist/translation-strings.php:165
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Button Gap"
+msgid "%s label"
 msgstr ""
 
 #: dist/translation-strings.php:166
 #: dist/editor_blocks.js:2
-msgid "%s Color"
+msgid "Previous slide"
 msgstr ""
 
 #: dist/translation-strings.php:167
-#: src/stk-block-types.php:427
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:410
-msgid "Icon"
+msgid "Next slide"
 msgstr ""
 
 #: dist/translation-strings.php:168
 #: dist/editor_blocks.js:2
-msgid "%s Width"
+msgid "Use %%d to show the slide number."
 msgstr ""
 
 #: dist/translation-strings.php:169
 #: dist/editor_blocks.js:2
-msgid "%s Height"
+msgid "Slide N of N"
 msgstr ""
 
 #: dist/translation-strings.php:170
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:429
-msgid "Border Radius"
+msgid "Use two %%d to show the slide number and the total slides. e.g. Slide 1 of 3."
 msgstr ""
 
 #: dist/translation-strings.php:171
 #: dist/editor_blocks.js:2
-msgid "%s Size"
+msgid "Column Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:172
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:171
-msgid "Opacity"
+msgid "Sets the paddings between the column content and the border."
 msgstr ""
 
 #: dist/translation-strings.php:173
 #: dist/editor_blocks.js:2
-msgid "Show %s on mobile"
+msgid "Align Last Block to Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:174
 #: dist/editor_blocks.js:2
-msgid "arrows"
+msgid "1,234.56"
 msgstr ""
 
 #: dist/translation-strings.php:175
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Dots"
+msgid "Counter"
 msgstr ""
 
 #: dist/translation-strings.php:176
 #: dist/editor_blocks.js:2
-msgid "Dot Style"
+msgid "Duration (ms)"
 msgstr ""
 
 #: dist/translation-strings.php:177
 #: dist/editor_blocks.js:2
-msgid "Solid"
+msgid "1,234,567"
 msgstr ""
 
 #: dist/translation-strings.php:178
-#: src/stk-block-types.php:871
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:566
-msgid "Outline"
+msgid "Vertical"
 msgstr ""
 
 #: dist/translation-strings.php:179
 #: dist/editor_blocks.js:2
-msgid "Dot"
+msgid "Content"
 msgstr ""
 
 #: dist/translation-strings.php:180
 #: dist/editor_blocks.js:2
-msgid "Active Dot"
+msgid "Full Width Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:181
 #: dist/editor_blocks.js:2
-msgid "%s Gap"
+msgid "Flex Wrap"
 msgstr ""
 
 #: dist/translation-strings.php:182
 #: dist/editor_blocks.js:2
-msgid "To improve accessibility, the clickable area of the dots will not go below %s."
+msgid "No Wrap"
 msgstr ""
 
 #: dist/translation-strings.php:183
 #: dist/editor_blocks.js:2
-msgid "dots"
+msgid "Wrap"
 msgstr ""
 
 #: dist/translation-strings.php:184
 #: dist/editor_blocks.js:2
-msgid "Accessibility"
+msgid "Wrap Reverse"
 msgstr ""
 
 #: dist/translation-strings.php:185
 #: dist/editor_blocks.js:2
-msgid "%s label"
+msgid "Button Text"
 msgstr ""
 
 #: dist/translation-strings.php:186
+#: src/stk-block-types.php:88
+#: src/stk-block-types.php:462
 #: dist/editor_blocks.js:2
-msgid "Previous slide"
+#: dist/translation-strings.js:463
+msgid "Icon Button"
 msgstr ""
 
 #: dist/translation-strings.php:187
+#: src/stk-block-types.php:104
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Next slide"
+#: dist/translation-strings.js:465
+msgid "Social Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:188
+#: src/stk-block-types.php:105
 #: dist/editor_blocks.js:2
-msgid "Use %%d to show the slide number."
+#: dist/translation-strings.js:466
+msgid "Add social buttons."
 msgstr ""
 
 #: dist/translation-strings.php:189
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Slide N of N"
+msgid "Subtitle for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:190
 #: dist/editor_blocks.js:2
-msgid "Use two %%d to show the slide number and the total slides. e.g. Slide 1 of 3."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:238
+msgctxt "Subtitle placeholder"
+msgid "Subtitle for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:191
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Bar"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:239
+msgctxt "Button placeholder"
+msgid "Button"
 msgstr ""
 
 #: dist/translation-strings.php:192
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Asterisks"
+msgid "Default 2"
 msgstr ""
 
 #: dist/translation-strings.php:193
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:167
-msgid "Color"
+#: dist/translation-strings.js:317
+msgid "Full"
 msgstr ""
 
 #: dist/translation-strings.php:194
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Width"
+msgid "Faded"
 msgstr ""
 
 #: dist/translation-strings.php:195
 #: dist/editor_blocks.js:2
-msgid "Height / Size"
+msgid "100"
 msgstr ""
 
 #: dist/translation-strings.php:196
 #: dist/editor_blocks.js:2
-msgid "1,234.56"
+msgid "One column"
 msgstr ""
 
 #: dist/translation-strings.php:197
 #: dist/editor_blocks.js:2
-msgid "Counter"
+msgid "50 / 50"
 msgstr ""
 
 #: dist/translation-strings.php:198
 #: dist/editor_blocks.js:2
-msgid "Duration (ms)"
+msgid "Two columns; equal split"
 msgstr ""
 
 #: dist/translation-strings.php:199
 #: dist/editor_blocks.js:2
-msgid "1,234,567"
+msgid "30 / 70"
 msgstr ""
 
 #: dist/translation-strings.php:200
 #: dist/editor_blocks.js:2
-msgid "100"
+msgid "Two columns; one-third, two-thirds split"
 msgstr ""
 
 #: dist/translation-strings.php:201
 #: dist/editor_blocks.js:2
-msgid "One column"
+msgid "70 / 30"
 msgstr ""
 
 #: dist/translation-strings.php:202
 #: dist/editor_blocks.js:2
-msgid "50 / 50"
+msgid "Two columns; two-thirds, one-third split"
 msgstr ""
 
 #: dist/translation-strings.php:203
 #: dist/editor_blocks.js:2
-msgid "Two columns; equal split"
+msgid "33 / 33 / 33"
 msgstr ""
 
 #: dist/translation-strings.php:204
 #: dist/editor_blocks.js:2
-msgid "30 / 70"
+msgid "Three columns; equal split"
 msgstr ""
 
 #: dist/translation-strings.php:205
 #: dist/editor_blocks.js:2
-msgid "Two columns; one-third, two-thirds split"
+msgid "25 / 50 / 25"
 msgstr ""
 
 #: dist/translation-strings.php:206
 #: dist/editor_blocks.js:2
-msgid "70 / 30"
+msgid "Three columns; wide center column"
 msgstr ""
 
 #: dist/translation-strings.php:207
 #: dist/editor_blocks.js:2
-msgid "Two columns; two-thirds, one-third split"
+msgid "25 / 25 / 25 / 25"
 msgstr ""
 
 #: dist/translation-strings.php:208
 #: dist/editor_blocks.js:2
-msgid "33 / 33 / 33"
+msgid "Four columns; equal split"
 msgstr ""
 
 #: dist/translation-strings.php:209
 #: dist/editor_blocks.js:2
-msgid "Three columns; equal split"
+msgid "Colon"
 msgstr ""
 
 #: dist/translation-strings.php:210
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "25 / 50 / 25"
+msgid "Line"
 msgstr ""
 
 #: dist/translation-strings.php:211
+#: src/stk-block-types.php:763
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Three columns; wide center column"
+#: dist/translation-strings.js:551
+msgid "Separator"
 msgstr ""
 
 #: dist/translation-strings.php:212
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "25 / 25 / 25 / 25"
+msgid "Size"
 msgstr ""
 
 #: dist/translation-strings.php:213
 #: dist/editor_blocks.js:2
-msgid "Four columns; equal split"
+msgid "Top Offset"
 msgstr ""
 
 #: dist/translation-strings.php:214
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Colon"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:200
+msgid "Color"
 msgstr ""
 
 #: dist/translation-strings.php:215
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Line"
+msgid "Due Date"
 msgstr ""
 
 #: dist/translation-strings.php:216
-#: src/stk-block-types.php:763
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:551
-msgid "Separator"
+msgid "Recurring"
 msgstr ""
 
 #: dist/translation-strings.php:217
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Size"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:74
+msgid "None"
 msgstr ""
 
 #: dist/translation-strings.php:218
 #: dist/editor_blocks.js:2
-msgid "Top Offset"
+msgid "Hide Block"
 msgstr ""
 
 #: dist/translation-strings.php:219
 #: dist/editor_blocks.js:2
-msgid "Due Date"
+msgid "Display Message Upon Expiration"
 msgstr ""
 
 #: dist/translation-strings.php:220
 #: dist/editor_blocks.js:2
-msgid "Recurring"
+msgid "Days"
 msgstr ""
 
 #: dist/translation-strings.php:221
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:74
-msgid "None"
+msgid "Hours"
 msgstr ""
 
 #: dist/translation-strings.php:222
 #: dist/editor_blocks.js:2
-msgid "Hide Block"
+msgid "Minutes"
 msgstr ""
 
 #: dist/translation-strings.php:223
 #: dist/editor_blocks.js:2
-msgid "Display Message Upon Expiration"
+msgid "Seconds"
 msgstr ""
 
 #: dist/translation-strings.php:224
 #: dist/editor_blocks.js:2
-msgid "Days"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:63
+msgid "End Date"
 msgstr ""
 
 #: dist/translation-strings.php:225
 #: dist/editor_blocks.js:2
-msgid "Hours"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:61
+msgid "Start Date"
 msgstr ""
 
 #: dist/translation-strings.php:226
 #: dist/editor_blocks.js:2
-msgid "Minutes"
+msgid "Timezone"
 msgstr ""
 
 #: dist/translation-strings.php:227
 #: dist/editor_blocks.js:2
-msgid "Seconds"
+msgid "Action on Expiration"
 msgstr ""
 
 #: dist/translation-strings.php:228
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:63
-msgid "End Date"
+msgid "Countdown Duration"
 msgstr ""
 
 #: dist/translation-strings.php:229
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:61
-msgid "Start Date"
+msgid "Restart Countdown After no. of Hours"
 msgstr ""
 
 #: dist/translation-strings.php:230
 #: dist/editor_blocks.js:2
-msgid "Timezone"
+msgid "Enable Double Digit"
 msgstr ""
 
 #: dist/translation-strings.php:231
 #: dist/editor_blocks.js:2
-msgid "Action on Expiration"
+msgid "Box Gap"
 msgstr ""
 
 #: dist/translation-strings.php:232
 #: dist/editor_blocks.js:2
-msgid "Countdown Duration"
+msgid "Label Top Margin"
 msgstr ""
 
 #: dist/translation-strings.php:233
 #: dist/editor_blocks.js:2
-msgid "Restart Countdown After no. of Hours"
+msgid "Digits"
 msgstr ""
 
 #: dist/translation-strings.php:234
 #: dist/editor_blocks.js:2
-msgid "Enable Double Digit"
+msgid "Labels"
 msgstr ""
 
 #: dist/translation-strings.php:235
 #: dist/editor_blocks.js:2
-msgid "Box Gap"
+msgid "Content Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:236
 #: dist/editor_blocks.js:2
-msgid "Label Top Margin"
+msgid "Expired Message"
 msgstr ""
 
 #: dist/translation-strings.php:237
 #: dist/editor_blocks.js:2
-msgid "Digits"
+msgid "Days Label"
 msgstr ""
 
 #: dist/translation-strings.php:238
 #: dist/editor_blocks.js:2
-msgid "Labels"
+msgid "Hours Label"
 msgstr ""
 
 #: dist/translation-strings.php:239
 #: dist/editor_blocks.js:2
-msgid "Content Alignment"
+msgid "Minutes Label"
 msgstr ""
 
 #: dist/translation-strings.php:240
 #: dist/editor_blocks.js:2
-msgid "Expired Message"
+msgid "Seconds Label"
 msgstr ""
 
 #: dist/translation-strings.php:241
 #: dist/editor_blocks.js:2
-msgid "Days Label"
+msgid "Description for this block. Use this space for describing your block."
 msgstr ""
 
 #: dist/translation-strings.php:242
 #: dist/editor_blocks.js:2
-msgid "Hours Label"
+msgctxt "Content placeholder"
+msgid "Description for this block. Use this space for describing your block."
 msgstr ""
 
 #: dist/translation-strings.php:243
 #: dist/editor_blocks.js:2
-msgid "Minutes Label"
+msgid "Overlap Shape 1"
 msgstr ""
 
 #: dist/translation-strings.php:244
 #: dist/editor_blocks.js:2
-msgid "Seconds Label"
+msgid "Overlap Shape 2"
 msgstr ""
 
 #: dist/translation-strings.php:245
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Stackable Design Library"
+msgid "Overlap Shape 3"
 msgstr ""
 
 #: dist/translation-strings.php:246
 #: dist/editor_blocks.js:2
-msgid "Open the Design Library and select a pre-designed block or layout."
+msgid "Overlap Shape 4"
 msgstr ""
 
 #: dist/translation-strings.php:247
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Open Design Library"
+msgid "Overlap Shape 5"
 msgstr ""
 
 #: dist/translation-strings.php:248
 #: dist/editor_blocks.js:2
-msgid "Description for this block. Use this space for describing your block."
+msgid "Overlap Background 1"
 msgstr ""
 
 #: dist/translation-strings.php:249
 #: dist/editor_blocks.js:2
-msgctxt "Content placeholder"
-msgid "Description for this block. Use this space for describing your block."
+msgid "Overlap Background 2"
 msgstr ""
 
 #: dist/translation-strings.php:250
 #: dist/editor_blocks.js:2
-msgid "Overlap Shape 1"
+msgid "Overlap Background 3"
 msgstr ""
 
 #: dist/translation-strings.php:251
 #: dist/editor_blocks.js:2
-msgid "Overlap Shape 2"
+msgid "Overlap Background 4"
 msgstr ""
 
 #: dist/translation-strings.php:252
 #: dist/editor_blocks.js:2
-msgid "Overlap Shape 3"
+msgid "Overlap Background 5"
 msgstr ""
 
 #: dist/translation-strings.php:253
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Overlap Shape 4"
+msgid "Stackable Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:254
 #: dist/editor_blocks.js:2
-msgid "Overlap Shape 5"
+msgid "Open the Design Library and select a pre-designed block or layout."
 msgstr ""
 
 #: dist/translation-strings.php:255
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Overlap Background 1"
+msgid "Open Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:256
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Overlap Background 2"
+msgid "Bar"
 msgstr ""
 
 #: dist/translation-strings.php:257
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Overlap Background 3"
+msgid "Asterisks"
 msgstr ""
 
 #: dist/translation-strings.php:258
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Overlap Background 4"
+msgid "Width"
 msgstr ""
 
 #: dist/translation-strings.php:259
 #: dist/editor_blocks.js:2
-msgid "Overlap Background 5"
+msgid "Height / Size"
 msgstr ""
 
 #: dist/translation-strings.php:260
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Float"
+msgid "Some short text that can be expanded to show more details."
 msgstr ""
 
 #: dist/translation-strings.php:261
-#: src/stk-block-types.php:373
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:137
-msgid "Title"
+msgid "Show more"
 msgstr ""
 
 #: dist/translation-strings.php:262
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Large Mid"
+msgid "Some long text that will be expanded when the show more button is clicked by the visitor."
 msgstr ""
 
 #: dist/translation-strings.php:263
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:153
-msgid "Offset"
+msgid "Show less"
 msgstr ""
 
 #: dist/translation-strings.php:264
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Zizag"
+msgid "Less text"
 msgstr ""
 
 #: dist/translation-strings.php:265
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Zigzag"
+msgid "More text"
 msgstr ""
 
 #: dist/translation-strings.php:266
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Some short text that can be expanded to show more details."
+msgid "Float"
 msgstr ""
 
 #: dist/translation-strings.php:267
+#: src/stk-block-types.php:373
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Show more"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:240
+msgid "Title"
 msgstr ""
 
 #: dist/translation-strings.php:268
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Some long text that will be expanded when the show more button is clicked by the visitor."
+msgid "Large Mid"
 msgstr ""
 
 #: dist/translation-strings.php:269
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Show less"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:256
+msgid "Offset"
 msgstr ""
 
 #: dist/translation-strings.php:270
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Less text"
+msgid "Zizag"
 msgstr ""
 
 #: dist/translation-strings.php:271
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "More text"
+msgid "Zigzag"
 msgstr ""
 
 #: dist/translation-strings.php:272
@@ -1541,7 +1541,7 @@ msgstr ""
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:394
+#: dist/translation-strings.js:405
 msgid "Align"
 msgstr ""
 
@@ -1552,549 +1552,549 @@ msgid "Bottom Line"
 msgstr ""
 
 #: dist/translation-strings.php:280
+#: src/stk-block-types.php:484
 #: dist/editor_blocks.js:2
-msgid "Snapping"
+#: dist/translation-strings.js:509
+msgid "Icon Label"
 msgstr ""
 
 #: dist/translation-strings.php:281
 #: dist/editor_blocks.js:2
-msgid "Snap to Start"
+msgid "Header Title"
 msgstr ""
 
 #: dist/translation-strings.php:282
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Snap to Center"
+msgid "Half Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:283
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "No Snapping"
+msgid "Center Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:284
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Item Width"
+msgid "Side Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:285
 #: dist/editor_blocks.js:2
-msgid "Inner Column Spacing"
+msgid "Half Layout"
 msgstr ""
 
 #: dist/translation-strings.php:286
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Gap"
+msgid "Half"
 msgstr ""
 
 #: dist/translation-strings.php:287
+#: src/stk-block-types.php:446
 #: dist/editor_blocks.js:2
-msgid "Left Offset"
+#: dist/translation-strings.js:507
+msgid "Icon Box"
 msgstr ""
 
 #: dist/translation-strings.php:288
 #: dist/editor_blocks.js:2
-msgid "Scrollbar"
+msgid "Pill"
 msgstr ""
 
 #: dist/translation-strings.php:289
 #: dist/editor_blocks.js:2
-msgid "Track Color"
+msgid "Unordered List"
 msgstr ""
 
 #: dist/translation-strings.php:290
 #: dist/editor_blocks.js:2
-msgid "Thumb Color"
+msgid "Ordered List"
 msgstr ""
 
 #: dist/translation-strings.php:291
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Thumb Radius"
+msgid "List"
 msgstr ""
 
 #: dist/translation-strings.php:292
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "123"
+msgid "Grid"
 msgstr ""
 
 #: dist/translation-strings.php:293
+#: src/stk-block-types.php:239
+#: src/stk-block-types.php:692
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "456"
+#: dist/translation-strings.js:370
+msgid "Number"
 msgstr ""
 
 #: dist/translation-strings.php:294
 #: dist/editor_blocks.js:2
-msgid "789"
+msgid "Padded Number"
 msgstr ""
 
 #: dist/translation-strings.php:295
 #: dist/editor_blocks.js:2
-msgid "Header Title"
+msgid "Lowercase Roman"
 msgstr ""
 
 #: dist/translation-strings.php:296
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Half Overlay"
+msgid "Uppercase Roman"
 msgstr ""
 
 #: dist/translation-strings.php:297
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Center Overlay"
+msgid "Lowercase Letters"
 msgstr ""
 
 #: dist/translation-strings.php:298
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Side Overlay"
+msgid "Uppercase Letters"
 msgstr ""
 
 #: dist/translation-strings.php:299
 #: dist/editor_blocks.js:2
-msgid "Half Layout"
+msgid "Dashed"
 msgstr ""
 
 #: dist/translation-strings.php:300
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Half"
+msgid "Dotted"
 msgstr ""
 
 #: dist/translation-strings.php:301
-#: src/stk-block-types.php:484
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:509
-msgid "Icon Label"
+msgid "List Item"
 msgstr ""
 
 #: dist/translation-strings.php:302
-#: src/stk-block-types.php:446
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:507
-msgid "Icon Box"
+msgid "Full Width"
 msgstr ""
 
 #: dist/translation-strings.php:303
 #: dist/editor_blocks.js:2
-msgid "Pill"
+msgid "More noticeable when using wide layouts or list item borders"
 msgstr ""
 
 #: dist/translation-strings.php:304
+#: src/stk-block-types.php:206
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Icon Gap"
+#: dist/translation-strings.js:478
+msgid "Columns"
 msgstr ""
 
 #: dist/translation-strings.php:305
 #: dist/editor_blocks.js:2
-msgid "Unordered List"
+msgid "List Display Style"
 msgstr ""
 
 #: dist/translation-strings.php:306
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Ordered List"
+#: dist/translation-strings.js:411
+msgid "Column Gap"
 msgstr ""
 
 #: dist/translation-strings.php:307
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "List"
+#: dist/translation-strings.js:412
+msgid "Row Gap"
 msgstr ""
 
 #: dist/translation-strings.php:308
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Grid"
+msgid "Icon Gap"
 msgstr ""
 
 #: dist/translation-strings.php:309
-#: src/stk-block-types.php:239
-#: src/stk-block-types.php:692
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:370
-msgid "Number"
+msgid "Indentation"
 msgstr ""
 
 #: dist/translation-strings.php:310
 #: dist/editor_blocks.js:2
-msgid "Padded Number"
+msgid "Icons & Numbers"
 msgstr ""
 
 #: dist/translation-strings.php:311
 #: dist/editor_blocks.js:2
-msgid "Lowercase Roman"
+msgid "List Type"
 msgstr ""
 
 #: dist/translation-strings.php:312
 #: dist/editor_blocks.js:2
-msgid "Uppercase Roman"
+msgid "With Period"
 msgstr ""
 
 #: dist/translation-strings.php:313
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Lowercase Letters"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:198
+msgid "Icon Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:314
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Uppercase Letters"
+msgid "Icon Rotation"
 msgstr ""
 
 #: dist/translation-strings.php:315
 #: dist/editor_blocks.js:2
-msgid "Dashed"
+msgid "Icon Vertical Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:316
 #: dist/editor_blocks.js:2
-msgid "Dotted"
+msgid "This is more visible if you have long text in your list."
 msgstr ""
 
 #: dist/translation-strings.php:317
 #: dist/editor_blocks.js:2
-msgid "List Item"
+msgid "Icon Vertical Offset"
 msgstr ""
 
 #: dist/translation-strings.php:318
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Full Width"
+msgid "Icon List Item Borders"
 msgstr ""
 
 #: dist/translation-strings.php:319
 #: dist/editor_blocks.js:2
-msgid "More noticeable when using wide layouts or list item borders"
+msgid "Borders"
 msgstr ""
 
 #: dist/translation-strings.php:320
-#: src/stk-block-types.php:206
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:478
-msgid "Columns"
+msgid "Border Width"
 msgstr ""
 
 #: dist/translation-strings.php:321
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "List Display Style"
+msgid "Border Color"
 msgstr ""
 
 #: dist/translation-strings.php:322
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:400
-msgid "Column Gap"
+msgid "Line 1"
 msgstr ""
 
 #: dist/translation-strings.php:323
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:401
-msgid "Row Gap"
+msgid "Line 2"
 msgstr ""
 
 #: dist/translation-strings.php:324
 #: dist/editor_blocks.js:2
-msgid "Indentation"
+msgid "Line 3"
 msgstr ""
 
 #: dist/translation-strings.php:325
 #: dist/editor_blocks.js:2
-msgid "Icons & Numbers"
+msgid "Line 4"
 msgstr ""
 
 #: dist/translation-strings.php:326
 #: dist/editor_blocks.js:2
-msgid "List Type"
+msgid "Line 5"
 msgstr ""
 
 #: dist/translation-strings.php:327
 #: dist/editor_blocks.js:2
-msgid "With Period"
+msgid "Line 6"
 msgstr ""
 
 #: dist/translation-strings.php:328
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:243
-msgid "Icon Opacity"
+msgid "Image Caption"
 msgstr ""
 
 #: dist/translation-strings.php:329
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Icon Rotation"
+msgid "Caption"
 msgstr ""
 
 #: dist/translation-strings.php:330
 #: dist/editor_blocks.js:2
-msgid "Icon Vertical Alignment"
+msgid "Caption Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:331
+#: src/stk-block-types.php:584
 #: dist/editor_blocks.js:2
-msgid "This is more visible if you have long text in your list."
+#: dist/translation-strings.js:523
+msgid "Map"
 msgstr ""
 
 #: dist/translation-strings.php:332
 #: dist/editor_blocks.js:2
-msgid "Icon Vertical Offset"
+msgid "Embedded content from Google Map Platform."
 msgstr ""
 
 #: dist/translation-strings.php:333
 #: dist/editor_blocks.js:2
-msgid "Icon List Item Borders"
+msgid "Some map features require a Google API Key."
 msgstr ""
 
 #: dist/translation-strings.php:334
 #: dist/editor_blocks.js:2
-msgid "Borders"
+msgid "Add API key here."
 msgstr ""
 
 #: dist/translation-strings.php:335
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Border Width"
+msgid "Location"
 msgstr ""
 
 #: dist/translation-strings.php:336
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Border Color"
+msgid "Enter an address or location"
 msgstr ""
 
 #: dist/translation-strings.php:337
 #: dist/editor_blocks.js:2
-msgid "Line 1"
+msgid "Zoom"
 msgstr ""
 
 #: dist/translation-strings.php:338
 #: dist/editor_blocks.js:2
-msgid "Line 2"
+msgid "Enable Dragging"
 msgstr ""
 
 #: dist/translation-strings.php:339
 #: dist/editor_blocks.js:2
-msgid "Line 3"
+msgid "Full Screen Button"
 msgstr ""
 
 #: dist/translation-strings.php:340
 #: dist/editor_blocks.js:2
-msgid "Line 4"
+msgid "Map Type Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:341
 #: dist/editor_blocks.js:2
-msgid "Line 5"
+msgid "Street View Button"
 msgstr ""
 
 #: dist/translation-strings.php:342
 #: dist/editor_blocks.js:2
-msgid "Line 6"
+msgid "Zoom Buttons"
 msgstr ""
 
 #: dist/translation-strings.php:343
 #: dist/editor_blocks.js:2
-msgid "Image Caption"
+msgid "Map Style"
 msgstr ""
 
 #: dist/translation-strings.php:344
 #: dist/editor_blocks.js:2
-msgid "Caption"
+msgid "Custom Map Style (Paste JSON here)"
 msgstr ""
 
 #: dist/translation-strings.php:345
 #: dist/editor_blocks.js:2
-msgid "Caption Alignment"
+msgid "Learn how to use Custom Map Styles"
 msgstr ""
 
 #: dist/translation-strings.php:346
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:138
-msgctxt "Text placeholder"
-msgid "Text for This Block"
+msgid "Map Marker"
 msgstr ""
 
 #: dist/translation-strings.php:347
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Box"
+msgid "Uploaded Icon and Icon Color settings are not fully compatible."
 msgstr ""
 
 #: dist/translation-strings.php:348
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Captioned"
+msgid "Horizontal Icon Anchor Point"
 msgstr ""
 
 #: dist/translation-strings.php:349
-#: src/stk-block-types.php:584
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:523
-msgid "Map"
+msgid "Vertical Icon Anchor Point"
 msgstr ""
 
 #: dist/translation-strings.php:350
 #: dist/editor_blocks.js:2
-msgid "Embedded content from Google Map Platform."
+msgid "Map Example"
 msgstr ""
 
 #: dist/translation-strings.php:351
 #: dist/editor_blocks.js:2
-msgid "Some map features require a Google API Key."
+msgid "Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled."
 msgstr ""
 
 #: dist/translation-strings.php:352
 #: dist/editor_blocks.js:2
-msgid "Add API key here."
+msgid "Silver"
 msgstr ""
 
 #: dist/translation-strings.php:353
 #: dist/editor_blocks.js:2
-msgid "Location"
+msgid "Retro"
 msgstr ""
 
 #: dist/translation-strings.php:354
 #: dist/editor_blocks.js:2
-msgid "Enter an address or location"
+msgid "Dark"
 msgstr ""
 
 #: dist/translation-strings.php:355
 #: dist/editor_blocks.js:2
-msgid "Zoom"
+msgid "Night"
 msgstr ""
 
 #: dist/translation-strings.php:356
 #: dist/editor_blocks.js:2
-msgid "Enable Dragging"
+msgid "Aubergine"
 msgstr ""
 
 #: dist/translation-strings.php:357
 #: dist/editor_blocks.js:2
-msgid "Full Screen Button"
+msgid "Embedded content from Google Maps Platform."
 msgstr ""
 
 #: dist/translation-strings.php:358
 #: dist/editor_blocks.js:2
-msgid "Map Type Buttons"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:241
+msgctxt "Text placeholder"
+msgid "Text for This Block"
 msgstr ""
 
 #: dist/translation-strings.php:359
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Street View Button"
+msgid "Box"
 msgstr ""
 
 #: dist/translation-strings.php:360
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Zoom Buttons"
+msgid "Captioned"
 msgstr ""
 
 #: dist/translation-strings.php:361
 #: dist/editor_blocks.js:2
-msgid "Map Style"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:183
+msgid "Shape"
 msgstr ""
 
 #: dist/translation-strings.php:362
 #: dist/editor_blocks.js:2
-msgid "Custom Map Style (Paste JSON here)"
+msgid "01"
 msgstr ""
 
 #: dist/translation-strings.php:363
 #: dist/editor_blocks.js:2
-msgid "Learn how to use Custom Map Styles"
+msgid "Snapping"
 msgstr ""
 
 #: dist/translation-strings.php:364
 #: dist/editor_blocks.js:2
-msgid "Map Marker"
+msgid "Snap to Start"
 msgstr ""
 
 #: dist/translation-strings.php:365
 #: dist/editor_blocks.js:2
-msgid "Uploaded Icon and Icon Color settings are not fully compatible."
+msgid "Snap to Center"
 msgstr ""
 
 #: dist/translation-strings.php:366
 #: dist/editor_blocks.js:2
-msgid "Horizontal Icon Anchor Point"
+msgid "No Snapping"
 msgstr ""
 
 #: dist/translation-strings.php:367
 #: dist/editor_blocks.js:2
-msgid "Vertical Icon Anchor Point"
+msgid "Item Width"
 msgstr ""
 
 #: dist/translation-strings.php:368
 #: dist/editor_blocks.js:2
-msgid "Map Example"
+msgid "Inner Column Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:369
 #: dist/editor_blocks.js:2
-msgid "Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled."
+msgid "Gap"
 msgstr ""
 
 #: dist/translation-strings.php:370
 #: dist/editor_blocks.js:2
-msgid "Silver"
+msgid "Left Offset"
 msgstr ""
 
 #: dist/translation-strings.php:371
 #: dist/editor_blocks.js:2
-msgid "Retro"
+msgid "Scrollbar"
 msgstr ""
 
 #: dist/translation-strings.php:372
 #: dist/editor_blocks.js:2
-msgid "Dark"
+msgid "Track Color"
 msgstr ""
 
 #: dist/translation-strings.php:373
 #: dist/editor_blocks.js:2
-msgid "Night"
+msgid "Thumb Color"
 msgstr ""
 
 #: dist/translation-strings.php:374
 #: dist/editor_blocks.js:2
-msgid "Aubergine"
+msgid "Thumb Radius"
 msgstr ""
 
 #: dist/translation-strings.php:375
 #: dist/editor_blocks.js:2
-msgid "Embedded content from Google Maps Platform."
+msgid "123"
 msgstr ""
 
 #: dist/translation-strings.php:376
 #: dist/editor_blocks.js:2
-msgid "$"
+msgid "456"
 msgstr ""
 
 #: dist/translation-strings.php:377
 #: dist/editor_blocks.js:2
-msgid "99"
+msgid "789"
 msgstr ""
 
 #: dist/translation-strings.php:378
 #: dist/editor_blocks.js:2
-msgid ".00"
+msgid "$"
 msgstr ""
 
 #: dist/translation-strings.php:379
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:228
-msgid "Shape"
+msgid "99"
 msgstr ""
 
 #: dist/translation-strings.php:380
 #: dist/editor_blocks.js:2
-msgid "01"
+msgid ".00"
 msgstr ""
 
 #: dist/translation-strings.php:381
@@ -2130,7 +2130,7 @@ msgstr ""
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:396
+#: dist/translation-strings.js:407
 msgid "Number of items"
 msgstr ""
 
@@ -2368,908 +2368,908 @@ msgid "Vertical Card 2"
 msgstr ""
 
 #: dist/translation-strings.php:426
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Package inclusion one"
+msgid "Notification Type"
 msgstr ""
 
 #: dist/translation-strings.php:427
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Package inclusion two"
+msgid "Success"
 msgstr ""
 
 #: dist/translation-strings.php:428
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Package inclusion three"
+msgid "Error"
 msgstr ""
 
 #: dist/translation-strings.php:429
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:162
-msgid "one"
+msgid "Warning"
 msgstr ""
 
 #: dist/translation-strings.php:430
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:163
-msgid "two"
+msgid "Information"
 msgstr ""
 
 #: dist/translation-strings.php:431
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:164
-msgid "three"
+msgid "Dismissible"
 msgstr ""
 
 #: dist/translation-strings.php:432
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:165
-msgid "Package inclusion %s"
+msgid "Icon Size"
 msgstr ""
 
 #: dist/translation-strings.php:433
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Compact"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:197
+msgid "Icon Color"
 msgstr ""
 
 #: dist/translation-strings.php:434
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Banner Layout"
+msgid "Side"
 msgstr ""
 
 #: dist/translation-strings.php:435
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Banner"
+msgid "Bordered"
 msgstr ""
 
 #: dist/translation-strings.php:436
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Colored Layout"
+msgid "Outlined"
 msgstr ""
 
 #: dist/translation-strings.php:437
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Sectioned Layout"
+msgid "Large Icon"
 msgstr ""
 
 #: dist/translation-strings.php:438
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Sectioned"
+msgid "Label"
 msgstr ""
 
 #: dist/translation-strings.php:439
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Notification Type"
+msgid "Package inclusion one"
 msgstr ""
 
 #: dist/translation-strings.php:440
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Success"
+msgid "Package inclusion two"
 msgstr ""
 
 #: dist/translation-strings.php:441
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Error"
+msgid "Package inclusion three"
 msgstr ""
 
 #: dist/translation-strings.php:442
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Warning"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:265
+msgid "one"
 msgstr ""
 
 #: dist/translation-strings.php:443
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Information"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:266
+msgid "two"
 msgstr ""
 
 #: dist/translation-strings.php:444
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Dismissible"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:267
+msgid "three"
 msgstr ""
 
 #: dist/translation-strings.php:445
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Icon Size"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:268
+msgid "Package inclusion %s"
 msgstr ""
 
 #: dist/translation-strings.php:446
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:242
-msgid "Icon Color"
+msgid "Compact"
 msgstr ""
 
 #: dist/translation-strings.php:447
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Side"
+msgid "Banner Layout"
 msgstr ""
 
 #: dist/translation-strings.php:448
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Bordered"
+msgid "Banner"
 msgstr ""
 
 #: dist/translation-strings.php:449
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Outlined"
+msgid "Colored Layout"
 msgstr ""
 
 #: dist/translation-strings.php:450
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Large Icon"
+msgid "Sectioned Layout"
 msgstr ""
 
 #: dist/translation-strings.php:451
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Label"
+msgid "Sectioned"
 msgstr ""
 
 #: dist/translation-strings.php:452
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:170
-msgid "Flip Horizontally"
+msgid "Type / to choose a block"
 msgstr ""
 
 #: dist/translation-strings.php:453
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Flip Vertically"
+msgid "Subtitle for this block."
 msgstr ""
 
 #: dist/translation-strings.php:454
-#: src/stk-block-types.php:782
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:554
-msgid "Spacer"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:203
+msgid "Flip Horizontally"
 msgstr ""
 
 #: dist/translation-strings.php:455
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Type / to choose a block"
+msgid "Flip Vertically"
 msgstr ""
 
 #: dist/translation-strings.php:456
+#: src/stk-block-types.php:782
 #: dist/editor_blocks.js:2
-msgid "Subtitle for this block."
+#: dist/translation-strings.js:554
+msgid "Spacer"
 msgstr ""
 
 #: dist/translation-strings.php:457
 #: dist/editor_blocks.js:2
-msgid "Tab %d"
+msgid "Classic"
 msgstr ""
 
 #: dist/translation-strings.php:458
-#: src/stk-block-types.php:880
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:567
-msgid "Tabs"
+msgid "Centered Pills"
 msgstr ""
 
 #: dist/translation-strings.php:459
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Initial Tab Open"
+#: dist/translation-strings.js:426
+msgid "Left"
 msgstr ""
 
 #: dist/translation-strings.php:460
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Equal tab height"
+#: dist/translation-strings.js:427
+msgid "Right"
 msgstr ""
 
 #: dist/translation-strings.php:461
 #: dist/editor_blocks.js:2
-msgid "Tab Orientation"
+msgid "Top"
 msgstr ""
 
 #: dist/translation-strings.php:462
 #: dist/editor_blocks.js:2
-msgid "Tab Panel Offset"
+msgid "Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:463
 #: dist/editor_blocks.js:2
-msgid "Tab Panel Effect"
+msgid "Are you sure you want to delete this tab?"
 msgstr ""
 
 #: dist/translation-strings.php:464
 #: dist/editor_blocks.js:2
-msgid "Immediate"
+msgid "Tab Label"
 msgstr ""
 
 #: dist/translation-strings.php:465
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:176
-msgid "Name"
+msgid "Move left"
 msgstr ""
 
 #: dist/translation-strings.php:466
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:177
-msgid "Position"
+msgid "Move right"
 msgstr ""
 
 #: dist/translation-strings.php:467
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Cover"
+msgid "Add tab"
 msgstr ""
 
 #: dist/translation-strings.php:468
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Bubble"
+msgid "Duplicate tab"
 msgstr ""
 
 #: dist/translation-strings.php:469
 #: dist/editor_blocks.js:2
-msgid "Inverted Vertical"
+msgid "Delete tab"
 msgstr ""
 
 #: dist/translation-strings.php:470
 #: dist/editor_blocks.js:2
-msgid "Classic"
+msgid "Fixed Icon Position"
 msgstr ""
 
 #: dist/translation-strings.php:471
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Centered Pills"
+msgid "Icon Position"
 msgstr ""
 
 #: dist/translation-strings.php:472
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:415
-msgid "Left"
+msgid "Tab Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:473
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:416
-msgid "Right"
+msgid "Text Alignment"
 msgstr ""
 
 #: dist/translation-strings.php:474
 #: dist/editor_blocks.js:2
-msgid "Top"
+msgid "Scrollable Tabs on Mobile"
 msgstr ""
 
 #: dist/translation-strings.php:475
 #: dist/editor_blocks.js:2
-msgid "Bottom"
+msgid "Tab"
 msgstr ""
 
 #: dist/translation-strings.php:476
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Are you sure you want to delete this tab?"
+msgid "Text Color"
 msgstr ""
 
 #: dist/translation-strings.php:477
 #: dist/editor_blocks.js:2
-msgid "Tab Label"
+msgid "Tab Active State"
 msgstr ""
 
 #: dist/translation-strings.php:478
 #: dist/editor_blocks.js:2
-msgid "Move left"
+msgid "Typography"
 msgstr ""
 
 #: dist/translation-strings.php:479
 #: dist/editor_blocks.js:2
-msgid "Move right"
+msgid "Change icons individually by clicking on each tab's icon."
 msgstr ""
 
 #: dist/translation-strings.php:480
 #: dist/editor_blocks.js:2
-msgid "Add tab"
+msgid "Tab Anchors"
 msgstr ""
 
 #: dist/translation-strings.php:481
 #: dist/editor_blocks.js:2
-msgid "Duplicate tab"
+msgid "Assign unique anchor names to each tab so you'll be able to link directly and open each one."
 msgstr ""
 
 #: dist/translation-strings.php:482
 #: dist/editor_blocks.js:2
-msgid "Delete tab"
+msgid "%s Anchor"
 msgstr ""
 
 #: dist/translation-strings.php:483
 #: dist/editor_blocks.js:2
-msgid "Fixed Icon Position"
+msgid "Tab Anchor"
 msgstr ""
 
 #: dist/translation-strings.php:484
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Icon Position"
+msgid "Unordered"
 msgstr ""
 
 #: dist/translation-strings.php:485
 #: dist/editor_blocks.js:2
-msgid "Tab Alignment"
+msgctxt "%s is a heading level, e.g. H1"
+msgid "Include %s"
 msgstr ""
 
 #: dist/translation-strings.php:486
 #: dist/editor_blocks.js:2
-msgid "Text Alignment"
+msgid "Auto-generate missing anchor ids"
 msgstr ""
 
 #: dist/translation-strings.php:487
 #: dist/editor_blocks.js:2
-msgid "Scrollable Tabs on Mobile"
+msgid "Scrolling"
 msgstr ""
 
 #: dist/translation-strings.php:488
 #: dist/editor_blocks.js:2
-msgid "Tab"
+msgid "Use smooth scroll"
 msgstr ""
 
 #: dist/translation-strings.php:489
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Text Color"
+msgid "Scroll Top Offset "
 msgstr ""
 
 #: dist/translation-strings.php:490
 #: dist/editor_blocks.js:2
-msgid "Tab Active State"
+msgctxt "Table of Contents example text"
+msgid "Introduction"
 msgstr ""
 
 #: dist/translation-strings.php:491
 #: dist/editor_blocks.js:2
-msgid "Typography"
+msgctxt "Table of Contents example text"
+msgid "Chapter 1: Abstract"
 msgstr ""
 
 #: dist/translation-strings.php:492
 #: dist/editor_blocks.js:2
-msgid "Change icons individually by clicking on each tab's icon."
+msgctxt "Table of Contents example text"
+msgid "Chapter 2: History"
 msgstr ""
 
 #: dist/translation-strings.php:493
 #: dist/editor_blocks.js:2
-msgid "Tab Anchors"
+msgctxt "Table of Contents example text"
+msgid "Chapter 3: Main Content"
 msgstr ""
 
 #: dist/translation-strings.php:494
 #: dist/editor_blocks.js:2
-msgid "Assign unique anchor names to each tab so you'll be able to link directly and open each one."
+msgctxt "Table of Contents example text"
+msgid "Chapter 4: Additional Thoughts"
 msgstr ""
 
 #: dist/translation-strings.php:495
 #: dist/editor_blocks.js:2
-msgid "%s Anchor"
+msgctxt "Table of Contents example text"
+msgid "Conclusion"
 msgstr ""
 
 #: dist/translation-strings.php:496
+#: src/stk-block-types.php:859
 #: dist/editor_blocks.js:2
-msgid "Tab Anchor"
+#: dist/translation-strings.js:562
+msgid "Table of Contents"
 msgstr ""
 
 #: dist/translation-strings.php:497
 #: dist/editor_blocks.js:2
-msgid "Text for this block. Use this space for describing your block. Any text will do. Text for this block. You can use this space for describing your block."
+msgid "Include heading"
 msgstr ""
 
 #: dist/translation-strings.php:498
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:142
-msgctxt "Content placeholder"
-msgid "Description for this block. Use this space for describing your block. Any text will do."
+msgid "Exclude heading"
 msgstr ""
 
 #: dist/translation-strings.php:499
+#: src/stk-block-types.php:363
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:346
-msgid "Single"
+#: dist/translation-strings.js:500
+msgid "Heading"
 msgstr ""
 
 #: dist/translation-strings.php:500
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:237
-msgid "Gradient"
+#: dist/translation-strings.js:272
+msgid "Name"
 msgstr ""
 
 #: dist/translation-strings.php:501
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-msgid "Content Position"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:273
+msgid "Position"
 msgstr ""
 
 #: dist/translation-strings.php:502
-#: src/stk-block-types.php:962
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:576
-msgid "Timeline"
+msgid "Bubble"
 msgstr ""
 
 #: dist/translation-strings.php:503
 #: dist/editor_blocks.js:2
-msgid "Accent Anchor Position"
+msgid "Inverted Vertical"
 msgstr ""
 
 #: dist/translation-strings.php:504
 #: dist/editor_blocks.js:2
-msgid "Succeeding timeline blocks will also use this value."
+msgid "Text for this block. Use this space for describing your block. Any text will do. Text for this block. You can use this space for describing your block."
 msgstr ""
 
 #: dist/translation-strings.php:505
 #: dist/editor_blocks.js:2
-msgid "%s Border Radius"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:245
+msgctxt "Content placeholder"
+msgid "Description for this block. Use this space for describing your block. Any text will do."
 msgstr ""
 
 #: dist/translation-strings.php:506
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgid "Line Thickness"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:346
+msgid "Single"
 msgstr ""
 
 #: dist/translation-strings.php:507
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:233
-msgid "Horizontal Offset"
+#: dist/translation-strings.js:192
+msgid "Gradient"
 msgstr ""
 
 #: dist/translation-strings.php:508
 #: dist/editor_blocks.js:2
-msgctxt "option title"
-msgid "%s #%d"
+msgid "Content Position"
 msgstr ""
 
 #: dist/translation-strings.php:509
+#: src/stk-block-types.php:962
 #: dist/editor_blocks.js:2
-msgid "Timeline Accent Color"
+#: dist/translation-strings.js:576
+msgid "Timeline"
 msgstr ""
 
 #: dist/translation-strings.php:510
 #: dist/editor_blocks.js:2
-msgid "Timeline Background Color"
+msgid "Accent Anchor Position"
 msgstr ""
 
 #: dist/translation-strings.php:511
 #: dist/editor_blocks.js:2
-msgid "Unordered"
+msgid "Succeeding timeline blocks will also use this value."
 msgstr ""
 
 #: dist/translation-strings.php:512
 #: dist/editor_blocks.js:2
-msgctxt "%s is a heading level, e.g. H1"
-msgid "Include %s"
+msgid "%s Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:513
 #: dist/editor_blocks.js:2
-msgid "Auto-generate missing anchor ids"
+msgid "Line Thickness"
 msgstr ""
 
 #: dist/translation-strings.php:514
 #: dist/editor_blocks.js:2
-msgid "Scrolling"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:188
+msgid "Horizontal Offset"
 msgstr ""
 
 #: dist/translation-strings.php:515
 #: dist/editor_blocks.js:2
-msgid "Use smooth scroll"
+msgctxt "option title"
+msgid "%s #%d"
 msgstr ""
 
 #: dist/translation-strings.php:516
 #: dist/editor_blocks.js:2
-msgid "Scroll Top Offset "
+msgid "Timeline Accent Color"
 msgstr ""
 
 #: dist/translation-strings.php:517
 #: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Introduction"
+msgid "Timeline Background Color"
 msgstr ""
 
 #: dist/translation-strings.php:518
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 1: Abstract"
+msgid "Cover"
 msgstr ""
 
 #: dist/translation-strings.php:519
 #: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 2: History"
+msgid "Tab %d"
 msgstr ""
 
 #: dist/translation-strings.php:520
+#: src/stk-block-types.php:880
 #: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 3: Main Content"
+#: dist/translation-strings.js:567
+msgid "Tabs"
 msgstr ""
 
 #: dist/translation-strings.php:521
 #: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Chapter 4: Additional Thoughts"
+msgid "Initial Tab Open"
 msgstr ""
 
 #: dist/translation-strings.php:522
 #: dist/editor_blocks.js:2
-msgctxt "Table of Contents example text"
-msgid "Conclusion"
+msgid "Equal tab height"
 msgstr ""
 
 #: dist/translation-strings.php:523
-#: src/stk-block-types.php:859
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:562
-msgid "Table of Contents"
+msgid "Tab Orientation"
 msgstr ""
 
 #: dist/translation-strings.php:524
 #: dist/editor_blocks.js:2
-msgid "Include heading"
+msgid "Tab Panel Offset"
 msgstr ""
 
 #: dist/translation-strings.php:525
 #: dist/editor_blocks.js:2
-msgid "Exclude heading"
+msgid "Tab Panel Effect"
 msgstr ""
 
 #: dist/translation-strings.php:526
-#: src/stk-block-types.php:363
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
-#: dist/translation-strings.js:500
-msgid "Heading"
+msgid "Immediate"
 msgstr ""
 
 #: dist/translation-strings.php:527
+#: dist/editor_blocks.js:2
+msgid "Play Video"
+msgstr ""
+
+#: dist/translation-strings.php:528
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Popup Option #1: Upload Video"
+msgstr ""
+
+#: dist/translation-strings.php:529
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks.js:2
+msgid "Use .mp4 format for videos"
+msgstr ""
+
+#: dist/translation-strings.php:530
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Popup Option #2: Video URL"
+msgstr ""
+
+#: dist/translation-strings.php:531
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/editor_blocks.js:2
+msgid "Paste a Youtube / Vimeo URL"
+msgstr ""
+
+#: dist/translation-strings.php:532
+#: dist/editor_blocks.js:2
+msgid "Allow fullscreen"
+msgstr ""
+
+#: dist/translation-strings.php:533
+#: dist/editor_blocks.js:2
+msgid "Allow download video"
+msgstr ""
+
+#: dist/translation-strings.php:534
+#: dist/editor_blocks.js:2
+msgid "Loop video"
+msgstr ""
+
+#: dist/translation-strings.php:535
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "HTML Tag"
 msgid "Address"
 msgstr ""
 
-#: dist/translation-strings.php:528
+#: dist/translation-strings.php:536
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "HTML Tag"
 msgid "Article"
 msgstr ""
 
-#: dist/translation-strings.php:529
+#: dist/translation-strings.php:537
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "HTML Tag"
 msgid "Aside"
 msgstr ""
 
-#: dist/translation-strings.php:530
+#: dist/translation-strings.php:538
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "HTML Tag"
 msgid "Blockquote"
 msgstr ""
 
-#: dist/translation-strings.php:531
+#: dist/translation-strings.php:539
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "HTML Tag"
 msgid "Div"
 msgstr ""
 
-#: dist/translation-strings.php:532
+#: dist/translation-strings.php:540
 msgctxt "HTML Tag"
 msgid "Details"
 msgstr ""
 
-#: dist/translation-strings.php:533
+#: dist/translation-strings.php:541
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "HTML Tag"
 msgid "Footer"
 msgstr ""
 
-#: dist/translation-strings.php:534
+#: dist/translation-strings.php:542
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "HTML Tag"
 msgid "Header"
 msgstr ""
 
-#: dist/translation-strings.php:535
+#: dist/translation-strings.php:543
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "HTML Tag"
 msgid "Hgroup"
 msgstr ""
 
-#: dist/translation-strings.php:536
+#: dist/translation-strings.php:544
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "HTML Tag"
 msgid "Main"
 msgstr ""
 
-#: dist/translation-strings.php:537
+#: dist/translation-strings.php:545
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "HTML Tag"
 msgid "Nav"
 msgstr ""
 
-#: dist/translation-strings.php:538
+#: dist/translation-strings.php:546
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "HTML Tag"
 msgid "Section"
 msgstr ""
 
-#: dist/translation-strings.php:539
+#: dist/translation-strings.php:547
 msgctxt "HTML Tag"
 msgid "Summary"
 msgstr ""
 
-#: dist/translation-strings.php:540
+#: dist/translation-strings.php:548
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgctxt "component"
 msgid "%s HTML Tag"
 msgstr ""
 
-#: dist/translation-strings.php:541
+#: dist/translation-strings.php:549
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Block"
 msgstr ""
 
-#: dist/translation-strings.php:542
+#: dist/translation-strings.php:550
 msgid "Overflow"
 msgstr ""
 
-#: dist/translation-strings.php:543
+#: dist/translation-strings.php:551
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Auto"
 msgstr ""
 
-#: dist/translation-strings.php:544
+#: dist/translation-strings.php:552
 msgid "Hidden"
 msgstr ""
 
-#: dist/translation-strings.php:545
+#: dist/translation-strings.php:553
 msgid "Scroll"
 msgstr ""
 
-#: dist/translation-strings.php:546
+#: dist/translation-strings.php:554
 msgid "Visible"
 msgstr ""
 
-#: dist/translation-strings.php:547
+#: dist/translation-strings.php:555
 msgid "Clear"
 msgstr ""
 
-#: dist/translation-strings.php:548
+#: dist/translation-strings.php:556
 msgid "Both"
 msgstr ""
 
-#: dist/translation-strings.php:549
+#: dist/translation-strings.php:557
 msgid "Adjusts the transparency of the entire block"
 msgstr ""
 
-#: dist/translation-strings.php:550
+#: dist/translation-strings.php:558
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Z-Index"
 msgstr ""
 
-#: dist/translation-strings.php:551
+#: dist/translation-strings.php:559
 msgid "Sets the stack order of different blocks to make one appear in front of another. A block with a higher z-index will show up on top of another block with a lower z-index."
 msgstr ""
 
-#: dist/translation-strings.php:552
+#: dist/translation-strings.php:560
 msgid "Sticky position may not work across all themes"
 msgstr ""
 
-#: dist/translation-strings.php:553
+#: dist/translation-strings.php:561
 msgid "Static"
 msgstr ""
 
-#: dist/translation-strings.php:554
+#: dist/translation-strings.php:562
 msgid "Relative"
 msgstr ""
 
-#: dist/translation-strings.php:555
+#: dist/translation-strings.php:563
 msgid "Absolute"
 msgstr ""
 
-#: dist/translation-strings.php:556
+#: dist/translation-strings.php:564
 msgid "Sticky"
 msgstr ""
 
-#: dist/translation-strings.php:557
-msgid "Align Left"
-msgstr ""
-
-#: dist/translation-strings.php:558
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Align Center"
-msgstr ""
-
-#: dist/translation-strings.php:559
-msgid "Align Right"
-msgstr ""
-
-#: dist/translation-strings.php:560
-msgid "Justified"
-msgstr ""
-
-#: dist/translation-strings.php:561
-msgid "Content Min. Height"
-msgstr ""
-
-#: dist/translation-strings.php:562
-msgid "Content Max Width"
-msgstr ""
-
-#: dist/translation-strings.php:563
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Content Horizontal Align"
-msgstr ""
-
-#: dist/translation-strings.php:564
-msgid "Sets the placement of the column container to left, center or right. Not available when block width is set to full width."
-msgstr ""
-
-#: dist/translation-strings.php:565
-msgid "Adjusts the placement of all content in the block to align left, center or right"
+#: dist/translation-strings.php:565
+msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding. Opens inner image block if no link is provided"
 msgstr ""
 
 #: dist/translation-strings.php:566
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:407
-msgid "Column"
+msgid "Styles"
 msgstr ""
 
 #: dist/translation-strings.php:567
-msgid "Sets the horizontal position and spacing of the inner columns."
+msgid "Align Left"
 msgstr ""
 
 #: dist/translation-strings.php:568
-msgid "Column contents need to be narrow for effect to show."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Align Center"
 msgstr ""
 
 #: dist/translation-strings.php:569
-msgid "Sets the vertical position of the inner columns relative to the columns block."
+msgid "Align Right"
 msgstr ""
 
 #: dist/translation-strings.php:570
-msgid "%s Direction"
+msgid "Justified"
 msgstr ""
 
 #: dist/translation-strings.php:571
-msgid "Inner Block"
+msgid "Content Min. Height"
 msgstr ""
 
 #: dist/translation-strings.php:572
-msgid "Sets the horizontal/vertical position and spacing of the inner blocks."
+msgid "Content Max Width"
 msgstr ""
 
 #: dist/translation-strings.php:573
-msgid "Aligns the horizontal/vertical position of the inner blocks."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Content Horizontal Align"
 msgstr ""
 
 #: dist/translation-strings.php:574
-msgid "Set Content Min. Height for alignment to display properly"
+msgid "Sets the placement of the column container to left, center or right. Not available when block width is set to full width."
 msgstr ""
 
 #: dist/translation-strings.php:575
-msgid "Inner Block Wrapping"
+msgid "Adjusts the placement of all content in the block to align left, center or right"
 msgstr ""
 
 #: dist/translation-strings.php:576
-msgid "%s %s"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:418
+msgid "Column"
 msgstr ""
 
 #: dist/translation-strings.php:577
-msgid "Sets the gap between the columns of inner blocks."
+msgid "Sets the horizontal position and spacing of the inner columns."
 msgstr ""
 
 #: dist/translation-strings.php:578
-msgid "Sets the gap between inner blocks."
+msgid "Column contents need to be narrow for effect to show."
 msgstr ""
 
 #: dist/translation-strings.php:579
-msgid "Sets the gap between the rows of inner blocks."
+msgid "Sets the vertical position of the inner columns relative to the columns block."
 msgstr ""
 
 #: dist/translation-strings.php:580
-msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding. Opens inner image block if no link is provided"
+msgid "%s Direction"
 msgstr ""
 
 #: dist/translation-strings.php:581
-#: dist/editor_blocks.js:2
-msgid "Play Video"
+msgid "Inner Block"
 msgstr ""
 
 #: dist/translation-strings.php:582
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Popup Option #1: Upload Video"
+msgid "Sets the horizontal/vertical position and spacing of the inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:583
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks.js:2
-msgid "Use .mp4 format for videos"
+msgid "Aligns the horizontal/vertical position of the inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:584
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Popup Option #2: Video URL"
+msgid "Set Content Min. Height for alignment to display properly"
 msgstr ""
 
 #: dist/translation-strings.php:585
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks.js:2
-msgid "Paste a Youtube / Vimeo URL"
+msgid "Inner Block Wrapping"
 msgstr ""
 
 #: dist/translation-strings.php:586
-#: dist/editor_blocks.js:2
-msgid "Allow fullscreen"
+msgid "%s %s"
 msgstr ""
 
 #: dist/translation-strings.php:587
-#: dist/editor_blocks.js:2
-msgid "Allow download video"
+msgid "Sets the gap between the columns of inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:588
-#: dist/editor_blocks.js:2
-msgid "Loop video"
+msgid "Sets the gap between inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:589
-msgid "Styles"
+msgid "Sets the gap between the rows of inner blocks."
 msgstr ""
 
 #: dist/translation-strings.php:590
@@ -3279,7 +3279,7 @@ msgstr ""
 #: dist/translation-strings.php:591
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:434
+#: dist/translation-strings.js:386
 msgid "Lift"
 msgstr ""
 
@@ -3287,7 +3287,7 @@ msgstr ""
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:183
+#: dist/translation-strings.js:156
 msgid "Scale"
 msgstr ""
 
@@ -3316,7 +3316,7 @@ msgstr ""
 #: dist/translation-strings.php:597
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:442
+#: dist/translation-strings.js:394
 msgid "Hover Effect"
 msgstr ""
 
@@ -3380,538 +3380,538 @@ msgid "Borders & Shadows"
 msgstr ""
 
 #: dist/translation-strings.php:612
-msgid "When enabled, the last column will be cloned instead of adding a blank column."
+msgid "Conditional Display"
 msgstr ""
 
 #: dist/translation-strings.php:613
-#: src/welcome/index.php:119
-#: src/welcome/index.php:336
-msgid "Settings"
+#: src/stk-block-types.php:216
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:442
+msgid "Container"
 msgstr ""
 
 #: dist/translation-strings.php:614
-msgid "Allow Column Wrapping"
+msgid "Container Min. Height"
 msgstr ""
 
 #: dist/translation-strings.php:615
-msgid "Sets column paddings, the space inside the block between the block elements and the column container border"
+msgid "Max Container Width"
 msgstr ""
 
 #: dist/translation-strings.php:616
-msgid "Sets the distance between two or more columns"
+msgid "Container Horizontal Align"
 msgstr ""
 
 #: dist/translation-strings.php:617
-msgid "Conditional Display"
+msgid "Container Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:618
-msgid "Block Width"
+msgid "Container Background"
 msgstr ""
 
 #: dist/translation-strings.php:619
-msgid "Align Wide"
+msgid "Trigger hover state on nested blocks"
 msgstr ""
 
 #: dist/translation-strings.php:620
-msgid "Align Full"
+msgid "Container Borders & Shadow"
 msgstr ""
 
 #: dist/translation-strings.php:621
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Content Width"
+msgid "Block Width"
 msgstr ""
 
 #: dist/translation-strings.php:622
-msgid "Set the content to be smaller than the block width"
+msgid "Align Wide"
 msgstr ""
 
 #: dist/translation-strings.php:623
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:178
-msgid "Custom CSS"
+msgid "Align Full"
 msgstr ""
 
 #: dist/translation-strings.php:624
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Custom Attributes"
+msgid "Content Width"
 msgstr ""
 
 #: dist/translation-strings.php:625
-#: src/stk-block-types.php:216
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:431
-msgid "Container"
+msgid "Set the content to be smaller than the block width"
 msgstr ""
 
 #: dist/translation-strings.php:626
-msgid "Container Min. Height"
+msgid "When enabled, the last column will be cloned instead of adding a blank column."
 msgstr ""
 
 #: dist/translation-strings.php:627
-msgid "Max Container Width"
+#: src/welcome/index.php:119
+#: src/welcome/index.php:336
+msgid "Settings"
 msgstr ""
 
 #: dist/translation-strings.php:628
-msgid "Container Horizontal Align"
+msgid "Allow Column Wrapping"
 msgstr ""
 
 #: dist/translation-strings.php:629
-msgid "Container Vertical Align"
+msgid "Sets column paddings, the space inside the block between the block elements and the column container border"
 msgstr ""
 
 #: dist/translation-strings.php:630
-msgid "Container Background"
+msgid "Sets the distance between two or more columns"
 msgstr ""
 
 #: dist/translation-strings.php:631
-msgid "Trigger hover state on nested blocks"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:151
+msgid "Custom CSS"
 msgstr ""
 
 #: dist/translation-strings.php:632
-msgid "Container Borders & Shadow"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Custom Attributes"
 msgstr ""
 
 #: dist/translation-strings.php:633
-#: src/welcome/index.php:260
-msgid "Motion Effects"
-msgstr ""
-
-#: dist/translation-strings.php:634
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:230
+#: dist/translation-strings.js:185
 msgid "Shape Color"
 msgstr ""
 
-#: dist/translation-strings.php:635
+#: dist/translation-strings.php:634
 msgid "Shape Border Radius"
 msgstr ""
 
-#: dist/translation-strings.php:636
+#: dist/translation-strings.php:635
 msgid "Shape Padding"
 msgstr ""
 
-#: dist/translation-strings.php:637
+#: dist/translation-strings.php:636
 msgid "Shape Outline Width"
 msgstr ""
 
-#: dist/translation-strings.php:638
+#: dist/translation-strings.php:637
 msgid "Shape Outline Color"
 msgstr ""
 
-#: dist/translation-strings.php:639
+#: dist/translation-strings.php:638
 msgid "Icon Shape"
 msgstr ""
 
-#: dist/translation-strings.php:640
+#: dist/translation-strings.php:639
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:227
+#: dist/translation-strings.js:182
 msgid "Background Shape"
 msgstr ""
 
+#: dist/translation-strings.php:640
+msgid "Select Image"
+msgstr ""
+
 #: dist/translation-strings.php:641
-msgid "When linked, styling this block would also style other linked blocks in adjacent columns."
+msgid "Image Url"
 msgstr ""
 
 #: dist/translation-strings.php:642
-msgid "Learn more about linking"
+msgid "Aspect Ratio"
 msgstr ""
 
 #: dist/translation-strings.php:643
-msgid "Select Image"
+msgid "Original"
 msgstr ""
 
 #: dist/translation-strings.php:644
-msgid "Image Url"
+msgid "Square 1:1"
 msgstr ""
 
 #: dist/translation-strings.php:645
-msgid "Aspect Ratio"
+msgid "Standard 4:3"
 msgstr ""
 
 #: dist/translation-strings.php:646
-msgid "Original"
+msgid "Classic 3:2"
 msgstr ""
 
 #: dist/translation-strings.php:647
-msgid "Square 1:1"
+msgid "Wide 16:9"
 msgstr ""
 
 #: dist/translation-strings.php:648
-msgid "Standard 4:3"
+msgid "Cinematic 2:1"
 msgstr ""
 
 #: dist/translation-strings.php:649
-msgid "Classic 3:2"
+msgid "Ultra Wide 3:1"
 msgstr ""
 
 #: dist/translation-strings.php:650
-msgid "Wide 16:9"
+msgid "Panoramic 4:1"
 msgstr ""
 
 #: dist/translation-strings.php:651
-msgid "Cinematic 2:1"
+msgid "Portrait 3:4"
 msgstr ""
 
 #: dist/translation-strings.php:652
-msgid "Ultra Wide 3:1"
+msgid "Classic Portrait 2:3"
 msgstr ""
 
 #: dist/translation-strings.php:653
-msgid "Panoramic 4:1"
+msgid "Tall 9:16"
 msgstr ""
 
 #: dist/translation-strings.php:654
-msgid "Portrait 3:4"
+msgid "Image width"
 msgstr ""
 
 #: dist/translation-strings.php:655
-msgid "Classic Portrait 2:3"
+msgid "Adjusts the image width"
 msgstr ""
 
 #: dist/translation-strings.php:656
-msgid "Tall 9:16"
+msgid "Image height"
 msgstr ""
 
 #: dist/translation-strings.php:657
-msgid "Image width"
+msgid "Adjusts the image height"
 msgstr ""
 
 #: dist/translation-strings.php:658
-msgid "Adjusts the image width"
+msgid "Open Image in Lightbox"
 msgstr ""
 
 #: dist/translation-strings.php:659
-msgid "Image height"
+msgid "Image Alt"
 msgstr ""
 
 #: dist/translation-strings.php:660
-msgid "Adjusts the image height"
+msgid "Image Shadow"
 msgstr ""
 
 #: dist/translation-strings.php:661
-msgid "Open Image in Lightbox"
+msgid "Adjusts the intensity of the image shadow"
 msgstr ""
 
 #: dist/translation-strings.php:662
-msgid "Image Alt"
+msgid "Adjusts the radius of image corners to make them more rounded"
 msgstr ""
 
 #: dist/translation-strings.php:663
-msgid "Image Shadow"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Overlay Color"
 msgstr ""
 
 #: dist/translation-strings.php:664
-msgid "Adjusts the intensity of the image shadow"
+msgid "Overlay Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:665
-msgid "Adjusts the radius of image corners to make them more rounded"
+msgid "Overlay Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:666
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Color"
+msgid "Sets how the overlay color blends with the image"
 msgstr ""
 
 #: dist/translation-strings.php:667
-msgid "Overlay Opacity"
+msgid "Focal point"
 msgstr ""
 
 #: dist/translation-strings.php:668
-msgid "Overlay Blend Mode"
-msgstr ""
-
-#: dist/translation-strings.php:669
-msgid "Sets how the overlay color blends with the image"
-msgstr ""
-
-#: dist/translation-strings.php:670
-msgid "Focal point"
-msgstr ""
-
-#: dist/translation-strings.php:671
 msgid "Image Fit"
 msgstr ""
 
-#: dist/translation-strings.php:672
+#: dist/translation-strings.php:669
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Contain"
 msgstr ""
 
-#: dist/translation-strings.php:673
+#: dist/translation-strings.php:670
 msgid "Fill"
 msgstr ""
 
-#: dist/translation-strings.php:674
+#: dist/translation-strings.php:671
 msgid "Scale Down"
 msgstr ""
 
-#: dist/translation-strings.php:675
+#: dist/translation-strings.php:672
 msgid "Sets the fit to default, contain, cover, fill, none, and scale down. Image fit specifies how an image resizes in a container."
 msgstr ""
 
-#: dist/translation-strings.php:676
+#: dist/translation-strings.php:673
 msgid "Image Shape"
 msgstr ""
 
-#: dist/translation-strings.php:677
+#: dist/translation-strings.php:674
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:229
+#: dist/translation-strings.js:184
 msgid "Change the shape of the image"
 msgstr ""
 
-#: dist/translation-strings.php:678
+#: dist/translation-strings.php:675
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Flip Shape Horizontally"
 msgstr ""
 
-#: dist/translation-strings.php:679
+#: dist/translation-strings.php:676
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Flip Shape Vertically"
 msgstr ""
 
-#: dist/translation-strings.php:680
+#: dist/translation-strings.php:677
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Stretch Shape Mask"
 msgstr ""
 
-#: dist/translation-strings.php:681
+#: dist/translation-strings.php:678
 msgid "Image Filter"
 msgstr ""
 
-#: dist/translation-strings.php:682
+#: dist/translation-strings.php:679
 #: src/stk-block-types.php:552
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:402
+#: dist/translation-strings.js:413
 msgid "Image"
 msgstr ""
 
+#: dist/translation-strings.php:680
+#: src/welcome/index.php:260
+msgid "Motion Effects"
+msgstr ""
+
+#: dist/translation-strings.php:681
+msgid "When linked, styling this block would also style other linked blocks in adjacent columns."
+msgstr ""
+
+#: dist/translation-strings.php:682
+msgid "Learn more about linking"
+msgstr ""
+
 #: dist/translation-strings.php:683
-#: src/stk-block-types.php:744
-#: dist/translation-strings.js:549
-msgid "Progress Circle"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Responsive"
 msgstr ""
 
 #: dist/translation-strings.php:684
-#: src/stk-block-types.php:725
-#: dist/translation-strings.js:546
-msgid "Progress Bar"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Hide on Desktop"
 msgstr ""
 
 #: dist/translation-strings.php:685
-msgid "Progress"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Hide on Tablet"
 msgstr ""
 
 #: dist/translation-strings.php:686
-msgid "Maximum Progress"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Hide on Mobile"
 msgstr ""
 
 #: dist/translation-strings.php:687
-msgid "Apply border radius to bar"
+#: src/stk-block-types.php:744
+#: dist/translation-strings.js:549
+msgid "Progress Circle"
 msgstr ""
 
 #: dist/translation-strings.php:688
-msgid "Thickness"
+#: src/stk-block-types.php:725
+#: dist/translation-strings.js:546
+msgid "Progress Bar"
 msgstr ""
 
 #: dist/translation-strings.php:689
-msgid "Bar Color #%s"
+msgid "Progress"
 msgstr ""
 
 #: dist/translation-strings.php:690
-msgid "Bar Color"
+msgid "Maximum Progress"
 msgstr ""
 
 #: dist/translation-strings.php:691
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:236
-msgid "Gradient Direction (degrees)"
+msgid "Apply border radius to bar"
 msgstr ""
 
 #: dist/translation-strings.php:692
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Adv. Gradient Color Settings"
+msgid "Thickness"
 msgstr ""
 
 #: dist/translation-strings.php:693
-msgid "Gradient Direction"
+msgid "Bar Color #%s"
 msgstr ""
 
 #: dist/translation-strings.php:694
-msgid "Sets the direction (in degrees) of the colors"
+msgid "Bar Color"
 msgstr ""
 
 #: dist/translation-strings.php:695
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Color %d Location"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:191
+msgid "Gradient Direction (degrees)"
 msgstr ""
 
 #: dist/translation-strings.php:696
-msgid "Sets the placement of each color in relation to the other color"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Adv. Gradient Color Settings"
 msgstr ""
 
 #: dist/translation-strings.php:697
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Gradient Blend Mode"
+msgid "Gradient Direction"
 msgstr ""
 
 #: dist/translation-strings.php:698
-msgid "Sets how this background gradient/image blends into the other background"
+msgid "Sets the direction (in degrees) of the colors"
 msgstr ""
 
 #: dist/translation-strings.php:699
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Color"
+msgid "Color %d Location"
 msgstr ""
 
 #: dist/translation-strings.php:700
-msgid "Rounded"
+msgid "Sets the placement of each color in relation to the other color"
 msgstr ""
 
 #: dist/translation-strings.php:701
-msgid "Animate"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Gradient Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:702
-msgid "Accessibility Label"
+msgid "Sets how this background gradient/image blends into the other background"
 msgstr ""
 
 #: dist/translation-strings.php:703
-msgid "Progress Bar Text"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Color"
 msgstr ""
 
 #: dist/translation-strings.php:704
-msgid "Progress Prefix"
+msgid "Rounded"
 msgstr ""
 
 #: dist/translation-strings.php:705
-msgid "Progress Suffix"
+msgid "Animate"
 msgstr ""
 
 #: dist/translation-strings.php:706
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Responsive"
+msgid "Accessibility Label"
 msgstr ""
 
 #: dist/translation-strings.php:707
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hide on Desktop"
+msgid "Progress Bar Text"
 msgstr ""
 
 #: dist/translation-strings.php:708
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hide on Tablet"
+msgid "Progress Prefix"
 msgstr ""
 
 #: dist/translation-strings.php:709
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hide on Mobile"
+msgid "Progress Suffix"
 msgstr ""
 
 #: dist/translation-strings.php:710
-msgid "Transform & Transition"
-msgstr ""
-
-#: dist/translation-strings.php:711
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:425
+#: dist/translation-strings.js:436
 msgctxt "Nth Title"
 msgid "%s %d"
 msgstr ""
 
-#: dist/translation-strings.php:712
+#: dist/translation-strings.php:711
 msgid "Wave"
 msgstr ""
 
-#: dist/translation-strings.php:713
+#: dist/translation-strings.php:712
 msgid "Straight"
 msgstr ""
 
-#: dist/translation-strings.php:714
+#: dist/translation-strings.php:713
 msgid "Slant"
 msgstr ""
 
-#: dist/translation-strings.php:715
+#: dist/translation-strings.php:714
 msgid "Curve"
 msgstr ""
 
-#: dist/translation-strings.php:716
+#: dist/translation-strings.php:715
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Design"
 msgstr ""
 
-#: dist/translation-strings.php:717
+#: dist/translation-strings.php:716
 msgid "Separator Height"
 msgstr ""
 
-#: dist/translation-strings.php:718
+#: dist/translation-strings.php:717
 msgid "Adjusts the height of the separator to stretch or compress vertically"
 msgstr ""
 
-#: dist/translation-strings.php:719
+#: dist/translation-strings.php:718
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Separator Width"
 msgstr ""
 
-#: dist/translation-strings.php:720
+#: dist/translation-strings.php:719
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:430
+#: dist/translation-strings.js:441
 msgid "Shadow / Outline"
 msgstr ""
 
-#: dist/translation-strings.php:721
+#: dist/translation-strings.php:720
 msgid "Adjusts the intensity of the separator shadow and makes the separator more prominent"
 msgstr ""
 
-#: dist/translation-strings.php:722
+#: dist/translation-strings.php:721
 msgid "Invert Design"
 msgstr ""
 
-#: dist/translation-strings.php:723
+#: dist/translation-strings.php:722
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Bring to Front"
 msgstr ""
 
-#: dist/translation-strings.php:724
+#: dist/translation-strings.php:723
 msgid "Brings the separator layer in front of other block elements"
 msgstr ""
 
-#: dist/translation-strings.php:725
+#: dist/translation-strings.php:724
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Top Separator"
 msgstr ""
 
-#: dist/translation-strings.php:726
+#: dist/translation-strings.php:725
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Bottom Separator"
 msgstr ""
 
+#: dist/translation-strings.php:726
+msgid "Transform & Transition"
+msgstr ""
+
 #: dist/translation-strings.php:727
 msgid "Use theme heading margins"
 msgstr ""
@@ -3933,7 +3933,7 @@ msgstr ""
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:191
+#: dist/translation-strings.js:164
 msgid "Normal"
 msgstr ""
 
@@ -3951,7 +3951,7 @@ msgstr ""
 
 #: dist/translation-strings.php:735
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:261
+#: dist/translation-strings.js:223
 msgid "Transform"
 msgstr ""
 
@@ -4089,96 +4089,96 @@ msgid "Unit"
 msgstr ""
 
 #: dist/translation-strings.php:766
-msgid "Normal State"
+msgid "Multiply"
 msgstr ""
 
 #: dist/translation-strings.php:767
-msgid "Hovered State"
+msgid "Screen"
 msgstr ""
 
 #: dist/translation-strings.php:768
-msgid "Parent Hovered State"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Overlay"
 msgstr ""
 
 #: dist/translation-strings.php:769
-msgid "Collapsed"
+msgid "Lighten"
 msgstr ""
 
 #: dist/translation-strings.php:770
-msgid "Parent Hovered"
+msgid "Color Dodge"
 msgstr ""
 
 #: dist/translation-strings.php:771
-msgid "Add a Container Background to a parent block to enable this state."
+msgid "Color Burn"
 msgstr ""
 
 #: dist/translation-strings.php:772
-msgid "Multiply"
+msgid "Hard Light"
 msgstr ""
 
 #: dist/translation-strings.php:773
-msgid "Screen"
+msgid "Soft Light"
 msgstr ""
 
 #: dist/translation-strings.php:774
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay"
+msgid "Difference"
 msgstr ""
 
 #: dist/translation-strings.php:775
-msgid "Lighten"
+msgid "Exclusion"
 msgstr ""
 
 #: dist/translation-strings.php:776
-msgid "Color Dodge"
+msgid "Hue"
 msgstr ""
 
 #: dist/translation-strings.php:777
-msgid "Color Burn"
+msgid "Saturation"
 msgstr ""
 
 #: dist/translation-strings.php:778
-msgid "Hard Light"
+msgid "Luminosity"
 msgstr ""
 
 #: dist/translation-strings.php:779
-msgid "Soft Light"
+msgid "Initial"
 msgstr ""
 
 #: dist/translation-strings.php:780
-msgid "Difference"
+msgid "Inherit"
 msgstr ""
 
 #: dist/translation-strings.php:781
-msgid "Exclusion"
+msgid "Unset"
 msgstr ""
 
 #: dist/translation-strings.php:782
-msgid "Hue"
+msgid "Mix Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:783
-msgid "Saturation"
+msgid "Normal State"
 msgstr ""
 
 #: dist/translation-strings.php:784
-msgid "Luminosity"
+msgid "Hovered State"
 msgstr ""
 
 #: dist/translation-strings.php:785
-msgid "Initial"
+msgid "Parent Hovered State"
 msgstr ""
 
 #: dist/translation-strings.php:786
-msgid "Inherit"
+msgid "Collapsed"
 msgstr ""
 
 #: dist/translation-strings.php:787
-msgid "Unset"
+msgid "Parent Hovered"
 msgstr ""
 
 #: dist/translation-strings.php:788
-msgid "Mix Blend Mode"
+msgid "Add a Container Background to a parent block to enable this state."
 msgstr ""
 
 #: dist/translation-strings.php:789
@@ -4200,15 +4200,15 @@ msgid "Add Column"
 msgstr ""
 
 #: dist/translation-strings.php:793
-msgid "Adjust the individual widths of each column"
-msgstr ""
-
-#: dist/translation-strings.php:794
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 msgid "Column Widths"
 msgstr ""
 
+#: dist/translation-strings.php:794
+msgid "Adjust the individual widths of each column"
+msgstr ""
+
 #: dist/translation-strings.php:795
 msgid "Group into Container"
 msgstr ""
@@ -4218,71 +4218,71 @@ msgid "Ungroup from Container"
 msgstr ""
 
 #: dist/translation-strings.php:797
-msgid "You can type in custom HTML attributes for this block in the field above."
+#: dist/translation-strings.php:1695
+#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:160
+#: src/welcome/index.php:211
+#: src/welcome/index.php:224
+#: src/welcome/index.php:235
+#: src/welcome/index.php:348
+msgid "Go Premium"
 msgstr ""
 
 #: dist/translation-strings.php:798
-msgid "Example:"
+msgid "No designs found"
 msgstr ""
 
 #: dist/translation-strings.php:799
-msgid "Learn more about Custom Attributes"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Layout"
 msgstr ""
 
 #: dist/translation-strings.php:800
-msgid "There is an error in your custom attribute"
+msgid "You can type in custom HTML attributes for this block in the field above."
 msgstr ""
 
 #: dist/translation-strings.php:801
-#: dist/translation-strings.php:1695
-#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:160
-#: src/welcome/index.php:211
-#: src/welcome/index.php:224
-#: src/welcome/index.php:235
-#: src/welcome/index.php:348
-msgid "Go Premium"
+msgid "Example:"
 msgstr ""
 
 #: dist/translation-strings.php:802
-msgid "No designs found"
+msgid "Learn more about Custom Attributes"
 msgstr ""
 
 #: dist/translation-strings.php:803
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Layout"
+msgid "There is an error in your custom attribute"
 msgstr ""
 
 #: dist/translation-strings.php:804
-msgid "System Fonts"
+msgid "Font Size"
 msgstr ""
 
 #: dist/translation-strings.php:805
-msgid "Sans-Serif"
+msgid "System Fonts"
 msgstr ""
 
 #: dist/translation-strings.php:806
-msgid "Serif"
+msgid "Sans-Serif"
 msgstr ""
 
 #: dist/translation-strings.php:807
-msgid "Serif Alternative"
+msgid "Serif"
 msgstr ""
 
 #: dist/translation-strings.php:808
-msgid "Monospace"
+msgid "Serif Alternative"
 msgstr ""
 
 #: dist/translation-strings.php:809
-msgid "Google Fonts"
+msgid "Monospace"
 msgstr ""
 
 #: dist/translation-strings.php:810
-msgid "Theme Fonts"
+msgid "Google Fonts"
 msgstr ""
 
 #: dist/translation-strings.php:811
-msgid "Font Size"
+msgid "Theme Fonts"
 msgstr ""
 
 #: dist/translation-strings.php:812
@@ -4290,625 +4290,625 @@ msgid "auto"
 msgstr ""
 
 #: dist/translation-strings.php:813
-msgid "Individual sides"
+msgid "There are no blocks in this group, please add one."
 msgstr ""
 
 #: dist/translation-strings.php:814
-msgid "All sides"
+msgid "Add Block"
 msgstr ""
 
 #: dist/translation-strings.php:815
-msgid "Top and Bottom"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:304
+msgid "Dynamic Fields"
 msgstr ""
 
 #: dist/translation-strings.php:816
-msgid "Left and Right"
+msgid "Individual sides"
 msgstr ""
 
 #: dist/translation-strings.php:817
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:263
-msgid "Top Left"
+msgid "All sides"
 msgstr ""
 
 #: dist/translation-strings.php:818
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:265
-msgid "Top Right"
+msgid "Top and Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:819
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:269
-msgid "Bottom Left"
+msgid "Left and Right"
 msgstr ""
 
 #: dist/translation-strings.php:820
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:271
-msgid "Bottom Right"
+#: dist/translation-strings.js:225
+msgid "Top Left"
 msgstr ""
 
 #: dist/translation-strings.php:821
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:304
-msgid "Dynamic Fields"
+#: dist/translation-strings.js:227
+msgid "Top Right"
 msgstr ""
 
 #: dist/translation-strings.php:822
-msgid "There are no blocks in this group, please add one."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:231
+msgid "Bottom Left"
 msgstr ""
 
 #: dist/translation-strings.php:823
-msgid "Add Block"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:233
+msgid "Bottom Right"
 msgstr ""
 
 #: dist/translation-strings.php:824
-msgid "Stop showing tooltips"
-msgstr ""
-
-#: dist/translation-strings.php:825
 #: src/stk-block-types.php:953
 #: dist/translation-strings.js:575
 msgid "Paragraph"
 msgstr ""
 
+#: dist/translation-strings.php:825
+msgid "Stop showing tooltips"
+msgstr ""
+
 #: dist/translation-strings.php:826
-msgid "Type to search icon"
+msgid "Describe the purpose of the image"
 msgstr ""
 
 #: dist/translation-strings.php:827
-msgid "Icon Settings"
+msgid "Leave empty if the image is purely decorative."
 msgstr ""
 
 #: dist/translation-strings.php:828
-msgid "Upload SVG"
+msgid "Alt Text (Alternative Text)"
 msgstr ""
 
 #: dist/translation-strings.php:829
-msgid "Clear icon"
+msgid "preview"
 msgstr ""
 
 #: dist/translation-strings.php:830
-msgid "Drop your SVG here"
+msgid "Upload"
 msgstr ""
 
 #: dist/translation-strings.php:831
-msgid "Describe the purpose of the image"
+msgid "Replace"
 msgstr ""
 
 #: dist/translation-strings.php:832
-msgid "Leave empty if the image is purely decorative."
+msgid "Type to search icon"
 msgstr ""
 
 #: dist/translation-strings.php:833
-msgid "Alt Text (Alternative Text)"
+msgid "Icon Settings"
 msgstr ""
 
 #: dist/translation-strings.php:834
-msgid "preview"
+msgid "Upload SVG"
 msgstr ""
 
 #: dist/translation-strings.php:835
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:205
-msgid "Blur"
+msgid "Clear icon"
 msgstr ""
 
 #: dist/translation-strings.php:836
-msgid "Brightness"
+msgid "Drop your SVG here"
 msgstr ""
 
 #: dist/translation-strings.php:837
-msgid "Contrast"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:179
+msgid "Blur"
 msgstr ""
 
 #: dist/translation-strings.php:838
-msgid "Grayscale"
+msgid "Brightness"
 msgstr ""
 
 #: dist/translation-strings.php:839
-msgid "Hue Rotate"
+msgid "Contrast"
 msgstr ""
 
 #: dist/translation-strings.php:840
-msgid "Invert"
+msgid "Grayscale"
 msgstr ""
 
 #: dist/translation-strings.php:841
-msgid "Saturate"
+msgid "Hue Rotate"
 msgstr ""
 
 #: dist/translation-strings.php:842
-msgid "Sepia"
+msgid "Invert"
 msgstr ""
 
 #: dist/translation-strings.php:843
-msgid "Upload"
+msgid "Saturate"
 msgstr ""
 
 #: dist/translation-strings.php:844
-msgid "Replace"
+msgid "Sepia"
 msgstr ""
 
 #: dist/translation-strings.php:845
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Circle"
+msgid "Click on any inner block in the editor to style it."
 msgstr ""
 
 #: dist/translation-strings.php:846
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:349
-msgid "Blob %s"
+msgid "Looking for other settings? They've moved to the %s tab."
 msgstr ""
 
 #: dist/translation-strings.php:847
-msgid "Click on any inner block in the editor to style it."
+msgid "style"
 msgstr ""
 
 #: dist/translation-strings.php:848
-msgid "Looking for other settings? They've moved to the %s tab."
+msgid "Dismiss hint"
 msgstr ""
 
 #: dist/translation-strings.php:849
-msgid "style"
+msgid "layout"
 msgstr ""
 
 #: dist/translation-strings.php:850
-msgid "Dismiss hint"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Circle"
 msgstr ""
 
 #: dist/translation-strings.php:851
-msgid "layout"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:349
+msgid "Blob %s"
 msgstr ""
 
 #: dist/translation-strings.php:852
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Designs"
+msgid "All"
 msgstr ""
 
 #: dist/translation-strings.php:853
-msgid "Pick a design to start from, this will override your block settings"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Block Designs"
 msgstr ""
 
 #: dist/translation-strings.php:854
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Layout Tab"
+msgid "UI Kits"
 msgstr ""
 
 #: dist/translation-strings.php:855
-msgid "Style"
+msgid "Wireframes"
 msgstr ""
 
 #: dist/translation-strings.php:856
-msgid "Style Tab"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Latest Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:857
-msgid "Advanced"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "V2 Design Library"
 msgstr ""
 
 #: dist/translation-strings.php:858
-msgid "Advanced Tab"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "E.g. light, dark, red, minimalist…"
 msgstr ""
 
 #: dist/translation-strings.php:859
-msgid "Desktop"
+msgid "Select Multiple"
 msgstr ""
 
 #: dist/translation-strings.php:860
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Tablet"
+msgid "Select"
 msgstr ""
 
 #: dist/translation-strings.php:861
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Mobile"
+msgid "Deselect All"
 msgstr ""
 
 #: dist/translation-strings.php:862
-msgid "Get More Image Shapes"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Refresh Library"
 msgstr ""
 
 #: dist/translation-strings.php:863
-msgid "Mask images with a variety of blob-like shapes"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Large preview"
 msgstr ""
 
 #: dist/translation-strings.php:864
-msgid "Choose from over 50 different shapes"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Medium preview"
 msgstr ""
 
 #: dist/translation-strings.php:865
-msgid "Enhances the overall aesthetic of images"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Small preview"
 msgstr ""
 
 #: dist/translation-strings.php:866
-msgid "Use Dynamic Content"
+msgid "Add Designs"
 msgstr ""
 
 #: dist/translation-strings.php:867
-msgid "Add dynamic content from posts or post meta"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Layout Tab"
 msgstr ""
 
 #: dist/translation-strings.php:868
-msgid "Use third-party plugins as dynamic sources such as ACF, Meta Box, Toolset, and more"
+msgid "Style"
 msgstr ""
 
 #: dist/translation-strings.php:869
-msgid "Build custom loop design with the Native Query Loop"
+msgid "Style Tab"
 msgstr ""
 
 #: dist/translation-strings.php:870
-msgid "Separator Layers"
+msgid "Advanced"
 msgstr ""
 
 #: dist/translation-strings.php:871
-msgid "Add a second and third layer to separators"
+msgid "Advanced Tab"
 msgstr ""
 
 #: dist/translation-strings.php:872
-msgid "Change layer color, size and opacity"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Designs"
 msgstr ""
 
 #: dist/translation-strings.php:873
-msgid "Greater creativity in designing separators"
+msgid "Pick a design to start from, this will override your block settings"
 msgstr ""
 
 #: dist/translation-strings.php:874
-msgid "Elevate Your Icons"
+msgid "Get More Image Shapes"
 msgstr ""
 
 #: dist/translation-strings.php:875
-msgid "Liven up icons with gradient fills, multiple colors and background shapes"
+msgid "Mask images with a variety of blob-like shapes"
 msgstr ""
 
 #: dist/translation-strings.php:876
-msgid "More design options and customization for icons"
+msgid "Choose from over 50 different shapes"
 msgstr ""
 
 #: dist/translation-strings.php:877
-msgid "Choose from over 50 background shapes"
+msgid "Enhances the overall aesthetic of images"
 msgstr ""
 
 #: dist/translation-strings.php:878
-msgid "Greater visual interest and variety for your icons"
+msgid "Use Dynamic Content"
 msgstr ""
 
 #: dist/translation-strings.php:879
-msgid "Liven up icons with background shapes"
+msgid "Add dynamic content from posts or post meta"
 msgstr ""
 
 #: dist/translation-strings.php:880
-msgid "Adjust timing of CSS transitions"
+msgid "Use third-party plugins as dynamic sources such as ACF, Meta Box, Toolset, and more"
 msgstr ""
 
 #: dist/translation-strings.php:881
-msgid "Change X and Y position of blocks"
+msgid "Build custom loop design with the Native Query Loop"
 msgstr ""
 
 #: dist/translation-strings.php:882
-msgid "Scale or rotate blocks"
+msgid "Separator Layers"
 msgstr ""
 
 #: dist/translation-strings.php:883
-msgid "Perfect for hover animations"
+msgid "Add a second and third layer to separators"
 msgstr ""
 
 #: dist/translation-strings.php:884
-msgid "Entrance fade-ins and animations when scrolling to blocks"
+msgid "Change layer color, size and opacity"
 msgstr ""
 
 #: dist/translation-strings.php:885
-msgid "Smooth scroll animations based on scrolling position"
+msgid "Greater creativity in designing separators"
 msgstr ""
 
 #: dist/translation-strings.php:886
-msgid "Create a more visually engaging and interactive experience"
+msgid "Elevate Your Icons"
 msgstr ""
 
 #: dist/translation-strings.php:887
-msgid "Show or hide blocks based on conditions"
+msgid "Liven up icons with gradient fills, multiple colors and background shapes"
 msgstr ""
 
 #: dist/translation-strings.php:888
-msgid "Display blocks based on time, role, meta, custom PHP, option, taxonomy and more"
+msgid "More design options and customization for icons"
 msgstr ""
 
 #: dist/translation-strings.php:889
-msgid "Use multiple conditions"
+msgid "Choose from over 50 background shapes"
 msgstr ""
 
 #: dist/translation-strings.php:890
-msgid "Show targeted content and personalization"
+msgid "Greater visual interest and variety for your icons"
 msgstr ""
 
 #: dist/translation-strings.php:891
-msgid "Greater control over the visibility of content"
+msgid "Liven up icons with background shapes"
 msgstr ""
 
 #: dist/translation-strings.php:892
-msgid "Add custom CSS rules specific for each block"
+msgid "Adjust timing of CSS transitions"
 msgstr ""
 
 #: dist/translation-strings.php:893
-msgid "Support for media queries"
+msgid "Change X and Y position of blocks"
 msgstr ""
 
 #: dist/translation-strings.php:894
-msgid "Fine-tune styling on a per block basis"
+msgid "Scale or rotate blocks"
 msgstr ""
 
 #: dist/translation-strings.php:895
-msgid "Adjust Column Arrangement"
+msgid "Perfect for hover animations"
 msgstr ""
 
 #: dist/translation-strings.php:896
-msgid "Adjust the arrangement of columns when collapsed on tablet and mobile"
+msgid "Entrance fade-ins and animations when scrolling to blocks"
 msgstr ""
 
 #: dist/translation-strings.php:897
-msgid "Ensure that content remains organized and easily readable on mobile"
+msgid "Smooth scroll animations based on scrolling position"
 msgstr ""
 
 #: dist/translation-strings.php:898
-msgid "This is a Premium Design"
+msgid "Create a more visually engaging and interactive experience"
 msgstr ""
 
 #: dist/translation-strings.php:899
-msgid "Unlock access to the entire design library and set your website apart from the rest."
+msgid "Show or hide blocks based on conditions"
 msgstr ""
 
 #: dist/translation-strings.php:900
-msgid "Get More Post Options"
+msgid "Display blocks based on time, role, meta, custom PHP, option, taxonomy and more"
 msgstr ""
 
 #: dist/translation-strings.php:901
-msgid "New Custom Post Type option"
+msgid "Use multiple conditions"
 msgstr ""
 
 #: dist/translation-strings.php:902
-msgid "Offset, exclude, include specific posts"
+msgid "Show targeted content and personalization"
 msgstr ""
 
 #: dist/translation-strings.php:903
-msgid "Hide the current post - great for synced patterns"
+msgid "Greater control over the visibility of content"
 msgstr ""
 
 #: dist/translation-strings.php:904
-msgid "This Is a Premium Feature"
+msgid "Add custom CSS rules specific for each block"
 msgstr ""
 
 #: dist/translation-strings.php:905
-#: src/welcome/index.php:274
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Learn More"
+msgid "Support for media queries"
 msgstr ""
 
 #: dist/translation-strings.php:906
-msgid "View Demo"
+msgid "Fine-tune styling on a per block basis"
 msgstr ""
 
 #: dist/translation-strings.php:907
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "You can hide premium hints in the settings"
+msgid "Adjust Column Arrangement"
 msgstr ""
 
 #: dist/translation-strings.php:908
-msgid "Inset"
+msgid "Adjust the arrangement of columns when collapsed on tablet and mobile"
 msgstr ""
 
 #: dist/translation-strings.php:909
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:234
-msgid "Vertical Offset"
+msgid "Ensure that content remains organized and easily readable on mobile"
 msgstr ""
 
 #: dist/translation-strings.php:910
-msgid "Shadow Spread"
+msgid "This is a Premium Design"
 msgstr ""
 
 #: dist/translation-strings.php:911
-msgid "Shadow Color"
+msgid "Unlock access to the entire design library and set your website apart from the rest."
 msgstr ""
 
 #: dist/translation-strings.php:912
-msgid "Advanced Shadow Options"
+msgid "Get More Post Options"
 msgstr ""
 
 #: dist/translation-strings.php:913
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:299
-msgid "Custom"
+msgid "New Custom Post Type option"
 msgstr ""
 
 #: dist/translation-strings.php:914
-msgid "Shadow Settings"
+msgid "Offset, exclude, include specific posts"
 msgstr ""
 
 #: dist/translation-strings.php:915
-msgid "Shadow/Outline"
+msgid "Hide the current post - great for synced patterns"
 msgstr ""
 
 #: dist/translation-strings.php:916
-msgid "Adjusts the intensity of the shadow/outline of the block and the appearance of the block border"
+msgid "This Is a Premium Feature"
 msgstr ""
 
 #: dist/translation-strings.php:917
-msgid "Column Arrangement"
+#: src/welcome/index.php:274
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Learn More"
 msgstr ""
 
 #: dist/translation-strings.php:918
-#: pro__premium_only/src/dynamic-content/sources/other-posts.php:259
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:18
-msgid "Post Type"
+msgid "View Demo"
 msgstr ""
 
 #: dist/translation-strings.php:919
-msgid "Filter by Taxonomy"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "You can hide premium hints in the settings"
 msgstr ""
 
 #: dist/translation-strings.php:920
-msgid "Taxonomy Filter Type"
+msgid "Desktop"
 msgstr ""
 
 #: dist/translation-strings.php:921
-msgid "Included In"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Tablet"
 msgstr ""
 
 #: dist/translation-strings.php:922
-msgid "Not In"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Mobile"
 msgstr ""
 
 #: dist/translation-strings.php:923
-msgid "Opens in new tab"
+msgid "Inset"
 msgstr ""
 
 #: dist/translation-strings.php:924
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Nofollow link"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:189
+msgid "Vertical Offset"
 msgstr ""
 
 #: dist/translation-strings.php:925
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Sponsored"
+msgid "Shadow Spread"
 msgstr ""
 
 #: dist/translation-strings.php:926
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "UGC"
+msgid "Shadow Color"
 msgstr ""
 
 #: dist/translation-strings.php:927
-msgid "Search or type url"
+msgid "Advanced Shadow Options"
 msgstr ""
 
 #: dist/translation-strings.php:928
-msgid "URL"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:299
+msgid "Custom"
 msgstr ""
 
 #: dist/translation-strings.php:929
-msgid "Upgrade to Premium to get more design variations."
+msgid "Shadow Settings"
 msgstr ""
 
 #: dist/translation-strings.php:930
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "All"
+msgid "Shadow/Outline"
 msgstr ""
 
 #: dist/translation-strings.php:931
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Designs"
+msgid "Adjusts the intensity of the shadow/outline of the block and the appearance of the block border"
 msgstr ""
 
 #: dist/translation-strings.php:932
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "UI Kits"
+msgid "Column Arrangement"
 msgstr ""
 
 #: dist/translation-strings.php:933
-msgid "Wireframes"
+#: pro__premium_only/src/dynamic-content/sources/other-posts.php:259
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:18
+msgid "Post Type"
 msgstr ""
 
 #: dist/translation-strings.php:934
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Latest Design Library"
+msgid "Filter by Taxonomy"
 msgstr ""
 
 #: dist/translation-strings.php:935
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "V2 Design Library"
+msgid "Taxonomy Filter Type"
 msgstr ""
 
 #: dist/translation-strings.php:936
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "E.g. light, dark, red, minimalist…"
+msgid "Included In"
 msgstr ""
 
 #: dist/translation-strings.php:937
-msgid "Select Multiple"
+msgid "Not In"
 msgstr ""
 
 #: dist/translation-strings.php:938
-msgid "Select"
+msgid "Upgrade to Premium to get more design variations."
 msgstr ""
 
 #: dist/translation-strings.php:939
-msgid "Deselect All"
+msgid "Opens in new tab"
 msgstr ""
 
 #: dist/translation-strings.php:940
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Refresh Library"
+msgid "Nofollow link"
 msgstr ""
 
 #: dist/translation-strings.php:941
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Large preview"
+msgid "Sponsored"
 msgstr ""
 
 #: dist/translation-strings.php:942
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Medium preview"
+msgid "UGC"
 msgstr ""
 
 #: dist/translation-strings.php:943
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Small preview"
+msgid "Search or type url"
 msgstr ""
 
 #: dist/translation-strings.php:944
-msgid "Add Designs"
-msgstr ""
-
-#: dist/translation-strings.php:945
 #: dist/editor_blocks.js:2
 msgid "Color & Highlight"
 msgstr ""
 
-#: dist/translation-strings.php:946
+#: dist/translation-strings.php:945
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks.js:2
 msgid "Highlight"
 msgstr ""
 
-#: dist/translation-strings.php:947
+#: dist/translation-strings.php:946
 #: dist/editor_blocks.js:2
 msgid "Low"
 msgstr ""
 
-#: dist/translation-strings.php:948
+#: dist/translation-strings.php:947
 #: dist/editor_blocks.js:2
 msgid "Highlight Text"
 msgstr ""
 
+#: dist/translation-strings.php:948
+msgid "URL"
+msgstr ""
+
 #: dist/translation-strings.php:949
 #: dist/editor_blocks.js:2
 msgid "Stackable Settings"
@@ -4916,52 +4916,52 @@ msgstr ""
 
 #: dist/translation-strings.php:950
 #: dist/editor_blocks.js:2
-msgid "Reset layout"
+msgid "Error saving block, please make sure you only have a %s block"
 msgstr ""
 
 #: dist/translation-strings.php:951
 #: dist/editor_blocks.js:2
-msgid "Error saving block, please make sure you only have a %s block"
+msgid "Default %s Block saved"
 msgstr ""
 
 #: dist/translation-strings.php:952
 #: dist/editor_blocks.js:2
-msgid "Default %s Block saved"
+msgid "%s Block style saved"
 msgstr ""
 
 #: dist/translation-strings.php:953
 #: dist/editor_blocks.js:2
-msgid "%s Block style saved"
+msgid "Default %s Block Saved!"
 msgstr ""
 
 #: dist/translation-strings.php:954
 #: dist/editor_blocks.js:2
-msgid "Default %s Block Saved!"
+msgid "Save as Default %s Block"
 msgstr ""
 
 #: dist/translation-strings.php:955
 #: dist/editor_blocks.js:2
-msgid "Save as Default %s Block"
+msgid "Default %s Block Deleted!"
 msgstr ""
 
 #: dist/translation-strings.php:956
 #: dist/editor_blocks.js:2
-msgid "Default %s Block Deleted!"
+msgid "Reset Default %s Block"
 msgstr ""
 
 #: dist/translation-strings.php:957
 #: dist/editor_blocks.js:2
-msgid "Reset Default %s Block"
+msgid "Couldn't update block styles, got this error:"
 msgstr ""
 
 #: dist/translation-strings.php:958
 #: dist/editor_blocks.js:2
-msgid "Couldn't update block styles, got this error:"
+msgid "Please refresh the page and try again."
 msgstr ""
 
 #: dist/translation-strings.php:959
 #: dist/editor_blocks.js:2
-msgid "Please refresh the page and try again."
+msgid "Reset layout"
 msgstr ""
 
 #: dist/translation-strings.php:960
@@ -5086,7 +5086,7 @@ msgstr ""
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:264
+#: dist/translation-strings.js:226
 msgid "Top Center"
 msgstr ""
 
@@ -5094,7 +5094,7 @@ msgstr ""
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:266
+#: dist/translation-strings.js:228
 msgid "Center Left"
 msgstr ""
 
@@ -5102,7 +5102,7 @@ msgstr ""
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:267
+#: dist/translation-strings.js:229
 msgid "Center Center"
 msgstr ""
 
@@ -5110,7 +5110,7 @@ msgstr ""
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:268
+#: dist/translation-strings.js:230
 msgid "Center Right"
 msgstr ""
 
@@ -5118,7 +5118,7 @@ msgstr ""
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:270
+#: dist/translation-strings.js:232
 msgid "Bottom Center"
 msgstr ""
 
@@ -5181,107 +5181,107 @@ msgid "Adjusts the radius of block corners to make them more rounded"
 msgstr ""
 
 #: dist/translation-strings.php:1002
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Link / URL"
+msgid "Min. Height"
 msgstr ""
 
 #: dist/translation-strings.php:1003
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:321
-msgid "Open in new tab"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Max. Content Width"
 msgstr ""
 
 #: dist/translation-strings.php:1004
-msgid "Open Link in Lightbox"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:447
+msgid "Content Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:1005
-msgid "Displaying a Google Map in a Lightbox? Use the embed iframe URL instead. Need help finding it?"
+msgid "Adjusts the minimum allowable height of the block"
 msgstr ""
 
 #: dist/translation-strings.php:1006
-msgid " Check out our docs."
+msgid "Sets the placement of the content to top, center or bottom. Available when the min. block height is set to higher than default."
 msgstr ""
 
 #: dist/translation-strings.php:1007
-msgid "Link rel"
+msgid "Adjusts the maximum allowable width of the block. The settings will depend on the block width you set on the toolbar."
 msgstr ""
 
 #: dist/translation-strings.php:1008
-msgid "Link relationship keywords, e.g. nofollow noreferrer prefetch"
+msgid "Sets the placement of the content to left, center or right. Not available when block width is set to full width."
 msgstr ""
 
 #: dist/translation-strings.php:1009
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Link Title"
+msgid "Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1010
-msgid "Also used for lightbox caption"
+msgid "Margins"
 msgstr ""
 
 #: dist/translation-strings.php:1011
-msgid "Anchor ID"
+msgid "Sets the block paddings, i.e the space between the inner columns and the block border"
 msgstr ""
 
 #: dist/translation-strings.php:1012
-msgid "Add an id attribute to the anchor tag."
+msgid "Sets the block margin, i.e. the space outside the block between the block border and the next block."
 msgstr ""
 
 #: dist/translation-strings.php:1013
-msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding"
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Link / URL"
 msgstr ""
 
 #: dist/translation-strings.php:1014
-msgid "Min. Height"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:321
+msgid "Open in new tab"
 msgstr ""
 
 #: dist/translation-strings.php:1015
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Max. Content Width"
+msgid "Open Link in Lightbox"
 msgstr ""
 
 #: dist/translation-strings.php:1016
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:447
-msgid "Content Vertical Align"
+msgid "Displaying a Google Map in a Lightbox? Use the embed iframe URL instead. Need help finding it?"
 msgstr ""
 
 #: dist/translation-strings.php:1017
-msgid "Adjusts the minimum allowable height of the block"
+msgid " Check out our docs."
 msgstr ""
 
 #: dist/translation-strings.php:1018
-msgid "Sets the placement of the content to top, center or bottom. Available when the min. block height is set to higher than default."
+msgid "Link rel"
 msgstr ""
 
 #: dist/translation-strings.php:1019
-msgid "Adjusts the maximum allowable width of the block. The settings will depend on the block width you set on the toolbar."
+msgid "Link relationship keywords, e.g. nofollow noreferrer prefetch"
 msgstr ""
 
 #: dist/translation-strings.php:1020
-msgid "Sets the placement of the content to left, center or right. Not available when block width is set to full width."
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Link Title"
 msgstr ""
 
 #: dist/translation-strings.php:1021
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Paddings"
+msgid "Also used for lightbox caption"
 msgstr ""
 
 #: dist/translation-strings.php:1022
-msgid "Margins"
+msgid "Anchor ID"
 msgstr ""
 
 #: dist/translation-strings.php:1023
-msgid "Sets the block paddings, i.e the space between the inner columns and the block border"
+msgid "Add an id attribute to the anchor tag."
 msgstr ""
 
 #: dist/translation-strings.php:1024
-msgid "Sets the block margin, i.e. the space outside the block between the block border and the next block."
+msgid "Supports links to images, videos, YouTube, Vimeo, and web pages that allow embedding"
 msgstr ""
 
 #: dist/translation-strings.php:1025
@@ -5684,411 +5684,401 @@ msgstr ""
 
 #: dist/translation-strings.php:1089
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Spread"
+msgid "Horizontal Card"
 msgstr ""
 
 #: dist/translation-strings.php:1090
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Grouped"
+msgid "Content Order"
 msgstr ""
 
 #: dist/translation-strings.php:1091
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Collapse Buttons On"
+msgid "Posts Settings"
 msgstr ""
 
 #: dist/translation-strings.php:1092
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Don't collapse"
+msgid "Read More"
 msgstr ""
 
 #: dist/translation-strings.php:1093
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:241
-msgctxt "Panel title"
-msgid "%s #%d"
+#: dist/translation-strings.js:242
+msgid "Load More"
 msgstr ""
 
 #: dist/translation-strings.php:1094
-#: dist/admin_custom_fields__premium_only.js:2
+#: pro__premium_only/src/stk-block-types.php:43
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/translation-strings.js:377
-msgid "Description"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:399
+msgid "Pagination"
 msgstr ""
 
 #: dist/translation-strings.php:1095
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Description Color"
+#: dist/translation-strings.js:415
+msgid "Image Width"
 msgstr ""
 
 #: dist/translation-strings.php:1096
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Quotation Mark"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:414
+msgid "Image Height"
 msgstr ""
 
 #: dist/translation-strings.php:1097
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:181
-msgid "Horizontal Position"
+msgid "Hover Color"
 msgstr ""
 
 #: dist/translation-strings.php:1098
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:182
-msgid "Vertical Position"
+msgid "Customize Read More Link"
 msgstr ""
 
 #: dist/translation-strings.php:1099
+#: pro__premium_only/src/stk-block-types.php:15
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Horizontal Card"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:406
+msgid "Load More Button"
 msgstr ""
 
 #: dist/translation-strings.php:1100
+#: src/deprecated/v2/block/blog-posts/index.php:316
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Content Order"
+msgid "Continue reading"
 msgstr ""
 
 #: dist/translation-strings.php:1101
+#: src/deprecated/v2/block/blog-posts/attributes.php:1845
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Posts Settings"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:397
+msgid "Next »"
 msgstr ""
 
 #: dist/translation-strings.php:1102
+#: src/deprecated/v2/block/blog-posts/attributes.php:1849
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Read More"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:398
+msgid "« Previous"
 msgstr ""
 
 #: dist/translation-strings.php:1103
+#: dist/admin_custom_fields__premium_only.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:139
-msgid "Load More"
+#: dist/translation-strings.js:377
+msgid "Description"
 msgstr ""
 
 #: dist/translation-strings.php:1104
-#: pro__premium_only/src/stk-block-types.php:43
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:388
-msgid "Pagination"
+msgid "Description Color"
 msgstr ""
 
 #: dist/translation-strings.php:1105
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:404
-msgid "Image Width"
+msgid "Subtitle for this block"
 msgstr ""
 
 #: dist/translation-strings.php:1106
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:403
-msgid "Image Height"
+msgid "Subtitle Color"
 msgstr ""
 
 #: dist/translation-strings.php:1107
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Hover Color"
+msgid "Text Colors"
 msgstr ""
 
 #: dist/translation-strings.php:1108
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Customize Read More Link"
+msgid "Heading Color"
 msgstr ""
 
 #: dist/translation-strings.php:1109
-#: pro__premium_only/src/stk-block-types.php:15
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:395
-msgid "Load More Button"
+msgid "Link Color"
 msgstr ""
 
 #: dist/translation-strings.php:1110
-#: src/deprecated/v2/block/blog-posts/index.php:316
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Continue reading"
+msgid "Link Hover Color"
 msgstr ""
 
 #: dist/translation-strings.php:1111
-#: src/deprecated/v2/block/blog-posts/attributes.php:1845
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:386
-msgid "Next »"
+msgid "The colors above might not apply to some nested blocks."
 msgstr ""
 
 #: dist/translation-strings.php:1112
-#: src/deprecated/v2/block/blog-posts/attributes.php:1849
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:387
-msgid "« Previous"
+msgid "Uneven"
 msgstr ""
 
 #: dist/translation-strings.php:1113
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Subtitle for this block"
+msgid "Tiled"
 msgstr ""
 
 #: dist/translation-strings.php:1114
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Subtitle Color"
+msgid "Layouts"
 msgstr ""
 
 #: dist/translation-strings.php:1115
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Text Colors"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "No Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1116
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Heading Color"
+msgid "Half-screen height"
 msgstr ""
 
 #: dist/translation-strings.php:1117
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Link Color"
+msgid "Full-screen height"
 msgstr ""
 
 #: dist/translation-strings.php:1118
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Link Hover Color"
+msgid "Custom height"
 msgstr ""
 
 #: dist/translation-strings.php:1119
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "The colors above might not apply to some nested blocks."
+msgid "Custom Height"
 msgstr ""
 
 #: dist/translation-strings.php:1120
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Uneven"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/translation-strings.js:445
+msgid "Column Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:1121
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Tiled"
+msgid "Quotation Mark"
 msgstr ""
 
 #: dist/translation-strings.php:1122
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Layouts"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:154
+msgid "Horizontal Position"
 msgstr ""
 
 #: dist/translation-strings.php:1123
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "No Paddings"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:155
+msgid "Vertical Position"
 msgstr ""
 
 #: dist/translation-strings.php:1124
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Half-screen height"
+msgid "Spread"
 msgstr ""
 
 #: dist/translation-strings.php:1125
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Full-screen height"
+msgid "Grouped"
 msgstr ""
 
 #: dist/translation-strings.php:1126
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Custom height"
+msgid "Collapse Buttons On"
 msgstr ""
 
 #: dist/translation-strings.php:1127
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Custom Height"
+msgid "Don't collapse"
 msgstr ""
 
 #: dist/translation-strings.php:1128
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:445
-msgid "Column Vertical Align"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:196
+msgctxt "Panel title"
+msgid "%s #%d"
 msgstr ""
 
 #: dist/translation-strings.php:1129
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Vertical Margin"
+msgid "Abstract"
 msgstr ""
 
 #: dist/translation-strings.php:1130
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Abstract"
+msgid "Boxed"
 msgstr ""
 
 #: dist/translation-strings.php:1131
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Boxed"
+msgid "Number Color"
 msgstr ""
 
 #: dist/translation-strings.php:1132
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Number Color"
+msgid "Vertical Margin"
 msgstr ""
 
 #: dist/translation-strings.php:1133
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Short"
+msgid "Half Background"
 msgstr ""
 
 #: dist/translation-strings.php:1134
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Tall"
+msgid "Overlap Shape %s"
 msgstr ""
 
 #: dist/translation-strings.php:1135
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Restrict to Content Width"
+msgid "Overlap Background %s"
 msgstr ""
 
 #: dist/translation-strings.php:1136
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Half Background"
+msgid "Image Column Width"
 msgstr ""
 
 #: dist/translation-strings.php:1137
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlap Shape %s"
+msgid "Reverse Horizontally"
 msgstr ""
 
 #: dist/translation-strings.php:1138
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlap Background %s"
+msgid "Container Width"
 msgstr ""
 
 #: dist/translation-strings.php:1139
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Image Column Width"
+msgid "Container Offset"
 msgstr ""
 
 #: dist/translation-strings.php:1140
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Reverse Horizontally"
+msgid "Full Height"
 msgstr ""
 
 #: dist/translation-strings.php:1141
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Container Width"
+msgid "Restrict to Content Width"
 msgstr ""
 
 #: dist/translation-strings.php:1142
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Container Offset"
+msgid "Overlay Background"
 msgstr ""
 
 #: dist/translation-strings.php:1143
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Full Height"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+msgid "Background Color Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1144
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Overlay Background"
+msgid "This affects other buttons in this block"
 msgstr ""
 
 #: dist/translation-strings.php:1145
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Color Opacity"
+msgid "Display as a grid (left to right & evenly spaced)"
 msgstr ""
 
 #: dist/translation-strings.php:1146
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "This affects other buttons in this block"
+msgid "List Gap"
 msgstr ""
 
 #: dist/translation-strings.php:1147
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Number of Icons / Columns"
+msgid "You can click on each icon in the Icon List block to change them individually."
 msgstr ""
 
 #: dist/translation-strings.php:1148
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Title on Top"
+msgid "List Text"
 msgstr ""
 
 #: dist/translation-strings.php:1149
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Display as a grid (left to right & evenly spaced)"
+msgid "Text for this block"
 msgstr ""
 
 #: dist/translation-strings.php:1150
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "List Gap"
+msgid "Line %d"
 msgstr ""
 
 #: dist/translation-strings.php:1151
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "You can click on each icon in the Icon List block to change them individually."
+msgid "Number of Icons / Columns"
 msgstr ""
 
 #: dist/translation-strings.php:1152
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "List Text"
+msgid "Title on Top"
 msgstr ""
 
 #: dist/translation-strings.php:1153
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Text for this block"
+msgid "Short"
 msgstr ""
 
 #: dist/translation-strings.php:1154
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Line %d"
+msgid "Tall"
 msgstr ""
 
 #: dist/translation-strings.php:1155
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Border Thickness"
-msgstr ""
-
-#: dist/translation-strings.php:1156
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Icon Location"
-msgstr ""
-
-#: dist/translation-strings.php:1157
-#: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Overlay Color Type"
 msgstr ""
 
-#: dist/translation-strings.php:1158
+#: dist/translation-strings.php:1156
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Overlay Hover Color"
 msgstr ""
 
-#: dist/translation-strings.php:1159
+#: dist/translation-strings.php:1157
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:443
+#: dist/translation-strings.js:395
 msgid "Effects"
 msgstr ""
 
-#: dist/translation-strings.php:1160
+#: dist/translation-strings.php:1158
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Image Hover Effect"
 msgstr ""
 
-#: dist/translation-strings.php:1161
+#: dist/translation-strings.php:1159
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Zoom In"
 msgstr ""
 
-#: dist/translation-strings.php:1162
+#: dist/translation-strings.php:1160
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Zoom Out"
 msgstr ""
 
-#: dist/translation-strings.php:1163
+#: dist/translation-strings.php:1161
 #: src/stk-block-types.php:680
 #: src/stk-block-types.php:715
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
@@ -6096,86 +6086,96 @@ msgstr ""
 msgid "Price"
 msgstr ""
 
-#: dist/translation-strings.php:1164
+#: dist/translation-strings.php:1162
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Sub Price"
 msgstr ""
 
-#: dist/translation-strings.php:1165
+#: dist/translation-strings.php:1163
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Price Prefix"
 msgstr ""
 
-#: dist/translation-strings.php:1166
+#: dist/translation-strings.php:1164
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Price Suffix"
 msgstr ""
 
-#: dist/translation-strings.php:1167
+#: dist/translation-strings.php:1165
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgctxt "Nth Title with description"
 msgid "%s %d %s"
 msgstr ""
 
-#: dist/translation-strings.php:1168
+#: dist/translation-strings.php:1166
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Number Shape"
 msgstr ""
 
-#: dist/translation-strings.php:1169
+#: dist/translation-strings.php:1167
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:232
+#: dist/translation-strings.js:187
 msgid "Shape Size"
 msgstr ""
 
-#: dist/translation-strings.php:1170
+#: dist/translation-strings.php:1168
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Number Background Color"
 msgstr ""
 
-#: dist/translation-strings.php:1171
+#: dist/translation-strings.php:1169
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Separator Color"
 msgstr ""
 
-#: dist/translation-strings.php:1172
+#: dist/translation-strings.php:1170
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Padding Top"
 msgstr ""
 
-#: dist/translation-strings.php:1173
+#: dist/translation-strings.php:1171
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Padding Bottom"
 msgstr ""
 
-#: dist/translation-strings.php:1174
+#: dist/translation-strings.php:1172
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Margin Top"
 msgstr ""
 
-#: dist/translation-strings.php:1175
+#: dist/translation-strings.php:1173
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Use this to pull up/down the separator to the block above it"
 msgstr ""
 
-#: dist/translation-strings.php:1176
+#: dist/translation-strings.php:1174
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Margin Bottom"
 msgstr ""
 
-#: dist/translation-strings.php:1177
+#: dist/translation-strings.php:1175
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Use this to pull up/down the separator to the block below it"
 msgstr ""
 
-#: dist/translation-strings.php:1178
+#: dist/translation-strings.php:1176
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:426
+#: dist/translation-strings.js:437
 msgid "Layer"
 msgstr ""
 
+#: dist/translation-strings.php:1177
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Border Thickness"
+msgstr ""
+
+#: dist/translation-strings.php:1178
+#: dist/deprecated/editor_blocks_deprecated_v2.js:2
+msgid "Icon Location"
+msgstr ""
+
 #: dist/translation-strings.php:1179
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 msgid "Overlay Simple"
@@ -6220,296 +6220,296 @@ msgstr ""
 
 #: dist/translation-strings.php:1187
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Side Title"
+msgid "Play Button"
 msgstr ""
 
 #: dist/translation-strings.php:1188
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Reverse Title"
+msgid "Button Style"
 msgstr ""
 
 #: dist/translation-strings.php:1189
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Column Rule"
+msgid "Normal Play Button"
 msgstr ""
 
 #: dist/translation-strings.php:1190
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Vertical Align"
+msgid "Play Button with Circle"
 msgstr ""
 
 #: dist/translation-strings.php:1191
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Subtitle on Top"
+msgid "Outline Play Button"
 msgstr ""
 
 #: dist/translation-strings.php:1192
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Title"
+msgid "Background Color Type"
 msgstr ""
 
 #: dist/translation-strings.php:1193
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Play Button"
+msgid "Side Title"
 msgstr ""
 
 #: dist/translation-strings.php:1194
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Button Style"
+msgid "Reverse Title"
 msgstr ""
 
 #: dist/translation-strings.php:1195
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Normal Play Button"
+msgid "Column Rule"
 msgstr ""
 
 #: dist/translation-strings.php:1196
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Play Button with Circle"
+msgid "Vertical Align"
 msgstr ""
 
 #: dist/translation-strings.php:1197
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
-msgid "Outline Play Button"
+msgid "Subtitle on Top"
 msgstr ""
 
 #: dist/translation-strings.php:1198
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Align Top"
+msgid "Block Title"
 msgstr ""
 
 #: dist/translation-strings.php:1199
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Align Bottom"
+msgid "Open link in new tab"
 msgstr ""
 
 #: dist/translation-strings.php:1200
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Color Type"
+msgid "Use social colors"
 msgstr ""
 
 #: dist/translation-strings.php:1201
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hover Opacity"
+msgid "Change to Normal Button on Hover"
 msgstr ""
 
 #: dist/translation-strings.php:1202
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Hover Colors"
+msgid "Button Size"
 msgstr ""
 
 #: dist/translation-strings.php:1203
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Open link in new tab"
+msgid "Tiny"
 msgstr ""
 
 #: dist/translation-strings.php:1204
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Use social colors"
+msgid "Small"
 msgstr ""
 
 #: dist/translation-strings.php:1205
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Change to Normal Button on Hover"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:315
+msgid "Medium"
 msgstr ""
 
 #: dist/translation-strings.php:1206
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Button Size"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:316
+msgid "Large"
 msgstr ""
 
 #: dist/translation-strings.php:1207
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Tiny"
+msgid "Vertical Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1208
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Small"
+msgid "Horizontal Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1209
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:315
-msgid "Medium"
+msgid "Adv. Icon Settings"
 msgstr ""
 
 #: dist/translation-strings.php:1210
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:316
-msgid "Large"
+msgid "Icon Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:1211
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Vertical Padding"
+msgid "Hover Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1212
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Horizontal Padding"
+msgid "Hover Colors"
 msgstr ""
 
 #: dist/translation-strings.php:1213
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Adv. Icon Settings"
+#: dist/translation-strings.js:448
+msgid "Column Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1214
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Spacing"
+msgid "Free"
 msgstr ""
 
 #: dist/translation-strings.php:1215
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:448
-msgid "Column Paddings"
+msgid "Premium"
 msgstr ""
 
 #: dist/translation-strings.php:1216
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Free"
+msgid "Shaped"
 msgstr ""
 
 #: dist/translation-strings.php:1217
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Premium"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:343
+msgid "Icon Color Type"
 msgstr ""
 
 #: dist/translation-strings.php:1218
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Shaped"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:193
+msgid "Multicolor"
 msgstr ""
 
 #: dist/translation-strings.php:1219
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:343
-msgid "Icon Color Type"
+msgid "Icon Shape / Outline Color"
 msgstr ""
 
 #: dist/translation-strings.php:1220
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:238
-msgid "Multicolor"
+msgid "Icon Shape Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:1221
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Shape / Outline Color"
+msgid "Outline Border Radius"
 msgstr ""
 
 #: dist/translation-strings.php:1222
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Shape Border Radius"
+msgid "Icon Shape Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1223
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Outline Border Radius"
+msgid "Outline Padding"
 msgstr ""
 
 #: dist/translation-strings.php:1224
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Icon Shape Padding"
+msgid "Outline Width"
 msgstr ""
 
 #: dist/translation-strings.php:1225
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Outline Padding"
+msgid "Background Image Position"
 msgstr ""
 
 #: dist/translation-strings.php:1226
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Outline Width"
+msgid "Background Image Repeat"
 msgstr ""
 
 #: dist/translation-strings.php:1227
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image Position"
+msgid "Background Image Size"
 msgstr ""
 
 #: dist/translation-strings.php:1228
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image Repeat"
+msgid "Force square image"
 msgstr ""
 
 #: dist/translation-strings.php:1229
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Background Image Size"
+msgid "Blend Mode"
 msgstr ""
 
 #: dist/translation-strings.php:1230
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Force square image"
+msgid "All Block Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1231
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Blend Mode"
+msgid "Free Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1232
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "All Block Designs"
+msgid "Premium Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1233
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Free Designs"
+msgctxt "name"
+msgid "%s Link"
 msgstr ""
 
 #: dist/translation-strings.php:1234
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Premium Designs"
+msgid "Align Top"
 msgstr ""
 
 #: dist/translation-strings.php:1235
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgctxt "name"
-msgid "%s Link"
+msgid "Align Bottom"
 msgstr ""
 
 #: dist/translation-strings.php:1236
@@ -6545,31 +6545,31 @@ msgstr ""
 #: dist/translation-strings.php:1241
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Column Spacing & More"
+msgid "Block Spacing"
 msgstr ""
 
 #: dist/translation-strings.php:1242
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Spacing"
+msgid "Min. Block Height"
 msgstr ""
 
 #: dist/translation-strings.php:1243
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Min. Block Height"
+msgid "Block Margins"
 msgstr ""
 
 #: dist/translation-strings.php:1244
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Margins"
+msgid "Block Paddings"
 msgstr ""
 
 #: dist/translation-strings.php:1245
 #: dist/deprecated/editor_blocks_deprecated_v2.js:2
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-msgid "Block Paddings"
+msgid "Column Spacing & More"
 msgstr ""
 
 #: dist/translation-strings.php:1246
@@ -6666,84 +6666,67 @@ msgid "Star"
 msgstr ""
 
 #: dist/translation-strings.php:1262
-#: pro__premium_only/src/dynamic-content/sources/acf.php:249
-#: pro__premium_only/src/dynamic-content/sources/jetengine.php:315
-#: pro__premium_only/src/dynamic-content/sources/jetengine.php:325
-#: pro__premium_only/src/dynamic-content/sources/latest-post.php:284
-#: pro__premium_only/src/dynamic-content/sources/metabox.php:329
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:114
-msgid "%s Placeholder"
-msgstr ""
-
-#: dist/translation-strings.php:1263
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:115
-msgid "Placeholder"
-msgstr ""
-
-#: dist/translation-strings.php:1264
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:9
 msgid "Login Status"
 msgstr ""
 
-#: dist/translation-strings.php:1265
+#: dist/translation-strings.php:1263
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:10
 msgid "Role"
 msgstr ""
 
-#: dist/translation-strings.php:1266
+#: dist/translation-strings.php:1264
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:11
 msgid "Date & Time"
 msgstr ""
 
-#: dist/translation-strings.php:1267
+#: dist/translation-strings.php:1265
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:12
 msgid "Custom PHP"
 msgstr ""
 
-#: dist/translation-strings.php:1268
+#: dist/translation-strings.php:1266
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:13
 msgid "Conditional Tag"
 msgstr ""
 
-#: dist/translation-strings.php:1269
+#: dist/translation-strings.php:1267
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:14
 msgid "Query String"
 msgstr ""
 
-#: dist/translation-strings.php:1270
+#: dist/translation-strings.php:1268
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:15
 msgid "Post Meta"
 msgstr ""
 
-#: dist/translation-strings.php:1271
+#: dist/translation-strings.php:1269
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:16
 msgid "Site Option"
 msgstr ""
 
-#: dist/translation-strings.php:1272
+#: dist/translation-strings.php:1270
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:17
 msgid "Post IDs"
 msgstr ""
 
-#: dist/translation-strings.php:1273
+#: dist/translation-strings.php:1271
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:235
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:19
 msgid "Post Taxonomy"
 msgstr ""
 
-#: dist/translation-strings.php:1274
+#: dist/translation-strings.php:1272
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:92
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:102
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:109
@@ -6776,541 +6759,558 @@ msgstr ""
 msgid "WooCommerce"
 msgstr ""
 
-#: dist/translation-strings.php:1275
+#: dist/translation-strings.php:1273
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:21
 msgid "Enter Conditional Tag"
 msgstr ""
 
-#: dist/translation-strings.php:1276
+#: dist/translation-strings.php:1274
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:22
 msgid "Home"
 msgstr ""
 
-#: dist/translation-strings.php:1277
+#: dist/translation-strings.php:1275
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:23
 msgid "Front Page"
 msgstr ""
 
-#: dist/translation-strings.php:1278
+#: dist/translation-strings.php:1276
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:24
 msgid "404 Not Found Page"
 msgstr ""
 
-#: dist/translation-strings.php:1279
+#: dist/translation-strings.php:1277
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:25
 msgid "Single Page"
 msgstr ""
 
-#: dist/translation-strings.php:1280
+#: dist/translation-strings.php:1278
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:26
 msgid "Attachment"
 msgstr ""
 
-#: dist/translation-strings.php:1281
+#: dist/translation-strings.php:1279
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:27
 msgid "Preview"
 msgstr ""
 
-#: dist/translation-strings.php:1282
+#: dist/translation-strings.php:1280
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:28
 msgid "Any Page"
 msgstr ""
 
-#: dist/translation-strings.php:1283
+#: dist/translation-strings.php:1281
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:29
 msgid "Privacy Policy Page"
 msgstr ""
 
-#: dist/translation-strings.php:1284
+#: dist/translation-strings.php:1282
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:30
 msgid "Any Archive Page"
 msgstr ""
 
-#: dist/translation-strings.php:1285
+#: dist/translation-strings.php:1283
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:31
 msgid "Category Page"
 msgstr ""
 
-#: dist/translation-strings.php:1286
+#: dist/translation-strings.php:1284
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:32
 msgid "Tag Page"
 msgstr ""
 
-#: dist/translation-strings.php:1287
+#: dist/translation-strings.php:1285
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:33
 msgid "Taxonomy Page"
 msgstr ""
 
-#: dist/translation-strings.php:1288
+#: dist/translation-strings.php:1286
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:34
 msgid "Author Page"
 msgstr ""
 
-#: dist/translation-strings.php:1289
+#: dist/translation-strings.php:1287
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:35
 msgid "Date Archive Page"
 msgstr ""
 
-#: dist/translation-strings.php:1290
+#: dist/translation-strings.php:1288
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:36
 msgid "Yearly Archive Page"
 msgstr ""
 
-#: dist/translation-strings.php:1291
+#: dist/translation-strings.php:1289
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:37
 msgid "Search Result Page"
 msgstr ""
 
-#: dist/translation-strings.php:1292
+#: dist/translation-strings.php:1290
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:38
 msgid "Trackback"
 msgstr ""
 
-#: dist/translation-strings.php:1293
+#: dist/translation-strings.php:1291
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:39
 msgid "Dynamic Sidebar"
 msgstr ""
 
-#: dist/translation-strings.php:1294
+#: dist/translation-strings.php:1292
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:40
 msgid "RTL Reading"
 msgstr ""
 
-#: dist/translation-strings.php:1295
+#: dist/translation-strings.php:1293
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:41
 msgid "Multisite"
 msgstr ""
 
-#: dist/translation-strings.php:1296
+#: dist/translation-strings.php:1294
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:42
 msgid "Main Site"
 msgstr ""
 
-#: dist/translation-strings.php:1297
+#: dist/translation-strings.php:1295
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:43
 msgid "Child Theme"
 msgstr ""
 
-#: dist/translation-strings.php:1298
+#: dist/translation-strings.php:1296
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:44
 msgid "Customize Preview"
 msgstr ""
 
-#: dist/translation-strings.php:1299
+#: dist/translation-strings.php:1297
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:45
 msgid "Multi-author Site"
 msgstr ""
 
-#: dist/translation-strings.php:1300
+#: dist/translation-strings.php:1298
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:46
 msgid "Feed"
 msgstr ""
 
-#: dist/translation-strings.php:1301
+#: dist/translation-strings.php:1299
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:47
 msgid "Sticky Post"
 msgstr ""
 
-#: dist/translation-strings.php:1302
+#: dist/translation-strings.php:1300
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:48
 msgid "Hierarchical Post Type"
 msgstr ""
 
-#: dist/translation-strings.php:1303
+#: dist/translation-strings.php:1301
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:49
 msgid "Archive Post Type"
 msgstr ""
 
-#: dist/translation-strings.php:1304
+#: dist/translation-strings.php:1302
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:50
 msgid "Comments Open"
 msgstr ""
 
-#: dist/translation-strings.php:1305
+#: dist/translation-strings.php:1303
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:51
 msgid "Pings Open"
 msgstr ""
 
-#: dist/translation-strings.php:1306
+#: dist/translation-strings.php:1304
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:52
 msgid "Has Excerpt"
 msgstr ""
 
-#: dist/translation-strings.php:1307
+#: dist/translation-strings.php:1305
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:53
 msgid "Has Post Thumbnail"
 msgstr ""
 
-#: dist/translation-strings.php:1308
+#: dist/translation-strings.php:1306
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:54
 msgid "Has Tags"
 msgstr ""
 
-#: dist/translation-strings.php:1309
+#: dist/translation-strings.php:1307
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:55
 msgid "Has Terms"
 msgstr ""
 
-#: dist/translation-strings.php:1310
+#: dist/translation-strings.php:1308
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:56
 msgid "Has Primary Nav Menu"
 msgstr ""
 
-#: dist/translation-strings.php:1311
+#: dist/translation-strings.php:1309
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:57
 msgid "The Custom PHP allows you to configure the block’s visibility based on the expression entered. If the expression evaluates to true, the block will be displayed."
 msgstr ""
 
-#: dist/translation-strings.php:1312
+#: dist/translation-strings.php:1310
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:58
 msgid "Sample PHP code:"
 msgstr ""
 
-#: dist/translation-strings.php:1313
+#: dist/translation-strings.php:1311
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:59
 msgid "If a syntax error is present, check your PHP code"
 msgstr ""
 
-#: dist/translation-strings.php:1314
+#: dist/translation-strings.php:1312
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:62
 msgid "Now"
 msgstr ""
 
-#: dist/translation-strings.php:1315
+#: dist/translation-strings.php:1313
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:64
 msgid "Never"
 msgstr ""
 
-#: dist/translation-strings.php:1316
+#: dist/translation-strings.php:1314
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:65
 msgid "Days of the Week"
 msgstr ""
 
-#: dist/translation-strings.php:1317
+#: dist/translation-strings.php:1315
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:66
 msgid "If set, the block will be displayed / hidden on selected days."
 msgstr ""
 
-#: dist/translation-strings.php:1318
+#: dist/translation-strings.php:1316
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:67
 msgid "Sunday"
 msgstr ""
 
-#: dist/translation-strings.php:1319
+#: dist/translation-strings.php:1317
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:68
 msgid "Monday"
 msgstr ""
 
-#: dist/translation-strings.php:1320
+#: dist/translation-strings.php:1318
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:69
 msgid "Tuesday"
 msgstr ""
 
-#: dist/translation-strings.php:1321
+#: dist/translation-strings.php:1319
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:70
 msgid "Wednesday"
 msgstr ""
 
-#: dist/translation-strings.php:1322
+#: dist/translation-strings.php:1320
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:71
 msgid "Thursday"
 msgstr ""
 
-#: dist/translation-strings.php:1323
+#: dist/translation-strings.php:1321
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:72
 msgid "Friday"
 msgstr ""
 
-#: dist/translation-strings.php:1324
+#: dist/translation-strings.php:1322
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:73
 msgid "Saturday"
 msgstr ""
 
-#: dist/translation-strings.php:1325
+#: dist/translation-strings.php:1323
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:75
 msgid "Logged-In Users"
 msgstr ""
 
-#: dist/translation-strings.php:1326
+#: dist/translation-strings.php:1324
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:76
 msgid "Logged-Out Users"
 msgstr ""
 
-#: dist/translation-strings.php:1327
+#: dist/translation-strings.php:1325
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:77
 msgid "Enter Post IDs"
 msgstr ""
 
-#: dist/translation-strings.php:1328
+#: dist/translation-strings.php:1326
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:78
 msgid "Post Meta Key"
 msgstr ""
 
-#: dist/translation-strings.php:1329
+#: dist/translation-strings.php:1327
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:79
 msgid "Operator"
 msgstr ""
 
-#: dist/translation-strings.php:1330
+#: dist/translation-strings.php:1328
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:80
 msgid "True"
 msgstr ""
 
-#: dist/translation-strings.php:1331
+#: dist/translation-strings.php:1329
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:81
 msgid "False"
 msgstr ""
 
-#: dist/translation-strings.php:1332
+#: dist/translation-strings.php:1330
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:82
 msgid "Equal"
 msgstr ""
 
-#: dist/translation-strings.php:1333
+#: dist/translation-strings.php:1331
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:83
 msgid "Not Equal"
 msgstr ""
 
-#: dist/translation-strings.php:1334
+#: dist/translation-strings.php:1332
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:84
 msgid "Less Than"
 msgstr ""
 
-#: dist/translation-strings.php:1335
+#: dist/translation-strings.php:1333
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:85
 msgid "Less Than & Equal To"
 msgstr ""
 
-#: dist/translation-strings.php:1336
+#: dist/translation-strings.php:1334
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:86
 msgid "Greater Than"
 msgstr ""
 
-#: dist/translation-strings.php:1337
+#: dist/translation-strings.php:1335
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:87
 msgid "Greater Than & Equal To"
 msgstr ""
 
-#: dist/translation-strings.php:1338
+#: dist/translation-strings.php:1336
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:88
 msgid "Contains"
 msgstr ""
 
-#: dist/translation-strings.php:1339
+#: dist/translation-strings.php:1337
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:89
 msgid "Does Not Contain"
 msgstr ""
 
-#: dist/translation-strings.php:1340
+#: dist/translation-strings.php:1338
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:90
 msgid "Regular Expression"
 msgstr ""
 
-#: dist/translation-strings.php:1341
+#: dist/translation-strings.php:1339
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:91
 msgid "Enter Value"
 msgstr ""
 
-#: dist/translation-strings.php:1342
+#: dist/translation-strings.php:1340
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:92
 msgid "Value to compare with the post meta value."
 msgstr ""
 
-#: dist/translation-strings.php:1343
+#: dist/translation-strings.php:1341
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:93
 msgid "Enter Post Types"
 msgstr ""
 
-#: dist/translation-strings.php:1344
+#: dist/translation-strings.php:1342
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:94
 msgid "Enter Queries"
 msgstr ""
 
-#: dist/translation-strings.php:1345
+#: dist/translation-strings.php:1343
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:95
 msgid "Enter one query string per line. The block will be displayed / hidden if any of the query strings match."
 msgstr ""
 
-#: dist/translation-strings.php:1346
+#: dist/translation-strings.php:1344
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:96
 msgid "Enter Role"
 msgstr ""
 
-#: dist/translation-strings.php:1347
+#: dist/translation-strings.php:1345
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:97
 msgid "Option Name"
 msgstr ""
 
-#: dist/translation-strings.php:1348
+#: dist/translation-strings.php:1346
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:98
 msgid "Value to compare with the option value."
 msgstr ""
 
-#: dist/translation-strings.php:1349
+#: dist/translation-strings.php:1347
 #: pro__premium_only/src/dynamic-content/sources/current-page.php:31
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:99
 msgid "Current Post"
 msgstr ""
 
-#: dist/translation-strings.php:1350
+#: dist/translation-strings.php:1348
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:100
 msgid "Choose Product"
 msgstr ""
 
-#: dist/translation-strings.php:1351
+#: dist/translation-strings.php:1349
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:101
 msgid "Property"
 msgstr ""
 
-#: dist/translation-strings.php:1352
+#: dist/translation-strings.php:1350
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:102
 msgid "Sales"
 msgstr ""
 
-#: dist/translation-strings.php:1353
+#: dist/translation-strings.php:1351
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:103
 msgid "Stock Quantity"
 msgstr ""
 
-#: dist/translation-strings.php:1354
+#: dist/translation-strings.php:1352
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:104
 msgid "Is Downloadable"
 msgstr ""
 
-#: dist/translation-strings.php:1355
+#: dist/translation-strings.php:1353
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:105
 msgid "Is Featured"
 msgstr ""
 
-#: dist/translation-strings.php:1356
+#: dist/translation-strings.php:1354
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:106
 msgid "Is in Stock"
 msgstr ""
 
-#: dist/translation-strings.php:1357
+#: dist/translation-strings.php:1355
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:107
 msgid "Is on Backorder"
 msgstr ""
 
-#: dist/translation-strings.php:1358
+#: dist/translation-strings.php:1356
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:108
 msgid "Is on Sale"
 msgstr ""
 
-#: dist/translation-strings.php:1359
+#: dist/translation-strings.php:1357
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:109
 msgid "Is Purchasable"
 msgstr ""
 
-#: dist/translation-strings.php:1360
+#: dist/translation-strings.php:1358
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:110
 msgid "Is Shipping Taxable"
 msgstr ""
 
-#: dist/translation-strings.php:1361
+#: dist/translation-strings.php:1359
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:111
 msgid "Is Sold Individually"
 msgstr ""
 
-#: dist/translation-strings.php:1362
+#: dist/translation-strings.php:1360
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:112
 msgid "Is Taxable"
 msgstr ""
 
-#: dist/translation-strings.php:1363
+#: dist/translation-strings.php:1361
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:113
 msgid "Value"
 msgstr ""
 
+#: dist/translation-strings.php:1362
+#: pro__premium_only/src/dynamic-content/sources/acf.php:249
+#: pro__premium_only/src/dynamic-content/sources/jetengine.php:315
+#: pro__premium_only/src/dynamic-content/sources/jetengine.php:325
+#: pro__premium_only/src/dynamic-content/sources/latest-post.php:284
+#: pro__premium_only/src/dynamic-content/sources/metabox.php:329
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:114
+msgid "%s Placeholder"
+msgstr ""
+
+#: dist/translation-strings.php:1363
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:115
+msgid "Placeholder"
+msgstr ""
+
 #: dist/translation-strings.php:1364
 #: dist/admin_welcome__premium_only.js:2
 #: dist/translation-strings.js:116
@@ -7403,810 +7403,792 @@ msgstr ""
 
 #: dist/translation-strings.php:1379
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:154
-msgid "Offset your posts by a specific number of items."
+#: dist/translation-strings.js:246
+msgid "URL Query String"
 msgstr ""
 
 #: dist/translation-strings.php:1380
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:155
-msgid "Exclude Post IDs"
+#: dist/translation-strings.js:247
+msgid "This is the string appended to the URL when changing pages."
 msgstr ""
 
 #: dist/translation-strings.php:1381
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:156
-msgid "Excludes specific IDs from the display. Enter post IDs separated by a commas"
+#: dist/translation-strings.js:248
+msgid "Show Next & Previous Button"
 msgstr ""
 
 #: dist/translation-strings.php:1382
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:157
-msgid "Hide the current post"
+#: dist/translation-strings.js:249
+msgid "Next Label"
 msgstr ""
 
 #: dist/translation-strings.php:1383
+#: pro__premium_only/src/block/pagination/index.php:74
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:158
-msgid "Removes the current post from the posts list"
+#: dist/translation-strings.js:250
+msgid "Next"
 msgstr ""
 
 #: dist/translation-strings.php:1384
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:159
-msgid "Display Specific Post IDs"
+#: dist/translation-strings.js:251
+msgid "Previous Label"
 msgstr ""
 
 #: dist/translation-strings.php:1385
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: pro__premium_only/src/block/pagination/index.php:73
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:160
-msgid "Limit display to only these specific IDs. Enter post IDs separated by a commas"
+#: dist/translation-strings.js:252
+msgid "Previous"
 msgstr ""
 
 #: dist/translation-strings.php:1386
+#: pro__premium_only/src/block/pagination/index.php:278
+#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:198
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:161
-msgid "Sale"
+#: dist/translation-strings.js:253
+msgid "Previous page"
 msgstr ""
 
 #: dist/translation-strings.php:1387
+#: pro__premium_only/src/block/pagination/index.php:299
+#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:219
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:166
-msgid "Layer %s"
+#: dist/translation-strings.js:254
+msgid "Page %s"
 msgstr ""
 
 #: dist/translation-strings.php:1388
+#: pro__premium_only/src/block/pagination/index.php:324
+#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:244
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:168
-msgid "Layer Height"
+#: dist/translation-strings.js:255
+msgid "Next page"
 msgstr ""
 
 #: dist/translation-strings.php:1389
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:169
-msgid "Layer Width"
+#: dist/translation-strings.js:244
+msgid "Number of Items"
 msgstr ""
 
 #: dist/translation-strings.php:1390
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:172
-msgid "Layer Opacity"
+#: dist/translation-strings.js:264
+msgid "Sale"
 msgstr ""
 
 #: dist/translation-strings.php:1391
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:173
-msgid "Adjusts the transparency of the separator layer"
+#: dist/translation-strings.js:269
+msgid "Layer %s"
 msgstr ""
 
 #: dist/translation-strings.php:1392
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:174
-msgid "Layer Blend mode"
+#: dist/translation-strings.js:201
+msgid "Layer Height"
 msgstr ""
 
 #: dist/translation-strings.php:1393
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:175
-msgid "Sets how the sepator layer is blended into the background"
+#: dist/translation-strings.js:202
+msgid "Layer Width"
 msgstr ""
 
 #: dist/translation-strings.php:1394
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:208
-msgid "Delete Condition"
+#: dist/translation-strings.js:270
+msgid "Layer Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1395
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:209
-msgid "Deleting will remove this condition for the block. Proceed?"
+#: dist/translation-strings.js:271
+msgid "Adjusts the transparency of the separator layer"
 msgstr ""
 
 #: dist/translation-strings.php:1396
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:210
-msgid "Delete"
+#: dist/translation-strings.js:204
+msgid "Layer Blend mode"
 msgstr ""
 
 #: dist/translation-strings.php:1397
-#: dist/admin_custom_fields__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:211
-msgid "Cancel"
+#: dist/translation-strings.js:205
+msgid "Sets how the sepator layer is blended into the background"
 msgstr ""
 
 #: dist/translation-strings.php:1398
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:212
-msgid "Condition Type"
+#: dist/translation-strings.js:133
+msgid "Delete Condition"
 msgstr ""
 
 #: dist/translation-strings.php:1399
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:213
-msgid "Visibility"
+#: dist/translation-strings.js:134
+msgid "Deleting will remove this condition for the block. Proceed?"
 msgstr ""
 
 #: dist/translation-strings.php:1400
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:214
-msgid "Show on condition match"
+#: dist/translation-strings.js:135
+msgid "Delete"
 msgstr ""
 
 #: dist/translation-strings.php:1401
+#: dist/admin_custom_fields__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:215
-msgid "Hide on condition match"
+#: dist/translation-strings.js:136
+msgid "Cancel"
 msgstr ""
 
 #: dist/translation-strings.php:1402
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:216
-msgid "No conditions yet. Add your first condition."
+#: dist/translation-strings.js:137
+msgid "Condition Type"
 msgstr ""
 
-#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1403
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:218
-msgid "OR"
+#: dist/translation-strings.js:138
+msgid "Visibility"
 msgstr ""
 
-#. translators: This is the separator between conditions: OR / AND.
-#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1404
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:220
-msgid "AND"
+#: dist/translation-strings.js:139
+msgid "Show on condition match"
 msgstr ""
 
-#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1405
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:221
-msgid "Trigger if ANY condition matches"
+#: dist/translation-strings.js:140
+msgid "Hide on condition match"
 msgstr ""
 
 #: dist/translation-strings.php:1406
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:222
-msgid "Trigger if ALL conditions match"
+#: dist/translation-strings.js:141
+msgid "No conditions yet. Add your first condition."
 msgstr ""
 
+#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1407
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:223
-msgid "Add New"
+#: dist/translation-strings.js:143
+msgid "OR"
 msgstr ""
 
+#. translators: This is the separator between conditions: OR / AND.
+#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1408
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:224
-msgid "Add New Condition"
+#: dist/translation-strings.js:145
+msgid "AND"
 msgstr ""
 
+#. translators: This is the separator between conditions: OR / AND.
 #: dist/translation-strings.php:1409
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:225
-msgid "Learn more about Conditional Display"
+#: dist/translation-strings.js:146
+msgid "Trigger if ANY condition matches"
 msgstr ""
 
 #: dist/translation-strings.php:1410
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:179
-msgid "You can use this area to further customize your block. Any custom CSS added here will only affect this block."
+#: dist/translation-strings.js:147
+msgid "Trigger if ALL conditions match"
 msgstr ""
 
 #: dist/translation-strings.php:1411
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:180
-msgid "Media queries are supported. Use the widths 1024px and 768px for tablet and mobile breakpoints."
+#: dist/translation-strings.js:148
+msgid "Add New"
 msgstr ""
 
 #: dist/translation-strings.php:1412
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:184
-msgid "Rotate"
+#: dist/translation-strings.js:149
+msgid "Add New Condition"
 msgstr ""
 
 #: dist/translation-strings.php:1413
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:185
-msgid "Effect"
+#: dist/translation-strings.js:150
+msgid "Learn more about Conditional Display"
 msgstr ""
 
 #: dist/translation-strings.php:1414
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:186
-msgid "Entrance Animation"
+#: dist/translation-strings.js:152
+msgid "You can use this area to further customize your block. Any custom CSS added here will only affect this block."
 msgstr ""
 
 #: dist/translation-strings.php:1415
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:187
-msgid "Scroll Animation"
+#: dist/translation-strings.js:153
+msgid "Media queries are supported. Use the widths 1024px and 768px for tablet and mobile breakpoints."
 msgstr ""
 
 #: dist/translation-strings.php:1416
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:188
-msgid "Start Position"
+#: dist/translation-strings.js:186
+msgid "Shape Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1417
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:189
-msgid "Entrance Animation Speed"
+#: dist/translation-strings.js:190
+msgid "Icon Color #%s"
 msgstr ""
 
 #: dist/translation-strings.php:1418
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:190
-msgid "Slow"
+#: dist/translation-strings.js:194
+msgid "Multicolor only works for custom uploaded icons that have multiple path elements or for Font Awesome Pro Duotones."
 msgstr ""
 
 #: dist/translation-strings.php:1419
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:192
-msgid "Fast"
+#: dist/translation-strings.js:199
+msgid "Separator Layer %s"
 msgstr ""
 
 #: dist/translation-strings.php:1420
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:193
-msgid "Entrance Animation Delay"
+#: dist/translation-strings.js:157
+msgid "Rotate"
 msgstr ""
 
 #: dist/translation-strings.php:1421
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:194
-msgid "Smoothen Scroll Animation"
+#: dist/translation-strings.js:158
+msgid "Effect"
 msgstr ""
 
 #: dist/translation-strings.php:1422
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:195
-msgid "Use 3D Transforms"
+#: dist/translation-strings.js:159
+msgid "Entrance Animation"
 msgstr ""
 
 #: dist/translation-strings.php:1423
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:196
-msgid "Perspective"
+#: dist/translation-strings.js:160
+msgid "Scroll Animation"
 msgstr ""
 
 #: dist/translation-strings.php:1424
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:197
-msgid "Exit Animation"
+#: dist/translation-strings.js:161
+msgid "Start Position"
 msgstr ""
 
 #: dist/translation-strings.php:1425
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:198
-msgid "This block has Transforms assigned to it, Motion Effects may not work as expected."
+#: dist/translation-strings.js:162
+msgid "Entrance Animation Speed"
 msgstr ""
 
 #: dist/translation-strings.php:1426
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:199
-msgid "Learn more about Motion Effects"
+#: dist/translation-strings.js:163
+msgid "Slow"
 msgstr ""
 
 #: dist/translation-strings.php:1427
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:200
-msgid "Translate X"
+#: dist/translation-strings.js:165
+msgid "Fast"
 msgstr ""
 
 #: dist/translation-strings.php:1428
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:201
-msgid "TranslateY"
+#: dist/translation-strings.js:166
+msgid "Entrance Animation Delay"
 msgstr ""
 
 #: dist/translation-strings.php:1429
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:202
-msgid "TranslateZ"
+#: dist/translation-strings.js:167
+msgid "Smoothen Scroll Animation"
 msgstr ""
 
 #: dist/translation-strings.php:1430
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:203
-msgid "RotateX"
+#: dist/translation-strings.js:168
+msgid "Use 3D Transforms"
 msgstr ""
 
 #: dist/translation-strings.php:1431
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:204
-msgid "RotateY"
+#: dist/translation-strings.js:169
+msgid "Perspective"
 msgstr ""
 
 #: dist/translation-strings.php:1432
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:206
-msgid "Skew X"
+#: dist/translation-strings.js:170
+msgid "Exit Animation"
 msgstr ""
 
 #: dist/translation-strings.php:1433
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:207
-msgid "Skew Y"
+#: dist/translation-strings.js:171
+msgid "This block has Transforms assigned to it, Motion Effects may not work as expected."
 msgstr ""
 
 #: dist/translation-strings.php:1434
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:143
-msgid "URL Query String"
+#: dist/translation-strings.js:172
+msgid "Learn more about Motion Effects"
 msgstr ""
 
 #: dist/translation-strings.php:1435
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:144
-msgid "This is the string appended to the URL when changing pages."
+#: dist/translation-strings.js:174
+msgid "Translate X"
 msgstr ""
 
 #: dist/translation-strings.php:1436
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:145
-msgid "Show Next & Previous Button"
+#: dist/translation-strings.js:175
+msgid "TranslateY"
 msgstr ""
 
 #: dist/translation-strings.php:1437
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:146
-msgid "Next Label"
+#: dist/translation-strings.js:176
+msgid "TranslateZ"
 msgstr ""
 
 #: dist/translation-strings.php:1438
-#: pro__premium_only/src/block/pagination/index.php:74
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:147
-msgid "Next"
+#: dist/translation-strings.js:177
+msgid "RotateX"
 msgstr ""
 
 #: dist/translation-strings.php:1439
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:148
-msgid "Previous Label"
+#: dist/translation-strings.js:178
+msgid "RotateY"
 msgstr ""
 
 #: dist/translation-strings.php:1440
-#: pro__premium_only/src/block/pagination/index.php:73
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:149
-msgid "Previous"
+#: dist/translation-strings.js:180
+msgid "Skew X"
 msgstr ""
 
 #: dist/translation-strings.php:1441
-#: pro__premium_only/src/block/pagination/index.php:278
-#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:198
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:150
-msgid "Previous page"
+#: dist/translation-strings.js:181
+msgid "Skew Y"
 msgstr ""
 
 #: dist/translation-strings.php:1442
-#: pro__premium_only/src/block/pagination/index.php:299
-#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:219
-#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:151
-msgid "Page %s"
+#: dist/translation-strings.js:257
+msgid "Offset your posts by a specific number of items."
 msgstr ""
 
 #: dist/translation-strings.php:1443
-#: pro__premium_only/src/block/pagination/index.php:324
-#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:244
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:152
-msgid "Next page"
+#: dist/translation-strings.js:258
+msgid "Exclude Post IDs"
 msgstr ""
 
 #: dist/translation-strings.php:1444
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:231
-msgid "Shape Opacity"
+#: dist/translation-strings.js:259
+msgid "Excludes specific IDs from the display. Enter post IDs separated by a commas"
 msgstr ""
 
 #: dist/translation-strings.php:1445
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:235
-msgid "Icon Color #%s"
+#: dist/translation-strings.js:260
+msgid "Hide the current post"
 msgstr ""
 
 #: dist/translation-strings.php:1446
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:239
-msgid "Multicolor only works for custom uploaded icons that have multiple path elements or for Font Awesome Pro Duotones."
+#: dist/translation-strings.js:261
+msgid "Removes the current post from the posts list"
 msgstr ""
 
 #: dist/translation-strings.php:1447
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:226
-msgid "Separator Layer %s"
+#: dist/translation-strings.js:262
+msgid "Display Specific Post IDs"
 msgstr ""
 
 #: dist/translation-strings.php:1448
-#: dist/translation-strings.js:274
-msgid "No saved designs yet"
+#: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:263
+msgid "Limit display to only these specific IDs. Enter post IDs separated by a commas"
 msgstr ""
 
 #: dist/translation-strings.php:1449
-#: dist/translation-strings.js:275
-msgid "Click here to save your block's design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:206
+msgid "Transition Duration (secs)"
 msgstr ""
 
 #: dist/translation-strings.php:1450
-#: dist/translation-strings.js:276
-msgid "Error Getting Designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:207
+msgid "Transition Function"
 msgstr ""
 
 #: dist/translation-strings.php:1451
-#: dist/translation-strings.js:277
-msgid "Click here to retry fetching your saved designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:209
+msgid "Ease"
 msgstr ""
 
 #: dist/translation-strings.php:1452
-#: dist/translation-strings.js:278
-msgid "Save as new block design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:210
+msgid "Ease In"
 msgstr ""
 
 #: dist/translation-strings.php:1453
-#: dist/translation-strings.js:279
-msgid "Manage saved designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:211
+msgid "Ease Out"
 msgstr ""
 
 #: dist/translation-strings.php:1454
-#: dist/translation-strings.js:280
-msgid "(default)"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:212
+msgid "Ease In Out"
 msgstr ""
 
 #: dist/translation-strings.php:1455
-#: dist/translation-strings.js:281
-msgid "Favorite"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:213
+msgid "Linear"
 msgstr ""
 
 #: dist/translation-strings.php:1456
-#: dist/translation-strings.js:282
-msgid "Save Changes"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:214
+msgid "Ease In Quad"
 msgstr ""
 
 #: dist/translation-strings.php:1457
-#: dist/translation-strings.js:283
-msgid "Saved Block Designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:215
+msgid "Ease Out Quad"
 msgstr ""
 
 #: dist/translation-strings.php:1458
-#: dist/translation-strings.js:284
-msgid "Save designs to reuse them across your site. Note that using saved designs will override your current block settings."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:216
+msgid "Ease In Out Quad"
 msgstr ""
 
 #: dist/translation-strings.php:1459
-#: dist/translation-strings.js:285
-msgid "You have unsaved changes, discard them?"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:217
+msgid "Ease In Expo"
 msgstr ""
 
 #: dist/translation-strings.php:1460
-#: dist/translation-strings.js:286
-msgid "Manage Saved Designs"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:218
+msgid "Ease Out Expo"
 msgstr ""
 
 #: dist/translation-strings.php:1461
-#: dist/translation-strings.js:287
-msgid "Design Name"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:219
+msgid "Ease In Out Expo"
 msgstr ""
 
 #: dist/translation-strings.php:1462
-#: dist/translation-strings.js:288
-msgid "Set as a favorite design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:220
+msgid "Ease In Back"
 msgstr ""
 
 #: dist/translation-strings.php:1463
-#: dist/translation-strings.js:289
-msgid "Design name"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:221
+msgid "Ease Out Back"
 msgstr ""
 
 #: dist/translation-strings.php:1464
-#: dist/translation-strings.js:290
-msgid "Set as default block design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:222
+msgid "Ease In Out Back"
 msgstr ""
 
 #: dist/translation-strings.php:1465
-#: dist/translation-strings.js:291
-msgid "My Block Design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:224
+msgid "Transform Origin"
 msgstr ""
 
 #: dist/translation-strings.php:1466
-#: dist/translation-strings.js:292
-msgid "Save as New Block Design"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:234
+msgid "This block has Motion Effects assigned to it, applying transforms above may prevent the Motion Effects from working as expected."
 msgstr ""
 
 #: dist/translation-strings.php:1467
-#: dist/translation-strings.js:293
-msgid "Set as favorite"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:235
+msgid "Translate Y"
 msgstr ""
 
 #: dist/translation-strings.php:1468
-#: dist/translation-strings.js:294
-msgid "Place at the top of the list of saved designs"
+#: dist/translation-strings.js:274
+msgid "No saved designs yet"
 msgstr ""
 
 #: dist/translation-strings.php:1469
-#: dist/translation-strings.js:295
-msgid "New blocks created will use this design automatically"
+#: dist/translation-strings.js:275
+msgid "Click here to save your block's design"
 msgstr ""
 
 #: dist/translation-strings.php:1470
-#: dist/translation-strings.js:296
-msgid "Add New Design"
+#: dist/translation-strings.js:276
+msgid "Error Getting Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1471
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:244
-msgid "Transition Duration (secs)"
+#: dist/translation-strings.js:277
+msgid "Click here to retry fetching your saved designs"
 msgstr ""
 
 #: dist/translation-strings.php:1472
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:245
-msgid "Transition Function"
+#: dist/translation-strings.js:278
+msgid "Save as new block design"
 msgstr ""
 
 #: dist/translation-strings.php:1473
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:247
-msgid "Ease"
+#: dist/translation-strings.js:279
+msgid "Manage saved designs"
 msgstr ""
 
 #: dist/translation-strings.php:1474
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:248
-msgid "Ease In"
+#: dist/translation-strings.js:280
+msgid "(default)"
 msgstr ""
 
 #: dist/translation-strings.php:1475
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:249
-msgid "Ease Out"
+#: dist/translation-strings.js:281
+msgid "Favorite"
 msgstr ""
 
 #: dist/translation-strings.php:1476
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:250
-msgid "Ease In Out"
+#: dist/translation-strings.js:282
+msgid "Save Changes"
 msgstr ""
 
 #: dist/translation-strings.php:1477
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:251
-msgid "Linear"
+#: dist/translation-strings.js:283
+msgid "Saved Block Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1478
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:252
-msgid "Ease In Quad"
+#: dist/translation-strings.js:284
+msgid "Save designs to reuse them across your site. Note that using saved designs will override your current block settings."
 msgstr ""
 
 #: dist/translation-strings.php:1479
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:253
-msgid "Ease Out Quad"
+#: dist/translation-strings.js:285
+msgid "You have unsaved changes, discard them?"
 msgstr ""
 
 #: dist/translation-strings.php:1480
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:254
-msgid "Ease In Out Quad"
+#: dist/translation-strings.js:286
+msgid "Manage Saved Designs"
 msgstr ""
 
 #: dist/translation-strings.php:1481
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:255
-msgid "Ease In Expo"
+#: dist/translation-strings.js:287
+msgid "Design Name"
 msgstr ""
 
 #: dist/translation-strings.php:1482
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:256
-msgid "Ease Out Expo"
+#: dist/translation-strings.js:288
+msgid "Set as a favorite design"
 msgstr ""
 
 #: dist/translation-strings.php:1483
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:257
-msgid "Ease In Out Expo"
+#: dist/translation-strings.js:289
+msgid "Design name"
 msgstr ""
 
 #: dist/translation-strings.php:1484
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:258
-msgid "Ease In Back"
+#: dist/translation-strings.js:290
+msgid "Set as default block design"
 msgstr ""
 
 #: dist/translation-strings.php:1485
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:259
-msgid "Ease Out Back"
+#: dist/translation-strings.js:291
+msgid "My Block Design"
 msgstr ""
 
 #: dist/translation-strings.php:1486
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:260
-msgid "Ease In Out Back"
+#: dist/translation-strings.js:292
+msgid "Save as New Block Design"
 msgstr ""
 
 #: dist/translation-strings.php:1487
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:262
-msgid "Transform Origin"
+#: dist/translation-strings.js:293
+msgid "Set as favorite"
 msgstr ""
 
 #: dist/translation-strings.php:1488
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:272
-msgid "This block has Motion Effects assigned to it, applying transforms above may prevent the Motion Effects from working as expected."
+#: dist/translation-strings.js:294
+msgid "Place at the top of the list of saved designs"
 msgstr ""
 
 #: dist/translation-strings.php:1489
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:273
-msgid "Translate Y"
+#: dist/translation-strings.js:295
+msgid "New blocks created will use this design automatically"
 msgstr ""
 
 #: dist/translation-strings.php:1490
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:344
-msgid "Learn more how multicolor works"
+#: dist/translation-strings.js:296
+msgid "Add New Design"
 msgstr ""
 
 #: dist/translation-strings.php:1491
 #: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:345
-msgid "here"
-msgstr ""
-
-#: dist/translation-strings.php:1492
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:347
-msgid "Outline Color"
-msgstr ""
-
-#: dist/translation-strings.php:1493
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:348
-msgid "Icon Shape Color"
-msgstr ""
-
-#: dist/translation-strings.php:1494
-#: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:297
 msgid "Show as link"
 msgstr ""
 
-#: dist/translation-strings.php:1495
+#: dist/translation-strings.php:1492
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:298
 msgid "Custom Text"
 msgstr ""
 
-#: dist/translation-strings.php:1496
+#: dist/translation-strings.php:1493
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:300
 msgid "Date Format"
 msgstr ""
 
-#: dist/translation-strings.php:1497
+#: dist/translation-strings.php:1494
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:301
 msgid "Custom Format"
 msgstr ""
 
-#: dist/translation-strings.php:1498
+#: dist/translation-strings.php:1495
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:302
 msgid "Change the date format of your dynamic content."
 msgstr ""
 
-#: dist/translation-strings.php:1499
+#: dist/translation-strings.php:1496
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:303
 msgid "Learn more about date formats"
 msgstr ""
 
-#: dist/translation-strings.php:1500
+#: dist/translation-strings.php:1497
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:305
 msgid "Dynamic Source"
 msgstr ""
 
-#: dist/translation-strings.php:1501
+#: dist/translation-strings.php:1498
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:306
 msgid "Field"
 msgstr ""
 
-#: dist/translation-strings.php:1502
+#: dist/translation-strings.php:1499
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:307
 msgid "Learn how to use Dynamic Content"
 msgstr ""
 
-#: dist/translation-strings.php:1503
+#: dist/translation-strings.php:1500
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:308
 msgid "Apply"
 msgstr ""
 
-#: dist/translation-strings.php:1504
+#: dist/translation-strings.php:1501
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:311
 msgid "Add Custom Format"
 msgstr ""
 
-#: dist/translation-strings.php:1505
+#: dist/translation-strings.php:1502
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:312
 msgid "Content Format"
 msgstr ""
 
-#: dist/translation-strings.php:1506
+#: dist/translation-strings.php:1503
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:313
 msgid "Add your custom format by adding %s."
 msgstr ""
 
-#: dist/translation-strings.php:1507
+#: dist/translation-strings.php:1504
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:314
 msgid "Thumbnail"
 msgstr ""
 
-#: dist/translation-strings.php:1508
+#: dist/translation-strings.php:1505
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:318
 msgid "Image Quality"
 msgstr ""
 
-#: dist/translation-strings.php:1509
+#: dist/translation-strings.php:1506
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:320
 msgid "Text Field"
 msgstr ""
 
-#: dist/translation-strings.php:1510
+#: dist/translation-strings.php:1507
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:322
 msgid "Taxonomy Type"
 msgstr ""
 
-#: dist/translation-strings.php:1511
+#: dist/translation-strings.php:1508
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:323
 msgid "Display Option"
 msgstr ""
 
-#: dist/translation-strings.php:1512
+#: dist/translation-strings.php:1509
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:324
 msgid "All values"
 msgstr ""
 
-#: dist/translation-strings.php:1513
+#: dist/translation-strings.php:1510
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:325
 msgid "%s value"
@@ -8215,7 +8197,7 @@ msgstr ""
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1514
+#: dist/translation-strings.php:1511
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:59
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:102
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:230
@@ -8225,7 +8207,7 @@ msgid "1st"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1515
+#: dist/translation-strings.php:1512
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:107
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:231
 #: dist/editor_blocks__premium_only.js:2
@@ -8234,7 +8216,7 @@ msgid "2nd"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1516
+#: dist/translation-strings.php:1513
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:112
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:232
 #: dist/editor_blocks__premium_only.js:2
@@ -8243,7 +8225,7 @@ msgid "3rd"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1517
+#: dist/translation-strings.php:1514
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:117
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:233
 #: dist/editor_blocks__premium_only.js:2
@@ -8252,7 +8234,7 @@ msgid "4th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1518
+#: dist/translation-strings.php:1515
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:122
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:234
 #: dist/editor_blocks__premium_only.js:2
@@ -8261,7 +8243,7 @@ msgid "5th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1519
+#: dist/translation-strings.php:1516
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:127
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:235
 #: dist/editor_blocks__premium_only.js:2
@@ -8270,7 +8252,7 @@ msgid "6th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1520
+#: dist/translation-strings.php:1517
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:132
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:236
 #: dist/editor_blocks__premium_only.js:2
@@ -8279,7 +8261,7 @@ msgid "7th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1521
+#: dist/translation-strings.php:1518
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:137
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:237
 #: dist/editor_blocks__premium_only.js:2
@@ -8288,7 +8270,7 @@ msgid "8th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1522
+#: dist/translation-strings.php:1519
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:142
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:238
 #: dist/editor_blocks__premium_only.js:2
@@ -8297,7 +8279,7 @@ msgid "9th"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1523
+#: dist/translation-strings.php:1520
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:147
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:239
 #: dist/editor_blocks__premium_only.js:2
@@ -8305,456 +8287,474 @@ msgstr ""
 msgid "10th"
 msgstr ""
 
-#: dist/translation-strings.php:1524
+#: dist/translation-strings.php:1521
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:336
 msgid "Delimiter"
 msgstr ""
 
-#: dist/translation-strings.php:1525
+#: dist/translation-strings.php:1522
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:337
 msgid "Strip HTML tags"
 msgstr ""
 
-#: dist/translation-strings.php:1526
+#: dist/translation-strings.php:1523
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:338
 msgid "If this option is false, the content rendered in the editor will still be stripped to prevent an error from occuring"
 msgstr ""
 
-#: dist/translation-strings.php:1527
+#: dist/translation-strings.php:1524
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:339
 msgid "Display text when true"
 msgstr ""
 
-#: dist/translation-strings.php:1528
+#: dist/translation-strings.php:1525
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:340
 msgid "Display text when false"
 msgstr ""
 
-#: dist/translation-strings.php:1529
+#: dist/translation-strings.php:1526
+#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:89
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:341
+msgid "Fields"
+msgstr ""
+
+#: dist/translation-strings.php:1527
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:342
+msgid "Attributes"
+msgstr ""
+
+#: dist/translation-strings.php:1528
 #: src/welcome/index.php:259
 #: dist/editor_blocks__premium_only.js:2
 #: dist/translation-strings.js:350
 msgid "Dynamic Content"
 msgstr ""
 
+#: dist/translation-strings.php:1529
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:361
+msgid "Field cannot be empty"
+msgstr ""
+
 #: dist/translation-strings.php:1530
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:351
-msgid "Style copied successfully!"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:362
+msgid "Slug contains invalid characters"
 msgstr ""
 
 #: dist/translation-strings.php:1531
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:352
-msgid "Style pasted successfully!"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:363
+msgid "Slug must be unique"
 msgstr ""
 
 #: dist/translation-strings.php:1532
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:353
-msgid "Used to copy core/stackable block styles"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:364
+msgid "https://"
 msgstr ""
 
 #: dist/translation-strings.php:1533
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:354
-msgid "Used to paste core/stackable block styles"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:365
+msgid "Link title"
 msgstr ""
 
 #: dist/translation-strings.php:1534
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:355
-msgid "Adv Copy Styles"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:366
+msgid "Do you want to delete this field?"
 msgstr ""
 
 #: dist/translation-strings.php:1535
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:356
-msgid "Adv Paste Styles"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:367
+msgid "Add New Field"
 msgstr ""
 
 #: dist/translation-strings.php:1536
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:357
-msgid "Copy & paste styles"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:368
+msgid "Field Type"
 msgstr ""
 
 #: dist/translation-strings.php:1537
-#: pro__premium_only/src/welcome/custom-fields/custom-fields.php:89
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:341
-msgid "Fields"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:371
+msgid "Date"
 msgstr ""
 
 #: dist/translation-strings.php:1538
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:342
-msgid "Attributes"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:372
+msgid "Time"
 msgstr ""
 
 #: dist/translation-strings.php:1539
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:358
-msgid "Remove the selected block(s)."
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:373
+msgid "Url"
 msgstr ""
 
 #: dist/translation-strings.php:1540
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:359
-msgid "Content Editing mode is enabled"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:374
+msgid "Field Name"
 msgstr ""
 
 #: dist/translation-strings.php:1541
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:360
-msgid "To unlock Full Editing mode, please contact your administrator."
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:375
+msgid "Field Slug"
 msgstr ""
 
 #: dist/translation-strings.php:1542
-#: dist/editor_blocks__premium_only.js:2
-#: dist/translation-strings.js:141
-msgid "Number of Items"
+#: dist/admin_custom_fields__premium_only.js:2
+#: dist/translation-strings.js:376
+msgid "A unique string that will be used to identify this field. Must contain only letters, numbers, underscores and dashes."
 msgstr ""
 
 #: dist/translation-strings.php:1543
 #: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:361
-msgid "Field cannot be empty"
+#: dist/translation-strings.js:378
+msgid "Save field"
 msgstr ""
 
 #: dist/translation-strings.php:1544
 #: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:362
-msgid "Slug contains invalid characters"
+#: dist/translation-strings.js:379
+msgid "Add a custom field now to start exploring the possibilities."
 msgstr ""
 
 #: dist/translation-strings.php:1545
 #: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:363
-msgid "Slug must be unique"
+#: dist/translation-strings.js:380
+msgid "Add field"
 msgstr ""
 
 #: dist/translation-strings.php:1546
 #: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:364
-msgid "https://"
+#: dist/translation-strings.js:381
+msgid "You don't have any custom fields."
 msgstr ""
 
 #: dist/translation-strings.php:1547
 #: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:365
-msgid "Link title"
+#: dist/translation-strings.js:382
+msgid "Save changes"
 msgstr ""
 
 #: dist/translation-strings.php:1548
 #: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:366
-msgid "Do you want to delete this field?"
+#: dist/translation-strings.js:383
+msgid "You have unsaved changes"
 msgstr ""
 
 #: dist/translation-strings.php:1549
 #: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:367
-msgid "Add New Field"
+#: dist/translation-strings.js:384
+msgid "Error in saving content"
 msgstr ""
 
 #: dist/translation-strings.php:1550
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:368
-msgid "Field Type"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:351
+msgid "Style copied successfully!"
 msgstr ""
 
 #: dist/translation-strings.php:1551
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:371
-msgid "Date"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:352
+msgid "Style pasted successfully!"
 msgstr ""
 
 #: dist/translation-strings.php:1552
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:372
-msgid "Time"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:353
+msgid "Used to copy core/stackable block styles"
 msgstr ""
 
 #: dist/translation-strings.php:1553
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:373
-msgid "Url"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:354
+msgid "Used to paste core/stackable block styles"
 msgstr ""
 
 #: dist/translation-strings.php:1554
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:374
-msgid "Field Name"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:355
+msgid "Adv Copy Styles"
 msgstr ""
 
 #: dist/translation-strings.php:1555
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:375
-msgid "Field Slug"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:356
+msgid "Adv Paste Styles"
 msgstr ""
 
 #: dist/translation-strings.php:1556
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:376
-msgid "A unique string that will be used to identify this field. Must contain only letters, numbers, underscores and dashes."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:357
+msgid "Copy & paste styles"
 msgstr ""
 
 #: dist/translation-strings.php:1557
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:378
-msgid "Save field"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:344
+msgid "Learn more how multicolor works"
 msgstr ""
 
 #: dist/translation-strings.php:1558
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:379
-msgid "Add a custom field now to start exploring the possibilities."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:345
+msgid "here"
 msgstr ""
 
 #: dist/translation-strings.php:1559
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:380
-msgid "Add field"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:347
+msgid "Outline Color"
 msgstr ""
 
 #: dist/translation-strings.php:1560
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:381
-msgid "You don't have any custom fields."
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:348
+msgid "Icon Shape Color"
 msgstr ""
 
 #: dist/translation-strings.php:1561
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:382
-msgid "Save changes"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:358
+msgid "Remove the selected block(s)."
 msgstr ""
 
 #: dist/translation-strings.php:1562
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:383
-msgid "You have unsaved changes"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:359
+msgid "Content Editing mode is enabled"
 msgstr ""
 
 #: dist/translation-strings.php:1563
-#: dist/admin_custom_fields__premium_only.js:2
-#: dist/translation-strings.js:384
-msgid "Error in saving content"
+#: dist/editor_blocks__premium_only.js:2
+#: dist/translation-strings.js:360
+msgid "To unlock Full Editing mode, please contact your administrator."
 msgstr ""
 
 #: dist/translation-strings.php:1564
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:385
+#: dist/translation-strings.js:396
 msgid "Offset your posts by a specific number of items"
 msgstr ""
 
 #: dist/translation-strings.php:1565
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:389
+#: dist/translation-strings.js:400
 msgid "Show previous and next buttons"
 msgstr ""
 
 #: dist/translation-strings.php:1566
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:390
+#: dist/translation-strings.js:401
 msgid "Previous label"
 msgstr ""
 
 #: dist/translation-strings.php:1567
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:391
+#: dist/translation-strings.js:402
 msgid "Next label"
 msgstr ""
 
 #: dist/translation-strings.php:1568
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:392
+#: dist/translation-strings.js:403
 msgid "Hover & Active Opacity"
 msgstr ""
 
 #: dist/translation-strings.php:1569
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:393
+#: dist/translation-strings.js:404
 msgid "Hover & Active Colors"
 msgstr ""
 
 #: dist/translation-strings.php:1570
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:397
+#: dist/translation-strings.js:408
 msgid "Reverse columns"
 msgstr ""
 
 #: dist/translation-strings.php:1571
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:398
+#: dist/translation-strings.js:409
 msgid "Collapsed Row Gap"
 msgstr ""
 
 #: dist/translation-strings.php:1572
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:399
+#: dist/translation-strings.js:410
 msgid "Collapsed Col. Arrangement"
 msgstr ""
 
 #: dist/translation-strings.php:1573
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:405
+#: dist/translation-strings.js:416
 msgid "Collapse image on Mobile"
 msgstr ""
 
 #: dist/translation-strings.php:1574
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:406
+#: dist/translation-strings.js:417
 msgid "Collapse image height"
 msgstr ""
 
 #: dist/translation-strings.php:1575
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:408
+#: dist/translation-strings.js:419
 msgid "Override settings for column %d"
 msgstr ""
 
 #: dist/translation-strings.php:1576
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:409
+#: dist/translation-strings.js:420
 msgid "Column Background"
 msgstr ""
 
 #: dist/translation-strings.php:1577
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:411
+#: dist/translation-strings.js:422
 msgid "Tilt"
 msgstr ""
 
 #: dist/translation-strings.php:1578
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:412
+#: dist/translation-strings.js:423
 msgid "Zoom & Tilt"
 msgstr ""
 
 #: dist/translation-strings.php:1579
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:413
+#: dist/translation-strings.js:424
 msgid "Up"
 msgstr ""
 
 #: dist/translation-strings.php:1580
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:414
+#: dist/translation-strings.js:425
 msgid "Down"
 msgstr ""
 
 #: dist/translation-strings.php:1581
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:417
+#: dist/translation-strings.js:428
 msgid "Blur In"
 msgstr ""
 
 #: dist/translation-strings.php:1582
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:418
+#: dist/translation-strings.js:429
 msgid "Blur Out"
 msgstr ""
 
 #: dist/translation-strings.php:1583
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:419
+#: dist/translation-strings.js:430
 msgid "Grayscale In"
 msgstr ""
 
 #: dist/translation-strings.php:1584
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:420
+#: dist/translation-strings.js:431
 msgid "Grayscale Out"
 msgstr ""
 
 #: dist/translation-strings.php:1585
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:421
+#: dist/translation-strings.js:432
 msgid "Box Hover Effect"
 msgstr ""
 
 #: dist/translation-strings.php:1586
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:422
+#: dist/translation-strings.js:433
 msgid "Number Background"
 msgstr ""
 
 #: dist/translation-strings.php:1587
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:423
+#: dist/translation-strings.js:434
 msgid "Column Header"
 msgstr ""
 
 #: dist/translation-strings.php:1588
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:424
+#: dist/translation-strings.js:435
 msgctxt "Nth Title"
 msgid "%s #%d"
 msgstr ""
 
 #: dist/translation-strings.php:1589
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:427
+#: dist/translation-strings.js:438
 msgid "Layer Color"
 msgstr ""
 
 #: dist/translation-strings.php:1590
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:428
+#: dist/translation-strings.js:439
 msgid "Color on Hover"
 msgstr ""
 
 #: dist/translation-strings.php:1591
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:432
+#: dist/translation-strings.js:443
 msgid "Bubble Background"
 msgstr ""
 
 #: dist/translation-strings.php:1592
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:435
+#: dist/translation-strings.js:387
 msgid "%s More"
 msgstr ""
 
 #: dist/translation-strings.php:1593
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:436
+#: dist/translation-strings.js:388
 msgid "Lift w/ shadow"
 msgstr ""
 
 #: dist/translation-strings.php:1594
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:437
+#: dist/translation-strings.js:389
 msgid "Staggered lift"
 msgstr ""
 
 #: dist/translation-strings.php:1595
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:438
+#: dist/translation-strings.js:390
 msgid "Staggered lift w/ shadow"
 msgstr ""
 
 #: dist/translation-strings.php:1596
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:439
+#: dist/translation-strings.js:391
 msgid "Scale w/ shadow"
 msgstr ""
 
 #: dist/translation-strings.php:1597
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:440
+#: dist/translation-strings.js:392
 msgid "Lower"
 msgstr ""
 
 #: dist/translation-strings.php:1598
 #: dist/deprecated/editor_blocks_deprecated_v2__premium_only.js:2
-#: dist/translation-strings.js:441
+#: dist/translation-strings.js:393
 msgid "Grayscale Hover Effect"
 msgstr ""
 
@@ -8834,6 +8834,14 @@ msgid "Font Awesome icon version to server"
 msgstr ""
 
 #: dist/translation-strings.php:1613
+#: pro__premium_only/src/block/load-more/index.php:49
+#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:28
+#: src/custom-block-styles.php:157
+#: src/design-library/init.php:36
+msgid "%s must be a string."
+msgstr ""
+
+#: dist/translation-strings.php:1614
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:21
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:47
 #: src/deprecated/v2/disabled-blocks.php:62
@@ -8841,18 +8849,18 @@ msgstr ""
 msgid "Security error, please refresh the page and try again."
 msgstr ""
 
-#: dist/translation-strings.php:1614
+#: dist/translation-strings.php:1615
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:28
 #: pro__premium_only/src/components/panel-design-user-library/ajax.php:53
 msgid "Invalid arguments."
 msgstr ""
 
-#: dist/translation-strings.php:1615
+#: dist/translation-strings.php:1616
 #: pro__premium_only/src/dynamic-content/sources/acf.php:57
 msgid "ACF"
 msgstr ""
 
-#: dist/translation-strings.php:1616
+#: dist/translation-strings.php:1617
 #: pro__premium_only/src/dynamic-content/sources/acf.php:201
 #: pro__premium_only/src/dynamic-content/sources/acf.php:229
 #: pro__premium_only/src/dynamic-content/sources/custom-fields.php:97
@@ -8865,7 +8873,7 @@ msgstr ""
 msgid "The field type provided is not valid."
 msgstr ""
 
-#: dist/translation-strings.php:1617
+#: dist/translation-strings.php:1618
 #: pro__premium_only/src/dynamic-content/sources/acf.php:359
 #: pro__premium_only/src/dynamic-content/sources/acf.php:555
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:364
@@ -8878,27 +8886,27 @@ msgstr ""
 msgid "Text input is empty"
 msgstr ""
 
-#: dist/translation-strings.php:1618
+#: dist/translation-strings.php:1619
 #: pro__premium_only/src/dynamic-content/sources/acf.php:417
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:390
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:472
 msgid "`whenTrueText` and `whenFalseText` arguments are required."
 msgstr ""
 
-#: dist/translation-strings.php:1619
+#: dist/translation-strings.php:1620
 #: pro__premium_only/src/dynamic-content/sources/custom-fields.php:41
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:88
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:137
 msgid "Stackable Custom Fields"
 msgstr ""
 
-#: dist/translation-strings.php:1620
+#: dist/translation-strings.php:1621
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:62
 #: pro__premium_only/src/dynamic-content/sources/jetengine.php:86
 msgid "JetEngine"
 msgstr ""
 
-#: dist/translation-strings.php:1621
+#: dist/translation-strings.php:1622
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:53
 msgid "Latest Post"
 msgstr ""
@@ -8916,8 +8924,8 @@ msgstr ""
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1622
-#: dist/translation-strings.php:1625
+#: dist/translation-strings.php:1623
+#: dist/translation-strings.php:1626
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:57
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:59
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:102
@@ -8945,14 +8953,14 @@ msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1623
+#: dist/translation-strings.php:1624
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:57
 msgid "Nth"
 msgstr ""
 
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
 #. translators: first %s is an ordinal number (e.g. 1st, 2nd), second %s is the name of the entity (e.g. Post, Page)
-#: dist/translation-strings.php:1624
+#: dist/translation-strings.php:1625
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:57
 #: pro__premium_only/src/dynamic-content/sources/latest-post.php:59
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:219
@@ -8972,108 +8980,108 @@ msgstr ""
 msgid "Post"
 msgstr ""
 
-#: dist/translation-strings.php:1626
+#: dist/translation-strings.php:1627
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:74
 msgid "Meta Box"
 msgstr ""
 
-#: dist/translation-strings.php:1627
+#: dist/translation-strings.php:1628
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:196
 msgid "Meta Box | "
 msgstr ""
 
-#: dist/translation-strings.php:1628
+#: dist/translation-strings.php:1629
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:249
 msgid "Multiple select not supported in this field."
 msgstr ""
 
-#: dist/translation-strings.php:1629
+#: dist/translation-strings.php:1630
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:643
 msgid "You have not selected an image."
 msgstr ""
 
-#: dist/translation-strings.php:1630
+#: dist/translation-strings.php:1631
 #: pro__premium_only/src/dynamic-content/sources/metabox.php:674
 msgid "Text fields are empty"
 msgstr ""
 
-#: dist/translation-strings.php:1631
+#: dist/translation-strings.php:1632
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:32
 msgid "Other Posts"
 msgstr ""
 
-#: dist/translation-strings.php:1632
+#: dist/translation-strings.php:1633
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:35
 msgid "Posts/Pages"
 msgstr ""
 
-#: dist/translation-strings.php:1633
+#: dist/translation-strings.php:1634
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:36
 msgid "Search for posts/pages"
 msgstr ""
 
-#: dist/translation-strings.php:1634
+#: dist/translation-strings.php:1635
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:118
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:180
 msgid "Detected Custom Fields"
 msgstr ""
 
-#: dist/translation-strings.php:1635
+#: dist/translation-strings.php:1636
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:218
 msgid "Post Title"
 msgstr ""
 
-#: dist/translation-strings.php:1636
+#: dist/translation-strings.php:1637
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:222
 msgid "Post URL"
 msgstr ""
 
-#: dist/translation-strings.php:1637
+#: dist/translation-strings.php:1638
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:227
 msgid "Post ID"
 msgstr ""
 
-#: dist/translation-strings.php:1638
+#: dist/translation-strings.php:1639
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:231
 msgid "Post Slug"
 msgstr ""
 
-#: dist/translation-strings.php:1639
+#: dist/translation-strings.php:1640
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:239
 msgid "Post Excerpt"
 msgstr ""
 
-#: dist/translation-strings.php:1640
+#: dist/translation-strings.php:1641
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:243
 msgid "Post Date"
 msgstr ""
 
-#: dist/translation-strings.php:1641
+#: dist/translation-strings.php:1642
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:247
 msgid "Post Date GMT"
 msgstr ""
 
-#: dist/translation-strings.php:1642
+#: dist/translation-strings.php:1643
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:251
 msgid "Post Modified"
 msgstr ""
 
-#: dist/translation-strings.php:1643
+#: dist/translation-strings.php:1644
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:255
 msgid "Post Modified GMT"
 msgstr ""
 
-#: dist/translation-strings.php:1644
+#: dist/translation-strings.php:1645
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:263
 msgid "Post Status"
 msgstr ""
 
-#: dist/translation-strings.php:1645
+#: dist/translation-strings.php:1646
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:268
 msgid "Author Name"
 msgstr ""
 
-#: dist/translation-strings.php:1646
+#: dist/translation-strings.php:1647
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:269
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:273
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:277
@@ -9084,68 +9092,68 @@ msgstr ""
 msgid "Author"
 msgstr ""
 
-#: dist/translation-strings.php:1647
+#: dist/translation-strings.php:1648
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:272
 msgid "Author ID"
 msgstr ""
 
-#: dist/translation-strings.php:1648
+#: dist/translation-strings.php:1649
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:276
 msgid "Author Posts URL"
 msgstr ""
 
-#: dist/translation-strings.php:1649
+#: dist/translation-strings.php:1650
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:281
 msgid "Author Profile Picture URL"
 msgstr ""
 
-#: dist/translation-strings.php:1650
+#: dist/translation-strings.php:1651
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:286
 msgid "Author Posts"
 msgstr ""
 
-#: dist/translation-strings.php:1651
+#: dist/translation-strings.php:1652
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:290
 msgid "Author First Name"
 msgstr ""
 
-#: dist/translation-strings.php:1652
+#: dist/translation-strings.php:1653
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:294
 msgid "Author Last Name"
 msgstr ""
 
-#: dist/translation-strings.php:1653
+#: dist/translation-strings.php:1654
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:299
 msgid "Comment Number"
 msgstr ""
 
-#: dist/translation-strings.php:1654
+#: dist/translation-strings.php:1655
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:300
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:304
 msgid "Comment"
 msgstr ""
 
-#: dist/translation-strings.php:1655
+#: dist/translation-strings.php:1656
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:303
 msgid "Comment Status"
 msgstr ""
 
-#: dist/translation-strings.php:1656
+#: dist/translation-strings.php:1657
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:308
 msgid "Featured Image URL"
 msgstr ""
 
-#: dist/translation-strings.php:1657
+#: dist/translation-strings.php:1658
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:309
 msgid "Media"
 msgstr ""
 
-#: dist/translation-strings.php:1658
+#: dist/translation-strings.php:1659
 #: pro__premium_only/src/dynamic-content/sources/other-posts.php:491
 msgid "Post not found."
 msgstr ""
 
-#: dist/translation-strings.php:1659
+#: dist/translation-strings.php:1660
 #: pro__premium_only/src/dynamic-content/sources/site.php:27
 #: pro__premium_only/src/dynamic-content/sources/site.php:45
 #: pro__premium_only/src/dynamic-content/sources/site.php:49
@@ -9153,164 +9161,156 @@ msgstr ""
 msgid "Site"
 msgstr ""
 
-#: dist/translation-strings.php:1660
+#: dist/translation-strings.php:1661
 #: pro__premium_only/src/dynamic-content/sources/site.php:44
 msgid "Site Tagline"
 msgstr ""
 
-#: dist/translation-strings.php:1661
+#: dist/translation-strings.php:1662
 #: pro__premium_only/src/dynamic-content/sources/site.php:48
 msgid "Site Title"
 msgstr ""
 
-#: dist/translation-strings.php:1662
+#: dist/translation-strings.php:1663
 #: pro__premium_only/src/dynamic-content/sources/site.php:52
 msgid "Site URL"
 msgstr ""
 
-#: dist/translation-strings.php:1663
+#: dist/translation-strings.php:1664
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:91
 msgid "Product Url"
 msgstr ""
 
-#: dist/translation-strings.php:1664
+#: dist/translation-strings.php:1665
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:101
 msgid "Product Name"
 msgstr ""
 
-#: dist/translation-strings.php:1665
+#: dist/translation-strings.php:1666
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:108
 msgid "Product Description"
 msgstr ""
 
-#: dist/translation-strings.php:1666
+#: dist/translation-strings.php:1667
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:115
 msgid "Product Short Description"
 msgstr ""
 
-#: dist/translation-strings.php:1667
+#: dist/translation-strings.php:1668
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:122
 msgid "Product Purchase Note"
 msgstr ""
 
-#: dist/translation-strings.php:1668
+#: dist/translation-strings.php:1669
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:129
 msgid "Product Image"
 msgstr ""
 
-#: dist/translation-strings.php:1669
+#: dist/translation-strings.php:1670
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:136
 msgid "Product Price"
 msgstr ""
 
-#: dist/translation-strings.php:1670
+#: dist/translation-strings.php:1671
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:143
 msgid "Product Price (Regular)"
 msgstr ""
 
-#: dist/translation-strings.php:1671
+#: dist/translation-strings.php:1672
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:150
 msgid "Product Price (No Tax)"
 msgstr ""
 
-#: dist/translation-strings.php:1672
+#: dist/translation-strings.php:1673
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:157
 msgid "Produce Price (Sale)"
 msgstr ""
 
-#: dist/translation-strings.php:1673
+#: dist/translation-strings.php:1674
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:164
 msgid "Product Date Created"
 msgstr ""
 
-#: dist/translation-strings.php:1674
+#: dist/translation-strings.php:1675
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:171
 msgid "Product Sale Date From"
 msgstr ""
 
-#: dist/translation-strings.php:1675
+#: dist/translation-strings.php:1676
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:178
 msgid "Product Sale Date To"
 msgstr ""
 
-#: dist/translation-strings.php:1676
+#: dist/translation-strings.php:1677
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:185
 msgid "Product Add to Cart URL"
 msgstr ""
 
-#: dist/translation-strings.php:1677
+#: dist/translation-strings.php:1678
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:193
 msgid "Product SKU"
 msgstr ""
 
-#: dist/translation-strings.php:1678
+#: dist/translation-strings.php:1679
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:200
 msgid "Product Total Sales"
 msgstr ""
 
-#: dist/translation-strings.php:1679
+#: dist/translation-strings.php:1680
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:207
 msgid "Product Total Stock"
 msgstr ""
 
-#: dist/translation-strings.php:1680
+#: dist/translation-strings.php:1681
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:214
 msgid "Product Low Stock"
 msgstr ""
 
-#: dist/translation-strings.php:1681
+#: dist/translation-strings.php:1682
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:221
 msgid "Product Weight"
 msgstr ""
 
-#: dist/translation-strings.php:1682
+#: dist/translation-strings.php:1683
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:228
 msgid "Product Width"
 msgstr ""
 
-#: dist/translation-strings.php:1683
+#: dist/translation-strings.php:1684
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:235
 msgid "Product Length"
 msgstr ""
 
-#: dist/translation-strings.php:1684
+#: dist/translation-strings.php:1685
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:242
 msgid "Product Height"
 msgstr ""
 
-#: dist/translation-strings.php:1685
+#: dist/translation-strings.php:1686
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:249
 msgid "Product Review Count"
 msgstr ""
 
-#: dist/translation-strings.php:1686
+#: dist/translation-strings.php:1687
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:256
 msgid "Product Tax Status"
 msgstr ""
 
-#: dist/translation-strings.php:1687
+#: dist/translation-strings.php:1688
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:263
 msgid "Product Tax Class"
 msgstr ""
 
-#: dist/translation-strings.php:1688
+#: dist/translation-strings.php:1689
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:270
 msgid "Product Tags"
 msgstr ""
 
-#: dist/translation-strings.php:1689
+#: dist/translation-strings.php:1690
 #: pro__premium_only/src/dynamic-content/sources/woocommerce.php:277
 msgid "Product Attributes"
 msgstr ""
 
-#: dist/translation-strings.php:1690
-#: pro__premium_only/src/block/load-more/index.php:49
-#: pro__premium_only/src/deprecated/v2/block/blog-posts/pagination.php:28
-#: src/custom-block-styles.php:157
-#: src/design-library/init.php:36
-msgid "%s must be a string."
-msgstr ""
-
 #: dist/translation-strings.php:1691
 #: pro__premium_only/src/welcome/custom-fields/custom-fields.php:48
 msgid "Data from Stackable custom fields"
diff --git a/package.json b/package.json
index 4b032aa13..3630793e5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "stackable",
-	"version": "3.13.7",
+	"version": "3.13.8",
 	"private": true,
 	"description": "Blocks for everyone",
 	"author": "Benjamin Intal of Gambit",
diff --git a/plugin.php b/plugin.php
index a75967208..bf8579d8b 100644
--- a/plugin.php
+++ b/plugin.php
@@ -6,7 +6,7 @@
  * Author: Gambit Technologies, Inc
  * Author URI: http://gambit.ph
  * Text Domain: stackable-ultimate-gutenberg-blocks
- * Version: 3.13.7
+ * Version: 3.13.8
  *
  * @package Stackable
  */
@@ -24,7 +24,7 @@
 
 defined( 'STACKABLE_SHOW_PRO_NOTICES' ) || define( 'STACKABLE_SHOW_PRO_NOTICES', true );
 defined( 'STACKABLE_BUILD' ) || define( 'STACKABLE_BUILD', 'free' );
-defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.13.7' );
+defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.13.8' );
 defined( 'STACKABLE_FILE' ) || define( 'STACKABLE_FILE', __FILE__ );
 defined( 'STACKABLE_I18N' ) || define( 'STACKABLE_I18N', 'stackable-ultimate-gutenberg-blocks' ); // Plugin slug.
 defined( 'STACKABLE_DESIGN_LIBRARY_URL' ) || define( 'STACKABLE_DESIGN_LIBRARY_URL', 'https://storage.googleapis.com/stackable-plugin-assets' ); // Design Library CDN URL
diff --git a/readme.txt b/readme.txt
index ccdb786f4..aafad16f9 100644
--- a/readme.txt
+++ b/readme.txt
@@ -2,9 +2,9 @@
 Contributors: bfintal, gambitph, freemius
 Tags: blocks, gutenberg, gutenberg blocks, page builder, WordPress blocks
 Requires at least: 6.3
-Tested up to: 6.6.1
+Tested up to: 6.6.2
 Requires PHP: 7.3
-Stable tag: 3.13.7
+Stable tag: 3.13.8
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -295,6 +295,12 @@ Nope. Stackable only works with Gutenberg, the new WordPress editor.
 
 == Changelog ==
 
+= 3.13.8 =
+* Fixed: Possible editor freezing when using deprecated icon lists inside patterns #3332
+* Fixed: Timeline block: last timeline doesn't cut off in mobile view (part 2 of fix) #3292
+* Fixed: Icon List block: can produce an error when migrating from an old version #3334
+* Fixed: Prevent possible PHP error when calling kses too early
+
 = 3.13.7 =
 * Fixed: Stylesheets can sometimes not load in the frontend
 * Fixed: SVG error when using custom SVGs with a use tag #3323
diff --git a/src/components/font-family-control/google-fonts.json b/src/components/font-family-control/google-fonts.json
index 837bad223..edbc1c820 100644
--- a/src/components/font-family-control/google-fonts.json
+++ b/src/components/font-family-control/google-fonts.json
@@ -177,6 +177,25 @@
       "vietnamese"
     ]
   },
+  {
+    "family": "Afacad Flux",
+    "variants": [
+      "100",
+      "200",
+      "300",
+      "regular",
+      "500",
+      "600",
+      "700",
+      "800",
+      "900"
+    ],
+    "subsets": [
+      "latin",
+      "latin-ext",
+      "vietnamese"
+    ]
+  },
   {
     "family": "Agbalumo",
     "variants": [
@@ -10279,6 +10298,8 @@
       "900italic"
     ],
     "subsets": [
+      "cyrillic",
+      "cyrillic-ext",
       "latin",
       "latin-ext",
       "vietnamese"
@@ -20340,6 +20361,18 @@
       "symbols"
     ]
   },
+  {
+    "family": "Sixtyfour Convergence",
+    "variants": [
+      "regular"
+    ],
+    "subsets": [
+      "latin",
+      "latin-ext",
+      "math",
+      "symbols"
+    ]
+  },
   {
     "family": "Skranji",
     "variants": [
diff --git a/src/dynamic-breakpoints.php b/src/dynamic-breakpoints.php
index 5d09c1b54..7ddcd1c6c 100644
--- a/src/dynamic-breakpoints.php
+++ b/src/dynamic-breakpoints.php
@@ -15,7 +15,7 @@
 	function stackable_get_responsive_css() {
 		// NOTE: THE VALUE BELOW IS AUTOMATICALLY GENERATED BY THE BUILD PROCESS.
 		return <<<STK_RESPONSIVE_CSS
-#start-resizable-editor-section{display:none}@media only screen and (min-width:1024px){:where(.has-text-align-left) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-feature>*>.stk-row{flex-wrap:var(--stk-feature-flex-wrap,nowrap)}.stk-row{flex-wrap:nowrap}.stk--hide-desktop,.stk--hide-desktop.stk-block{display:none!important}}@media only screen and (min-width:768px){:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(2)){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):last-child){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(3)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(2)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):last-child){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(4)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(3)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(2)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):last-child){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(5)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(4)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(3)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(2)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):last-child){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(6)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(5)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(4)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(3)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):nth-last-child(2)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(6):last-child){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical{grid-template-columns:auto 1fr auto}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:first-child{grid-column:1/2}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:last-child{grid-column:2/4}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:first-child{grid-column:1/3}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:last-child{grid-column:3/4}.stk-block .stk-block.aligncenter,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){margin-left:auto;margin-right:auto;max-width:var(--stk-block-default-width,var(--stk-block-width-default-detected,900px));width:100%}.stk-block .stk-block.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide{margin-left:auto;margin-right:auto;max-width:var(--stk-block-wide-width,var(--stk-block-width-wide-detected,80vw));width:100%}.stk-row.stk-columns-2>.stk-column{flex:1 1 50%;max-width:50%}.stk-row.stk-columns-3>.stk-column{flex:1 1 33.3333333333%;max-width:33.3333333333%}.stk-row.stk-columns-4>.stk-column{flex:1 1 25%;max-width:25%}.stk-row.stk-columns-5>.stk-column{flex:1 1 20%;max-width:20%}.stk-row.stk-columns-6>.stk-column{flex:1 1 16.6666666667%;max-width:16.6666666667%}.stk-row.stk-columns-7>.stk-column{flex:1 1 14.2857142857%;max-width:14.2857142857%}.stk-row.stk-columns-8>.stk-column{flex:1 1 12.5%;max-width:12.5%}.stk-row.stk-columns-9>.stk-column{flex:1 1 11.1111111111%;max-width:11.1111111111%}.stk-row.stk-columns-10>.stk-column{flex:1 1 10%;max-width:10%}}@media only screen and (min-width:768px) and (max-width:1023px){.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}:where(.has-text-align-left-tablet) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-tablet) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-tablet) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk--hide-tablet,.stk--hide-tablet.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}}@media only screen and (max-width:1023px){.stk-block-button{min-width:-moz-fit-content;min-width:fit-content}.stk-block.stk-block-divider.has-text-align-center-tablet{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-tablet{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-tablet{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-timeline.stk-block-timeline__ios-polyfill{--fixed-bg:linear-gradient(to bottom,var(--line-accent-bg-color,#000) 0,var(--line-accent-bg-color-2,#000) var(--line-accent-bg-location,50%))}.has-text-align-center-tablet{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-tablet{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-tablet{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-tablet{--stk-alignment-text-align:justify}.has-text-align-space-between-tablet{--stk-alignment-justify-content:space-between}.has-text-align-space-around-tablet{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-tablet{--stk-alignment-justify-content:space-evenly}}@media only screen and (max-width:767px){.stk-button-group:is(.stk--collapse-on-mobile)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block],.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.entry-content .stk-block.stk-has-top-separator{padding-top:23vw}.entry-content .stk-block.stk-has-bottom-separator{padding-bottom:23vw}.entry-content .stk-block .stk-separator__wrapper{height:23vw}.stk-block-carousel.stk--hide-mobile-arrows>.stk-block-carousel__content-wrapper>*>.stk-block-carousel__buttons,.stk-block-carousel.stk--hide-mobile-dots>.stk-block-carousel__content-wrapper>.stk-block-carousel__dots{display:none}:where(.has-text-align-left-mobile) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-mobile) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-mobile) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center-mobile{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-mobile{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-mobile{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block.stk-block-feature:is(.is-style-default,.is-style-horizontal)>.stk-container>.stk-inner-blocks.stk-block-content{flex-direction:column-reverse}.stk-block-posts{--stk-columns:1}.stk-block-tabs>.stk-inner-blocks{grid-template-columns:1fr}.stk-block-tabs>.stk-inner-blocks>.stk-block-tab-labels:last-child{grid-row:1/2}.stk-block.stk-block-timeline{--content-line:0!important;padding-top:0}.stk-block-timeline>.stk-inner-blocks{align-items:flex-start;grid-template-columns:var(--line-dot-size,16px) 1fr;grid-template-rows:auto 1fr;padding-left:16px}.stk-block-timeline>.stk-inner-blocks:after{inset-inline-start:calc(var(--line-dot-size, 16px)/2 - var(--line-bg-width, 3px)/2 + 16px)}.stk-block-timeline .stk-block-timeline__middle{inset-block-start:8px;inset-inline-start:16px;position:absolute}.stk-block-timeline .stk-block-timeline__content{grid-column:2/3;grid-row:2/3;text-align:start}.stk-block-timeline .stk-block-timeline__date{grid-column:2/3;grid-row:1/2;text-align:start}.stk-block-timeline>.stk-inner-blocks:after{bottom:calc(100% - var(--line-dot-size, 16px)/2 - .5em);top:calc(var(--line-dot-size, 16px)/2 + .5em)}.stk-block-timeline+.stk-block-timeline>.stk-inner-blocks:after{top:-16px}:root{--stk-block-margin-bottom:16px;--stk-container-padding:24px 24px;--stk-container-padding-large:32px 24px;--stk-container-padding-small:8px 24px;--stk-column-margin:8px;--stk-block-background-padding:16px 16px}.stk-block .stk-block:is(.aligncenter,.alignwide),.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){width:100%}.stk-column{flex:1 1 100%;max-width:100%}.stk--hide-mobile,.stk--hide-mobile.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-mobile) .stk-block:is(.stk-block-button,.stk-block-icon-button),.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.has-text-align-center-mobile{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-mobile{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-mobile{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-mobile{--stk-alignment-text-align:justify}.has-text-align-space-between-mobile{--stk-alignment-justify-content:space-between}.has-text-align-space-around-mobile{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-mobile{--stk-alignment-justify-content:space-evenly}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile){overflow-x:auto!important;width:100%}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile)::-webkit-scrollbar{height:0!important}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile) .stk-block-tab-labels__wrapper{flex-wrap:nowrap;min-width:-webkit-fill-available;min-width:fill-available;width:max-content}}#end-resizable-editor-section{display:none}
+#start-resizable-editor-section{display:none}@media only screen and (min-width:1024px){:where(.has-text-align-left) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-feature>*>.stk-row{flex-wrap:var(--stk-feature-flex-wrap,nowrap)}.stk-row{flex-wrap:nowrap}.stk--hide-desktop,.stk--hide-desktop.stk-block{display:none!important}}@media only screen and (min-width:768px){:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(2)){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):last-child){flex:1 1 calc(50% - var(--stk-column-gap, 0px)*1/2)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(3)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(2)){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):last-child){flex:1 1 calc(33.33333% - var(--stk-column-gap, 0px)*2/3)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(4)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(3)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(2)){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):last-child){flex:1 1 calc(25% - var(--stk-column-gap, 0px)*3/4)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(5)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(4)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(3)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(2)){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):last-child){flex:1 1 calc(20% - var(--stk-column-gap, 0px)*4/5)!important}:where(body:not(.wp-admin) .stk-block-column:first-child:nth-last-child(6)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(2):nth-last-child(5)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(3):nth-last-child(4)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(4):nth-last-child(3)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(5):nth-last-child(2)){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}:where(body:not(.wp-admin) .stk-block-column:nth-child(6):last-child){flex:1 1 calc(16.66667% - var(--stk-column-gap, 0px)*5/6)!important}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical{grid-template-columns:auto 1fr auto}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:first-child{grid-column:1/2}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:last-child{grid-column:2/4}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-content:first-child{grid-column:1/3}.stk-block-tabs>.stk-inner-blocks.stk-block-tabs--vertical>.stk-block-tab-labels:last-child{grid-column:3/4}.stk-block .stk-block.aligncenter,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){margin-left:auto;margin-right:auto;max-width:var(--stk-block-default-width,var(--stk-block-width-default-detected,900px));width:100%}.stk-block .stk-block.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide{margin-left:auto;margin-right:auto;max-width:var(--stk-block-wide-width,var(--stk-block-width-wide-detected,80vw));width:100%}.stk-row.stk-columns-2>.stk-column{flex:1 1 50%;max-width:50%}.stk-row.stk-columns-3>.stk-column{flex:1 1 33.3333333333%;max-width:33.3333333333%}.stk-row.stk-columns-4>.stk-column{flex:1 1 25%;max-width:25%}.stk-row.stk-columns-5>.stk-column{flex:1 1 20%;max-width:20%}.stk-row.stk-columns-6>.stk-column{flex:1 1 16.6666666667%;max-width:16.6666666667%}.stk-row.stk-columns-7>.stk-column{flex:1 1 14.2857142857%;max-width:14.2857142857%}.stk-row.stk-columns-8>.stk-column{flex:1 1 12.5%;max-width:12.5%}.stk-row.stk-columns-9>.stk-column{flex:1 1 11.1111111111%;max-width:11.1111111111%}.stk-row.stk-columns-10>.stk-column{flex:1 1 10%;max-width:10%}}@media only screen and (min-width:768px) and (max-width:1023px){.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}:where(.has-text-align-left-tablet) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-tablet) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-tablet) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk--hide-tablet,.stk--hide-tablet.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}}@media only screen and (max-width:1023px){.stk-block-button{min-width:-moz-fit-content;min-width:fit-content}.stk-block.stk-block-divider.has-text-align-center-tablet{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-tablet{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-tablet{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block-timeline.stk-block-timeline__ios-polyfill{--fixed-bg:linear-gradient(to bottom,var(--line-accent-bg-color,#000) 0,var(--line-accent-bg-color-2,#000) var(--line-accent-bg-location,50%))}.has-text-align-center-tablet{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-tablet{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-tablet{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-tablet{--stk-alignment-text-align:justify}.has-text-align-space-between-tablet{--stk-alignment-justify-content:space-between}.has-text-align-space-around-tablet{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-tablet{--stk-alignment-justify-content:space-evenly}}@media only screen and (max-width:767px){.stk-button-group:is(.stk--collapse-on-mobile)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block],.stk-button-group:is(.stk--collapse-on-tablet)>.block-editor-inner-blocks>.block-editor-block-list__layout>[data-block]{margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.stk-block-carousel.stk--hide-mobile-arrows>.stk-block-carousel__content-wrapper>*>.stk-block-carousel__buttons,.stk-block-carousel.stk--hide-mobile-dots>.stk-block-carousel__content-wrapper>.stk-block-carousel__dots{display:none}:where(.has-text-align-left-mobile) .stk-block-divider{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}:where(.has-text-align-right-mobile) .stk-block-divider{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}:where(.has-text-align-center-mobile) .stk-block-divider{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-center-mobile{--stk-dots-margin-right:auto;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-right-mobile{--stk-dots-margin-right:0;--stk-dots-margin-left:auto}.stk-block.stk-block-divider.has-text-align-left-mobile{--stk-dots-margin-left:0;--stk-dots-margin-right:auto}.stk-block.stk-block-feature:is(.is-style-default,.is-style-horizontal)>.stk-container>.stk-inner-blocks.stk-block-content{flex-direction:column-reverse}.stk-block-posts{--stk-columns:1}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile){overflow-x:auto!important;width:100%}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile)::-webkit-scrollbar{height:0!important}.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile) .stk-block-tab-labels__wrapper{flex-wrap:nowrap;min-width:-webkit-fill-available;min-width:fill-available;width:max-content}.stk-block-tabs>.stk-inner-blocks{grid-template-columns:1fr}.stk-block-tabs>.stk-inner-blocks>.stk-block-tab-labels:last-child{grid-row:1/2}.stk-block.stk-block-timeline{--content-line:0!important;padding-top:0}.stk-block-timeline>.stk-inner-blocks{align-items:flex-start;grid-template-columns:var(--line-dot-size,16px) 1fr;grid-template-rows:auto 1fr;padding-left:16px}.stk-block-timeline>.stk-inner-blocks:after{inset-inline-start:calc(var(--line-dot-size, 16px)/2 - var(--line-bg-width, 3px)/2 + 16px)}.stk-block-timeline .stk-block-timeline__middle{inset-block-start:8px;inset-inline-start:16px;position:absolute}.stk-block-timeline .stk-block-timeline__content{grid-column:2/3;grid-row:2/3;text-align:start}.stk-block-timeline .stk-block-timeline__date{grid-column:2/3;grid-row:1/2;text-align:start}.stk-block-timeline>.stk-inner-blocks:after{bottom:calc(100% - var(--line-dot-size, 16px)/2 - .5em);top:calc(var(--line-dot-size, 16px)/2 + .5em)}.stk-block-timeline+.stk-block-timeline>.stk-inner-blocks:after{top:-16px}:root{--stk-block-margin-bottom:16px;--stk-container-padding:24px 24px;--stk-container-padding-large:32px 24px;--stk-container-padding-small:8px 24px;--stk-column-margin:8px;--stk-block-background-padding:16px 16px}.stk-block .stk-block:is(.aligncenter,.alignwide),.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align.alignwide,.stk-block:is(.aligncenter,.alignwide,.alignfull)>.stk-content-align:not(.alignwide):not(.alignfull){width:100%}.stk-column{flex:1 1 100%;max-width:100%}.stk--hide-mobile,.stk--hide-mobile.stk-block{display:none!important}.stk-button-group:is(.stk--collapse-on-mobile) .stk-block:is(.stk-block-button,.stk-block-icon-button),.stk-button-group:is(.stk--collapse-on-tablet) .stk-block:is(.stk-block-button,.stk-block-icon-button){margin-inline-end:var(--stk-alignment-margin-right);margin-inline-start:var(--stk-alignment-margin-left)}.has-text-align-center-mobile{--stk-alignment-padding-left:0;--stk-alignment-justify-content:center;--stk-alignment-text-align:center;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-left-mobile{--stk-alignment-justify-content:flex-start;--stk-alignment-text-align:start;--stk-alignment-margin-left:0;--stk-alignment-margin-right:auto;text-align:var(--stk-alignment-text-align,start)}.has-text-align-right-mobile{--stk-alignment-justify-content:flex-end;--stk-alignment-text-align:end;--stk-alignment-margin-left:auto;--stk-alignment-margin-right:0;text-align:var(--stk-alignment-text-align,start)}.has-text-align-justify-mobile{--stk-alignment-text-align:justify}.has-text-align-space-between-mobile{--stk-alignment-justify-content:space-between}.has-text-align-space-around-mobile{--stk-alignment-justify-content:space-around}.has-text-align-space-evenly-mobile{--stk-alignment-justify-content:space-evenly}.entry-content .stk-block.stk-has-top-separator{padding-top:23vw}.entry-content .stk-block.stk-has-bottom-separator{padding-bottom:23vw}.entry-content .stk-block .stk-separator__wrapper{height:23vw}}#end-resizable-editor-section{display:none}
 STK_RESPONSIVE_CSS;
 	}
 }