Add support for DX Cpanel Layout

src/ColumnsBlock/ColumnsBlockEdit.jsx

@@ -187,7 +187,14 @@ class ColumnsBlockEdit extends React.Component {
   }
 
   render() {
-    const { block, data, onChangeBlock, pathname, selected } = this.props;
+    const {
+      block,
+      data,
+      onChangeBlock,
+      pathname,
+      selected,
+      manage,
+    } = this.props;
 
     const metadata = this.props.metadata || this.props.properties;
     const { gridCols, gridSize } = data;
@@ -232,6 +239,10 @@ class ColumnsBlockEdit extends React.Component {
                 <div className="column-header"></div>
                 <BlocksForm
                   key={colId}
+                  title={data?.placeholder}
+                  description={data?.instructions?.data}
+                  manage={manage}
+                  allowedBlocks={data?.allowedBlocks}
                   metadata={metadata}
                   properties={isEmpty(column) ? emptyBlocksForm() : column}
                   selectedBlock={
@@ -268,21 +279,23 @@ class ColumnsBlockEdit extends React.Component {
                       blockProps={blockProps}
                       extraControls={
                         <>
-                          <Button
-                            icon
-                            basic
-                            title="Edit column"
-                            onClick={() => {
-                              this.setState({
-                                showSidebar: true,
-                                activeColumn: colId,
-                                colSelections: {},
-                              });
-                              this.props.setSidebarTab(1);
-                            }}
-                          >
-                            <Icon name={tuneSVG} className="" size="19px" />
-                          </Button>
+                          {!data?.readOnlySettings && (
+                            <Button
+                              icon
+                              basic
+                              title="Edit column"
+                              onClick={() => {
+                                this.setState({
+                                  showSidebar: true,
+                                  activeColumn: colId,
+                                  colSelections: {},
+                                });
+                                this.props.setSidebarTab(1);
+                              }}
+                            >
+                              <Icon name={tuneSVG} className="" size="19px" />
+                            </Button>
+                          )}
                         </>
                       }
                     >
@@ -295,7 +308,8 @@ class ColumnsBlockEdit extends React.Component {
           </Grid>
         )}
 
-        {Object.keys(this.state.colSelections).length === 0 ? (
+        {Object.keys(this.state.colSelections).length === 0 &&
+        !data?.readOnlySettings ? (
           <SidebarPortal selected={true}>
             {this.state.activeColumn ? (
               <>

src/ColumnsBlock/ColumnsLayoutSchema.js

@@ -0,0 +1,69 @@
+const Schema = {
+  title: 'Columns block settings',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'placeholder',
+        'instructions',
+        'allowedBlocks',
+        'required',
+        'fixed',
+        'disableNewBlocks',
+        'readOnly',
+        'readOnlySettings',
+      ],
+    },
+  ],
+  properties: {
+    allowedBlocks: {
+      title: 'Allowed blocks',
+      description: 'Allow only the following blocks types',
+      type: 'array',
+      items: {
+        choices: [],
+      },
+    },
+    placeholder: {
+      title: 'Helper text',
+      description:
+        'A short hint that describes the expected value within this block',
+      type: 'string',
+    },
+    instructions: {
+      title: 'Instructions',
+      description: 'Detailed expected value within this block',
+      type: 'string',
+      widget: 'richtext',
+    },
+    required: {
+      title: 'Required',
+      description: "Don't allow deletion of this block",
+      type: 'boolean',
+    },
+    fixed: {
+      title: 'Fixed position',
+      description: 'Disable drag & drop on this block',
+      type: 'boolean',
+    },
+    disableNewBlocks: {
+      title: 'Disable new blocks',
+      description: 'Disable creation of new blocks after this block',
+      type: 'boolean',
+    },
+    readOnly: {
+      title: 'Read-only',
+      description: 'Disable editing on this block',
+      type: 'boolean',
+    },
+    readOnlySettings: {
+      title: 'Read-only settings',
+      description: 'Disable editing on columns block settings',
+      type: 'boolean',
+    },
+  },
+  required: [],
+};
+
+export default Schema;

src/ColumnsBlock/EditBlockWrapper.jsx

@@ -70,9 +70,7 @@ class EditBlockWrapper extends React.Component {
     } = blockProps;
     const type = data['@type'];
     const { disableNewBlocks } = data;
-
-    // const visible = selected && blockHasValue(block) && !block.fixed;
-    // visibility: visible ? 'visible' : 'hidden',
+    const visible = !data.fixed;
 
     const required = isBoolean(data.required)
       ? data.required
@@ -98,7 +96,7 @@ class EditBlockWrapper extends React.Component {
             <div className="block-toolbar">
               <div
                 style={{
-                  display: 'inline-block',
+                  display: visible ? 'inline-block' : 'none',
                 }}
                 {...draginfo.dragHandleProps}
                 className="drag handle wrapper-column-block"

src/ColumnsBlock/index.js

@@ -1,2 +1,3 @@
 export ColumnsBlockView from './ColumnsBlockView';
 export ColumnsBlockEdit from './ColumnsBlockEdit';
+export ColumnsLayoutSchema from './ColumnsLayoutSchema';

src/ColumnsBlock/styles.less

@@ -110,14 +110,19 @@
   position: absolute;
   left: 0px;
   display: flex;
-  padding: 3px;
   border: none;
   margin-top: -34px;
   margin-bottom: 8px;
   background-color: #8dd7ef;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 
+
+  .ui.basic.button {
+    padding: 3px;
+    padding-right: 0;
+  }
+
   .wrapper-column-block {
     > .ui.basic.button {
       &:hover {

src/index.js

@@ -1,12 +1,45 @@
 import columnSVG from './ColumnsBlock/icons/three-columns.svg';
 
-import { ColumnsBlockView, ColumnsBlockEdit } from './ColumnsBlock';
+import {
+  ColumnsBlockView,
+  ColumnsBlockEdit,
+  ColumnsLayoutSchema,
+} from './ColumnsBlock';
 import { ColumnsWidget, LayoutSelectWidget } from './Widgets';
 import ColorPickerWidget from './Widgets/SimpleColorPickerWidget.jsx';
 import { gridSizes, variants } from './grid';
 import { COLUMNSBLOCK } from './constants';
 import { cloneColumnsBlockData } from './utils';
 
+const extendedSchema = (config) => {
+  const choices = Object.keys(config.blocks.blocksConfig)
+    .map((key) => {
+      if (config.blocks.blocksConfig[key]?.restricted) {
+        return false;
+      } else {
+        const title = config.blocks.blocksConfig[key]?.title || key;
+        return [key, title];
+      }
+    })
+    .filter((val) => !!val);
+
+  choices.push(['accordion', 'Accordion']);
+
+  return {
+    ...ColumnsLayoutSchema,
+    properties: {
+      ...ColumnsLayoutSchema.properties,
+      allowedBlocks: {
+        ...ColumnsLayoutSchema.properties.allowedBlocks,
+        items: {
+          choices: choices,
+        },
+      },
+    },
+  };
+};
+
+
 export default function install(config) {
   config.blocks.blocksConfig[COLUMNSBLOCK] = {
     id: 'columnsBlock',
@@ -18,6 +51,7 @@ export default function install(config) {
     restricted: false,
     mostUsed: false,
     blockHasOwnFocusManagement: true,
+    schema: extendedSchema(config),
     sidebarTab: 1,
     security: {
       addPermission: [],