-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5128652
commit da5d77d
Showing
11 changed files
with
456 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| msgid "" | ||
| msgstr "" | ||
| "Project-Id-Version: Plone\n" | ||
| "POT-Creation-Date: 2024-08-20T08:35:27.767Z\n" | ||
| "POT-Creation-Date: 2024-09-04T09:08:41.235Z\n" | ||
| "Last-Translator: Plone i18n <[email protected]>\n" | ||
| "Language-Team: Plone i18n <[email protected]>\n" | ||
| "Content-Type: text/plain; charset=utf-8\n" | ||
|
|
@@ -18,6 +18,16 @@ msgstr "" | |
| msgid "Alignment" | ||
| msgstr "" | ||
|
|
||
| #. Default: "Box" | ||
| #: components/blocks/ImageAndTextBox/schema | ||
| msgid "Box" | ||
| msgstr "" | ||
|
|
||
| #. Default: "Boxes" | ||
| #: components/blocks/ImageAndTextBox/schema | ||
| msgid "Boxes" | ||
| msgstr "" | ||
|
|
||
| #. Default: "Link Title" | ||
| #: components/blocks/extenders/cta | ||
| msgid "Link title" | ||
|
|
@@ -30,6 +40,8 @@ msgstr "" | |
|
|
||
| #. Default: "Text" | ||
| #: components/blocks/Accordion/EditItem | ||
| #: components/blocks/ImageAndTextBox/Edit | ||
| #: components/blocks/ImageAndTextBox/schema | ||
| #: components/blocks/Testimonials/Edit | ||
| #: components/blocks/Testimonials/schema | ||
| #: components/blocks/Text1/Edit | ||
|
|
@@ -43,6 +55,8 @@ msgstr "" | |
| #: components/blocks/Accordion/Edit | ||
| #: components/blocks/Accordion/EditItem | ||
| #: components/blocks/Accordion/schema | ||
| #: components/blocks/ImageAndTextBox/Edit | ||
| #: components/blocks/ImageAndTextBox/schema | ||
| #: components/blocks/Testimonials/Edit | ||
| #: components/blocks/Testimonials/schema | ||
| #: components/blocks/Text1/Edit | ||
|
|
@@ -54,6 +68,11 @@ msgstr "" | |
| msgid "Title" | ||
| msgstr "" | ||
|
|
||
| #. Default: "Add column" | ||
| #: components/blocks/ImageAndTextBox/schema | ||
| msgid "addColumn" | ||
| msgstr "" | ||
|
|
||
| #. Default: "Columns" | ||
| #: components/blocks/Accordion/schema | ||
| msgid "redturtle__volto-blocks__accordion_columns_title" | ||
|
|
@@ -110,11 +129,13 @@ msgid "redturtle__volto-blocks__text6_title" | |
| msgstr "" | ||
|
|
||
| #. Default: "Image" | ||
| #: components/blocks/ImageAndTextBox/schema | ||
| #: components/blocks/Text7/schema | ||
| msgid "redturtle__volto-blocks__text7_image_title" | ||
| msgstr "" | ||
|
|
||
| #. Default: "Images" | ||
| #: components/blocks/ImageAndTextBox/schema | ||
| #: components/blocks/Text7/schema | ||
| msgid "redturtle__volto-blocks__text7_images_title" | ||
| msgstr "" | ||
|
|
@@ -130,6 +151,7 @@ msgid "redturtle__volto-blocks__text7_img_column_width_title" | |
| msgstr "" | ||
|
|
||
| #. Default: "Text 7" | ||
| #: components/blocks/ImageAndTextBox/schema | ||
| #: components/blocks/Text7/schema | ||
| msgid "redturtle__volto-blocks__text7_title" | ||
| msgstr "" | ||
137 changes: 137 additions & 0 deletions
137
packages/volto-blocks/src/components/blocks/ImageAndTextBox/Edit.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import { Icon, SidebarPortal } from '@plone/volto/components'; | ||
| import { BlockDataForm } from '@plone/volto/components/manage/Form'; | ||
| import cx from 'classnames'; | ||
| import { defineMessages, useIntl } from 'react-intl'; | ||
|
|
||
| import type { BlockEditProps } from '@plone/types'; | ||
|
|
||
| import type { ImageAndTextBoxData } from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/schema'; | ||
| import styles from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/styles.module.css'; | ||
| import { | ||
| TextEditorWidget, | ||
| useHandleDetachedBlockFocus, | ||
| } from '@redturtle/volto-rt-slate'; | ||
|
|
||
| import config from '@plone/registry'; | ||
| // import EditItem from './EditItem'; | ||
|
|
||
| type ImageAndTextBoxEditProps = Omit<BlockEditProps, 'data'> & { | ||
| data: ImageAndTextBoxData; | ||
| }; | ||
|
|
||
| export default function Edit(props: ImageAndTextBoxEditProps) { | ||
| const { | ||
| data, | ||
| selected, | ||
| block, | ||
| onChangeBlock, | ||
| blocksConfig, | ||
| blocksErrors, | ||
| onFocusPreviousBlock, | ||
| onFocusNextBlock, | ||
| } = props; | ||
| const intl = useIntl(); | ||
|
|
||
| const { selectedField, setSelectedField } = useHandleDetachedBlockFocus( | ||
| props, | ||
| 'title', | ||
| ); | ||
|
|
||
| const schema = blocksConfig[data['@type']].blockSchema({ | ||
| data, | ||
| intl, | ||
| }); | ||
|
|
||
| if (__SERVER__) { | ||
| return <div />; | ||
| } | ||
|
|
||
| const Container = config.getComponent('Container').component || 'div'; | ||
| const Image = config.getComponent('Image').component; | ||
|
|
||
| return ( | ||
| <> | ||
| <section | ||
| className={cx('block-imageandtextbox', styles.imageandtextbox)} | ||
| aria-label={data.title} | ||
| > | ||
| <Container | ||
| className={cx( | ||
| 'block-imageandtextbox-container', | ||
| styles['block-imageandtextbox-container'], | ||
| )} | ||
| > | ||
| {data.image ? ( | ||
| <Image | ||
| className={cx('block-imageandtextbox-image', styles.image)} | ||
| // TODO serialize image brain in the backend | ||
| src={`${data.image}/@@images/image/large`} | ||
| loading="lazy" | ||
| alt="" | ||
| /> | ||
| ) : ( | ||
| <div className="image-add">Upload image</div> | ||
| )} | ||
| <div className={cx('box-wrapper', styles['box-wrapper'])}> | ||
| <TextEditorWidget | ||
| {...props} | ||
| className={cx('block-imageandtextbox-title', styles.title)} | ||
| as="h2" | ||
| data={data} | ||
| fieldName="title" | ||
| selected={selected && selectedField === 'title'} | ||
| setSelected={setSelectedField} | ||
| focusNextField={() => { | ||
| setSelectedField('text'); | ||
| }} | ||
| showToolbar={false} | ||
| placeholder={intl.formatMessage(messages.title)} | ||
| /> | ||
| <TextEditorWidget | ||
| {...props} | ||
| fieldName="text" | ||
| selected={selected && selectedField === 'text'} | ||
| setSelected={setSelectedField} | ||
| focusPrevField={() => { | ||
| setSelectedField('title'); | ||
| }} | ||
| placeholder={intl.formatMessage(messages.text)} | ||
| /> | ||
| {/* {data.boxes ? <EditItem /> : ''} */} | ||
| </div> | ||
| </Container> | ||
| </section> | ||
| {/* @ts-expect-error TODO */} | ||
| <SidebarPortal selected={selected}> | ||
| {schema && ( | ||
| <BlockDataForm | ||
| icon={<Icon size="24px" name={'blockIcon'} />} | ||
| schema={schema} | ||
| title={schema.title} | ||
| onChangeField={(id: string, value: unknown) => { | ||
| onChangeBlock(block, { | ||
| ...data, | ||
| [id]: value, | ||
| }); | ||
| }} | ||
| onChangeBlock={onChangeBlock} | ||
| formData={data} | ||
| block={block} | ||
| errors={blocksErrors} | ||
| /> | ||
| )} | ||
| </SidebarPortal> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| const messages = defineMessages({ | ||
| title: { | ||
| id: 'Title', | ||
| defaultMessage: 'Title', | ||
| }, | ||
| text: { | ||
| id: 'Text', | ||
| defaultMessage: 'Text', | ||
| }, | ||
| }); |
33 changes: 33 additions & 0 deletions
33
packages/volto-blocks/src/components/blocks/ImageAndTextBox/EditItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import cx from 'classnames'; | ||
| import { defineMessages, useIntl } from 'react-intl'; | ||
|
|
||
| import type { ArrayElement } from '@plone/types'; | ||
|
|
||
| import type { ImageAndTextBoxData } from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/schema'; | ||
| import styles from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/styles.module.css'; | ||
|
|
||
| type Props = { | ||
| data: ArrayElement<ImageAndTextBoxData['boxes']>; | ||
| focusOn: string; | ||
| setFocusOn: Function; | ||
| onChange: (id: string, field: string, value: unknown) => void; | ||
| selected: boolean; | ||
| }; | ||
|
|
||
| export default function EditItem({ | ||
| data, | ||
| focusOn, | ||
| setFocusOn, | ||
| onChange, | ||
| selected, | ||
| }: Props) { | ||
| const intl = useIntl(); | ||
|
|
||
| if (__SERVER__) { | ||
| return <div />; | ||
| } | ||
|
|
||
| return <div className={cx('block-imageandtextbox', styles.item)}>BOX</div>; | ||
| } | ||
|
|
||
| const messages = defineMessages({}); |
Oops, something went wrong.