@secretstache/wordpress-gutenberg 0.6.16 → 0.7.0

package/src/icons/index.jsx

@@ -1,38 +1,74 @@
-export const editIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z"></path>
-  </svg>
-);
-
-export const trashIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
-    <path fillRule="evenodd" clipRule="evenodd" d="M12 5.5A2.25 2.25 0 0 0 9.878 7h4.244A2.251 2.251 0 0 0 12 5.5ZM12 4a3.751 3.751 0 0 0-3.675 3H5v1.5h1.27l.818 8.997a2.75 2.75 0 0 0 2.739 2.501h4.347a2.75 2.75 0 0 0 2.738-2.5L17.73 8.5H19V7h-3.325A3.751 3.751 0 0 0 12 4Zm4.224 4.5H7.776l.806 8.861a1.25 1.25 0 0 0 1.245 1.137h4.347a1.25 1.25 0 0 0 1.245-1.137l.805-8.861Z"></path>
-  </svg>
-);
-
-export const pageIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z"></path>
-    <path d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z"></path>
-  </svg>
-);
-
-export const plusIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"></path>
-  </svg>
-);
-
-export const sidesBottomIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z" style={{ opacity: 0.25 }}></path>
-    <path d="m16.5 19.5h-9v-1.5h9z"></path>
-  </svg>
-);
-
-export const sidesTopIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
-    <path d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z" style={{ opacity: 0.25 }}></path>
-    <path d="m16.5 6h-9v-1.5h9z"></path>
-  </svg>
-);
+import { deprecationWarning } from '../utils/internal/helpers.js';
+
+export const editIcon = () => {
+    deprecationWarning('Warning: editIcon is deprecated since version 0.6.16 and will be removed in future versions. Please consider to use icons from @wordpress/icons package instead.');
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+            <path d="m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z" />
+        </svg>
+    );
+}
+
+export const trashIcon = () => {
+    deprecationWarning('Warning: trashIcon is deprecated since version 0.6.16 and will be removed in future versions. Please consider to use icons from @wordpress/icons package instead.');
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+            <path fillRule="evenodd" clipRule="evenodd" d="M12 5.5A2.25 2.25 0 0 0 9.878 7h4.244A2.251 2.251 0 0 0 12 5.5ZM12 4a3.751 3.751 0 0 0-3.675 3H5v1.5h1.27l.818 8.997a2.75 2.75 0 0 0 2.739 2.501h4.347a2.75 2.75 0 0 0 2.738-2.5L17.73 8.5H19V7h-3.325A3.751 3.751 0 0 0 12 4Zm4.224 4.5H7.776l.806 8.861a1.25 1.25 0 0 0 1.245 1.137h4.347a1.25 1.25 0 0 0 1.245-1.137l.805-8.861Z" />
+        </svg>
+    );
+}
+
+export const pageIcon = () => {
+    deprecationWarning('Warning: pageIcon is deprecated since version 0.6.16 and will be removed in future versions. Please consider to use icons from @wordpress/icons package instead.');
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+            <path d="M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z" />
+            <path d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z"></path>
+        </svg>
+    );
+}
+
+export const plusIcon = () => {
+    deprecationWarning('Warning: plusIcon is deprecated since version 0.6.16 and will be removed in future versions. Please consider to use icons from @wordpress/icons package instead.');
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+            <path d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z" />
+        </svg>
+    );
+}
+
+export const sidesBottomIcon = () => {
+    deprecationWarning('Warning: sidesBottomIcon is deprecated since version 0.6.16 and will be removed in future versions. Please consider to use icons from @wordpress/icons package instead.');
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+            <path d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z" style={{ opacity: 0.25 }} />
+            <path d="m16.5 19.5h-9v-1.5h9z" />
+        </svg>
+    );
+}
+
+export const sidesTopIcon = () => {
+    deprecationWarning('Warning: sidesTopIcon is deprecated since version 0.6.16 and will be removed in future versions. Please consider to use icons from @wordpress/icons package instead.');
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+            <path d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z" style={{ opacity: 0.25 }} />
+            <path d="m16.5 6h-9v-1.5h9z" />
+        </svg>
+    );
+}
+
+export const addTemplateIcon = () => {
+    deprecationWarning('Warning: addTemplateIcon is deprecated since version 0.6.16 and will be removed in future versions. Please consider to use icons from @wordpress/icons package instead.');
+
+    return (
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" focusable="false">
+            <path fillRule="evenodd" clipRule="evenodd" d="M18.5 5.5V8H20V5.5H22.5V4H20V1.5H18.5V4H16V5.5H18.5ZM13.9624 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V10.0391H18.5V18C18.5 18.2761 18.2761 18.5 18 18.5H10L10 10.4917L16.4589 10.5139L16.4641 9.01389L5.5 8.97618V6C5.5 5.72386 5.72386 5.5 6 5.5H13.9624V4ZM5.5 10.4762V18C5.5 18.2761 5.72386 18.5 6 18.5H8.5L8.5 10.4865L5.5 10.4762Z" />
+        </svg>
+    );
+}

