Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Check required WordPress version to set galleryWithImageBlocks flag #20736

Merged
merged 5 commits into from
May 30, 2023

Conversation

derekblank
Copy link
Contributor

@derekblank derekblank commented May 24, 2023

Fixes WordPress/gutenberg#47782:

The galleryWithImageBlocks param determines which version of the Gallery block should be used in the editor (v1 or v2). Gallery block v2 is supported in WordPress 5.9+ and should be used for all sites on WordPress 5.9 and above. This fix addresses an edge-case for self-hosted sites on WP 5.9+ that do not have the Gutenberg plugin installed. In this case, Gallery block v1 is the default, but Gallery block v2 should actually be used.

This code change checks the WordPress version and sets the param to true for any site using WP 5.9+, and keeps the original logic for sites not using WP 5.9+. Once WordPress 5.9 becomes the minimum supported version, this change can be removed.

An easy way to verify which version of the Gallery block is being used is to switch to HTML mode and check the tags in the markup:

Gallery block v2 syntax (figure + image):

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped">
    <!-- wp:image {"id":3326,"sizeSlug":"large","linkDestination":"none"} -->
    <figure class="wp-block-image size-large"><img
            src="https://****.files.wordpress.com/2022/05/image.jpg?w=1024" alt="" class="wp-image-3326" />
    </figure>
    <!-- /wp:image -->
</figure>
<!-- /wp:gallery -->

Gallery block v1 syntax (figure + ul + li + image):

<!-- wp:gallery {"ids":[38],"linkTo":"none"} -->
<figure class="wp-block-gallery columns-1 is-cropped">
    <ul class="blocks-gallery-grid">
        <li class="blocks-gallery-item">
            <figure><img src="http://localhost:8888/wp-content/uploads/2022/06/265-5000x5000-1-scaled.jpeg" data-id="38"
                    class="wp-image-38" /></figure>
        </li>
    </ul>
</figure>
<!-- /wp:gallery -->

To test:

  1. Create a self-hosted site with WordPress version 5.9 or above.
  2. Check that the Gutenberg plugin is not installed. If not, uninstall it.
  3. Create a post.
  4. Insert a Gallery block.
  5. Observe that the Gallery block is using v2 (content is not rendered using inner blocks).

Bonus testing:

  1. Create a self-hosted site with WordPress version 5.8 or below. (The WP Downgrade plugin can be used to quickly switch between WordPress versions.)
  2. Repeat steps above and note that Gallery block v1 is used.

Alternatively, when running locally, the value of galleryWithImageBlocks can be logged in the editor to verify.

Regression Notes

  1. Potential unintended areas of impact
  • Block Editor Settings
  • Gutenberg Editor Settings
  • Experimental feature flags
  1. What I did to test those areas of impact (or what existing automated tests I relied on)
    Manual testing

  2. What automated tests I added (or what prevented me from doing so)
    Determined manual testing and CI checks would provide an adequate amount of testing coverage for this edge case.

PR submission checklist:

  • I have completed the Regression Notes.
  • I have considered adding unit tests for my changes.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:
N/A

@derekblank derekblank added the Gutenberg Editing and display of Gutenberg blocks. label May 24, 2023
@derekblank derekblank requested a review from twstokes May 24, 2023 07:43
@wpmobilebot
Copy link
Contributor

wpmobilebot commented May 24, 2023

WordPress Alpha📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.
App NameWordPress Alpha WordPress Alpha
ConfigurationRelease-Alpha
Build Numberpr20736-a9b862c
Version22.5
Bundle IDorg.wordpress.alpha
Commita9b862c
App Center BuildWPiOS - One-Offs #5800
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@wpmobilebot
Copy link
Contributor

wpmobilebot commented May 24, 2023

Jetpack Alpha📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.
App NameJetpack Alpha Jetpack Alpha
ConfigurationRelease-Alpha
Build Numberpr20736-a9b862c
Version22.5
Bundle IDcom.jetpack.alpha
Commita9b862c
App Center Buildjetpack-installable-builds #4830
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

Copy link
Contributor

@twstokes twstokes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Derek for tackling this PR! 🚀

Results of my testing on a self-hosted site:

5.8 - trunk 5.9 - trunk 5.8 - this PR 5.9 - this PR
Simulator Screenshot - iPhone 14 Pro - 2023-05-25 at 23 21 42 Simulator Screenshot - iPhone 14 Pro - 2023-05-25 at 22 49 37 Simulator Screenshot - iPhone 14 Pro - 2023-05-25 at 22 59 00 Simulator Screenshot - iPhone 14 Pro - 2023-05-25 at 22 57 04

From my understanding of the difference between v1 and v2 Gallery blocks (thanks to this PR), this change appears to pass the tests in this PR. ✅

Comments / observations

  • We should add an internal release note
  • A bug label should be added as well as Posting/Editing
  • A milestone should be added
  • Consider adding expected output (e.g. what is shown in HTML mode). Readers outside of the Gutenberg world may not easily understand what inner blocks are or other differences between v1 and v2 (I struggled myself)
  • The four items in the PR submission checklist should be checked before getting reviews
  • Consider a note about what research you did regarding tests (since one isn't added)

Thanks!

@derekblank derekblank requested a review from mkevins May 26, 2023 07:59
Copy link
Contributor

@fluiddot fluiddot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tested different scenarios and confirmed the change works as expected 🎊 .

  • WP 5.8.7 + Gutenberg plugin disabled => Gallery v1 ✅
  • WP 5.8.7 + Gutenberg plugin 13.6.0 => Gallery v1 ✅
  • WP 5.9 + Gutenberg plugin disabled => Gallery v2 (test case that this PR aims to fix)
  • WP 5.9 + Gutenberg plugin 13.6.0 => Gallery v2 ✅

NOTE: The latest version of the Gutenberg plugin that supports WP 5.8 is version 13.6.0 (The minimum supported WP version was set to 5.9 in Gutenberg plugin version 13.7).

RELEASE-NOTES.txt Outdated Show resolved Hide resolved
Copy link
Contributor

@fluiddot fluiddot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🎊 ! I re-tested what I did in the last review and confirmed this change works as expected ✅.

However, as I mentioned here, seems we still have an issue when using Gallery v1 and setting a caption that would be great to investigate.

@derekblank
Copy link
Contributor Author

Thanks for reviewing @fluiddot! I've addressed the Caption issue separately here:

@derekblank derekblank merged commit 91011f7 into trunk May 30, 2023
@derekblank derekblank deleted the gutenberg/galleryWithImageBlocks-check-WP-version branch May 30, 2023 07:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Gutenberg Editing and display of Gutenberg blocks. Posting/Editing [Type] Bug
Projects
None yet
4 participants