PLANET-6874: Fix the Gallery block #932

GP-Dan-Tovbein · 2022-08-25T17:06:08Z

Ref: https://jira.greenpeace.org/browse/PLANET-6874

Description

Major changes

hydrate the component because it was using a deprecated method when saved it. Now it's a fully SSR Component.
Fix Gallery styles, not only the slider.
Improve its performance.
Update documentation.

In addition to this, I've also left a bunch of comments on this PR explaining the reason of most of the new changes.

👉 Demo page

/unhold 3707dcf7-85b7-44db-be6e-b9113701847e

planet-4 · 2022-08-25T17:15:26Z

Test instance is ready 🚀

🌑 nix | admin | blocks report | CircleCI | composer-local.json

⌚ 2023.03.15 10:52:27

/unhold a36cbd2d-2d09-4f53-80bf-e847df65cd5d

/unhold a1f42112-1776-47fc-ac69-6c3402bf2a23

/unhold e5ebe159-d312-4754-9bc4-6e449d3eeb3d

GP-Dan-Tovbein · 2022-08-25T18:26:34Z

assets/src/blocks/Gallery/GalleryCarousel.js

-              onClick={() => {
-                onImageClick(index);
-              }}
+              data-index={index}


Doing this it will pass a data- value and retrieve it by doing this.

GP-Dan-Tovbein · 2022-08-25T18:26:37Z

assets/src/blocks/Gallery/GalleryCarousel.js

