@secretstache/wordpress-gutenberg 0.6.13 → 0.6.15

package/package.json

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

package/src/components/PatternsModal.jsx

@@ -0,0 +1,124 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { rawHandler } from '@wordpress/blocks';
+import { Button, Modal, TextControl } from '@wordpress/components';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+
+export const PatternsModal = ({ isOpen, onRequestClose, rootClientId }) => {
+    const patterns = useSelect(
+        (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 [ searchValue, setSearchValue ] = useState('');
+    const [ selectedCategory, setSelectedCategory ] = useState('all');
+
+    const normalizedPatterns = (patterns || []).map((pattern, index) => ({
+        ...pattern,
+        name: typeof pattern?.name === 'string' ? pattern.name : `pattern-${index}`,
+        title: typeof pattern?.title === 'string'
+            ? pattern.title
+            : pattern?.title?.rendered || `Pattern ${index + 1}`,
+        blocks: Array.isArray(pattern?.blocks)
+            ? pattern.blocks
+            : typeof pattern?.content === 'string'
+                ? rawHandler({ HTML: pattern.content })
+                : [],
+    }));
+
+    const categories = [
+        { name: 'all', label: 'All Patterns' },
+        ...Array.from(new Set(normalizedPatterns.flatMap((p) => p.categories || []))).map((name) => ({
+            name,
+            label: name,
+        })),
+    ];
+
+    const filteredPatterns = normalizedPatterns.filter((pattern) => {
+        const matchesSearch = !searchValue || (pattern.title || '').toLowerCase().includes(searchValue.toLowerCase());
+        const inCategory = selectedCategory === 'all' || (pattern.categories || []).includes(selectedCategory);
+
+        return matchesSearch && inCategory;
+    });
+
+    const onClickPattern = (pattern) => {
+        const blocks = Array.isArray(pattern.blocks)
+            ? pattern.blocks
+            : 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;
+
+        if (allRootAreSections) {
+            replaceBlock(targetClientId, blocks);
+        } else {
+            insertBlocks(blocks, 0, targetClientId);
+        }
+        onRequestClose();
+    };
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <Modal
+            title="Patterns"
+            onRequestClose={onRequestClose}
+            isFullScreen
+        >
+            <div className="block-editor-block-patterns-explorer">
+                <div className="block-editor-block-patterns-explorer__sidebar">
+                    <div className="block-editor-block-patterns-explorer__search">
+                        <TextControl
+                            __nextHasNoMarginBottom
+                            value={searchValue}
+                            onChange={setSearchValue}
+                            label="Search"
+                            placeholder="Search"
+                            autoFocus
+                        />
+                    </div>
+
+                    {!searchValue && (
+                        <div className="block-editor-block-patterns-explorer__sidebar__categories-list">
+                            {categories.map(({ name, label }) => (
+                                <Button
+                                    __next40pxDefaultSize
+                                    key={name}
+                                    label={label}
+                                    className="block-editor-block-patterns-explorer__sidebar__categories-list__item"
+                                    isPressed={selectedCategory === name}
+                                    onClick={() => setSelectedCategory(name)}
+                                >
+                                    {label}
+                                </Button>
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+                <div className="block-editor-block-patterns-explorer__list">
+                    {searchValue && (
+                        <div className="block-editor-block-patterns-explorer__search-results-count">
+                            {filteredPatterns.length} {filteredPatterns.length === 1 ? 'pattern found' : 'patterns found'}
+                        </div>
+                    )}
+
+                    <BlockPatternsList
+                        blockPatterns={filteredPatterns}
+                        onClickPattern={onClickPattern}
+                        isDraggable={false}
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+};

package/src/hooks/useTabs.jsx

@@ -1,6 +1,6 @@
 import { useSelect, useDispatch, select } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useLayoutEffect, useState } from '@wordpress/element';
+import { useCallback, useLayoutEffect, useMemo, useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
 
@@ -26,7 +26,6 @@ export const useTabs = (tabsClientId, tabItemName) => {
                 getSelectedBlock,
                 getSelectedBlockClientId,
                 getBlockOrder,
-                getBlockRootClientId,
             } = select(blockEditorStore);
 
             return {
@@ -86,27 +85,27 @@ export const useTabs = (tabsClientId, tabItemName) => {
         }
     }, [ selectedBlock, tabItemName, tabsClientId ]);
 
-    const createTab = (blockName, attributes = {}, position = tabsCount) => {
+    const createTab = useCallback((blockName, attributes = {}, position = tabsCount) => {
         const newTab = createBlock(blockName, attributes);
         insertBlock(newTab, position, tabsClientId);
 
         return newTab;
-    };
+    }, [ tabsCount, tabsClientId, insertBlock ]);
 
-    const onTabAppenderClick = () => {
+    const onTabAppenderClick = useCallback(() => {
         const newItem = createTab(tabItemName);
         setActiveItemId(newItem.clientId);
-    };
+    }, [ tabItemName, createTab, setActiveItemId ]);
 
-    const TabAppender = ({ label = 'Add new tab', ...other }) => (
+    const TabAppender = useMemo(() => ({ label = 'Add new tab', ...other }) => (
         <Button
-            className="bc-add-new-child-btn"
-            icon={plusIcon}
             label={label}
+            icon={plusIcon}
+            className="bc-add-new-child-btn"
             onClick={onTabAppenderClick}
             {...other}
         />
-    );
+    ), [ onTabAppenderClick ]);
 
     return {
         tabs,

package/src/utils/rootBlock/setRootBlockFilter.js

@@ -6,7 +6,7 @@ import { addFilter, removeFilter } from '@wordpress/hooks';
  * making them only insertable within the root block.
  */
 export const setRootBlockFilter = {
-    add(rootBlockName) {
+    add({ rootBlockName }) {
         addFilter(
             'blocks.registerBlockType',
             'ssm/set-root-block',