@secretstache/wordpress-gutenberg 0.4.4 → 0.4.6

package/build/styles.css

@@ -20,6 +20,50 @@
   .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 .bc-image-wrapper {
+      position: relative;
+      height: auto;
+      align-self: start; }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .bc-image-wrapper__actions {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: center;
+        gap: 20px;
+        padding: 5px 15px;
+        z-index: 20; }
+        @media screen and (max-width: 768px) {
+          .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .bc-image-wrapper__actions {
+            gap: 15px; } }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .bc-image-wrapper__btn {
+        font-size: 14px !important;
+        backdrop-filter: blur(16px) saturate(180%);
+        background: rgba(255, 255, 255, 0.75);
+        flex-grow: 1;
+        justify-content: center;
+        max-width: 130px; }
+        @media screen and (max-width: 768px) {
+          .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .bc-image-wrapper__btn {
+            padding: 5px; } }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .bc-image-wrapper__overlay {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10;
+        background: rgba(255, 255, 255, 0.3);
+        backdrop-filter: blur(3px); }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .bc-image-wrapper:hover .bc-image-wrapper__actions {
+        display: flex; }
+      .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .bc-image-wrapper:hover .bc-image-wrapper__overlay {
+        display: block; }
     .block-editor__container .editor-visual-editor .editor-styles-wrapper .is-root-container .root-block-appender {
       position: absolute;
       bottom: 30px;
@@ -171,51 +215,6 @@
   width: 100%;
   height: auto; }
 
-.block-editor__container .editor-sidebar .bc-image-wrapper {
-  position: relative;
-  height: auto;
-  align-self: start; }
-  .block-editor__container .editor-sidebar .bc-image-wrapper__actions {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-items: center;
-    gap: 20px;
-    padding: 5px 15px;
-    z-index: 20; }
-    @media screen and (max-width: 768px) {
-      .block-editor__container .editor-sidebar .bc-image-wrapper__actions {
-        gap: 15px; } }
-  .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);
-    flex-grow: 1;
-    justify-content: center;
-    max-width: 130px; }
-    @media screen and (max-width: 768px) {
-      .block-editor__container .editor-sidebar .bc-image-wrapper__btn {
-        padding: 5px; } }
-  .block-editor__container .editor-sidebar .bc-image-wrapper__overlay {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 10;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(3px); }
-  .block-editor__container .editor-sidebar .bc-image-wrapper:hover .bc-image-wrapper__actions {
-    display: flex; }
-  .block-editor__container .editor-sidebar .bc-image-wrapper:hover .bc-image-wrapper__overlay {
-    display: block; }
-
 .block-editor__container .editor-sidebar .bc-selected-media-wrapper {
   max-width: 200px;
   cursor: pointer;

package/package.json

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

package/src/components/ResponsiveSpacingControl.js

@@ -1,15 +1,20 @@
 import { TabPanel } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useEffect, useState } from '@wordpress/element';
 
 import { SpacingControl } from './SpacingControl.js';
 
+const getTabName = (deviceType = 'Desktop') => {
+    return deviceType === 'Desktop' ? 'desktop' : 'mobile';
+};
+
 export const ResponsiveSpacingControl = ({
-     max = 6,
-     min = -1,
-     hasMargin = true,
-     hasPadding = true,
-     onChange,
-     value = { desktop: { margin: {}, padding: {} }, mobile: { margin: {}, padding: {} } },
+    max = 6,
+    min = -1,
+    hasMargin = true,
+    hasPadding = true,
+    onChange,
+    value = { desktop: { margin: {}, padding: {} }, mobile: { margin: {}, padding: {} } },
+    deviceType,
  }) => {
     const handleDesktopChange = useCallback(
         (desktop) => {
@@ -31,9 +36,20 @@ export const ResponsiveSpacingControl = ({
         [ onChange, value.desktop ],
     );
 
+    const initialTabName = getTabName(deviceType);
+
+    const [ selectedTab, setSelectedTab ] = useState(initialTabName);
+
+    useEffect(() => {
+        setSelectedTab(getTabName());
+    }, [ deviceType ]);
+
     return (
         <TabPanel
             className="bc-responsive-spacing-control"
+            initialTabName={initialTabName}
+            onSelect={setSelectedTab}
+            selectedTabName={selectedTab}
             tabs={[
                 { name: 'desktop', title: 'Desktop', className: 'bc-responsive-spacing-tab bc-responsive-spacing-tab--desktop' },
                 { name: 'mobile', title: 'Mobile', className: 'bc-responsive-spacing-tab bc-responsive-spacing-tab--mobile' },

package/src/styles/styles.scss

@@ -36,6 +36,7 @@
             }
 
             .is-root-container {
+                @import "image-wrapper";
                 @import "root-block-appender";
                 @import "empty-block-appender";
 
@@ -72,7 +73,6 @@
         @import "link-control";
         @import "animation-file-renderer";
         @import "icon-picker";
-        @import "image-wrapper";
         @import "media-picker";
         @import "sortable-select";
         @import "responsive-spacing";

package/src/utils/rootBlock/setRootBlock.js

@@ -61,7 +61,7 @@ export const addUnsetRootBlockFilter = (rootBlockName) => {
  * @param {Function} [matchPostTypeCallback=null] - Callback function when the post type matches.
  * @param {Function} [notMatchPostTypeCallback=null] - Callback function when the post type does not match.
  */
-export const setRootBlock = (
+export const setRootBlock = ( // TODO: rebuild params to object
     rootBlockName,
     postTypes = ['page', 'ssm_design_system'],
     initAppender = true,