Skip to content

Commit

Permalink
feat: Add headline field to the block field.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sneridagh
sneridagh committed Jun 28, 2023
1 parent bdf3e97 commit 5e0ef4e
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 137 deletions.
280 changes: 144 additions & 136 deletions src/components/manage/Blocks/Accordion/Edit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,157 +261,165 @@ const Edit = (props) => {
: blocksConfig;

return (
<fieldset className="accordion-block">
<legend
onClick={() => {
setSelectedBlock({});
props.setSidebarTab(1);
}}
aria-hidden="true"
>
{data.title || 'Accordion'}
</legend>
{panels.map(([uid, panel], index) => (
<AccordionEdit
uid={uid}
panel={panel}
panelData={panelData}
handleTitleChange={handleTitleChange}
handleTitleClick={() => setSelectedBlock({})}
data={data}
index={index}
<>
{data.headline && <h2 className="headline">{data.headline}</h2>}
<fieldset className="accordion-block">
<legend
onClick={() => {
setSelectedBlock({});
props.setSidebarTab(1);
}}
aria-hidden="true"
>
<BlocksForm
key={uid}
title={data.placeholder}
description={instructions}
manage={manage}
blocksConfig={allowedBlocksConfig}
metadata={metadata}
properties={isEmpty(panel) ? emptyBlocksForm() : panel}
selectedBlock={selected ? selectedBlock[uid] : null}
onSelectBlock={(id, l, e) => {
const isMultipleSelection = e
? e.shiftKey || e.ctrlKey || e.metaKey
: false;
onSelectBlock(uid, id, isMultipleSelection, e, selectedBlock);
}}
onChangeFormData={(newFormData) => {
onChangeBlock(block, {
...data,
data: {
...panelData,
blocks: {
...panelData.blocks,
[uid]: newFormData,
},
},
});
}}
onChangeField={(id, value) => {
if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
blockState[id] = value;
{data.title || 'Accordion'}
</legend>
{panels.map(([uid, panel], index) => (
<AccordionEdit
uid={uid}
panel={panel}
panelData={panelData}
handleTitleChange={handleTitleChange}
handleTitleClick={() => setSelectedBlock({})}
data={data}
index={index}
>
<BlocksForm
key={uid}
title={data.placeholder}
description={instructions}
manage={manage}
blocksConfig={allowedBlocksConfig}
metadata={metadata}
properties={isEmpty(panel) ? emptyBlocksForm() : panel}
selectedBlock={selected ? selectedBlock[uid] : null}
onSelectBlock={(id, l, e) => {
const isMultipleSelection = e
? e.shiftKey || e.ctrlKey || e.metaKey
: false;
onSelectBlock(uid, id, isMultipleSelection, e, selectedBlock);
}}
onChangeFormData={(newFormData) => {
onChangeBlock(block, {
...data,
data: {
...panelData,
blocks: {
...panelData.blocks,
[uid]: {
...panelData.blocks?.[uid],
...blockState,
},
[uid]: newFormData,
},
},
});
} else {
onChangeField(id, value);
}
}}
pathname={pathname}
>
{({ draginfo }, editBlock, blockProps) => {
return (
<EditBlockWrapper
draginfo={draginfo}
blockProps={blockProps}
disabled={data.disableInnerButtons}
multiSelected={searchElementInMultiSelection(uid, blockProps)}
extraControls={
<>
{instructions && (
<>
<Button
icon
basic
title="Section help"
onClick={() => {
setSelectedBlock({});
const tab = manage ? 0 : 1;
props.setSidebarTab(tab);
}}
>
<Icon name={helpSVG} className="" size="19px" />
</Button>
</>
)}
</>
}
>
{editBlock}
</EditBlockWrapper>
);
}}
onChangeField={(id, value) => {
if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
blockState[id] = value;
onChangeBlock(block, {
...data,
data: {
...panelData,
blocks: {
...panelData.blocks,
[uid]: {
...panelData.blocks?.[uid],
...blockState,
},
},
},
});
} else {
onChangeField(id, value);
}
}}
pathname={pathname}
>
{({ draginfo }, editBlock, blockProps) => {
return (
<EditBlockWrapper
draginfo={draginfo}
blockProps={blockProps}
disabled={data.disableInnerButtons}
multiSelected={searchElementInMultiSelection(
uid,
blockProps,
)}
extraControls={
<>
{instructions && (
<>
<Button
icon
basic
title="Section help"
onClick={() => {
setSelectedBlock({});
const tab = manage ? 0 : 1;
props.setSidebarTab(tab);
}}
>
<Icon name={helpSVG} className="" size="19px" />
</Button>
</>
)}
</>
}
>
{editBlock}
</EditBlockWrapper>
);
}}
</BlocksForm>
</AccordionEdit>
))}
{selected ? (
<BlocksToolbar
selectedBlock={Object.keys(selectedBlock)[0]}
formData={data?.data?.blocks?.[currentUid]}
selectedBlocks={multiSelected}
onSetSelectedBlocks={(blockIds) => {
setMultiSelected(blockIds);
}}
</BlocksForm>
</AccordionEdit>
))}
{selected ? (
<BlocksToolbar
selectedBlock={Object.keys(selectedBlock)[0]}
formData={data?.data?.blocks?.[currentUid]}
selectedBlocks={multiSelected}
onSetSelectedBlocks={(blockIds) => {
setMultiSelected(blockIds);
}}
onSelectBlock={(id, l, e) => {
const isMultipleSelection = e
? e.shiftKey || e.ctrlKey || e.metaKey
: false;
onSelectBlock={(id, l, e) => {
const isMultipleSelection = e
? e.shiftKey || e.ctrlKey || e.metaKey
: false;

onSelectBlock(id, isMultipleSelection, e, selectedBlock);
}}
onChangeBlocks={(newBlockData) => {
changeBlockData(newBlockData);
}}
/>
) : (
''
)}

<SidebarPortal selected={selected && !Object.keys(selectedBlock).length}>
{instructions && (
<Segment attached>
<div dangerouslySetInnerHTML={{ __html: instructions }} />
</Segment>
)}
{!data?.readOnlySettings && (
<BlockDataForm
schema={AccordionBlockSchema({ intl })}
title="Accordion block"
onChangeField={(id, value) => {
onChangeBlock(block, {
...data,
[id]: value,
});
onSelectBlock(id, isMultipleSelection, e, selectedBlock);
}}
onChangeBlocks={(newBlockData) => {
changeBlockData(newBlockData);
}}
formData={data}
block={block}
blocksConfig={blocksConfig}
onChangeBlock={onChangeBlock}
/>
) : (
''
)}
</SidebarPortal>
</fieldset>

<SidebarPortal
selected={selected && !Object.keys(selectedBlock).length}
>
{instructions && (
<Segment attached>
<div dangerouslySetInnerHTML={{ __html: instructions }} />
</Segment>
)}
{!data?.readOnlySettings && (
<BlockDataForm
schema={AccordionBlockSchema({ intl })}
title="Accordion block"
onChangeField={(id, value) => {
onChangeBlock(block, {
...data,
[id]: value,
});
}}
formData={data}
block={block}
blocksConfig={blocksConfig}
onChangeBlock={onChangeBlock}
/>
)}
</SidebarPortal>
</fieldset>
</>
);
};

Expand Down
10 changes: 9 additions & 1 deletion src/components/manage/Blocks/Accordion/Schema.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ const messages = defineMessages({
id: 'Tertiary',
defaultMessage: 'Tertiary',
},
headline: {
id: 'Headline',
defaultMessage: 'Headline',
},
});

export const AccordionSchema = {
Expand Down Expand Up @@ -94,6 +98,7 @@ export const AccordionBlockSchema = ({ intl }) => ({
id: 'options',
title: intl.formatMessage(messages.Options),
fields: [
'headline',
'title',
'title_size',
'right_arrows',
Expand All @@ -103,6 +108,9 @@ export const AccordionBlockSchema = ({ intl }) => ({
},
],
properties: {
headline: {
title: intl.formatMessage(messages.headline),
},
title: {
title: intl.formatMessage(messages.Title),
description: intl.formatMessage(messages.friendly_name),
Expand Down Expand Up @@ -143,7 +151,7 @@ export const AccordionBlockSchema = ({ intl }) => ({
default: true,
},
},
required: ['title'],
required: [],
});

export const AccordionStylingSchema = (props) => {
Expand Down
1 change: 1 addition & 0 deletions src/components/manage/Blocks/Accordion/View.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const View = (props) => {

return (
<div className="accordion-block">
{data.headline && <h2 className="headline">{data.headline}</h2>}
{panels.map(([id, panel], index) => {
return accordionBlockHasValue(panel) ? (
<Accordion
Expand Down

0 comments on commit 5e0ef4e

Please sign in to comment.