package/src/index.js

@@ -1,4 +1,6 @@
 export * from './components/index.js';
 export * from './hooks/index.js';
+export * from './plugins/index.js';
+export * from './filters/index.js';
 
 export * from './utils/index.js';

package/src/plugins/index.js

@@ -0,0 +1,22 @@
+import { select, subscribe } from '@wordpress/data';
+import { waitForRootContainer } from '../utils/index.js';
+
+export * from './root-block-appender.jsx';
+export * from './root-pattern-appender.jsx';
+
+export const setPostTypePlugins = (plugins, currentPostType) => {
+    if (!plugins || !currentPostType) return;
+
+    waitForRootContainer()
+        .then(() => {
+            plugins?.forEach((plugin) => {
+                if (plugin.isRegistered) {
+                    plugin.unregister();
+                }
+
+                if (plugin.postTypes.includes(currentPostType)) {
+                    plugin.register();
+                }
+            });
+        });
+};

package/src/plugins/root-block-appender.jsx

@@ -0,0 +1,51 @@
+import { registerPlugin, unregisterPlugin } from '@wordpress/plugins';
+import { createPortal } from '@wordpress/element';
+import { dispatch } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+
+import { getRootContainer } from '../utils/index.js';
+
+export class RootBlockAppenderPlugin {
+    name = 'root-block-appender';
+    isRegistered = false;
+
+    constructor(
+        rootBlockName = 'ssm/section-wrapper',
+        postTypes = ['page', 'post', 'ssm_design_system'],
+        tooltipText = 'Add Row',
+    ) {
+        this.rootBlockName = rootBlockName;
+        this.postTypes = postTypes;
+        this.tooltipText = tooltipText;
+    }
+
+    register() {
+        const container = getRootContainer();
+
+        if (!container) {
+            console.error(`[${this.name}] - root container is not found.`);
+            return;
+        }
+
+        registerPlugin(this.name, {
+            render: () => createPortal(
+                <button
+                    className="components-button block-editor-button-block-appender root-block-appender"
+                    onClick={() => dispatch('core/block-editor').insertBlock(createBlock(this.rootBlockName))}
+                    aria-label={this.tooltipText}
+                    data-tooltip={this.tooltipText}
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"></path></svg>
+                </button>,
+                container
+            ),
+        });
+
+        this.isRegistered = true;
+    }
+
+    unregister() {
+        unregisterPlugin(this.name);
+        this.isRegistered = false;
+    }
+}

package/src/plugins/root-pattern-appender.jsx

