breaking(images): Use image scales from restapi using attachedimage widget refs #254622 #16
Conversation
This file contains hidden or 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
… fast reply not working for arrow functions
This way we keep the previously translated value
The TestimonialQuote tests were failing because the image data structure changed to include image scales. This commit updates the tests to correctly handle the new image data format, ensuring that the tests pass and the component renders correctly with the updated image data. A `getFieldURL` mock was also added to handle the different image data structures.
ichim-david
approved these changes
Jun 13, 2025
There was a problem hiding this comment.
Pull Request Overview
This PR updates the Quote block to use image scales returned by the REST API and removes the old URL helper logic, replacing it with a specialized image-scale helper. It also adjusts tests, Cypress specs, and localization entries to reflect the new data shape.
- Remove
getFieldURLin helpers and tests, usegetImageScaleParamsfor images - Update TestimonialQuote component and its tests to handle the new image array structure
- Add
selectedItemAttrsto the Quote variation config and update translations and Cypress selectors
Reviewed Changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/helpers.js | Removed getFieldURL implementation and related imports |
| src/helpers.test.js | Deleted getFieldURL tests and reordered imports |
| src/Blocks/Quote/variations/index.js | Added selectedItemAttrs for image field and scales |
| src/Blocks/Quote/variations/TestimonialQuote.jsx | Switched to getImageScaleParams, updated Avatar to use scale data |
| src/Blocks/Quote/variations/TestimonialQuote.test.jsx | Mock data and assertions updated for new image structure |
| src/Blocks/Quote/schema.js | Changed translation id from quoteTitle to Quote |
| src/Blocks/Quote/Edit.jsx | Passed onChangeBlock prop to the Field component |
| cypress/e2e/02-dexterity-controlpanel-layout.cy.js | Updated comment to refer to Slate, revised selectors, and save order |
| package.json | Pinned @eeacms/volto-object-widget to the develop branch |
| locales/* | Added new “Quote” entries and cleaned up duplicate msgids |
| Jenkinsfile | Set VOLTO16_BREAKING_CHANGES to “yes” |
Comments suppressed due to low confidence (2)
src/Blocks/Quote/variations/TestimonialQuote.test.jsx:18
- Tests reference the new getImageScaleParams helper but don’t mock it, causing them to call the real implementation; consider adding a jest.mock for '@eeacms/volto-object-widget/helpers' to stub getImageScaleParams consistently.
jest.mock('@plone/volto/helpers/Url/Url', () => ({
src/Blocks/Quote/schema.js:6
- [nitpick] The translation id 'Quote' is very generic and may collide with other keys. Consider reverting to a more specific id like 'quoteTitle' for clarity.
id: 'Quote',
| src={rest.src} | ||
| wrapped | ||
| ui={false} | ||
| alt="card image" |
There was a problem hiding this comment.
[nitpick] The alt attribute is hard-coded to 'card image', which is not descriptive. Use the title or description prop to generate meaningful alt text for screen readers.
Suggested change
| alt="card image" | |
| alt={ | |
| title && description | |
| ? `${serializeText(title)} - ${serializeText(description)}` | |
| : title | |
| ? serializeText(title) | |
| : description | |
| ? serializeText(description) | |
| : 'Image' | |
| } |
Copilot uses AI. Check for mistakes.
| cy.get('.block.quote:nth(2) div[role="textbox"]') | ||
| .click() | ||
| .type('My testimonial quote'); | ||
| cy.get('.block.quote:nth(2) div[role="textbox"]').click(); |
There was a problem hiding this comment.
[nitpick] Relying on deep CSS selectors can be brittle; consider adding data-test attributes to the Quote blocks and targeting those in Cypress for more stable tests.
Suggested change
| cy.get('.block.quote:nth(2) div[role="textbox"]').click(); | |
| cy.get('[data-test="quote-block-2-textbox"]').click(); |
Copilot uses AI. Check for mistakes.
This commit addresses an issue where the slate text within the TestimonialQuote block would be lost when the image data was updated or removed. The changes include: - Memoizing the Testimonial component to prevent unnecessary re-renders. - Using `React.useMemo` to memoize the `image` prop and `slateValue` to prevent re-creation on every render. - Implementing `ReactDOM.unstable_batchedUpdates` in `handleSlateChange` to improve performance. - Adding a test case to verify that the slate text is preserved when the image data changes. - Adding an empty alt attribute to the image to avoid accessibility issues. These changes ensure that the TestimonialQuote block correctly preserves the slate text content when the image data is updated, providing a better user experience.
This commit bumps the version of the `@eeacms/volto-quote-block` package to 3.0.0.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Image Handling Enhancements:
TestimonialQuoteto usegetImageScaleParamsfor handling image scaling and attributes, replacing the oldergetFieldURLlogic. This ensures better handling of image dimensions and scales.