@secretstache/wordpress-gutenberg 0.4.0 → 0.4.2

package/build/styles.css

@@ -1,55 +1,181 @@
-.block-editor__container .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper {
-  margin-top: 10px !important;
-  margin-bottom: 10px !important; }
-  .block-editor__container .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper h1.editor-post-title {
-    margin: 0;
-    border-bottom: 1px dashed #ddd;
-    padding-bottom: 10px;
-    font-weight: normal;
-    font-size: 30px !important;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    text-align: center; }
-
-.block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container {
-  margin-bottom: 3rem;
-  padding-bottom: 100px; }
-  .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container.has-background {
-    transition: background 1s, color 1s; }
-  .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .block-list-appender.wp-block:only-child p {
-    margin-top: 0;
-    margin-bottom: 0; }
-  .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .block-list-appender.wp-block:only-child,
-  .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > p.wp-block:only-child {
-    margin: 2rem 0; }
+.block-editor__container .editor-visual-editor {
+  z-index: 1; }
+  .block-editor__container .editor-visual-editor:not(.is-resizable) .editor-styles-wrapper::after {
+    display: none; }
+  .block-editor__container .editor-visual-editor.is-resizable .root-block-appender {
+    display: none; }
+  .block-editor__container .editor-visual-editor.is-resizable + .edit-post-layout__metaboxes {
+    display: none; }
+  .block-editor__container .editor-visual-editor .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper {
+    margin-top: 10px;
+    margin-bottom: 10px; }
+    .block-editor__container .editor-visual-editor .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper h1.editor-post-title {
+      margin: 0;
+      border-bottom: 1px dashed #ddd;
+      padding-bottom: 10px;
+      font-weight: normal;
+      font-size: 30px;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+      text-align: center; }
+  .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container {
+    margin-bottom: 0;
+    padding-bottom: 0; }
+    .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .root-block-appender {
+      position: absolute;
+      bottom: 30px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: calc(100% - var(--content-padding) * 2); }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .root-block-appender::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        left: 50%;
+        bottom: -30px;
+        transform: translateX(-50%);
+        z-index: 1;
+        visibility: hidden;
+        opacity: 0;
+        transition: opacity 0.3s;
+        width: max-content;
+        max-width: 200px;
+        white-space: nowrap;
+        background: #000;
+        border-radius: 2px;
+        color: #f0f0f0;
+        font-size: 12px;
+        line-height: 1.4;
+        padding: 4px 8px;
+        text-align: center;
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif; }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .root-block-appender:hover::after {
+        visibility: visible;
+        opacity: 1; }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .root-block-appender ~ .block-list-appender.wp-block {
+        display: none; }
+    .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender {
+      --button-color: #192f5f;
+      --button-border: var(--button-color);
+      --button-hover-color: var(--wp-admin-theme-color);
+      --button-hover-border: var(--wp-admin-theme-color);
+      --tr: .3s;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 32px; }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__content {
+        text-align: center; }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__icon {
+        width: 48px;
+        height: 48px;
+        color: var(--button-color);
+        margin-bottom: 16px; }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__title {
+        font-size: 32px;
+        font-weight: 600;
+        line-height: 110%;
+        color: var(--button-color);
+        margin-bottom: 0.5rem; }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__text {
+        font-size: 1rem;
+        font-weight: 400;
+        color: var(--button-color);
+        margin-bottom: 1.5rem; }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        transition: color var(--tr), border-color var(--tr);
+        cursor: pointer;
+        border: 2px solid var(--button-border) !important;
+        box-shadow: none;
+        border-radius: 10px;
+        background: transparent !important;
+        padding: 12px 24px;
+        min-height: 50px;
+        min-width: 200px;
+        color: var(--button-color);
+        font-weight: 600;
+        font-size: 22px; }
+        .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender:hover, .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender:focus {
+          color: var(--button-hover-color);
+          border-color: var(--button-hover-border) !important;
+          outline: none !important;
+          box-shadow: none !important; }
+        .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender::before, .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender::after {
+          display: none !important; }
+        .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .empty-block-appender__button .block-editor-button-block-appender .block-editor-button-block-appender__content {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 24px;
+          height: 24px; }
+    .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container:has(.root-block-appender) {
+      margin-bottom: 3rem;
+      padding-bottom: 200px; }
+    .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container.has-background {
+      transition: background 1s, color 1s; }
+    .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container > .block-list-appender.wp-block:only-child p {
+      margin-top: 0;
+      margin-bottom: 0; }
+    .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container > .block-list-appender.wp-block:only-child,
+    .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container > p.wp-block:only-child {
+      margin: 2rem 0; }
 
