From 932962e0494d9bae2b07df2cd027943794777e2a Mon Sep 17 00:00:00 2001 From: Tisha Soumya Date: Thu, 1 Aug 2024 20:17:02 +0530 Subject: [PATCH] Teaser Block Image Overide (#6147) Co-authored-by: David Ichim --- .../tests/core/blocks/blocks-teaser.js | 87 ++++++++++++++----- packages/volto/news/{.gitkeep => .keep} | 0 packages/volto/news/6147.bugfix | 1 + .../manage/Blocks/Teaser/DefaultBody.jsx | 23 +++-- 4 files changed, 80 insertions(+), 31 deletions(-) rename packages/volto/news/{.gitkeep => .keep} (100%) create mode 100644 packages/volto/news/6147.bugfix diff --git a/packages/volto/cypress/tests/core/blocks/blocks-teaser.js b/packages/volto/cypress/tests/core/blocks/blocks-teaser.js index 79d3d77d67..0799753b35 100644 --- a/packages/volto/cypress/tests/core/blocks/blocks-teaser.js +++ b/packages/volto/cypress/tests/core/blocks/blocks-teaser.js @@ -14,11 +14,11 @@ context('Blocks Acceptance Tests', () => { }); it('As editor I can add a (standalone) Teaser block', () => { - // GIVEN a Document with the title document and a Document to reference with the title Blue Orchidees + // GIVEN a Document with the title document and a Document to reference with the title Blue Orchids cy.createContent({ contentType: 'Document', - contentId: 'blue-orchidees', - contentTitle: 'Blue Orchidees', + contentId: 'blue-orchids', + contentTitle: 'Blue Orchids', contentDescription: 'are growing on the mountain tops', image: true, path: '/document', @@ -35,7 +35,7 @@ context('Blocks Acceptance Tests', () => { cy.get( '.objectbrowser-field[aria-labelledby="fieldset-default-field-label-href"] button[aria-label="Open object browser"]', ).click(); - cy.get('[aria-label="Select Blue Orchidees"]').dblclick(); + cy.get('[aria-label="Select Blue Orchids"]').dblclick(); cy.wait(500); cy.get('.align-buttons .ui.buttons button[aria-label="Center"]').click(); cy.get('#toolbar-save').click(); @@ -45,19 +45,19 @@ context('Blocks Acceptance Tests', () => { cy.get('.block.teaser').should('have.class', 'has--align--center'); cy.get('.block.teaser .image-wrapper img') .should('have.attr', 'src') - .and('include', '/document/blue-orchidees/@@images/preview_image-'); - cy.get('.block.teaser .content h2').contains('Blue Orchidees'); + .and('include', '/document/blue-orchids/@@images/preview_image-'); + cy.get('.block.teaser .content h2').contains('Blue Orchids'); cy.get('.block.teaser .content p').contains( 'are growing on the mountain tops', ); }); it('As editor I can add a (standalone) Teaser block that always fetches the live data', () => { - // GIVEN a Document with the title document and a Document to reference with the title Blue Orchidees + // GIVEN a Document with the title document and a Document to reference with the title Blue Orchids cy.createContent({ contentType: 'Document', - contentId: 'blue-orchidees', - contentTitle: 'Blue Orchidees', + contentId: 'blue-orchids', + contentTitle: 'Blue Orchids', contentDescription: 'are growing on the mountain tops', image: true, path: '/document', @@ -73,16 +73,16 @@ context('Blocks Acceptance Tests', () => { cy.get( '.objectbrowser-field[aria-labelledby="fieldset-default-field-label-href"] button[aria-label="Open object browser"]', ).click(); - cy.get('[aria-label="Select Blue Orchidees"]').dblclick(); + cy.get('[aria-label="Select Blue Orchids"]').dblclick(); cy.wait(500); cy.get('#toolbar-save').click(); cy.visit('/document'); - cy.get('.block.teaser .content h2').contains('Blue Orchidees'); + cy.get('.block.teaser .content h2').contains('Blue Orchids'); cy.get('.block.teaser .content p').contains( 'are growing on the mountain tops', ); - cy.navigate('/document/blue-orchidees/edit'); + cy.navigate('/document/blue-orchids/edit'); cy.wait('@schema'); cy.getSlateTitle().type(' and Tulips'); cy.get('#field-description') @@ -90,21 +90,21 @@ context('Blocks Acceptance Tests', () => { .type('are beautifully growing on the mountain tops'); cy.get('#toolbar-save').click(); - cy.get('.documentFirstHeading').contains('Blue Orchidees and Tulips'); + cy.get('.documentFirstHeading').contains('Blue Orchids and Tulips'); // THEN I can see the updated content in the teaser cy.navigate('/document'); - cy.get('.block.teaser .content h2').contains('Blue Orchidees and Tulips'); + cy.get('.block.teaser .content h2').contains('Blue Orchids and Tulips'); cy.get('.block.teaser .content p').contains( 'are beautifully growing on the mountain tops', ); }); it('As editor I can create a Teaser block and overwrite the data which is is not updated when the target is changed', () => { - // GIVEN a Document with the title document and a Document to reference with the title Blue Orchidees + // GIVEN a Document with the title document and a Document to reference with the title Blue Orchids cy.createContent({ contentType: 'Document', - contentId: 'blue-orchidees', - contentTitle: 'Blue Orchidees', + contentId: 'blue-orchids', + contentTitle: 'Blue Orchids', contentDescription: 'are growing on the mountain tops', image: true, path: '/document', @@ -119,21 +119,62 @@ context('Blocks Acceptance Tests', () => { cy.get( '.objectbrowser-field[aria-labelledby="fieldset-default-field-label-href"] button[aria-label="Open object browser"]', ).click(); - cy.get('[aria-label="Select Blue Orchidees"]').dblclick(); + cy.get('[aria-label="Select Blue Orchids"]').dblclick(); cy.wait(500); cy.get('label[for="field-overwrite"]').click(); cy.get('#sidebar-properties #field-title').type(' and Tulips'); cy.get('#toolbar-save').click(); cy.visit('/document'); - cy.get('.block.teaser .content h2').contains('Blue Orchidees and Tulips'); + cy.get('.block.teaser .content h2').contains('Blue Orchids and Tulips'); - cy.visit('/document/blue-orchidees/edit'); + cy.visit('/document/blue-orchids/edit'); cy.get('.documentFirstHeading').type(' but no Tulips'); cy.get('#toolbar-save').click(); - cy.visit('/document/blue-orchidees'); - cy.get('.documentFirstHeading').contains('Blue Orchidees but no Tulips'); + cy.visit('/document/blue-orchids'); + cy.get('.documentFirstHeading').contains('Blue Orchids but no Tulips'); // THEN I still see the overwritten content in the teaser cy.visit('/document'); - cy.get('.block.teaser .content h2').contains('Blue Orchidees and Tulips'); + cy.get('.block.teaser .content h2').contains('Blue Orchids and Tulips'); + }); + + it('As editor I can add a Teaser block and override the data with an external image ', () => { + // GIVEN a Document with the title document and a Document to reference with the title Blue Orchids + cy.createContent({ + contentType: 'Document', + contentId: 'blue-orchids', + contentTitle: 'Blue Orchids', + contentDescription: 'are growing on the mountain tops', + image: true, + path: '/document', + }); + + cy.navigate('/document/edit'); + // WHEN I create a Teaser block and change the data of the referenced object + cy.get('.block .slate-editor [contenteditable=true]').click(); + cy.get('.button .block-add-button').click({ force: true }); + cy.get('.blocks-chooser .mostUsed .button.teaser') + .contains('Teaser') + .click({ force: true }); + cy.get( + '.objectbrowser-field[aria-labelledby="fieldset-default-field-label-href"] button[aria-label="Open object browser"]', + ).click(); + cy.get('[aria-label="Select Blue Orchids"]').dblclick(); + cy.wait(500); + cy.get('input[name="field-overwrite"]').check({ force: true }); + cy.get( + '.objectbrowser-field[aria-labelledby="fieldset-default-field-label-preview_image"]', + ) + .click() + .type( + `https://github.com/plone/volto/raw/main/logos/volto-colorful.png{enter}`, + ); + cy.get('#toolbar-save').click(); + cy.get('.image-wrapper > img') + .should('have.attr', 'src') + .and( + 'include', + 'https://github.com/plone/volto/raw/main/logos/volto-colorful.png', + ); + cy.get('.block.teaser .content h2').contains('Blue Orchids'); }); }); diff --git a/packages/volto/news/.gitkeep b/packages/volto/news/.keep similarity index 100% rename from packages/volto/news/.gitkeep rename to packages/volto/news/.keep diff --git a/packages/volto/news/6147.bugfix b/packages/volto/news/6147.bugfix new file mode 100644 index 0000000000..f8636db7f6 --- /dev/null +++ b/packages/volto/news/6147.bugfix @@ -0,0 +1 @@ +Fix `Teaser` block image override option to render external images and internal images pointing to image scales. @Tishasoumya-02 diff --git a/packages/volto/src/components/manage/Blocks/Teaser/DefaultBody.jsx b/packages/volto/src/components/manage/Blocks/Teaser/DefaultBody.jsx index e6d87f2236..0ec4a26fdc 100644 --- a/packages/volto/src/components/manage/Blocks/Teaser/DefaultBody.jsx +++ b/packages/volto/src/components/manage/Blocks/Teaser/DefaultBody.jsx @@ -22,6 +22,7 @@ const TeaserDefaultTemplate = (props) => { const intl = useIntl(); const href = data.href?.[0]; const image = data.preview_image?.[0]; + const url = data.preview_image?.[0]?.['@id']; const Image = config.getComponent('Image').component; const { openExternalLinkInNewTab } = config.settings; @@ -50,16 +51,22 @@ const TeaserDefaultTemplate = (props) => { } >
- {(href.hasPreviewImage || href.image_field || image) && ( + {url && !image?.image_field ? (
- +
+ ) : ( + (href.hasPreviewImage || href.image_field || image) && ( +
+ +
+ ) )}
{data?.head_title && (