Teaser Block Image Overide (#6147)

Co-authored-by: David Ichim <[email protected]>
plone · Aug 1, 2024 · 932962e · 932962e
1 parent 82481e4
commit 932962e
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 31 deletions.
diff --git 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,38 +73,38 @@ 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')
       .clear()
       .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 → packages/volto/news/.keep b/packages/volto/news/.gitkeep → packages/volto/news/.keep
diff --git a/packages/volto/news/6147.bugfix 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
@@ -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) => {
             }
           >
             <div className="teaser-item default">
-              {(href.hasPreviewImage || href.image_field || image) && (
+              {url && !image?.image_field ? (
                 <div className="image-wrapper">
-                  <Image
-                    item={image || href}
-                    imageField={image ? image.image_field : href.image_field}
-                    alt=""
-                    loading="lazy"
-                    responsive={true}
-                  />
+                  <Image src={url} alt="" loading="lazy" responsive={true} />
                 </div>
+              ) : (
+                (href.hasPreviewImage || href.image_field || image) && (
+                  <div className="image-wrapper">
+                    <Image
+                      item={image || href}
+                      imageField={image ? image.image_field : href.image_field}
+                      alt=""
+                      loading="lazy"
+                      responsive={true}
+                    />
+                  </div>
+                )
               )}
               <div className="content">
                 {data?.head_title && (
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Fix `Teaser` block image override option to render external images and internal images pointing to image scales. @Tishasoumya-02