-.block-editor__container .block-editor-block-types-list > [role=presentation] {
-  justify-content: center; }
+.block-editor__container .editor-sidebar .bc-url-input input {
+  width: 100%;
+  border: 1px solid #949494; }
 
-.block-editor__container .components-base-control .block-editor-url-input input.block-editor-url-input__input {
-  width: 100%; }
+.block-editor__container .editor-sidebar .components-base-control .block-editor-link-control .block-editor-url-input {
+  margin-top: 0; }
 
-.block-editor__container .components-range-control__mark-label {
-  margin-top: 7px !important; }
+.block-editor__container .editor-sidebar .components-base-control .block-editor-link-control .block-editor-link-control__search-item {
+  padding-top: 0; }
 
-.block-editor__container .bc-animation-block-json-file {
+.block-editor__container .editor-sidebar .block-editor-link-control {
+  min-width: 100%;
+  width: 100%; }
+  .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-url-input__input {
+    width: 100%; }
+  .block-editor__container .editor-sidebar .block-editor-link-control .components-base-control {
+    margin-left: 0;
+    margin-right: 0; }
+  .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-link-control__search-enter {
+    right: 5px; }
+  .block-editor__container .editor-sidebar .block-editor-link-control .components-spinner {
+    top: 50%;
+    transform: translateY(-50%); }
+  .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-link-control__tools,
+  .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-link-control__search-actions,
+  .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-link-control__search-results,
+  .block-editor__container .editor-sidebar .block-editor-link-control .block-editor-link-control__search-item {
+    padding-left: 0;
+    padding-right: 0; }
+  .block-editor__container .editor-sidebar .block-editor-link-control .components-menu-item__item {
+    min-width: unset; }
+  .block-editor__container .editor-sidebar .block-editor-link-control .components-button.block-editor-link-control__drawer-toggle {
+    box-shadow: none;
+    outline: none; }
+
+.block-editor__container .editor-sidebar .bc-animation-block-json-file {
   display: flex;
   align-items: center;
   cursor: pointer; }
 
-.block-editor__container .bc-remove-btn {
+.block-editor__container .editor-sidebar .bc-remove-btn {
   margin-top: 15px;
   margin-bottom: 15px;
   display: flex; }
 
-.block-editor__container .svg-container {
+.block-editor__container .editor-sidebar .svg-container {
   width: 100%;
   height: auto; }
 
-.block-editor__container .bc-image-wrapper {
+.block-editor__container .editor-sidebar .bc-image-wrapper {
   position: relative;
   height: auto;
   align-self: start; }
-  .block-editor__container .bc-image-wrapper__actions {
+  .block-editor__container .editor-sidebar .bc-image-wrapper__actions {
     display: none;
     position: absolute;
     top: 0;
@@ -63,9 +189,9 @@
     padding: 5px 15px;
     z-index: 20; }
     @media screen and (max-width: 768px) {
-      .block-editor__container .bc-image-wrapper__actions {
+      .block-editor__container .editor-sidebar .bc-image-wrapper__actions {
         gap: 15px; } }
-  .block-editor__container .bc-image-wrapper__btn {
+  .block-editor__container .editor-sidebar .bc-image-wrapper__btn {
     font-size: 14px !important;
     backdrop-filter: blur(16px) saturate(180%);
     background: rgba(255, 255, 255, 0.75);
@@ -73,9 +199,9 @@
     justify-content: center;
     max-width: 130px; }
     @media screen and (max-width: 768px) {
-      .block-editor__container .bc-image-wrapper__btn {
+      .block-editor__container .editor-sidebar .bc-image-wrapper__btn {
         padding: 5px; } }
-  .block-editor__container .bc-image-wrapper__overlay {
+  .block-editor__container .editor-sidebar .bc-image-wrapper__overlay {
     display: none;
     position: absolute;
     top: 0;
@@ -85,54 +211,50 @@
     z-index: 10;
     background: rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(3px); }
-  .block-editor__container .bc-image-wrapper:hover .bc-image-wrapper__actions {
+  .block-editor__container .editor-sidebar .bc-image-wrapper:hover .bc-image-wrapper__actions {
     display: flex; }
-  .block-editor__container .bc-image-wrapper:hover .bc-image-wrapper__overlay {
+  .block-editor__container .editor-sidebar .bc-image-wrapper:hover .bc-image-wrapper__overlay {
     display: block; }
 
-.block-editor__container .bc-url-input input {
-  width: 100%;
-  border: 1px solid #949494; }
-
-.block-editor__container .bc-selected-media-wrapper {
+.block-editor__container .editor-sidebar .bc-selected-media-wrapper {
   max-width: 200px;
   cursor: pointer;
   background: rgba(0, 0, 0, 0.3); }
 
-.block-editor__container .bc-selected-media {
+.block-editor__container .editor-sidebar .bc-selected-media {
   display: block;
   width: 100%; }
-  .block-editor__container .bc-selected-media--image {
+  .block-editor__container .editor-sidebar .bc-selected-media--image {
     max-height: 300px; }
 
-.block-editor__container .bc-select-btn,
-.block-editor__container .bc-remove-btn {
+.block-editor__container .editor-sidebar .bc-select-btn,
+.block-editor__container .editor-sidebar .bc-remove-btn {
   margin-top: 15px;
   margin-bottom: 15px;
   display: flex; }
 
-.block-editor__container .react-select__input {
+.block-editor__container .editor-sidebar .react-select__input {
   box-shadow: none !important; }
 
-.block-editor__container .bc-responsive-spacing-tab:last-child {
+.block-editor__container .editor-sidebar .bc-responsive-spacing-tab:last-child {
   margin-bottom: 2rem; }
 
-.block-editor__container .bc-spacing-control-wrapper {
+.block-editor__container .editor-sidebar .bc-spacing-control-wrapper {
   margin-bottom: 35px; }
 
-.block-editor__container .bc-spacing-range-control {
+.block-editor__container .editor-sidebar .bc-spacing-range-control {
   padding: 0 6px; }
-  .block-editor__container .bc-spacing-range-control .components-base-control__label {
+  .block-editor__container .editor-sidebar .bc-spacing-range-control .components-base-control__label {
     margin-left: -9px; }
-  .block-editor__container .bc-spacing-range-control .components-range-control__root .components-range-control__wrapper {
+  .block-editor__container .editor-sidebar .bc-spacing-range-control .components-range-control__root .components-range-control__wrapper {
     margin-bottom: 0; }
-    .block-editor__container .bc-spacing-range-control .components-range-control__root .components-range-control__wrapper .components-range-control__marks .components-range-control__mark-label {
+    .block-editor__container .editor-sidebar .bc-spacing-range-control .components-range-control__root .components-range-control__wrapper .components-range-control__marks .components-range-control__mark-label {
       left: 8px !important;
       margin-top: 7px !important; }
-  .block-editor__container .bc-spacing-range-control .components-base-control__help {
+  .block-editor__container .editor-sidebar .bc-spacing-range-control .components-base-control__help {
     margin-left: -11px; }
 
-.block-editor__container .bc-add-new-child-btn {
+.block-editor__container .editor-sidebar .bc-add-new-child-btn {
   display: flex;
   margin: 20px auto !important;
   align-items: center;
@@ -147,38 +269,5 @@
   box-shadow: inset 0 0 0 1px #1e1e1e;
   color: #1e1e1e; }
 
-.block-editor__container .editor-visual-editor.is-resizable .root-block-appender {
-  display: none; }
-
-.block-editor__container .root-block-appender {
-  position: absolute;
-  bottom: 30px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: calc(100% - var(--content-padding) * 2); }
-  .block-editor__container .root-block-appender::after {
-    content: attr(data-tooltip);
-    position: absolute;
-    left: 50%;
-    bottom: -30px;
-    transform: translateX(-50%);
-    z-index: 1;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.3s;
-    width: max-content;
-    max-width: 200px;
-    white-space: nowrap;
-    background: #000;
-    border-radius: 2px;
-    color: #f0f0f0;
-    font-size: 12px;
-    line-height: 1.4;
-    padding: 4px 8px;
-    text-align: center;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif; }
-  .block-editor__container .root-block-appender:hover::after {
-    visibility: visible;
-    opacity: 1; }
-  .block-editor__container .root-block-appender ~ .block-list-appender.wp-block {
-    display: none; }
+.block-editor-inserter__quick-inserter-results .block-editor-block-types-list > [role=presentation] {
+  justify-content: center; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "",
   "author": "Secret Stache",
   "license": "GPL-2.0-or-later",

package/src/components/EmptyBlockAppender.js

@@ -0,0 +1,30 @@
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export const EmptyBlockAppender = (props) => {
+    const {
+        showIcon = true,
+        title = 'This block is empty',
+        text = 'Use the "+" button below to add content blocks',
+    } = props;
+
+    return (
+        <div className="empty-block-appender">
+            <div className="empty-block-appender__content">
+                {
+                    showIcon && (
+                        <svg className="empty-block-appender__icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                    )
+                }
+
+                <h3 className="empty-block-appender__title">{title}</h3>
+                <p className="empty-block-appender__text">{text}</p>
+            </div>
+
+            <div className="empty-block-appender__button">
+                <InnerBlocks.ButtonBlockAppender />
+            </div>
+        </div>
+    );
+};

package/src/components/LinkControl.js

@@ -1,6 +1,7 @@
 import { BaseControl, CheckboxControl } from '@wordpress/components';
 import { URLInput } from '@wordpress/block-editor';
-import { useUpdateAttribute } from '../hooks';
+
+import { deprecationWarning } from '../utils/internal/helpers.js';
 
 export const LinkControl = ({
     url = { value: '#', attrName: 'linkSource' },
@@ -8,7 +9,7 @@ export const LinkControl = ({
     setAttributes,
     label = 'Source',
 }) => {
-    const updateAttribute = useUpdateAttribute(setAttributes);
+    deprecationWarning('Warning: LinkControl is deprecated since version 0.4.1 and will be removed in future versions. Please use native one instead.');
 
     return (
         <>

package/src/components/ResourcesWrapper.js

@@ -1,16 +1,17 @@
 import { Notice, Placeholder, Spinner } from '@wordpress/components';
 
-const EmptyNotice = ({
-    message = 'No resources were found matching your criteria. Please try to adjust the query.'
-}) => (
+const DEFAULT_EMPTY_RESOURCES_MESSAGE = 'No resources were found matching your criteria. Please try to adjust the query.';
+const DEFAULT_EMPTY_SELECTION_MESSAGE = 'No items are selected. Please use the corresponding relationship field to populate this block.';
+
+export const EmptyNotice = ({ message }) => (
     <Notice status="info" isDismissible={false}>
         <p>{message}</p>
     </Notice>
 );
 
-const LoadingSpinner = () => <Spinner className="bc-spinner" />;
+export const LoadingSpinner = () => <Spinner className="bc-spinner" />;
 
-const PlaceholderContent = ({
+export const PlaceholderContent = ({
     icon = 'info-outline',
     instructions = 'Please configure the block in the sidebar.',
     ...restProps
@@ -24,9 +25,11 @@ const PlaceholderContent = ({
 
 export const ResourcesWrapper = ({
     isLoading,
-    isEmpty,
+    isEmptyResources,
+    isEmptySelection,
     isPlaceholder,
-    emptyMessage,
+    emptyResourcesMessage,
+    emptySelectionMessage,
     placeholderProps = {},
     children,
 }) => {
@@ -34,8 +37,12 @@ export const ResourcesWrapper = ({
         return <LoadingSpinner />;
     }
 
-    if (isEmpty) {
-        return <EmptyNotice message={emptyMessage} />;
+    if (isEmptySelection) {
+        return <EmptyNotice message={emptySelectionMessage || DEFAULT_EMPTY_SELECTION_MESSAGE} />;
+    }
+
+    if (isEmptyResources) {
+        return <EmptyNotice message={emptyResourcesMessage || DEFAULT_EMPTY_RESOURCES_MESSAGE} />;
     }
 
     if (isPlaceholder) {

package/src/components/index.js

@@ -12,3 +12,4 @@ export { DividersControl } from './DividersControl.js'
 export { MediaTypeControl } from './MediaTypeControl.js'
 export { InsertBlockToolbar } from './InsertBlockToolbar.js'
 export { PreviewControl } from './PreviewControl.js'
+export { EmptyBlockAppender } from './EmptyBlockAppender.js'

package/src/hooks/index.js

@@ -3,7 +3,6 @@ export { useSlider } from './useSlider.js';
 export { useParentBlock } from './useParentBlock.js';
 export { useColorChange } from './useColorChange';
 export { useThemeColors } from './useThemeColors';
-export { useUpdateAttribute } from './useUpdateAttribute';
 export { useDataQuery } from './useDataQuery';
 export { useAccordionItem } from './useAccordionItem.js';
 export { useTabs } from './useTabs.js';

package/src/hooks/useDataQuery.js

@@ -5,24 +5,24 @@ export const useDataQuery = (config, dependencies = []) => {
         postType,
         curatedPostsIds,
 
-        categoriesTaxonomy,
-        curatedCategoriesIds,
+        taxonomySlug,
+        curatedTermsIds,
 
-        numberOfPosts = 100,
+        numberOfPosts = -1,
         extraQueryArgs,
     } = config;
 
     return useSelect((select) => {
         const queryArgs = {
-            per_page: numberOfPosts,
+            per_page: numberOfPosts === -1 ? 100 : numberOfPosts,
             order: 'desc',
             orderby: 'date',
             _embed: true,
             ...extraQueryArgs,
         };
 
-        if (categoriesTaxonomy && curatedCategoriesIds?.length > 0) {
-            queryArgs[categoriesTaxonomy] = curatedCategoriesIds.join(',');
+        if (taxonomySlug && curatedTermsIds?.length > 0) {
+            queryArgs[taxonomySlug] = curatedTermsIds.join(',');
         }
 
         if (curatedPostsIds?.length > 0) {
@@ -37,7 +37,7 @@ export const useDataQuery = (config, dependencies = []) => {
         const postsToShow = select('core').getEntityRecords('postType', preparedPostType, queryArgs);
         const isResolving = select('core/data').isResolving('core', 'getEntityRecords', ['postType', preparedPostType, queryArgs]);
 
-        const isEmpty = postsToShow !== null && postsToShow?.length === 0;
+        const isEmpty = (postsToShow !== null && postsToShow?.length === 0) || numberOfPosts === 0;
 
         return {
             postsToShow,

package/src/hooks/useSlider.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from '@wordpress/element';
 
-export const useSlider = ({ isEnabled, setupSlider, dependencies = [] }) => {
+export const useSlider = ({ isEnabled, setupSlider, cleanCallback }, dependencies = []) => {
     const sliderElRef = useRef(null);
     const sliderInstance = useRef(null);
 
@@ -13,6 +13,10 @@ export const useSlider = ({ isEnabled, setupSlider, dependencies = [] }) => {
             if (sliderInstance.current) {
                 sliderInstance.current?.destroy();
                 sliderInstance.current = null;
+
+                if (cleanCallback) {
+                    cleanCallback();
+                }
             }
         };
     }, [ isEnabled, ...dependencies ]);

package/src/styles/_empty-block-appender.scss

@@ -0,0 +1,82 @@
+.empty-block-appender {
+    --button-color: #192f5f;
+    --button-border: var(--button-color);
+    --button-hover-color: var(--wp-admin-theme-color);
+    --button-hover-border: var(--wp-admin-theme-color);
+    --tr: .3s;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+
+    &__content {
+        text-align: center;
+    }
+
+    &__icon {
+        width: 48px;
+        height:48px;
+        color: var(--button-color);
+        margin-bottom: 16px;
+    }
+
+    &__title {
+        font-size: 32px;
+        font-weight: 600;
+        line-height: 110%;
+        color: var(--button-color);
+        margin-bottom: 0.5rem;
+    }
+
+    &__text {
+        font-size: 1rem;
+        font-weight: 400;
+        color: var(--button-color);
+        margin-bottom: 1.5rem;
+    }
+
+    &__button {
+        .block-editor-button-block-appender {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            transition:
+                color var(--tr),
+                border-color var(--tr);
+            cursor: pointer;
+            border: 2px solid var(--button-border) !important;
+            box-shadow: none;
+            border-radius: 10px;
+            background: transparent !important;
+            padding: 12px 24px;
+            min-height: 50px;
+            min-width: 200px;
+            color: var(--button-color);
+            font-weight: 600;
+            font-size: 22px;
+
+            &:hover,
+            &:focus {
+                color: var(--button-hover-color);
+                border-color: var(--button-hover-border) !important;
+                outline: none !important;
+                box-shadow: none !important;
+            }
+
+            &::before,
+            &::after {
+                display: none !important;
+            }
+
+            .block-editor-button-block-appender__content {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+}