@secretstache/wordpress-gutenberg 0.4.3 → 0.4.5

package/build/styles.css

@@ -7,8 +7,8 @@
   .block-editor__container .editor-visual-editor.is-resizable + .edit-post-layout__metaboxes {
     display: none; }
   .block-editor__container .editor-visual-editor .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper {
-    margin-top: 10px;
-    margin-bottom: 10px; }
+    margin-top: 10px !important;
+    margin-bottom: 10px !important; }
     .block-editor__container .editor-visual-editor .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper h1.editor-post-title {
       margin: 0;
       border-bottom: 1px dashed #ddd;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "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

@@ -21,8 +21,8 @@
 
         .editor-styles-wrapper {
             .edit-post-visual-editor__post-title-wrapper {
-                margin-top: 10px;
-                margin-bottom: 10px;
+                margin-top: 10px !important;
+                margin-bottom: 10px !important;
 
                 h1.editor-post-title {
                     margin: 0;