Add new blocksErrors prop to all stock blocks

plone · Jul 29, 2024 · 461b188 · 461b188
1 parent f619cd8
commit 461b188
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 10 deletions.
diff --git a/docs/source/upgrade-guide/index.md b/docs/source/upgrade-guide/index.md
@@ -389,6 +389,45 @@ If you shadowed the module {file}`packages/volto/src/helpers/FormValidation/Form
 {doc}`../configuration/validation`
 ```
 
+### Field validation for blocks
+
+`BlockDataForm` component now gets a new prop `errors`.
+This prop must be assigned with the new prop passed down from the blocks engine `blocksErrors`.
+If not passed down, the block can't display any field validation error.
+
+```tsx
+// More component code above here
+
+  const {
+    block,
+    blocksConfig,
+    contentType,
+    data,
+    navRoot,
+    onChangeBlock,
+    blocksErrors,
+  } = props;
+
+return (
+  <BlockDataForm
+    block={block}
+    schema={schema}
+    title={schema.title}
+    onChangeField={(id: string, value: any) => {
+      onChangeBlock(block, {
+        ...data,
+        [id]: value,
+      });
+    }}
+    onChangeBlock={onChangeBlock}
+    formData={data}
+    blocksConfig={blocksConfig}
+    navRoot={navRoot}
+    contentType={contentType}
+    errors={blocksErrors}
+  />
+)
+```
 
 ### `SchemaWidget` widget registration change
 

diff --git a/packages/volto/src/components/manage/Blocks/Container/Data.jsx b/packages/volto/src/components/manage/Blocks/Container/Data.jsx
@@ -2,8 +2,15 @@ import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const ContainerData = (props) => {
-  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
-    props;
+  const {
+    block,
+    blocksConfig,
+    blocksErrors,
+    data,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
   const intl = useIntl();
 
   const schema = blocksConfig[data['@type']].blockSchema({ intl });
@@ -28,6 +35,7 @@ const ContainerData = (props) => {
       blocksConfig={blocksConfig}
       navRoot={navRoot}
       contentType={contentType}
+      errors={blocksErrors}
     />
   );
 };

diff --git a/packages/volto/src/components/manage/Blocks/Image/ImageSidebar.jsx b/packages/volto/src/components/manage/Blocks/Image/ImageSidebar.jsx
@@ -10,8 +10,15 @@ import imageSVG from '@plone/volto/icons/image.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const ImageSidebar = (props) => {
-  const { blocksConfig, data, block, onChangeBlock, navRoot, contentType } =
-    props;
+  const {
+    blocksConfig,
+    blocksErrors,
+    data,
+    block,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
   const intl = useIntl();
   const schema = ImageSchema({ formData: data, intl });
   return (
@@ -98,6 +105,7 @@ const ImageSidebar = (props) => {
         blocksConfig={blocksConfig}
         navRoot={navRoot}
         contentType={contentType}
+        errors={blocksErrors}
       />
     </>
   );

diff --git a/packages/volto/src/components/manage/Blocks/Listing/ListingData.jsx b/packages/volto/src/components/manage/Blocks/Listing/ListingData.jsx
@@ -4,8 +4,15 @@ import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const ListingData = (props) => {
-  const { data, block, blocksConfig, onChangeBlock, navRoot, contentType } =
-    props;
+  const {
+    data,
+    block,
+    blocksConfig,
+    blocksErrors,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
   const intl = useIntl();
   const schema = blocksConfig.listing.blockSchema({
     ...props,
@@ -28,6 +35,7 @@ const ListingData = (props) => {
       block={block}
       navRoot={navRoot}
       contentType={contentType}
+      errors={blocksErrors}
     />
   );
 };

diff --git a/packages/volto/src/components/manage/Blocks/Maps/MapsSidebar.jsx b/packages/volto/src/components/manage/Blocks/Maps/MapsSidebar.jsx
@@ -18,7 +18,8 @@ const messages = defineMessages({
 });
 
 const MapsSidebar = (props) => {
-  const { data, block, onChangeBlock, navRoot, contentType } = props;
+  const { data, block, blocksErrors, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = MapsSchema({ ...props, intl });
 
@@ -44,6 +45,7 @@ const MapsSidebar = (props) => {
           block={block}
           navRoot={navRoot}
           contentType={contentType}
+          errors={blocksErrors}
         />
       )}
     </>

diff --git a/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx b/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx
@@ -23,6 +23,7 @@ const messages = defineMessages({
 const SearchBlockEdit = (props) => {
   const {
     block,
+    blocksErrors,
     onChangeBlock,
     data,
     selected,
@@ -94,6 +95,7 @@ const SearchBlockEdit = (props) => {
           formData={data}
           navRoot={navRoot}
           contentType={contentType}
+          errors={blocksErrors}
         />
       </SidebarPortal>
     </>

diff --git a/packages/volto/src/components/manage/Blocks/Teaser/Data.jsx b/packages/volto/src/components/manage/Blocks/Teaser/Data.jsx
@@ -31,8 +31,15 @@ const messages = defineMessages({
 });
 
 const TeaserData = (props) => {
-  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
-    props;
+  const {
+    block,
+    blocksConfig,
+    blocksErrors,
+    data,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
   const dispatch = useDispatch();
   const intl = useIntl();
 
@@ -161,6 +168,7 @@ const TeaserData = (props) => {
       actionButton={data.overwrite && ActionButton}
       navRoot={navRoot}
       contentType={contentType}
+      errors={blocksErrors}
     />
   );
 };

diff --git a/packages/volto/src/components/manage/Blocks/ToC/Edit.jsx b/packages/volto/src/components/manage/Blocks/ToC/Edit.jsx
@@ -29,6 +29,7 @@ class Edit extends Component {
             block={this.props.block}
             navRoot={this.props.navRoot}
             contentType={this.props.contentType}
+            errors={this.props.blocksErrors}
           />
         </SidebarPortal>
       </>

diff --git a/packages/volto/src/components/manage/Blocks/Video/VideoSidebar.jsx b/packages/volto/src/components/manage/Blocks/Video/VideoSidebar.jsx
@@ -18,7 +18,8 @@ const messages = defineMessages({
 });
 
 const VideoSidebar = (props) => {
-  const { data, block, onChangeBlock, navRoot, contentType } = props;
+  const { data, block, blocksErrors, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = VideoBlockSchema({ ...props, intl });
 
@@ -44,6 +45,7 @@ const VideoSidebar = (props) => {
           block={block}
           navRoot={navRoot}
           contentType={contentType}
+          errors={blocksErrors}
         />
       )}
     </>