@secretstache/wordpress-gutenberg 0.6.16 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.6.16",
+  "version": "0.7.1",
   "description": "",
   "author": "Secret Stache",
   "license": "GPL-2.0-or-later",
@@ -41,10 +41,13 @@
     "@wordpress/block-editor": "^14.19.0",
     "@wordpress/blocks": "^14.13.0",
     "@wordpress/components": "^29.10.0",
+    "@wordpress/compose": "^7.38.0",
     "@wordpress/data": "^10.24.0",
     "@wordpress/dom-ready": "^4.24.0",
     "@wordpress/element": "^6.24.0",
     "@wordpress/hooks": "^4.24.0",
+    "@wordpress/icons": "^11.5.0",
+    "@wordpress/plugins": "^7.38.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^9.1.3",
     "node-sass": "^9.0.0",
@@ -52,7 +55,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "sass": "^1.90.0",
-    "vite": "^7.0.6",
+    "vite": "^7.3.1",
     "vite-plugin-externals": "^0.6.2"
   },
   "dependencies": {
@@ -68,10 +71,13 @@
     "@wordpress/block-editor": "^14.19.0",
     "@wordpress/blocks": "^14.13.0",
     "@wordpress/components": "^29.10.0",
+    "@wordpress/compose": "^7.38.0",
     "@wordpress/data": "^10.24.0",
     "@wordpress/dom-ready": "^4.24.0",
     "@wordpress/element": "^6.24.0",
     "@wordpress/hooks": "^4.24.0",
+    "@wordpress/icons": "^11.5.0",
+    "@wordpress/plugins": "^7.38.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package/src/components/EmptyBlockPlaceholder.jsx

@@ -0,0 +1,67 @@
+import { InnerBlocks } from '@wordpress/block-editor';
+import { Icon, addTemplate } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+import classNames from 'classnames';
+
+import { __experimentalPatternAppender as PatternAppender } from './PatternAppender.jsx';
+
+export const __experimentalEmptyBlockPlaceholder = (props) => {
+    const {
+        title = 'This block is empty',
+        text = 'Use the "+" button below to add content blocks',
+        showIcon = true,
+        hasBlockAppender = true,
+        hasPatternAppender = true,
+        clientId,
+        isLight = false,
+        className,
+    } = props;
+
+    return (
+        <div className={classNames('empty-block-placeholder', className, { 'empty-block-placeholder--light': isLight })}>
+            <div className="empty-block-placeholder__content">
+                {
+                    showIcon && (
+                        <svg className="empty-block-placeholder__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-placeholder__title">{title}</h3>
+                <p className="empty-block-placeholder__text">{text}</p>
+            </div>
+
+            <div className="empty-block-placeholder__buttons-wrapper">
+                {
+                    hasBlockAppender && (
+                        <div className="empty-block-placeholder__button">
+                            <InnerBlocks.ButtonBlockAppender />
+                        </div>
+                    )
+                }
+
+                {
+                    hasPatternAppender && (
+                        <div className="empty-block-placeholder__button">
+                            <PatternAppender
+                                render={({ setModalOpen }) => (
+                                    <Button
+                                        __next40pxDefaultSize
+                                        className="block-editor-button-block-appender"
+                                        onClick={() => setModalOpen(true)}
+                                        label="Add Pattern"
+                                        showTooltip
+                                    >
+                                        <Icon icon={addTemplate} />
+                                    </Button>
+                                )}
+                                rootClientId={clientId}
+                            />
+                        </div>
+                    )
+                }
+            </div>
+        </div>
+    );
+};

package/src/components/IconPicker.jsx

@@ -3,9 +3,8 @@ import {
     MediaUpload,
     MediaUploadCheck,
 } from '@wordpress/block-editor';
-import { Button, Icon } from '@wordpress/components';
-
-import { editIcon, trashIcon } from '../icons/index.jsx';
+import { Button } from '@wordpress/components';
+import { Icon, pencil, trash } from '@wordpress/icons';
 
 export const IconPicker = ({ imageId, imageUrl, imageAlt, svgCode, onSelect, onRemove }) => {
     const hasImage = imageId && imageUrl;
@@ -38,7 +37,7 @@ export const IconPicker = ({ imageId, imageUrl, imageAlt, svgCode, onSelect, onR
                                     onClick={open}
                                 >
                                     <Icon
-                                        icon={editIcon}
+                                        icon={pencil}
                                         size={20}
                                         className="bc-image-wrapper__btn-icon"
                                     />
@@ -50,7 +49,7 @@ export const IconPicker = ({ imageId, imageUrl, imageAlt, svgCode, onSelect, onR
                                     onClick={onRemove}
                                 >
                                     <Icon
-                                        icon={trashIcon}
+                                        icon={trash}
                                         size={20}
                                         className="bc-image-wrapper__btn-icon"
                                     />

package/src/components/MediaControl.jsx

@@ -1,7 +1,7 @@
-import { BaseControl, Button, FocalPointPicker, Icon as WPIcon } from '@wordpress/components';
+import { BaseControl, Button, FocalPointPicker } from '@wordpress/components';
+import { Icon, page } from '@wordpress/icons';
 import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
 
-import { pageIcon } from '../icons/index.jsx';
 import { MEDIA_TYPE } from '../utils/index.js';
 
 export const ImageRenderer = ({
@@ -27,7 +27,7 @@ export const ImageRenderer = ({
             <Button
                 className="bc-remove-btn"
                 onClick={onRemoveClick}
-                isSecondary
+                variant="secondary"
                 isDestructive
             >
                 {removeButtonLabel}
@@ -61,7 +61,7 @@ export const VideoRenderer = ({
             <Button
                 className="bc-remove-btn"
                 onClick={onRemoveClick}
-                isSecondary
+                variant="secondary"
                 isDestructive
             >
                 {removeButtonLabel}
@@ -90,7 +90,7 @@ export const AnimationRenderer = ({
     return animationFileId && animationFileUrl ? (
         <>
             <div className="bc-animation-block-json-file" onClick={onSelectClick}>
-                <WPIcon icon={pageIcon} size={36} />
+                <Icon icon={page} size={36} />
                 <span>{animationFileName}</span>
             </div>
             <Button
@@ -158,16 +158,15 @@ export const MediaControl = ({
 
                 {
                     hasFocalPoint && mediaId && mediaUrl && (
-                        <BaseControl label={focalPointLabel}>
-                            <FocalPointPicker
-                                __nextHasNoMarginBottom
-                                url={mediaUrl}
-                                value={focalPoint}
-                                onDragStart={onFocalPointChange}
-                                onDrag={onFocalPointChange}
-                                onChange={onFocalPointChange}
-                            />
-                        </BaseControl>
+                        <FocalPointPicker
+                            __nextHasNoMarginBottom
+                            label={focalPointLabel}
+                            url={mediaUrl}
+                            value={focalPoint}
+                            onDragStart={onFocalPointChange}
+                            onDrag={onFocalPointChange}
+                            onChange={onFocalPointChange}
+                        />
                     )
                 }
             </>

package/src/components/MediaWithFocalPointControl.jsx

@@ -36,7 +36,7 @@ export const MediaWithFocalPointControl = memo(({
 
             [focalPointAttributeName]: { x: 0.5, y: 0.5 }
         });
-    }, [ mediaAttributeName ]);
+    }, [ mediaAttributeName, focalPointAttributeName ]);
 
     const onMediaRemove = useCallback(() => {
         setAttributes({
@@ -62,16 +62,15 @@ export const MediaWithFocalPointControl = memo(({
             </BaseControl>
 
             {media?.url && (
-                <BaseControl label={focalPointLabel}>
-                    <FocalPointPicker
-                        __nextHasNoMarginBottom
-                        url={media.url}
-                        value={focalPoint}
-                        onDragStart={onFocalPointChange}
-                        onDrag={onFocalPointChange}
-                        onChange={onFocalPointChange}
-                    />
-                </BaseControl>
+                <FocalPointPicker
+                    __nextHasNoMarginBottom
+                    label={focalPointLabel}
+                    url={media.url}
+                    value={focalPoint}
+                    onDragStart={onFocalPointChange}
+                    onDrag={onFocalPointChange}
+                    onChange={onFocalPointChange}
+                />
             )}
         </>
     );

package/src/components/PatternAppender.jsx

@@ -0,0 +1,24 @@
+import { useState } from '@wordpress/element';
+
+import { __experimentalPatternsModal as PatternsModal } from './PatternsModal.jsx';
+
+export const __experimentalPatternAppender = (props) => {
+    const { render, rootClientId } = props;
+
+    const [ isModalOpen, setModalOpen ] = useState(false);
+
+    return (
+        <>
+            { render({ isModalOpen, setModalOpen }) }
+
+            {
+                isModalOpen && (
+                    <PatternsModal
+                        onClose={() => setModalOpen(false)}
+                        rootClientId={rootClientId}
+                    />
+                )
+            }
+        </>
+    );
+};

package/src/components/PatternsModal.jsx

@@ -1,24 +1,22 @@
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { rawHandler } from '@wordpress/blocks';
+import { useDispatch, useSelect, select } from '@wordpress/data';
+import { cloneBlock, createBlock, rawHandler } from '@wordpress/blocks';
 import { Button, Modal, TextControl } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 
-export const PatternsModal = ({ isOpen, onRequestClose, rootClientId }) => {
+export const __experimentalPatternsModal = ({ onClose, rootClientId }) => {
     const patterns = useSelect(
-        (select) => select('core/block-editor').__experimentalGetAllowedPatterns?.(rootClientId) || [],
-        [rootClientId]
+        (select) => select('core/block-editor').__experimentalGetAllowedPatterns?.(rootClientId),
+        [ rootClientId ]
     );
 
-    const { insertBlocks, replaceBlock } = useDispatch('core/block-editor');
-    const { selectedClientId } = useSelect((select) => ({
-        selectedClientId: select('core/block-editor').getSelectedBlockClientId(),
-    }), []);
+    const { insertBlocks } = useDispatch('core/block-editor');
+    const getBlockOrder = select('core/block-editor').getBlockOrder;
 
     const [ searchValue, setSearchValue ] = useState('');
     const [ selectedCategory, setSelectedCategory ] = useState('all');
 
-    const normalizedPatterns = (patterns || []).map((pattern, index) => ({
+    const normalizedPatterns = useMemo(() => (patterns || []).map((pattern, index) => ({
         ...pattern,
         name: typeof pattern?.name === 'string' ? pattern.name : `pattern-${index}`,
         title: typeof pattern?.title === 'string'
@@ -29,7 +27,7 @@ export const PatternsModal = ({ isOpen, onRequestClose, rootClientId }) => {
             : typeof pattern?.content === 'string'
                 ? rawHandler({ HTML: pattern.content })
                 : [],
-    }));
+    })), [ patterns ]);
 
     const categories = [
         { name: 'all', label: 'All Patterns' },
@@ -39,39 +37,39 @@ export const PatternsModal = ({ isOpen, onRequestClose, rootClientId }) => {
         })),
     ];
 
-    const filteredPatterns = normalizedPatterns.filter((pattern) => {
-        const matchesSearch = !searchValue || (pattern.title || '').toLowerCase().includes(searchValue.toLowerCase());
-        const inCategory = selectedCategory === 'all' || (pattern.categories || []).includes(selectedCategory);
+    const filteredPatterns = useMemo(() => {
+        return normalizedPatterns.filter((pattern) => {
+            const matchesSearch = !searchValue || (pattern.title || '').toLowerCase().includes(searchValue.toLowerCase());
+            const inCategory = selectedCategory === 'all' || (pattern.categories || []).includes(selectedCategory);
 
-        return matchesSearch && inCategory;
-    });
+            return matchesSearch && inCategory;
+        });
+    }, [ normalizedPatterns, searchValue, selectedCategory ]);
 
     const onClickPattern = (pattern) => {
-        const blocks = Array.isArray(pattern.blocks)
-            ? pattern.blocks
-            : typeof pattern.content === 'string'
-                ? rawHandler({ HTML: pattern.content })
-                : [];
+        const isSyncedUserPattern = pattern?.type === 'user' && pattern?.syncStatus !== 'unsynced' && !!pattern?.id;
+        const blocks = isSyncedUserPattern
+            ? [createBlock('core/block', { ref: pattern.id })]
+            : Array.isArray(pattern.blocks)
+                ? pattern.blocks.map((block) => cloneBlock(block))
+                : typeof pattern.content === 'string'
+                    ? rawHandler({ HTML: pattern.content })
+                    : [];
 
-        const allRootAreSections = blocks.length > 0 && blocks.every((b) => b.name === 'ssm/section-wrapper');
-        const targetClientId = selectedClientId || rootClientId;
+        const isInsideBlock = rootClientId !== null && rootClientId !== undefined;
+        const targetClientId = isInsideBlock ? rootClientId : undefined;
+        const blockOrder = isInsideBlock ? getBlockOrder(targetClientId) : getBlockOrder();
+        const insertIndex = Array.isArray(blockOrder) ? blockOrder.length : 0;
 
-        if (allRootAreSections) {
-            replaceBlock(targetClientId, blocks);
-        } else {
-            insertBlocks(blocks, 0, targetClientId);
-        }
-        onRequestClose();
-    };
+        insertBlocks(blocks, insertIndex, targetClientId);
 
-    if (!isOpen) {
-        return null;
-    }
+        onClose();
+    };
 
     return (
         <Modal
             title="Patterns"
-            onRequestClose={onRequestClose}
+            onRequestClose={onClose}
             isFullScreen
         >
             <div className="block-editor-block-patterns-explorer">

package/src/components/SpacingControl.jsx

@@ -1,7 +1,6 @@
 import { RangeControl, Tooltip } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-
-import { sidesBottomIcon, sidesTopIcon } from '../icons/index.jsx';
+import { sidesBottom, sidesTop } from '@wordpress/icons';
 
 const generateMarks = (min, max) => [
     { value: min, label: min === -1 ? 'Default' : min.toString() },
@@ -78,7 +77,7 @@ export const SpacingControl = ({
                         onChange={handleChange('margin', 'top')}
                         disabled={disabledMargin.top}
                         tooltip={marginTooltips.top}
-                        afterIcon={sidesTopIcon}
+                        afterIcon={sidesTop}
                         withInputField={false}
                     />
 
@@ -90,7 +89,7 @@ export const SpacingControl = ({
                         onChange={handleChange('margin', 'bottom')}
                         disabled={disabledMargin.bottom}
                         tooltip={marginTooltips.bottom}
-                        afterIcon={sidesBottomIcon}
+                        afterIcon={sidesBottom}
                         withInputField={false}
                     />
                 </>
@@ -106,7 +105,7 @@ export const SpacingControl = ({
                         onChange={handleChange('padding', 'top')}
                         disabled={disabledPadding.top}
                         tooltip={paddingTooltips.top}
-                        afterIcon={sidesTopIcon}
+                        afterIcon={sidesTop}
                         withInputField={false}
                     />
 
@@ -118,7 +117,7 @@ export const SpacingControl = ({
                         onChange={handleChange('padding', 'bottom')}
                         disabled={disabledPadding.bottom}
                         tooltip={paddingTooltips.bottom}
-                        afterIcon={sidesBottomIcon}
+                        afterIcon={sidesBottom}
                         withInputField={false}
                     />
                 </>

package/src/components/index.js

@@ -1,16 +1,18 @@
-export { ColorPaletteControl } from './ColorPaletteControl.jsx';
-export { IconPicker } from './IconPicker.jsx';
-export { ImageActions } from './ImageActions.jsx';
-export { LinkControl } from './LinkControl.jsx';
-export { ImageRenderer, VideoRenderer, AnimationRenderer, MediaControl } from './MediaControl.jsx';
-export { SortableSelect, SortableSelectAsync } from './SortableSelect.jsx';
-export { DataQueryControls } from './DataQueryControls.jsx';
-export { SpacingControl } from './SpacingControl.jsx';
-export { ResponsiveSpacingControl } from './ResponsiveSpacingControl.jsx';
-export { ResourcesWrapper } from './ResourcesWrapper.jsx';
-export { DividersControl } from './DividersControl.jsx';
-export { MediaTypeControl } from './MediaTypeControl.jsx';
-export { InsertBlockToolbar } from './InsertBlockToolbar.jsx';
-export { PreviewControl } from './PreviewControl.jsx';
-export { EmptyBlockAppender } from './EmptyBlockAppender.jsx';
-export { MediaWithFocalPointControl } from './MediaWithFocalPointControl.jsx';
+export * from './ColorPaletteControl.jsx';
+export * from './IconPicker.jsx';
+export * from './ImageActions.jsx';
+export * from './LinkControl.jsx';
+export * from './MediaControl.jsx';
+export * from './SortableSelect.jsx';
+export * from './DataQueryControls.jsx';
+export * from './SpacingControl.jsx';
+export * from './ResponsiveSpacingControl.jsx';
+export * from './ResourcesWrapper.jsx';
+export * from './DividersControl.jsx';
+export * from './MediaTypeControl.jsx';
+export * from './InsertBlockToolbar.jsx';
+export * from './PreviewControl.jsx';
+export * from './MediaWithFocalPointControl.jsx';
+export * from './EmptyBlockPlaceholder.jsx';
+export * from './PatternAppender.jsx';
+export * from './PatternsModal.jsx';

package/src/filters/block-categories.js

@@ -0,0 +1,50 @@
+import { addFilter, removeFilter } from '@wordpress/hooks';
+
+export class BlockCategoriesFilter {
+    name = 'ssm/block-categories';
+    isAdded = false;
+
+    constructor(
+        categories = {},
+        postTypes = ['page', 'post', 'ssm_design_system', 'wp_block'],
+    ) {
+        this.categories = categories;
+        this.postTypes = postTypes;
+    }
+
+    add() {
+        addFilter(
+            'blocks.registerBlockType',
+            'ssm/block-categories',
+            (settings, name) => {
+                const movedBlocks = Object.values(this.categories).flat();
+
+                if (!movedBlocks.includes(name)) {
+                    return settings;
+                }
+
+                let newCategoryName = '';
+
+                for (const [category, blocks] of Object.entries(this.categories)) {
+                    if (blocks.includes(name)) {
+                        newCategoryName = category;
+                        break;
+                    }
+                }
+
+                return {
+                    ...settings,
+                    'category': newCategoryName,
+                };
+            },
+            10,
+        );
+
+        this.isAdded = true;
+    }
+
+    remove() {
+        removeFilter('blocks.registerBlockType', this.name);
+        this.isAdded = false;
+    }
+}

package/src/filters/hide-root-block-for-other.js

@@ -0,0 +1,53 @@
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import { getBlockTypes } from '@wordpress/blocks';
+
+export class HideRootBlockForOtherFilter {
+    name = 'ssm/hide-root-block-for-other';
+    isAdded = false;
+
+    constructor(
+        rootBlockName = 'ssm/section-wrapper',
+        postTypes = ['page', 'post', 'ssm_design_system', 'wp_block'],
+    ) {
+        this.rootBlockName = rootBlockName;
+        this.postTypes = postTypes;
+    }
+
+    add() {
+        addFilter(
+            'blocks.registerBlockType',
+            this.name,
+            (blockSettings, blockName) => {
+                const isRootBlock = blockName === this.rootBlockName;
+                const isBaseBlock = blockName === 'core/block';
+                const hasOwnAllowedBlocks = !!blockSettings?.allowedBlocks;
+
+                // skip specific blocks
+                if (isRootBlock || isBaseBlock || hasOwnAllowedBlocks) {
+                    return blockSettings;
+                }
+
+                // get all blocks
+                const allowedBlocks = getBlockTypes()
+                    ?.filter((block) => {
+                        const isRootBlock = block.name === this.rootBlockName;
+                        const hasParent = !!block?.parent;
+
+                        return !isRootBlock && !hasParent;
+                    })
+                    ?.map((block) => block.name);
+
+                blockSettings.allowedBlocks = allowedBlocks;
+
+                return blockSettings;
+            },
+        );
+
+        this.isAdded = true;
+    }
+
+    remove() {
+        removeFilter('blocks.registerBlockType', this.name);
+        this.isAdded = false;
+    }
+}

package/src/filters/index.js

@@ -0,0 +1,24 @@
+import { dispatch } from '@wordpress/data';
+
+export * from './hide-root-block-for-other.js';
+export * from './inner-blocks-cleanup.jsx';
+export * from './root-block.js';
+export * from './block-categories.js';
+
+export const setPostTypeFilters = (filters, currentPostType, onSet) => {
+    if (!filters || !currentPostType) return;
+
+    filters?.forEach((filter) => {
+        if (filter.isAdded) {
+            filter.remove();
+        }
+
+        if (filter.postTypes.includes(currentPostType)) {
+            filter.add();
+        }
+
+        dispatch('core/blocks').reapplyBlockTypeFilters();
+
+        if (onSet) onSet();
+    });
+};

package/src/filters/inner-blocks-cleanup.jsx

@@ -0,0 +1,53 @@
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { dispatch, select, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { addFilter, removeFilter } from '@wordpress/hooks';
+
+export class InnerBlocksCleanupFilter {
+    name = 'ssm/inner-blocks-cleanup';
+    isAdded = false;
+
+    constructor(blockName) {
+        this.blockName = blockName;
+    }
+
+    add() {
+        addFilter(
+            'editor.BlockEdit',
+            this.name,
+            createHigherOrderComponent((BlockEdit) => (props) => {
+                    const { clientId, attributes, name } = props;
+
+                    const { dataSource } = attributes;
+
+                    if (name !== this.blockName) {
+                        return <BlockEdit {...props} />;
+                    }
+
+                    const innerBlocks = useSelect(
+                        (select) => select('core/block-editor').getBlock(clientId)?.innerBlocks || [],
+                        []
+                    );
+
+                    useEffect(() => {
+                        if (dataSource !== 'none' && innerBlocks.length > 0) {
+                            dispatch('core/block-editor').updateBlock(clientId, {
+                                ...select('core/block-editor').getBlock(clientId),
+                                innerBlocks: [],
+                            });
+                        }
+                    }, [ dataSource, innerBlocks.length ]);
+
+                    return <BlockEdit {...props} />;
+                }, this.name),
+            10,
+        );
+
+        this.isAdded = true;
+    }
+
+    remove() {
+        removeFilter('editor.BlockEdit', this.name);
+        this.isAdded = false;
+    }
+}