@@ -0,0 +1,53 @@
+import { registerPlugin, unregisterPlugin } from '@wordpress/plugins';
+import { createPortal } from '@wordpress/element';
+
+import { __experimentalPatternAppender as PatternAppender } from '../components/PatternAppender.jsx';
+import { getRootContainer } from '../utils/index.js';
+
+export class RootPatternAppenderPlugin {
+    name = 'root-pattern-appender';
+    isRegistered = false;
+
+    constructor(
+        postTypes = ['page', 'post', 'ssm_design_system'],
+        tooltipText = 'Add Pattern',
+    ) {
+        this.postTypes = postTypes;
+        this.tooltipText = tooltipText;
+    }
+
+    register() {
+        const container = getRootContainer();
+
+        if (!container) {
+            console.error(`[${this.name}] - root container is not found.`);
+            return;
+        }
+
+        registerPlugin(this.name, {
+            render: () => createPortal(
+                <PatternAppender
+                    render={({ setModalOpen }) => (
+                        <button
+                            className="components-button block-editor-button-block-appender root-pattern-appender"
+                            onClick={() => setModalOpen(true)}
+                            aria-label={this.tooltipText}
+                            data-tooltip={this.tooltipText}
+                        >
+                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" focusable="false"><path fillRule="evenodd" clipRule="evenodd" d="M18.5 5.5V8H20V5.5H22.5V4H20V1.5H18.5V4H16V5.5H18.5ZM13.9624 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V10.0391H18.5V18C18.5 18.2761 18.2761 18.5 18 18.5H10L10 10.4917L16.4589 10.5139L16.4641 9.01389L5.5 8.97618V6C5.5 5.72386 5.72386 5.5 6 5.5H13.9624V4ZM5.5 10.4762V18C5.5 18.2761 5.72386 18.5 6 18.5H8.5L8.5 10.4865L5.5 10.4762Z"></path></svg>
+                        </button>
+                    )}
+                    rootClientId={null}
+                />,
+                container
+            )
+        });
+
+        this.isRegistered = true;
+    }
+
+    unregister() {
+        unregisterPlugin(this.name);
+        this.isRegistered = false;
+    }
+}

package/src/styles/{_empty-block-appender.scss → _empty-block-placeholder.scss}