@@ -125,9 +125,8 @@ export const GalleryCarousel = ({ images, onImageClick, isEditing }) => {
              style={{ objectPosition: image.focus_image }}
              alt={image.alt_text}
              title={image.alt_text}
-              onClick={() => {


This is basically a performance tuning, since this lambda function is created every time the render method is invoked for the only reason to send the index value.

GP-Dan-Tovbein · 2022-08-25T18:26:54Z

assets/src/blocks/Gallery/GalleryFrontend.js

-  className,
-  gallery_block_style,
-  images,
+  attributes,


Because we hydrate the component.

Maybe we could set {} as default value here? Then we would avoid later on having to check attributes && attributes.gallery_block_title for example 🤔

assets/src/blocks/Gallery/GalleryScript.js

GP-Dan-Tovbein · 2022-08-25T18:34:43Z

classes/blocks/class-gallery.php

@@ -53,7 +53,7 @@ public function register_gallery_block() {
 				'render_callback' => static function ( $attributes ) {
 					$attributes['images'] = self::get_images( $attributes );

-					return self::render_frontend( $attributes );
+					return self::hydrate_frontend( $attributes );


We need to create a similar render_frontend method because when you hydrate a component you need to pass the data-hydrate instead of a data-render attribute. After we hydrate all render components we'll need to remove this method too.

Would this affect how we implemented hydration for the Carousel Header? Maybe not in this PR, but we could open a follow-up ticket to investigate that

We would need to check that, good suggestion :)

classes/blocks/class-gallery.php

assets/src/blocks/Gallery/GalleryFrontend.js

assets/src/blocks/Gallery/GalleryBlock.js

assets/src/blocks/Gallery/GalleryFrontend.js

/unhold 3c6ba4c6-d71c-43b7-8784-e90bba8f4218

/unhold d8846611-0177-4391-8cc5-f60691bcfdd5

mleray

Did you test the changes with existing blocks? On local I get the Attempt block recovery message in the editor and in the frontend the block no longer shows...

Edit: on the test instance, it seems that existing blocks still show on the frontend, but in the backend I do see the error message

/unhold db51f8bd-c387-4d46-a6c8-0d559b82f2e5

mleray · 2023-03-13T09:12:35Z

On local I see this message in the console:
Warning: Expected server HTML to contain a matching <section> in <div>.
    at section
    at GalleryFrontend
I still have the Hammer not defined error message sometimes, it seems to be when creating a new Gallery block with Slider style and previewing the page (without saving first) or when purging the page

I still see both of these issues 😕

mleray · 2023-03-13T09:18:02Z

I get a similar warning for the CarouselHeader, which we also use hydration for:

/unhold 4a86ad40-767e-4959-9c64-895b4c2edf10

/unhold 6a7200b4-4f8b-4e77-b03c-3a5d3c034e80

GP-Dan-Tovbein · 2023-03-14T13:24:53Z

I get a similar warning for the CarouselHeader, which we also use hydration for:

The improvement from the current PR will potentially fix the rest of blocks with the same error. That happens because the server store empty content which is completely different of what the frontend renders.

classes/blocks/class-base-block.php

- Implement hydrate_frontend render callback function - Make improvements to the gallery class, update attrs

- Pass new CSR attribute if it's needed - Update documentation

- Modify openLightbox method passing the event instead an index

- Hydrate the component and deprecate againts the frontendRendered - Implement new component version - Implement validations

/unhold ac010092-106b-49ad-9037-40ff67e0cb29

/unhold 02d4c4ba-a359-42d7-91ab-132f594057ec

/unhold 8ea2e162-0a2e-4557-bb09-59619fece015

assets/src/components/Lightbox/useLightbox.js

mleray

Looks good to me, great job! 👏 I've left 2 suggestions in the comments, but they're not blockers 🙂

- Modify variables assignements - Update the deprecated attribute - Fix the 'Warning: Expected server HTML to contain a matching <section> in <div>' issue - Fix evt prevent default issue

/unhold 6cbfac0a-7c9c-4d35-8b71-032f81f1b0a6

/unhold e014cca4-acd2-4c80-bb71-916a3cdb2156

GP-Dan-Tovbein added the Review label Aug 25, 2022

GP-Dan-Tovbein self-assigned this Aug 25, 2022

planet-4 added the [Test Env] proteus label Aug 25, 2022

planet-4 added a commit to greenpeace/planet4-test-proteus that referenced this pull request Aug 25, 2022

greenpeace/planet4-plugin-gutenberg-blocks#932 at 2502caf0

2af676a

/unhold 3707dcf7-85b7-44db-be6e-b9113701847e

planet-4 added a commit to greenpeace/planet4-test-proteus that referenced this pull request Aug 25, 2022

greenpeace/planet4-plugin-gutenberg-blocks#932 at c30e13b4

a73deee

/unhold a36cbd2d-2d09-4f53-80bf-e847df65cd5d

GP-Dan-Tovbein force-pushed the PLANET-6874_gallery_block_hotfix branch from c30e13b to 8c46dcc Compare August 25, 2022 18:15

planet-4 added a commit to greenpeace/planet4-test-proteus that referenced this pull request Aug 25, 2022

greenpeace/planet4-plugin-gutenberg-blocks#932 at 8c46dccf

12a5d3b

/unhold a1f42112-1776-47fc-ac69-6c3402bf2a23

planet-4 added a commit to greenpeace/planet4-test-proteus that referenced this pull request Aug 25, 2022

greenpeace/planet4-plugin-gutenberg-blocks#932 at 3379ed12

b08ce57

/unhold e5ebe159-d312-4754-9bc4-6e449d3eeb3d

GP-Dan-Tovbein commented Aug 25, 2022

View reviewed changes

assets/src/blocks/Gallery/GalleryScript.js Show resolved Hide resolved

GP-Dan-Tovbein commented Aug 25, 2022

View reviewed changes

classes/blocks/class-gallery.php Show resolved Hide resolved

GP-Dan-Tovbein commented Aug 25, 2022

View reviewed changes

assets/src/blocks/Gallery/GalleryFrontend.js Outdated Show resolved Hide resolved

GP-Dan-Tovbein requested review from comzeradd, mleray, lithrel and sagarsdeshmukh August 25, 2022 19:06

GP-Dan-Tovbein marked this pull request as ready for review August 25, 2022 19:06

GP-Dan-Tovbein commented Aug 25, 2022

View reviewed changes

assets/src/blocks/Gallery/GalleryBlock.js Show resolved Hide resolved

mleray reviewed Aug 26, 2022

View reviewed changes

assets/src/blocks/Gallery/GalleryBlock.js Outdated Show resolved Hide resolved

mleray reviewed Aug 26, 2022

View reviewed changes

assets/src/blocks/Gallery/GalleryFrontend.js Outdated Show resolved Hide resolved

GP-Dan-Tovbein requested a review from mleray August 26, 2022 11:37

planet-4 added a commit to greenpeace/planet4-test-proteus that referenced this pull request Aug 26, 2022

greenpeace/planet4-plugin-gutenberg-blocks#932 at faf96583

dd40461

/unhold 3c6ba4c6-d71c-43b7-8784-e90bba8f4218

planet-4 added a commit to greenpeace/planet4-test-proteus that referenced this pull request Aug 26, 2022

greenpeace/planet4-plugin-gutenberg-blocks#932 at faf96583

2f989be

/unhold d8846611-0177-4391-8cc5-f60691bcfdd5

mleray reviewed Aug 26, 2022

View reviewed changes

GP-Dan-Tovbein changed the title ~~Planet 6874: Fix the Gallery block~~ PLANET-6874: Fix the Gallery block Aug 26, 2022

GP-Dan-Tovbein force-pushed the PLANET-6874_gallery_block_hotfix branch from 635d364 to 1e289a6 Compare August 30, 2022 17:51

GP-Dan-Tovbein force-pushed the PLANET-6874_gallery_block_hotfix branch from 1e289a6 to b478237 Compare March 10, 2023 14:00

planet-4 added a commit to greenpeace/planet4-test-nix that referenced this pull request Mar 10, 2023

greenpeace/planet4-plugin-gutenberg-blocks#932 at b4782375

1cfb9f4

/unhold db51f8bd-c387-4d46-a6c8-0d559b82f2e5

comzeradd requested a review from mleray March 13, 2023 08:33

planet-4 added a commit to greenpeace/planet4-test-nix that referenced this pull request Mar 14, 2023

greenpeace/planet4-plugin-gutenberg-blocks#932 at 1bb65b2b

4fd143d

/unhold 4a86ad40-767e-4959-9c64-895b4c2edf10

GP-Dan-Tovbein force-pushed the PLANET-6874_gallery_block_hotfix branch from 1bb65b2 to f93c68c Compare March 14, 2023 13:21

planet-4 added a commit to greenpeace/planet4-test-nix that referenced this pull request Mar 14, 2023

greenpeace/planet4-plugin-gutenberg-blocks#932 at f93c68c9

0e983dc

/unhold 6a7200b4-4f8b-4e77-b03c-3a5d3c034e80

GP-Dan-Tovbein commented Mar 14, 2023

View reviewed changes

classes/blocks/class-base-block.php Outdated Show resolved Hide resolved

dantovbein added 4 commits March 14, 2023 11:28

Update PHP classes

b5ea81a

- Implement hydrate_frontend render callback function - Make improvements to the gallery class, update attrs

Modify hydrate function

386bb3d

- Pass new CSR attribute if it's needed - Update documentation

Update Lightbox functionality

d69656f

- Modify openLightbox method passing the event instead an index

Fix the Gallery core block

a1cbddf

- Hydrate the component and deprecate againts the frontendRendered - Implement new component version - Implement validations

GP-Dan-Tovbein force-pushed the PLANET-6874_gallery_block_hotfix branch from f93c68c to a71244a Compare March 14, 2023 14:45

planet-4 added a commit to greenpeace/planet4-test-nix that referenced this pull request Mar 14, 2023

greenpeace/planet4-plugin-gutenberg-blocks#932 at a71244a2

7393f45

/unhold ac010092-106b-49ad-9037-40ff67e0cb29

mleray mentioned this pull request Mar 14, 2023

Fix Gallery block image clicks in the editor #1018

Closed

GP-Dan-Tovbein force-pushed the PLANET-6874_gallery_block_hotfix branch 2 times, most recently from 045b681 to b2fd6e7 Compare March 14, 2023 22:22

planet-4 added a commit to greenpeace/planet4-test-nix that referenced this pull request Mar 15, 2023

greenpeace/planet4-plugin-gutenberg-blocks#932 at b2fd6e79

9beb394

/unhold 02d4c4ba-a359-42d7-91ab-132f594057ec

GP-Dan-Tovbein force-pushed the PLANET-6874_gallery_block_hotfix branch from b2fd6e7 to 7742a5a Compare March 15, 2023 09:05

planet-4 added a commit to greenpeace/planet4-test-nix that referenced this pull request Mar 15, 2023

greenpeace/planet4-plugin-gutenberg-blocks#932 at 7742a5a4

9f6ed45

/unhold 8ea2e162-0a2e-4557-bb09-59619fece015

mleray reviewed Mar 15, 2023

View reviewed changes

assets/src/components/Lightbox/useLightbox.js Show resolved Hide resolved

mleray approved these changes Mar 15, 2023

View reviewed changes

Follow up review

dad5c6e

- Modify variables assignements - Update the deprecated attribute - Fix the 'Warning: Expected server HTML to contain a matching <section> in <div>' issue - Fix evt prevent default issue

GP-Dan-Tovbein force-pushed the PLANET-6874_gallery_block_hotfix branch from 7742a5a to dad5c6e Compare March 15, 2023 10:11

planet-4 added a commit to greenpeace/planet4-test-nix that referenced this pull request Mar 15, 2023

greenpeace/planet4-plugin-gutenberg-blocks#932 at dad5c6e6

a8c3347

/unhold 6cbfac0a-7c9c-4d35-8b71-032f81f1b0a6

planet-4 added a commit to greenpeace/planet4-test-nix that referenced this pull request Mar 15, 2023

greenpeace/planet4-plugin-gutenberg-blocks#932 at dad5c6e6

0ea4abc

/unhold e014cca4-acd2-4c80-bb71-916a3cdb2156

GP-Dan-Tovbein merged commit 08b64ce into main Mar 15, 2023
2 checks passed

GP-Dan-Tovbein deleted the PLANET-6874_gallery_block_hotfix branch March 15, 2023 12:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PLANET-6874: Fix the Gallery block #932

PLANET-6874: Fix the Gallery block #932

GP-Dan-Tovbein commented Aug 25, 2022 •

edited

planet-4 commented Aug 25, 2022 •

edited

GP-Dan-Tovbein Aug 25, 2022

GP-Dan-Tovbein Aug 25, 2022

GP-Dan-Tovbein Aug 25, 2022

mleray Mar 15, 2023

GP-Dan-Tovbein Aug 25, 2022

mleray Mar 15, 2023

GP-Dan-Tovbein Mar 15, 2023

mleray left a comment •

edited

mleray commented Mar 13, 2023

mleray commented Mar 13, 2023

GP-Dan-Tovbein commented Mar 14, 2023

mleray left a comment

PLANET-6874: Fix the Gallery block #932

PLANET-6874: Fix the Gallery block #932

Conversation

GP-Dan-Tovbein commented Aug 25, 2022 • edited

Description

planet-4 commented Aug 25, 2022 • edited

Test instance is ready 🚀

GP-Dan-Tovbein Aug 25, 2022

Choose a reason for hiding this comment

GP-Dan-Tovbein Aug 25, 2022

Choose a reason for hiding this comment

GP-Dan-Tovbein Aug 25, 2022

Choose a reason for hiding this comment

mleray Mar 15, 2023

Choose a reason for hiding this comment

GP-Dan-Tovbein Aug 25, 2022

Choose a reason for hiding this comment

mleray Mar 15, 2023

Choose a reason for hiding this comment

GP-Dan-Tovbein Mar 15, 2023

Choose a reason for hiding this comment

mleray left a comment • edited

Choose a reason for hiding this comment

mleray commented Mar 13, 2023

mleray commented Mar 13, 2023

GP-Dan-Tovbein commented Mar 14, 2023

mleray left a comment

Choose a reason for hiding this comment

GP-Dan-Tovbein commented Aug 25, 2022 •

edited

planet-4 commented Aug 25, 2022 •

edited

mleray left a comment •

edited