From 88a8e04312c67b9f1c80435007ad4aec1b03a09d Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Mon, 17 Apr 2023 01:01:36 +0530 Subject: [PATCH 1/6] allow to replace image using drag/drop --- components/image/index.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/components/image/index.js b/components/image/index.js index 1979ac87..90be2496 100644 --- a/components/image/index.js +++ b/components/image/index.js @@ -25,12 +25,6 @@ const Image = (props) => { return ; } - if (!hasImage && canEditImage) { - return ( - - ); - } - if (isResolvingMedia) { return ; } @@ -65,6 +59,13 @@ const Image = (props) => { )} {altText} + ); }; From b899d6d40753da89f8458e8a544d34399deabcd5 Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Sat, 27 May 2023 12:26:34 +0530 Subject: [PATCH 2/6] fix proptypes --- components/image/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/image/index.js b/components/image/index.js index 90be2496..46367827 100644 --- a/components/image/index.js +++ b/components/image/index.js @@ -81,13 +81,13 @@ Image.defaultProps = { }; Image.propTypes = { - id: PropTypes.number.isRequired, + id: PropTypes.number, size: PropTypes.string, onSelect: PropTypes.func.isRequired, onChangeFocalPoint: PropTypes.func, focalPoint: PropTypes.shape({ - x: PropTypes.string, - y: PropTypes.string, + x: PropTypes.number, + y: PropTypes.number, }), labels: PropTypes.shape({ title: PropTypes.string, From 33dd15590f614690f06e54d37d397d15d111952f Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Sat, 27 May 2023 12:37:49 +0530 Subject: [PATCH 3/6] add container with relative position --- components/image/index.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/components/image/index.js b/components/image/index.js index 46367827..a595d3ae 100644 --- a/components/image/index.js +++ b/components/image/index.js @@ -58,14 +58,18 @@ const Image = (props) => { )} - {altText} - + + {/* This DIV with position `relative` is necessary to limit the DropZone area. */} +
+ {altText} + +
); }; @@ -81,7 +85,7 @@ Image.defaultProps = { }; Image.propTypes = { - id: PropTypes.number, + id: PropTypes.number.isRequired, size: PropTypes.string, onSelect: PropTypes.func.isRequired, onChangeFocalPoint: PropTypes.func, From 51abd283818fe99a595d2942d9026774e973c6e0 Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Mon, 29 May 2023 14:34:07 +0530 Subject: [PATCH 4/6] update propTypes --- components/image/index.js | 5 +++-- example/src/blocks/image-example/edit.js | 10 +++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/components/image/index.js b/components/image/index.js index a595d3ae..ecba870f 100644 --- a/components/image/index.js +++ b/components/image/index.js @@ -60,7 +60,7 @@ const Image = (props) => { )} {/* This DIV with position `relative` is necessary to limit the DropZone area. */} -
+
{altText} { export { Image }; Image.defaultProps = { + id: 0, size: 'large', focalPoint: { x: 0.5, y: 0.5 }, onChangeFocalPoint: undefined, @@ -85,7 +86,7 @@ Image.defaultProps = { }; Image.propTypes = { - id: PropTypes.number.isRequired, + id: PropTypes.number, size: PropTypes.string, onSelect: PropTypes.func.isRequired, onChangeFocalPoint: PropTypes.func, diff --git a/example/src/blocks/image-example/edit.js b/example/src/blocks/image-example/edit.js index 9f1323d1..f65bd5a6 100644 --- a/example/src/blocks/image-example/edit.js +++ b/example/src/blocks/image-example/edit.js @@ -23,9 +23,13 @@ export function BlockEdit(props) { return ( <> - - - + { + imageId && ( + + + + ) + }

Hello World!

From 539af7de26a42b00838de278ac76b6c333e28c76 Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Sun, 11 Jun 2023 21:05:25 +0530 Subject: [PATCH 5/6] fix e2e tests --- cypress/e2e/Image.spec.js | 45 ++++++++++++++++++++++----------------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/cypress/e2e/Image.spec.js b/cypress/e2e/Image.spec.js index 18f8f1b9..06cefe1d 100644 --- a/cypress/e2e/Image.spec.js +++ b/cypress/e2e/Image.spec.js @@ -8,34 +8,39 @@ context('Image', () => { it('allows the user to pick an image from the media library and displays it inline', () => { cy.createPost({title: 'Image Component'}); - cy.insertBlock('Image Example'); - - cy.get('button').contains('Media Library').click(); - cy.get('#menu-item-browse').click(); - cy.get('.attachment-preview').first().click(); - cy.get('#attachment-details-alt-text').type('Test Alt Text'); - cy.get('.media-button-select').contains('Select').click(); - - cy.get('.wp-block-example-image-example img').scrollIntoView().should('be.visible'); - cy.get('.wp-block-example-image-example img') - .should('have.attr', 'alt'); + cy.window().then( ( win ) => { + const { wp } = win; - cy.get('.wp-block-example-image-example img') - .should('have.attr', 'src'); + const paraBlock = wp.blocks.createBlock( 'example/image-example' ); - cy.savePost(); - // click on the View Post snackbar item - cy.get('.components-snackbar a').click(); + wp.data.dispatch( 'core/editor' ).insertBlocks( paraBlock ); + } ); + + cy.get('button').contains('Media Library').click(); + cy.get('#menu-item-browse').click(); + cy.get('.attachment-preview').first().click(); + cy.get('#attachment-details-alt-text').type('Test Alt Text'); + cy.get('.media-button-select').contains('Select').click(); + + cy.get('.wp-block-example-image-example img').scrollIntoView().should('be.visible'); + + cy.get('.wp-block-example-image-example img') + .should('have.attr', 'alt'); - // return to the editor - cy.get('a').contains('Edit Page').click(); + cy.get('.wp-block-example-image-example img') + .should('have.attr', 'src'); - cy.wait(500); + cy.savePost(); + + // click on the View Post snackbar item + cy.get('.components-snackbar a').click(); - cy.get('.wp-block-example-image-example img').scrollIntoView().should('be.visible'); + // return to the editor + cy.get('a').contains('Edit Page').click(); + cy.get('.wp-block-example-image-example img', { timeout: 5000 }).should('be.visible'); }) }) From 0f8af8f69ddaddc0781e817ea4f2cd27fc500eb4 Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Sun, 11 Jun 2023 21:10:58 +0530 Subject: [PATCH 6/6] hide focal pointer when no image present --- components/image/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/image/index.js b/components/image/index.js index ecba870f..1737ed20 100644 --- a/components/image/index.js +++ b/components/image/index.js @@ -19,7 +19,7 @@ const Image = (props) => { const hasImage = !!id; const { media, isResolvingMedia } = useMedia(id); - const shouldDisplayFocalPointPicker = typeof onChangeFocalPoint === 'function'; + const shouldDisplayFocalPointPicker = typeof onChangeFocalPoint === 'function' && hasImage; if (!hasImage && !canEditImage) { return ;