[Gutenberg] Add AMP Carousel for Gallery and AMP Lightbox features for Gallery and Image #1121

miina · 2018-05-05T18:03:30Z

Based on #1026.

Does the following:

Adds AMP Carousel toggle to Gallery block which allows displaying the gallery as carousel instead of default WP gallery.
Adds "Add lightbox effect" toggle to Gallery and Image core blocks.

miina · 2018-05-05T18:04:26Z

includes/sanitizers/class-amp-gallery-block-sanitizer.php

+
+			$attributes   = array(
+				'width'  => self::FALLBACK_WIDTH,
+				'height' => self::FALLBACK_HEIGHT,


Not sure what could be a better alternative for setting width and height. Thoughts?

Could the AMP_Gallery_Block_Sanitizer get added to the sanitizers list so that it is forced to be run after the AMP_Img_Sanitizer? Then you would be able to use the width and height of the images inside of the gallery to obtain the width and height for the overall gallery?

Added AMP_Gallery_Block_Sanitize::get_carousel_height() which gets the heights of the images and sets the gallery height according to the smallest image. However, saw that basically all the images had the default height and width set (400px) within AMP_Image_Sanitizer::determine_dimensions(), so also added AMP_Base_Sanitizer::set_attachment_width_and_height_by_src() which gets the height and width from the image itself and is used in AMP_Image_Sanitizer::determine_dimensions() before the logic that adds the fallback width and height. Does this make sense, or does it interfere with the logic that sets the fallback width and height?

Thinking that this might also change the looks for default gallery in an unexpected way.

miina · 2018-05-08T13:34:49Z

Note: Also added amp-image-lightbox implementation for Image and Gallery blocks within this PR since it was quite related.

kienstra · 2018-05-08T22:28:40Z

assets/js/amp-editor-blocks.js

+		}
+
+		if ( '' !== ampClassName && attributes.className !== ampClassName ) {
+			props.className = ampClassName.trim();


Hi @miina,
In my browser, this didn't assign the new props.className value, causing the lightbox to not appear on the front-end.

But with this change (borrowing from Weston's solution here), it did:

props = _.extend( {}, props, { className: ampClassName.trim() } );

Hey @kienstra, thanks for finding this, makes sense that the props.className can't be directly set this way.

…oggle

…dd/amp-carousel-toggle

westonruter · 2018-05-21T18:28:17Z

assets/js/amp-editor-blocks.js

@@ -211,6 +242,15 @@ var ampEditorBlocks = ( function() {
 			ampLayout = attributes.ampLayout;

 			if ( 'core/shortcode' === name ) {
+				// Lets remove amp-carousel from edit view.
+				if ( component.hasGalleryShortcodeCarouselAttribute( attributes.text || '' ) ) {
+					props.setAttributes( { text: component.removeAmpCarouselFromShortcodeAtts( attributes.text ) } );


This will need to be moved to an onChange handler.

Hmm, removing the attributes from the saved shortcode text on loading the block isn't related to any other attribute changing, the objective here was to not display the saved attributes within the shortcode already when the block is initially loaded, e.g. display just [gallery] instead of [gallery amp-lightbox=true]. Moving this part to onChange handler would cause the AMP attributes show up when first loading the block and remove these once onChange triggers.

Should we just display the attributes (in case they're not default) within the shortcode instead of trying to hide them? Thoughts?

westonruter · 2018-05-21T18:28:36Z

assets/js/amp-editor-blocks.js

+				}
+				// Lets remove amp-lightbox from edit view.
+				if ( component.hasGalleryShortcodeLightboxAttribute( attributes.text || '' ) ) {
+					props.setAttributes( { text: component.removeAmpLightboxFromShortcodeAtts( attributes.text ) } );


Per above, this will need to be moved to an onChange handler.

westonruter · 2018-05-21T18:30:11Z

assets/css/amp-default.css

@@ -3,3 +3,11 @@
 	/** Force the image into a box of fixed dimensions and use object-fit to scale. **/
 	object-fit: contain;
 }
+
+#amp-image-lightbox-1 img {


I don't think we should be targeting img elements in selectors. I should think that only targeting amp-img should be done since img should really be the domain of the amp-img to control?

Looks like amp-image-lightbox component is empty by default and clicking on image which is targeting this lightbox will insert the img element into the amp-image-lightbox, the amp-image-lightbox component doesn't include an additional amp-img component within, targeting amp-img doesn't seem to be possible in this case.
For example after clicking on an an image the lightbox HTML looks like this:

Thoughts?

Changed to use AMP-generated class instead of img within 6900e2b.

westonruter · 2018-05-21T18:31:04Z

assets/js/amp-editor-blocks.js

+			onChange: function( value ) {
+				props.setAttributes( { ampLayout: value } );
+				if ( 'core/image' === props.name ) {
+					component.setImageBlockLayoutAttributes( props, value );


~~Per above, this will need to be moved to an onChange handler.~~

This one is already in onChange handler.

westonruter · 2018-05-21T18:33:38Z

includes/embeds/class-amp-gallery-embed.php

+			$lightbox_tag     = AMP_HTML_Utils::build_tag(
+				'amp-image-lightbox',
+				array(
+					'id'                           => AMP_Base_Sanitizer::AMP_IMAGE_LIGHTBOX_ID,


Why the static 'amp-image-lightbox-1'? Should this not have some auto-increment number instead that is appended?

Used 'amp-image-lightbox-1' originally since thought that maybe there will be more than one, however, looks like using one should be enough, maybe we could just leave it as 'amp-image-lightbox'. Thoughts?

Changed to amp-image-lightbox.

westonruter · 2018-05-21T18:34:32Z

includes/sanitizers/class-amp-base-sanitizer.php

@@ -384,6 +396,12 @@ public function filter_data_amp_attributes( $attributes, $amp_data ) {
 		if ( isset( $amp_data['noloading'] ) ) {
 			$attributes['data-amp-noloading'] = '';
 		}
+		if ( isset( $amp_data['lightbox'] ) ) {
+			$attributes['data-amp-lightbox'] = '';
+			$attributes['on']                = 'tap:' . self::AMP_IMAGE_LIGHTBOX_ID;


Per above, I think this needs to auto-increment a number to append to amp-image-lightbox-.

…oggle

* Let gallery have be sized according to the max height. * Constrain height of AMP gallery carousel by ratio with max width * Remove duplicate data for jed_locale_data.

See #1147

westonruter · 2018-05-30T23:00:38Z

For some reason I get this warning when I click the Carousel or Lightbox toggles the first time:

Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

westonruter · 2018-05-30T23:19:42Z

At some point it would probably be a good idea to hide the gallery column count when slideshow is enabled:

…-compat)

…ve non-standard entry__content

westonruter · 2018-05-30T23:20:56Z

assets/css/amp-default.css

+}
+
+.entry__content .wp-block-gallery[class*="columns-"] figure {


entry__content is not a standard class name.

westonruter · 2018-05-30T23:22:21Z

assets/css/amp-default.css

+
+#amp-image-lightbox div div > :first-child {
+	object-fit: contain;


This doesn't seem to be having any effect. I don't think it is needed?

westonruter · 2018-05-30T23:27:07Z

assets/css/amp-default.css

+
+.entry__content .wp-block-gallery[class*="columns-"] figure {
+	width: 100%;


I think this may just be needed in the ampnews theme. It doesn't seem necessary in Twenty Fifteen. It's probably just that the ampnews theme lacks all of the required styles.

miina · 2018-05-31T05:01:16Z

includes/sanitizers/class-amp-gallery-block-sanitizer.php

-				$amp_carousel->appendChild( $images->item( $j ) );
+			) );
+			foreach ( $images as $image ) {
+				$amp_carousel->appendChild( $image );


@westonruter for ( $j = $num_images - 1; $j >= 0; $j-- ) { was used here since when looping directly through the nodes (foreach ( $images as $image ) {) it's not working as expected, for example when adding a gallery with 5 images locally and using AMP Carousel it will just display the first three in the gallery. That's happening when testing locally now as well, is it working as expected for you?

@miina you're absolutely right. I broke it.

PR to fix opened in #1187.

kienstra · 2018-06-05T21:10:22Z

Request For Testing

Hi @csossi,
Could you please test this?

Go to https://native-ampconfdemo.pantheonsite.io/
Create a new post, using Gutenberg (the default)
Add a "Gallery Block," and add images to the gallery
Publish the post
Toggle the "Display as AMP carousel" and "Add lightbox effect" options that Miina showed in her comment.
Go to the front-end of the post
Expected: The gallery displays as a carousel if selected
Expected: On selecting "Add lightbox effect," clicking an image expands it to fill the display

csossi · 2018-06-07T13:51:56Z

@kienstra - Works fine on front-end, but noted that a message appeared in the admin on publishing post. Not sure if relevant here, but wanted you to see it:

The link here takes me to:

kienstra · 2018-06-07T16:16:22Z

Thanks, Should Be Fine

Hi @csossi,
Thanks for letting me know about that. The validation error should be fine, as it's not directly related to the post content.

miina added 4 commits May 4, 2018 11:22

Start adding carousel toggle for Gallery.

52943ed

Merge #1008.

fd662d7

Add amp-carousel class.

54f9555

Filter saving the post for when AMP Plugin gets disabled. Add tests.

ed1f9de

miina commented May 5, 2018

View reviewed changes

miina added 2 commits May 7, 2018 13:37

Add lightbox logic for Image block.

0263878

Add lightbox for gallery block.

40486fe

miina changed the title ~~[Gutenberg] Add AMP Carousel toggle for Gallery block~~ [Gutenberg] Add AMP Carousel for Gallery and AMP Lightbox features for Gallery and Image May 8, 2018

miina added 2 commits May 8, 2018 16:05

Fix CSS.

96bd515

Merge develop.

553c4da

Add block-related JS with blocks filter instead of admin filter.

22060ec

kienstra reviewed May 8, 2018

View reviewed changes

miina and others added 8 commits May 9, 2018 12:54

Fix issue with assigning props directly.

5b63476

Add lightbox to gallery shortcode block.

2e102ea

Merge remote-tracking branch 'origin/develop' into add/amp-carousel-t…

c3aad13

…oggle

Merge #1026

dd924ec

Adjust logic to using data- attributes.

ca133a4

Fixes. Merge #1008

22597fa

Update method comments. Remove unused dynamicBlocks data.

b70af66

Merge branch 'develop' of https://github.com/Automattic/amp-wp into a…

438567d

…dd/amp-carousel-toggle

westonruter requested changes May 21, 2018

View reviewed changes

Merge branch 'develop' into add/amp-carousel-toggle

7ee5fd3

westonruter mentioned this pull request May 25, 2018

FR: AMP components without AMP runtime ampproject/amphtml#15583

Closed

miina added 6 commits May 25, 2018 13:41

Merge develop & resolve conflicts.

58430e4

Resolve conflicts.

55e8fff

Merge remote-tracking branch 'origin/develop' into add/amp-carousel-t…

f658c43

…oggle

Fixes.

6900e2b

Merge develop & resolve conflicts.

a69dd55

Merge develop.

ff2cdd2

Fix AMP carousel for gallery block.

201654f

* Let gallery have be sized according to the max height. * Constrain height of AMP gallery carousel by ratio with max width * Remove duplicate data for jed_locale_data.

westonruter force-pushed the add/amp-carousel-toggle branch from b2382d7 to 201654f Compare May 30, 2018 22:40

Pass through all attributes from img to amp-img

f9f3a05

See #1147

westonruter added 2 commits May 30, 2018 16:29

Force carousels to be used when AMP theme support is absent (for back…

cc53173

…-compat)

Remove apparently unneessary object-fit from amp-image-lightbox; remo…

dbe281c

…ve non-standard entry__content

westonruter reviewed May 30, 2018

View reviewed changes

westonruter force-pushed the add/amp-carousel-toggle branch from 041311c to dbe281c Compare May 30, 2018 23:30

westonruter approved these changes May 30, 2018

View reviewed changes

westonruter added this to the v1.0 milestone May 30, 2018

westonruter merged commit a15be99 into develop May 30, 2018

westonruter deleted the add/amp-carousel-toggle branch May 30, 2018 23:37

westonruter mentioned this pull request May 31, 2018

Let amp-carousel be optional for galleries #1065

Closed

miina commented May 31, 2018

View reviewed changes

westonruter mentioned this pull request May 31, 2018

Fix adding images to AMP carousel gallery #1187

Merged

kevincoleman added v1.0-beta1 Release labels May 31, 2018

kienstra assigned csossi Jun 6, 2018

csossi assigned kienstra and unassigned kienstra and csossi Jun 7, 2018

westonruter mentioned this pull request Jul 24, 2020

Rework how and whether galleries are rendered as carousels #4775

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Gutenberg] Add AMP Carousel for Gallery and AMP Lightbox features for Gallery and Image #1121

[Gutenberg] Add AMP Carousel for Gallery and AMP Lightbox features for Gallery and Image #1121

miina commented May 5, 2018 •

edited

Loading

miina May 5, 2018

westonruter May 7, 2018

miina May 8, 2018

miina May 8, 2018

miina commented May 8, 2018

kienstra May 8, 2018

miina May 9, 2018

westonruter May 21, 2018

miina May 21, 2018

westonruter May 21, 2018

westonruter May 21, 2018

miina May 21, 2018

miina May 28, 2018

westonruter May 21, 2018 •

edited

Loading

miina May 21, 2018

westonruter May 21, 2018

miina May 21, 2018

miina May 28, 2018

westonruter May 21, 2018

westonruter commented May 30, 2018

westonruter commented May 30, 2018

westonruter May 30, 2018

westonruter May 30, 2018

westonruter May 30, 2018

miina May 31, 2018

westonruter May 31, 2018

westonruter May 31, 2018

kienstra commented Jun 5, 2018

csossi commented Jun 7, 2018

kienstra commented Jun 7, 2018

		}

		.entry__content .wp-block-gallery[class*="columns-"] figure {


		#amp-image-lightbox div div > :first-child {
		object-fit: contain;


		.entry__content .wp-block-gallery[class*="columns-"] figure {
		width: 100%;

[Gutenberg] Add AMP Carousel for Gallery and AMP Lightbox features for Gallery and Image #1121

[Gutenberg] Add AMP Carousel for Gallery and AMP Lightbox features for Gallery and Image #1121

Conversation

miina commented May 5, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

miina commented May 8, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter May 21, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented May 30, 2018

westonruter commented May 30, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra commented Jun 5, 2018

csossi commented Jun 7, 2018

kienstra commented Jun 7, 2018

miina commented May 5, 2018 •

edited

Loading

westonruter May 21, 2018 •

edited

Loading