From 286cb0bc9dd94da07d51d6608cb2f0e3a6dd56fd Mon Sep 17 00:00:00 2001 From: Alin Voinea Date: Wed, 24 Mar 2021 16:11:00 +0200 Subject: [PATCH] Allow editing section title and HTML tag in edit mode --- src/components/index.js | 2 +- src/components/manage/Blocks/Group/Edit.jsx | 33 +++++++++++++----- .../manage/Blocks/Group/EditSchema.jsx | 34 +++++++++++++++++++ .../Group/{Schema.js => LayoutSchema.jsx} | 14 +++++--- src/components/manage/Blocks/Group/View.jsx | 15 ++++---- .../manage/Blocks/Group/editor.less | 9 +++-- src/index.js | 8 ++--- 7 files changed, 90 insertions(+), 25 deletions(-) create mode 100644 src/components/manage/Blocks/Group/EditSchema.jsx rename src/components/manage/Blocks/Group/{Schema.js => LayoutSchema.jsx} (90%) diff --git a/src/components/index.js b/src/components/index.js index 9bda76a..d3fc1c1 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,3 +1,3 @@ export GroupBlockEdit from './manage/Blocks/Group/Edit'; export GroupBlockView from './manage/Blocks/Group/View'; -export GroupBlockSchema from './manage/Blocks/Group/Schema'; +export GroupBlockLayout from './manage/Blocks/Group/LayoutSchema'; diff --git a/src/components/manage/Blocks/Group/Edit.jsx b/src/components/manage/Blocks/Group/Edit.jsx index 7245e96..b310b93 100644 --- a/src/components/manage/Blocks/Group/Edit.jsx +++ b/src/components/manage/Blocks/Group/Edit.jsx @@ -1,15 +1,19 @@ import React, { useState } from 'react'; import { isEmpty } from 'lodash'; -import { BlocksForm, SidebarPortal } from '@plone/volto/components'; +import { + BlocksForm, + SidebarPortal, + Icon, + InlineForm, +} from '@plone/volto/components'; import { emptyBlocksForm } from '@plone/volto/helpers'; -import { Icon } from '@plone/volto/components'; import delightedSVG from '@plone/volto/icons/delighted.svg'; import dissatisfiedSVG from '@plone/volto/icons/dissatisfied.svg'; import PropTypes from 'prop-types'; import { Button, Segment } from 'semantic-ui-react'; import EditBlockWrapper from './EditBlockWrapper'; +import EditSchema from './EditSchema'; import helpSVG from '@plone/volto/icons/help.svg'; - import './editor.less'; const Edit = (props) => { @@ -127,7 +131,7 @@ const Edit = (props) => { }} aria-hidden="true" > - {data.id || 'Section'} + {data.title || 'Section'} { {counterComponent} - {instructions && ( - + + {instructions && (
- - )} + )} + {!data?.readOnlySettings && ( + { + props.onChangeBlock(props.block, { + ...props.data, + [id]: value, + }); + }} + /> + )} + ); }; diff --git a/src/components/manage/Blocks/Group/EditSchema.jsx b/src/components/manage/Blocks/Group/EditSchema.jsx new file mode 100644 index 0000000..6f79b84 --- /dev/null +++ b/src/components/manage/Blocks/Group/EditSchema.jsx @@ -0,0 +1,34 @@ +const Schema = { + title: 'Section block', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['title', 'as'], + }, + ], + properties: { + title: { + title: 'Title', + description: 'Section friendly name', + type: 'string', + }, + as: { + title: 'HTML5 element', + description: 'Select HTML5 element to be used for this block', + type: 'string', + factory: 'Choice', + default: 'div', + choices: [ + ['div', 'div'], + ['section', 'section'], + ['article', 'article'], + ['aside', 'aside'], + ['details', 'details'], + ], + }, + }, + required: [], +}; + +export default Schema; diff --git a/src/components/manage/Blocks/Group/Schema.js b/src/components/manage/Blocks/Group/LayoutSchema.jsx similarity index 90% rename from src/components/manage/Blocks/Group/Schema.js rename to src/components/manage/Blocks/Group/LayoutSchema.jsx index b8227ba..6c5caf5 100644 --- a/src/components/manage/Blocks/Group/Schema.js +++ b/src/components/manage/Blocks/Group/LayoutSchema.jsx @@ -5,23 +5,24 @@ const Schema = { id: 'default', title: 'Default', fields: [ - 'id', + 'title', 'placeholder', 'instructions', 'allowedBlocks', 'as', 'maxChars', + 'readOnlySettings', + 'disableInnerButtons', 'required', 'fixed', 'disableNewBlocks', 'readOnly', - 'disableInnerButtons', ], }, ], properties: { - id: { - title: 'Name', + title: { + title: 'Title', description: 'Section friendly name', type: 'string', }, @@ -85,6 +86,11 @@ const Schema = { description: 'Disable editing on this block', type: 'boolean', }, + readOnlySettings: { + title: 'Read-only settings', + description: 'Disable editing on section block settings', + type: 'boolean', + }, disableInnerButtons: { title: 'Disable inner buttons', description: 'Hide all block related buttons within this block', diff --git a/src/components/manage/Blocks/Group/View.jsx b/src/components/manage/Blocks/Group/View.jsx index 2824bf0..1c0cd40 100644 --- a/src/components/manage/Blocks/Group/View.jsx +++ b/src/components/manage/Blocks/Group/View.jsx @@ -4,13 +4,16 @@ import { RenderBlocks } from '@plone/volto/components'; const View = (props) => { const { data } = props; const metadata = props.metadata || props.properties; + const CustomTag = `${data.as || 'div'}`; + const customId = data?.title + ?.toLowerCase() + ?.replace(/[^a-zA-Z-\s]/gi, '') + ?.trim() + ?.replace(/\s+/gi, '-'); return ( - + + + ); }; diff --git a/src/components/manage/Blocks/Group/editor.less b/src/components/manage/Blocks/Group/editor.less index 3a4910d..1c263b4 100644 --- a/src/components/manage/Blocks/Group/editor.less +++ b/src/components/manage/Blocks/Group/editor.less @@ -28,8 +28,9 @@ legend { position: absolute; - top: -1em; - left: 1rem; + z-index: 3; + top: -1.3em; + left: 0; width: fit-content; padding: 0 1rem; margin-right: auto; @@ -55,6 +56,10 @@ grid-template-columns: 98% auto; } + .blocks-form { + margin-top: 0.5rem; + } + .blocks-chooser { right: 0; left: auto; diff --git a/src/index.js b/src/index.js index 237e115..6289aec 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import codeSVG from '@plone/volto/icons/row.svg'; -import { GroupBlockEdit, GroupBlockView, GroupBlockSchema } from './components'; +import { GroupBlockEdit, GroupBlockView, GroupBlockLayout } from './components'; const applyConfig = (config) => { const choices = Object.keys(config.blocks.blocksConfig) @@ -16,11 +16,11 @@ const applyConfig = (config) => { choices.push(['group', 'Group']); const schema = { - ...GroupBlockSchema, + ...GroupBlockLayout, properties: { - ...GroupBlockSchema.properties, + ...GroupBlockLayout.properties, allowedBlocks: { - ...GroupBlockSchema.properties.allowedBlocks, + ...GroupBlockLayout.properties.allowedBlocks, items: { choices: choices, },