Validation for internal blocks. #6824
Conversation
|
Caution The Volto Team has suspended its review of new pull requests from first-time contributors until the release of Plone 7, which is preliminarily scheduled for the second quarter of 2026. Thanks for submitting your first pull request! You are awesome! 🤗 If you haven't done so already, read Welcome to the Plone community! 🎉 |
✅ Deploy Preview for plone-components canceled.
|
✅ Deploy Preview for plone-components canceled.
|
|
@alexandreIFB please add an entry in the news folder: https://6.docs.plone.org/contributing/index.html#contributing-change-log-label |
|
@alexandreIFB Can you please suggest a change to some core block to simulate the problem? Or does some core block that can be inserted into a Grid already require validation? |
It is possible to simulate with any block that has validation within the Grid. I recommend using the Teaser block that comes natively, as it requires an href. Another test I performed was the validation within the Column block from the @eeacms/volto-columns-block community. |
I can confirm this error on the demo site with the Teaser block. @alexandreIFB could you please include this information in the issue as well? |
There was a problem hiding this comment.
Overall, LGTM but this is a big change that would need Cypress tests for assess that does what it claims.
Also, do we cover the use case of JSONSchema blocks with custom schemas? eg. volto-slider-block, etc...
Can we have them? You can use volto-coresandbox fixtures for this if you need it.
Thanks!
Hello, This may be a more drastic change, and there may be better ways to work around the problem. However, I leave the suggestion here for analysis and consideration.
Although the solutions described below have solved the problems encountered, I recognize that there may be more appropriate places within the project architecture to implement these functions. Due to lack of experience with the current architecture, I chose to implement them in the places I considered most appropriate. With that in mind, I open it for comments and analysis and suggestions for improvements and adjustments, if necessary, to better adapt to the project flow.
Initial Problem:
Block validations are not working correctly within aligned blocks, such as Grid, Column, among others.
Root of the Problem:
Validation, in the onSubmit method within Form, is being applied only to the blocks that are at the root of the structure. This results in the failure to validate internal blocks within aligned components.
Implemented Solutions:
Internal Block Validation:
To work around the aforementioned problem, an auxiliary function called blockValidator was created, which checks the presence of the blocks and blocks_layout fields in a recursive block.
https://github.com/alexandreIFB/volto/blob/8d45c5bd25a0a85e534af3a7fc27d54820283d83/packages/volto/src/components/manage/Form/Form.jsx#L539-L546
Error Differentiation:
The second challenge was to identify and differentiate internal errors from common block errors. To do this, an approach was implemented where internal errors are assigned to the @internal_blocks key. This distinction allows error messages to be analyzed and displayed correctly, associating them with their respective internal elements.
Error Forwarding in Aligned Blocks:
The third problem identified was that errors in aligned blocks (such as Grid, Column) were not being forwarded correctly. To solve this, errors forwarding for aligned blocks were added to the ContainerEdit component, ensuring that it is possible to access 'blocksErrors'.
https://github.com/alexandreIFB/volto/blob/8d45c5bd25a0a85e534af3a7fc27d54820283d83/packages/volto/src/components/manage/Blocks/Container/Edit.jsx#L123-L125
Visibility of Errors in Internal Block Forms:
The last problem arose when internal block forms were unable to see the errors associated with them, since the validation of the errors depended on the ID of the elements in the root of the 'blockErrors;' object. To solve this, internal block errors were also added to the root of the structure, allowing them to be recognized and displayed correctly. (I didn't find the alternative elegant but I couldn't think of another way without too much impact)
https://github.com/alexandreIFB/volto/blob/8d45c5bd25a0a85e534af3a7fc27d54820283d83/packages/volto/src/components/manage/Form/Form.jsx#L548-L552
Closes #6776