@secretstache/wordpress-gutenberg 0.5.15 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.5.15",
+  "version": "0.6.1",
   "description": "",
   "author": "Secret Stache",
   "license": "GPL-2.0-or-later",
@@ -15,7 +15,8 @@
   "module": "build/index.js",
   "exports": {
     ".": "./build/index.js",
-    "./build/styles.css": "./build/styles.css"
+    "./build/editor-canvas.css": "./build/editor-canvas.css",
+    "./build/editor-ui.css": "./build/editor-ui.css"
   },
   "files": [
     "build",
@@ -23,8 +24,10 @@
   ],
   "type": "module",
   "scripts": {
-    "build": "rollup -c",
-    "start": "rollup -c -w",
+    "build": "yarn build:js && yarn build:css",
+    "build:js": "vite build",
+    "build:css": "sass src/styles/editor-canvas.scss build/editor-canvas.css --style=compressed --no-source-map && sass src/styles/editor-ui.scss build/editor-ui.css --style=compressed --no-source-map",
+    "dev": "vite",
     "prepublishOnly": "yarn build"
   },
   "devDependencies": {
@@ -33,10 +36,7 @@
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/runtime": "^7.24.4",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@vitejs/plugin-react": "^4.7.0",
     "@wordpress/api-fetch": "^7.24.0",
     "@wordpress/block-editor": "^14.19.0",
     "@wordpress/blocks": "^14.13.0",
@@ -45,14 +45,15 @@
     "@wordpress/dom-ready": "^4.24.0",
     "@wordpress/element": "^6.24.0",
     "@wordpress/hooks": "^4.24.0",
-    "@wordpress/icons": "^10.24.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^9.1.3",
     "node-sass": "^9.0.0",
     "postcss": "^8.4.38",
-    "rollup": "^4.16.4",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sass": "^1.90.0",
+    "vite": "^7.0.6",
+    "vite-plugin-externals": "^0.6.2"
   },
   "dependencies": {
     "classnames": "^2.5.1",
@@ -70,7 +71,6 @@
     "@wordpress/dom-ready": "^4.24.0",
     "@wordpress/element": "^6.24.0",
     "@wordpress/hooks": "^4.24.0",
-    "@wordpress/icons": "^10.24.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package/src/components/{DataQueryControls.js → DataQueryControls.jsx}

@@ -9,7 +9,7 @@ import { useSelect } from '@wordpress/data';
 import { arrayMove } from 'react-sortable-hoc';
 import Select from 'react-select';
 
-import { SortableSelectAsync } from './SortableSelect.js';
+import { SortableSelectAsync } from './SortableSelect.jsx';
 import { decodeHtmlEntities, loadSelectOptions } from '../utils/index.js';
 
 const DataQueryContext = createContext({});

package/src/components/{IconPicker.js → IconPicker.jsx}

@@ -4,7 +4,8 @@ import {
     MediaUploadCheck,
 } from '@wordpress/block-editor';
 import { Button, Icon } from '@wordpress/components';
-import { edit as editIcon, trash as trashIcon } from '@wordpress/icons';
+
+import { editIcon, trashIcon } from '../icons/index.jsx';
 
 export const IconPicker = ({ imageId, imageUrl, imageAlt, svgCode, onSelect, onRemove }) => {
     const hasImage = imageId && imageUrl;

package/src/components/{MediaControl.js → MediaControl.jsx}

@@ -1,7 +1,7 @@
 import { BaseControl, Button, FocalPointPicker, Icon as WPIcon } from '@wordpress/components';
 import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
-import { page as pageIcon } from '@wordpress/icons';
 
+import { pageIcon } from '../icons/index.jsx';
 import { MEDIA_TYPE } from '../utils/index.js';
 
 export const ImageRenderer = ({

package/src/components/{MediaTypeControl.js → MediaTypeControl.jsx}

@@ -1,7 +1,7 @@
 import { useMemo } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
 
-import { MediaControl } from './MediaControl.js';
+import { MediaControl } from './MediaControl.jsx';
 import { MEDIA_TYPE_LABEL, MEDIA_TYPE } from '../utils/index.js';
 
 export const MediaTypeControl = (props) => {

package/src/components/{MediaWithFocalPointControl.js → MediaWithFocalPointControl.jsx}

@@ -1,7 +1,7 @@
 import { BaseControl, FocalPointPicker } from '@wordpress/components';
 import { useCallback, memo } from '@wordpress/element';
 
-import { MediaControl } from './MediaControl.js';
+import { MediaControl } from './MediaControl.jsx';
 import { MEDIA_TYPE } from '../utils/index.js';
 
 /**

package/src/components/{ResponsiveSpacingControl.js → ResponsiveSpacingControl.jsx}

@@ -1,7 +1,7 @@
 import { TabPanel } from '@wordpress/components';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 
-import { SpacingControl } from './SpacingControl.js';
+import { SpacingControl } from './SpacingControl.jsx';
 
 const getTabName = (deviceType = 'Desktop') => {
     return deviceType === 'Desktop' ? 'desktop' : 'mobile';

package/src/components/{SpacingControl.js → SpacingControl.jsx}

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

package/src/components/index.js

@@ -1,16 +1,16 @@
-export { ColorPaletteControl } from './ColorPaletteControl';
-export { IconPicker } from './IconPicker';
-export { ImageActions } from './ImageActions';
-export { LinkControl } from './LinkControl';
-export { ImageRenderer, VideoRenderer, AnimationRenderer, MediaControl } from './MediaControl.js';
-export { SortableSelect, SortableSelectAsync } from './SortableSelect';
-export { DataQueryControls } from './DataQueryControls.js';
-export { SpacingControl } from './SpacingControl.js';
-export { ResponsiveSpacingControl } from './ResponsiveSpacingControl.js';
-export { ResourcesWrapper } from './ResourcesWrapper.js';
-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';
-export { MediaWithFocalPointControl } from './MediaWithFocalPointControl.js';
+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';

package/src/hooks/index.js

@@ -1,11 +1,10 @@
-export { usePreviewControl } from './usePreviewControl.js';
+export { usePreviewControl } from './usePreviewControl.jsx';
 export { useSlider } from './useSlider.js';
 export { useParentBlock } from './useParentBlock.js';
-export { useColorChange } from './useColorChange';
-export { useThemeColors } from './useThemeColors';
-export { useDataQuery } from './useDataQuery';
+export { useThemeColors } from './useThemeColors.js';
+export { useDataQuery } from './useDataQuery.js';
 export { useAccordionItem } from './useAccordionItem.js';
-export { useTabs } from './useTabs.js';
+export { useTabs } from './useTabs.jsx';
 export { useAllowedBlocks } from './useAllowedBlocks.js';
 export { useChildBlockPosition } from './useChildBlockPosition.js';
 export { useFilterBlocks } from './useFilterBlocks.js';

package/src/hooks/{usePreviewControl.js → usePreviewControl.jsx}

@@ -1,5 +1,5 @@
 import { useCallback, useState } from '@wordpress/element';
-import { PreviewControl } from '../components/PreviewControl.js';
+import { PreviewControl } from '../components/PreviewControl.jsx';
 
 export const usePreviewControl = () => {
     const [ isPreview, setIsPreview ] = useState(false);

package/src/hooks/{useTabs.js → useTabs.jsx}

@@ -2,10 +2,10 @@ import { useSelect, useDispatch, select } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useLayoutEffect, useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
-import { plus as plusIcon } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
 
-import { useParentBlock } from './useParentBlock';
+import { plusIcon } from '../icons/index.jsx';
+import { useParentBlock } from './useParentBlock.js';
 
 export const useTabs = (tabsClientId, tabItemName) => {
     const { insertBlock } = useDispatch(blockEditorStore);

package/src/icons/index.jsx

@@ -0,0 +1,38 @@
+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>
+);

package/src/index.js

@@ -1,6 +1,4 @@
-export * from './components';
-export * from './hooks';
+export * from './components/index.js';
+export * from './hooks/index.js';
 
-export * from './utils';
-
-import './styles/styles.scss';
+export * from './utils/index.js';

package/src/styles/_media-picker.scss

@@ -1,5 +1,5 @@
 .bc-selected-media-wrapper {
-    max-width: 200px;
+    max-width: 100%;
     cursor: pointer;
     background: rgba(0, 0, 0, 0.3);
 }
@@ -11,6 +11,10 @@
     &--image {
         max-height: 300px;
     }
+
+    &--video {
+        min-height: 130px;
+    }
 }
 
 .bc-select-btn,

package/src/styles/editor-canvas.scss

@@ -0,0 +1,59 @@
+.editor-styles-wrapper {
+    // Hide default appender clickable area
+    &::after {
+        display: none;
+    }
+
+    .editor-visual-editor__post-title-wrapper {
+        margin-top: 10px !important;
+        margin-bottom: 10px !important;
+
+        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-block-list__layout.is-root-container {
+        @import "root-block-appender";
+        @import "empty-block-appender";
+        @import "new-child-btn";
+        @import "image-wrapper";
+
+        margin-bottom: 0;
+        padding-bottom: 0;
+
+        &:has(.root-block-appender) {
+            margin-bottom: 3rem;
+            padding-bottom: 200px;
+        }
+
+        &.has-background {
+            transition:
+                background 1s,
+                color 1s;
+        }
+
+        & > .block-list-appender.wp-block:only-child {
+            p {
+                margin-top: 0;
+                margin-bottom: 0;
+            }
+        }
+
+        & > .block-list-appender.wp-block:only-child,
+        & > p.wp-block:only-child {
+            margin: 2rem 0;
+        }
+
+        .components-notice {
+            color: #000;
+        }
+    }
+}

package/src/styles/editor-ui.scss

@@ -0,0 +1,28 @@
+.editor-sidebar {
+    @import "link-control";
+    @import "animation-file-renderer";
+    @import "icon-picker";
+    @import "media-picker";
+    @import "sortable-select";
+    @import "responsive-spacing";
+    @import "image-wrapper";
+}
+
+.editor-visual-editor {
+    z-index: 1;
+
+    // Hide metaboxes in Pattern editor
+    &.is-resizable {
+        & + .edit-post-layout__metaboxes {
+            display: none;
+        }
+    }
+}
+
+.block-editor-block-types-list > [role=presentation] {
+    justify-content: center;
+}
+
+.block-editor-inserter__insertable-blocks-at-selection + .block-editor-inserter__all-blocks {
+    display: none;
+}

package/src/utils/index.js

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