@@ -1,4 +1,4 @@
-.empty-block-appender {
+.empty-block-placeholder {
     --button-color: #192f5f;
     --button-color-hover: var(--wp-admin-theme-color);
     --button-border: #192f5f;
@@ -24,6 +24,11 @@
         --text-color: #fff;
     }
 
+    &__buttons-wrapper {
+        display: flex;
+        gap: 16px;
+    }
+
     &__content {
         display: flex;
         flex-direction: column;

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

@@ -3,6 +3,7 @@
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
+    max-width: none !important;
     width: calc(100% - 60px);
 
     &::after {
@@ -38,3 +39,15 @@
         display: none;
     }
 }
+
+&:has(> .root-block-appender):has(> .root-pattern-appender) > .root-block-appender {
+    left: 15%;
+    width: 50%;
+    transform: none;
+    max-width: none !important;
+    margin: unset !important;
+    box-shadow: none;
+    border: 1px solid #000;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}

package/src/styles/_root-pattern-appender.scss

@@ -0,0 +1,58 @@
+.root-pattern-appender {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: none !important;
+    width: calc(100% - 60px);
+
+    &::after {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+        visibility: hidden;
+        opacity: 0;
+        z-index: 1;
+        transition: opacity 0.3s;
+        border-radius: 2px;
+        background: #000;
+        padding: 4px 8px;
+        width: max-content;
+        max-width: 200px;
+        content: attr(data-tooltip);
+        color: #f0f0f0;
+        font-size: 12px;
+        line-height: 1.4;
+        font-family:
+            -apple-system,
+            BlinkMacSystemFont,
+            Segoe UI,
+            Roboto,
+            Oxygen-Sans,
+            Ubuntu,
+            Cantarell,
+            Helvetica Neue,
+            sans-serif;
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    &:hover::after {
+        visibility: visible;
+        opacity: 1;
+    }
+}
+
+&:has(> .root-pattern-appender):has(> .root-block-appender) > .root-pattern-appender {
+    left: 65%;
+    width: 20%;
+    transform: none;
+    max-width: none !important;
+    margin: unset !important;
+    box-shadow: none;
+    border: 1px solid #000;
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}

package/src/styles/editor-canvas.scss

@@ -19,19 +19,25 @@
         }
     }
 
-
     .block-editor-block-list__layout.is-root-container {
         @import "root-block-appender";
-        @import "empty-block-appender";
+        @import "root-pattern-appender";
+        @import "empty-block-placeholder";
+
         @import "new-child-btn";
         @import "image-wrapper";
 
         margin-bottom: 0;
         padding-bottom: 0;
 
-        &:has(.root-block-appender) {
+        &:has(.root-block-appender),
+        &:has(.root-pattern-appender) {
             margin-bottom: 3rem;
             padding-bottom: 200px;
+
+            & > .block-list-appender.wp-block {
+                display: none;
+            }
         }
 
         &.has-background {

package/src/utils/helpers.js

@@ -324,6 +324,22 @@ export function updateBlockApiVersion(blockName, apiVersion = 3) {
     }
 }
 
+/**
+ * Updates the API version of all registered blocks with an API version less than 3.
+ *
+ * Retrieves the list of registered blocks from the `core/blocks` store, filters out blocks
+ * with an API version less than 3, and updates their API version to the specified value.
+ *
+ * @param {number} apiVersion - The target API version to update blocks to.
+ */
+export const updateAllBlocksApiVersion = (apiVersion) => {
+    select('core/blocks')
+        ?.getBlockTypes()
+        ?.filter((block) => block.apiVersion < 3)
+        ?.map((block) => block.name)
+        ?.forEach((blockName) => updateBlockApiVersion(blockName, apiVersion));
+};
+
 /**
  * Creates object-position style based on focal point coordinates
  *
@@ -379,3 +395,40 @@ export const useDefaultSelectOptions = (postType, mapper = null, extraParams = {
         };
     }, [ postType, JSON.stringify(query) ]);
 };
+
+export const hideBlockForInlineInserter = (blockName) => {
+    const styleElementId = `ssm-hide-${blockName}-for-inline-inserter`;
+
+    // Construct the CSS rule
+    const cssRule = `[id*="-block-${blockName}"] { display: none !important; }`;
+
+    // Create a style element
+    const styleElement = document.createElement('style');
+    styleElement.id = styleElementId;
+
+    // Set the CSS rule as the content of the style element
+    styleElement.appendChild(document.createTextNode(cssRule));
+
+    // Append the style element to the document's head
+    document.head.appendChild(styleElement);
+
+    // cleanup function
+    return () => {
+        document.head.removeChild(styleElement);
+    }
+};
+
+export const subscribeForPostTypeChange = (callback) => {
+    let prevPostType = null;
+
+    return subscribe(() => {
+        const currentPostType = select('core/editor').getCurrentPostType();
+        const isPostTypeChanged = currentPostType && (currentPostType !== prevPostType);
+
+        if (isPostTypeChanged) {
+            callback(currentPostType, prevPostType);
+
+            prevPostType = currentPostType;
+        }
+    }, 'core/block-editor');
+};

package/src/utils/index.js

@@ -1,7 +1,4 @@
-export * from './rootBlock/index.js';
 export * from './rootContainer/index.js';
 
-export * from './attributes.js';
 export * from './constants.js';
 export * from './helpers.js';
-export * from './filters.jsx';

package/src/components/EmptyBlockAppender.jsx

@@ -1,38 +0,0 @@
-import { InnerBlocks } from '@wordpress/block-editor';
-import classNames from 'classnames';
-
-export const EmptyBlockAppender = (props) => {
-    const {
-        showIcon = true,
-        showAppender = true,
-        title = 'This block is empty',
-        text = 'Use the "+" button below to add content blocks',
-        isLight = false,
-        className,
-    } = props;
-
-    return (
-        <div className={classNames('empty-block-appender', className, { 'empty-block-appender--light': isLight })}>
-            <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>
-
-            {
-                showAppender && (
-                    <div className="empty-block-appender__button">
-                        <InnerBlocks.ButtonBlockAppender />
-                    </div>
-                )
-            }
-        </div>
-    );
-};