Add possibility to disable buttons inside group block

eea · Mar 23, 2021 · fc21b15 · fc21b15
1 parent 5b83746
commit fc21b15
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 36 deletions.
diff --git a/src/components/manage/Blocks/Group/Edit.jsx b/src/components/manage/Blocks/Group/Edit.jsx
@@ -8,7 +8,7 @@ import dissatisfiedSVG from '@plone/volto/icons/dissatisfied.svg';
 import PropTypes from 'prop-types';
 import { Button } from 'semantic-ui-react';
 import EditBlockWrapper from './EditBlockWrapper';
-import tuneSVG from '@plone/volto/icons/configuration.svg';
+import tuneSVG from '@plone/volto/icons/show-blocks.svg';
 import helpSVG from '@plone/volto/icons/help.svg';
 
 import './editor.less';
@@ -140,6 +140,7 @@ const Edit = (props) => {
           <EditBlockWrapper
             draginfo={draginfo}
             blockProps={blockProps}
+            disabled={data.disableInnerButtons}
             extraControls={
               <>
                 {!data?.readOnlySettings && (
@@ -148,7 +149,7 @@ const Edit = (props) => {
                       <Button
                         icon
                         basic
-                        title="Group settings"
+                        title="Section (Group) settings"
                         onClick={() => {
                           setSelectedBlock();
                           props.setSidebarTab(1);

diff --git a/src/components/manage/Blocks/Group/EditBlockWrapper.jsx b/src/components/manage/Blocks/Group/EditBlockWrapper.jsx
@@ -58,7 +58,14 @@ class EditBlockWrapper extends React.Component {
   blockNode = React.createRef();
 
   render() {
-    const { intl, blockProps, draginfo, extraControls, children } = this.props;
+    const {
+      intl,
+      blockProps,
+      draginfo,
+      extraControls,
+      disabled,
+      children,
+    } = this.props;
 
     const {
       allowedBlocks,
@@ -70,7 +77,8 @@ class EditBlockWrapper extends React.Component {
     } = blockProps;
     const type = data['@type'];
     const { disableNewBlocks } = data;
-    const visible = !data.fixed;
+    const dragVisible = !data.fixed;
+    const visible = selected && !disabled;
 
     const required = isBoolean(data.required)
       ? data.required
@@ -92,11 +100,11 @@ class EditBlockWrapper extends React.Component {
               {...draginfo.dragHandleProps}
             ></div>
           )}
-          {selected && (
+          {visible && (
             <div className="block-toolbar">
               <div
                 style={{
-                  display: visible ? 'inline-block' : 'none',
+                  display: dragVisible ? 'inline-block' : 'none',
                 }}
                 {...draginfo.dragHandleProps}
                 className="drag handle wrapper-group-block"

diff --git a/src/components/manage/Blocks/Group/Schema.js b/src/components/manage/Blocks/Group/Schema.js
@@ -1,10 +1,11 @@
 const Schema = {
-  title: 'Group block settings',
+  title: 'Section (Group) settings',
   fieldsets: [
     {
       id: 'default',
       title: 'Default',
       fields: [
+        'id',
         'placeholder',
         'instructions',
         'allowedBlocks',
@@ -14,10 +15,16 @@ const Schema = {
         'fixed',
         'disableNewBlocks',
         'readOnly',
+        'disableInnerButtons',
       ],
     },
   ],
   properties: {
+    id: {
+      title: 'Name',
+      description: 'Section friendly name',
+      type: 'string',
+    },
     allowedBlocks: {
       title: 'Allowed blocks',
       description: 'Allow only the following blocks types',
@@ -78,6 +85,11 @@ const Schema = {
       description: 'Disable editing on this block',
       type: 'boolean',
     },
+    disableInnerButtons: {
+      title: 'Disable inner buttons',
+      description: 'Hide all block related buttons within this block',
+      type: 'boolean',
+    },
   },
   required: [],
 };

diff --git a/src/components/manage/Blocks/Group/editor.less b/src/components/manage/Blocks/Group/editor.less
@@ -1,8 +1,12 @@
 .block-editor-group {
   margin: 0 -2.2rem;
 
-  .block-editor-group {
-    margin: 0 0.1rem;
+  // .block-editor-group {
+  //   margin: 0 0.1rem;
+  // }
+
+  [data-rbd-draggable-context-id] {
+    margin-bottom: 1rem;
   }
 
   .selected {
@@ -52,38 +56,13 @@
     border-bottom: 1px solid #fff;
     margin-top: -45px;
     background-color: #fff;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
 
     .ui.basic.button {
       padding: 3px;
       padding-right: 0;
     }
 
-    .wrapper-column-block {
-      > .ui.basic.button {
-        &:hover {
-          background-color: transparent !important;
-        }
-      }
-    }
-
-    > .ui.basic.button {
-      &:hover {
-        background-color: transparent !important;
-      }
-
-      svg {
-        color: #134448;
-      }
-    }
-
-    .drag.handle.wrapper-column-block {
-      position: initial;
-      left: initial;
-      min-height: 1em;
-      margin-left: initial !important;
-      font-size: 1rem;
-      line-height: 1em;
-      vertical-align: baseline;
-    }
   }
 }