Refactored Gallery: Add custom gutter sizing #28377
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aaronrobertshaw
added
the
[Block] Gallery
|
Size Change: +564 B (0%) Total Size: 1.28 MB
ℹ️ View Unchanged
|
|
An alternate approach to gallery gutters and the UI controls can be found in: Automattic/jetpack#14705 |
glendaviesnz
pushed a commit
that referenced
this pull request
Jan 21, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Jan 26, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Feb 10, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Feb 15, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Feb 23, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Feb 23, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Feb 24, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Feb 24, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Mar 1, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Mar 4, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Mar 9, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Mar 9, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Mar 22, 2021
glendaviesnz
pushed a commit
that referenced
this pull request
Apr 12, 2021
antonis
pushed a commit
that referenced
this pull request
Sep 2, 2021
* Refactor gallery to nested image blocks * Fix issue with images not loading on first selection from media gallery * Remove the default columns setting as we don't have access to innerBlocks at the point that the block validation is run * Revert "Remove the default columns setting as we don't have access to innerBlocks at the point that the block validation is run" This reverts commit 4d95e95. * Add image count so we can work out default columns as innerBlocks not available at point of block validation * Disable the innerBlocks dropzones so drag drop works same as existing gallery - with the idea that we will improve the innerblocks drag and drop in a later PR * Lint changes * Revert "Lint changes" This reverts commit 9b0abcc. * Revert "Disable the innerBlocks dropzones so drag drop works same as existing gallery - with the idea that we will improve the innerblocks drag and drop in a later PR" This reverts commit cc05d60. * Suggested solution for handling multiple file drop into gallery * Remove non image files from drag and drop and disable individual image drop zone * Fix transform to individual images * Fix transform from individual images * Revert drag and drop transform changes * Add gallery transform to image block to override the default gallery transform when dragging multiple images onto the gallery * Move handling of file uploads to Gallery from media placeholder * split innerblocks mapping into separate effect to reduce chatter * Add useMemo to currentImageOptions * reuse existing innerBlocks rather than recreating with every new image selection * Switch to useMemo for updating local image const instead of local component state * Fix issue with image sizing not being available on initial load of component some times * Memoise the useImageSizes hook * Fix issue with media browser defaulting to edit gallery view * Fix missed incorrect use of addToGallery * Add some extra effects for getting the imageData as the getMedia call is async so need to keep circling through the innerblocks updates until we have all the data we need * Simplify the imageData by using a useSelect * Another optimisation - only return a new imageData reference if all images have data resolved * Refactored Gallery: Add loading state to gallery image size options (#27087) * Add loading spinner for image size options Co-authored-by: Glen Davies <glen.davies@a8c.com> * Initial deprecations commit * Fix issue with linkDestination not being applied in migration * Refactor gallery deprecations * Fix missing attributes from migration * Update deprecation to set allowResize The imageEdit component defaults the context value for allowResize to true. The refactored gallery sets this to false by default. Setting allowResize to false when migrating a deprecated gallery allows images to be cropped in the display the same as the gallery when the post is saved and gallery reloaded. * Fix issue with crop not working when certain plugins are loaded * Fix SCSS lint errors * Update the block example * Linting fixes * Fix the e2e test and the accessibility issue with having aria group role on a list item * Fix the e2e test and the accessibility issue with having aria group role on a list item * Fix frontend omission of wp-block-image class Also tweaks the gallery styles to remove the margins the use of `wp-block-image` introduces when it is moved to the inner `figure` element. * change deprecation to use imageCount as isEligible check as it seems that some previous block versions may not have an ids attribute * Move back to a single deprecations file and reorder in array * Remove additional check in v5 isEligible * Fix the v4 migration * Fix styles for Safari compatibility * Remove unnecessary gallery editor styles * Fix typo in deprecations * Restore styles to render deprecated gallery versions * Avoid applying flex styles to IE11 * Add additional selector to prevent the hidden individual image drop zones ending up display flex instead of hidden * IE11 styling improvements * Apply default style class to new images added to gallery * fix linting issues * Move block props to the outer wrapper * Revert "Move block props to the outer wrapper" This reverts commit e0723a7. * Revert "Revert "Move block props to the outer wrapper"" This reverts commit a7504fd. * Fetch media if isListItem is true * Change context from isListItem to isGrouped * Remove wrapper div * remove extra wrapper around media placeholder and caption and use flex css instead * Revert "remove extra wrapper around media placeholder and caption and use flex css instead * Revert "Remove external div wrapper by moving InnerBlocks to a fragment" * another update to image wrapper * put media uploader outside figure so structure matches front end * Replace div with View for the sake of native code * Move setting of attributes to the child images * Gallery Block Refactor: Account for null image ids in gallery migrations (#27855) Co-authored-by: Glen Davies <glen.davies@a8c.com> * Remove the gradient and put caption under image if is-rounded style applied (#27869) * Add alignment fixes for non cropped images Co-authored-by: Glen Davies <glen.davies@a8c.com> * Remove outer div wrapper * Keep image margins while dragging sibling * Fix e2e test expected markup to match new structure * Gallery Block Refactor: Add handling of short code transforms * Removed unused prop * Account for undefined block and innerblocks in conversion to reusable block lifecycle * Add custom gutter sizes to refactored gallery (#28377) * Adjust editor styles to match new dom structure * Remove redundant styles that are duplicated in nested image blocks * Fix issue with Image block dragged out of Gallery still having inheritedAttributes set * When dragging an image block into a gallery make sure we don't wipe any custom links * fix issue with variable declaration order * Fix bug with custom link being overwritten by gallery linkTo changes * Fix application of gutter size CSS var (#28759) * Fix mobile width for gallery images * Add missing dependency to inner images selector * remove conversion to cover block if image in gallery * Add fallback to old gallery edit and save for existing gallery (#28961) Co-authored-by: Glen Davies <glen.davies@a8c.com> * Remove duplicate import * Remove need for temporary imageUploads attribute as we can just create the innerBlocks as part of transform * Remove handling of gallery attribute updates from child images * Move updating of attributes back to gallery and show snackbar to indicated to user that change was made to all images in the gallery * Update transforms to work with both versions of gallery * Remove redundant changes * Remove redundant changes * Remove unused method * Merge similar Image transforms. * Fix some issues missed when moving attribute setting back to gallery. * Simplify handling of images from media placeholder now that drag and drop files handled by transform * Fix typo * Fix broken upload from media placeholder * Fix issue with new file uploads overwriting existing blocks * Remove isGrouped dependency from call to get image as not needed now attributes handled by gallery * Remove custom gutter size feature Reasoning for removal can be found at #25940 (comment) * Use getMediaItems instead of getMedia for getting image data for all gallery images * Add back missing context prop from rebase conflict * Make use of new uniqueByBlock flag on updateBlockAttributes to batch child image updates and allow single undo to revert * Move the setting of the default attributes on new blocks to a single useEffect (#29328) Co-authored-by: Glen Davies <glen.davies@a8c.com> * Add snackbar notice ids (#29364) * Account for people adding and removing images from media browser so number of images the same, but list of images different to current. * Changes from PR feedback * Fix issue with deprecated constants * Fix linting and e2e test failures * Some more e2e fixes * Add transform from old gallery to new format * Memoize the allowedBlocks This allows the shallow equals check in the inner blocks' `useNestedSettingsUpdate` hook to pass successfully preventing the state update loop. * Add warning about image formats required if uploading to gallery * Move allowedBlocks outside of component to avoid useMemo use * Re-apply uncropped alignment changes lost in rebase * Fix issue with non-cropped images in deprecated gallery * Don't show media library buttons while images are still uploading as the media library needs the image ids to reconcile which images are already in the gallery * Remove gallerRef that was no longer doing anything * Respect sort order from Media Library (#30070) Co-authored-by: Glen Davies <glen.davies@a8c.com> * Gallery block refactor: make invalid file type errors consistent (#30396) Co-authored-by: Glen Davies <glen.davies@a8c.com> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Fix issue with invalid type message when adding files via media browser 'Upload' button * Gallery block refactor: check for new images by clientId instead of id to stop link settings being lost when images edited (#30550) Co-authored-by: Glen Davies <glen.davies@a8c.com> * Apply changes from rebase to deprecated gallery * Apply patch from rebase to not select all items in media library when existing images have no ids * Copy caption across from image selected from media library (#30784) Co-authored-by: Glen Davies <glen.davies@a8c.com> * Add data-id to image to help with compatibility of refactored gallery with existing themes and plugins (#30710) Co-authored-by: Glen Davies <glen.davies@a8c.com> * Revert "Add data-id to image to help with compatibility of refactored gallery with existing themes and plugins (#30710)" This reverts commit a2253ec. * fix bug with image style being lost when gallery grouped (#31068) Co-authored-by: Glen Davies <glen.davies@a8c.com> * Only add RichText component if the figcaption is clicked to prevent it stealing focus every time block is selected (#31216) Co-authored-by: Glen Davies <glen.davies@a8c.com> * Move native v1 Gallery components to v1 directory * Use v1 defaultColumnsNumber in native v1 gallery * Fix bug with alt text not being copied from media library (#31066) Co-authored-by: Glen Davies <glen.davies@a8c.com> * Make onFocus optional in MediaPlaceholder * Add useInnerBlocksProps hook * Enable __experimentalGalleryRefactor flag under __DEV__ This is only temporary, for testing purposes. This will be replaced with an actual implementation (which will need to access the flag remotely). * Add WIP v2 gallery * Add numColumns to block-list flat list * Temporarily comment out spinner for pending imagesize option This will need to be addressed (since we can't have unwrapped text on mobile). For now, I'm commenting this out to proceed with cherry-picking the changes from the original mobile refactor branch. * Fix spacing * Adjust styles to avoid appender overlap * Add gallery caption * Fix lint Some of these "fixes" are simply disabling lint for the offending lines. These currently unused variables may be used in a later PR, so I'm leaving them in, for now, to help simplify reconciling the changes from the former refactor PR. * Fix sass lint * [Mobile] - Refactor gallery - cherry pick image edit native (#31826) * WIP-commit bring image changes from final state of original mobile PR This has unresolved / unmarked conflicts which will be resolve in subsequent commits. I am separating the commit to make the resolution process more transparent. * Remove duplicate / conflicting methods from performance refactor * Use context for imageCrop and isGrouped instead of isGallery * Remove non-existent inheritedAttributes attribute * Remove dead code from non-existent context attributes * Remove unused attributes prop from link settings * Cherry-pick BlockListItem changes Note: Since render was changed to renderContent, we should return early from render too, when blockWidth is falsey. * Return early from render instead of renderContent * Cherry-pick plumb blockProps through BlockListBlock I'm not sure yet whether it still makes sense to use blockProps in this way. I'm going to cherry-pick the commits by file, and sort out the need for this mechanism afterwards. * Cherry-pick add GridItem Since this is duplicated from the original mobile gallery code (Tiles component), it might make sense to export it for re-use. Previously, it was only moved, but now that we will maintain both versions, it has become a duplicate implementation. I will defer this to a later commit. * Cherry-pick BlockList Similar to blockProps mentioned earlier, gridProperties will be evaluated after cherry-picking the relevant changes, to see if there is another mechanism that may be more appropriate. * Cherry-pick StylePreview key change * Cherry-pick blockProps and gridProperties in InnerBlocks * Use sass var for galleryAppender padding Note: This also re-adds fullWidth style, which is still being used in both v1 and v2 mobile implementations. If this is superceded by a recent refactor of the block width styles, it may be worth revisiting this and removing / changing the implementation. * Cherry-pick remaining gallery changes Note: as before, blockProps and gridProperties should be re-evaluated in subsequent commits, if necessary. E.g. `imageCrop` is already recieved via context, and `isGroup` may be sufficient, eliminating the need for `isGallery`. * Remove numColumns Going back over the older commits, it seems there were a two strategies used to render the gallery images as a grid. One used the numColumns (same as used in the Columns block), and the other using the Grid component. This commit cleans up the unused parts of the former approach. * Remove blockProps This is no longer necessary, since we are using context to pass gallery-level attributes to the image blocks' rendering. * Fix gallery block.json (delete extra comma) * Remove unused imageCrop * Gallery refactor - Infer version from existing content (#32270) * Give content precedence over flag in edit wrapper This modifies the logic in the gallery edit wrapper function to infer version information from existing content when the editor encounters content created from the new implementation and the flag is not set. * Resolve merge conflicts This brings the gallery edit changes to the v1 directory, and merges the changes for the image block. * Use non-deprecated hook when possible This brings the same change from this PR: #31027 which may have missed the deprecated hook in the refactor PR, since it hadn't landed yet. * Resolve conflict in block editor default settings This was an update for a new jsdoc linting rule. * Add back blockWidth contentContainerStyles in block list I believe this was inadvertantly removed in some earlier commits, so this commit adds it back. * Use boolean flags for variants in Platform module These flags allow for a slightly more flexible, performant, and terse way of branching by platform. For more details, see: #18058 (comment) * Use boolean Platform flags * Only render imageSizeOptions loading spinner on web * Add default for destructured context in image edit This is necessary for unit tests, because they instantiate the block's edit component directly, and so the default context is not provided. * Temporarily hard-code experimenal gallery refactor flag to true This will be reverted once the block settings are fetched from the REST API. This is enabled for now for testing purposes. * Revert "Temporarily hard-code experimenal gallery refactor flag to true" This reverts commit 6fbaed9. * Update experiments page with warning about the mobile app version * Resolve conflict in image.js The conflict was from #33095 * Pass the Gallery v2 Flag over from the editor * Capture Gallery Refactor in initial props * Lint Fix * Minor changes from code review: * Reward experiments description * Add documentation about new media placeholder handleUpload flag * Add additional explanation of v1-6 deprecations * Rename the edit wrapper components to make useage clearer * Temporarily remove tranform from v1 gallery to v2 gallery * Improve naming of save and deprecated save methods * Rename __experimentalGalleryRefactor flag to __unstableGalleryWithInnerBlocks * Remove the isGrouped context as no longer needed. * Rename __unstableGalleryWithInnerBlocks to _unstableGalleryWithImageBlocks * Gallery block refactor: remove the imageCount attribute (#33677) * Remove the imageCount attribute and use CSS instead to set default columns Co-authored-by: Glen Davies <glen.davies@a8c.com> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Fix broken scss * Fix php linting error * Changes new gallery flag name * Updates mobile warning * Removes the imageCount attribute * Remove the isGrouped context * Fixes lint issue * [Mobile] Renames Gallery v2 Flag to __unstableGalleryWithImageBlocks (#33816) * Renames __experimentalGalleryRefactor to __unstableGalleryWithImageBlocks * Fixes lint formatting issue * Fixes lint issue * Merge mobile refactor of gallery to nested image blocks into desktop refactor PR(#31306) * Move native v1 Gallery components to v1 directory * Use v1 defaultColumnsNumber in native v1 gallery * Make onFocus optional in MediaPlaceholder * Add useInnerBlocksProps hook * Enable __experimentalGalleryRefactor flag under __DEV__ * Add numColumns to block-list flat list * Fix spacing * Adjust styles to avoid appender overlap * Add gallery caption * Fix lint Some of these "fixes" are simply disabling lint for the offending lines. These currently unused variables may be used in a later PR, so I'm leaving them in, for now, to help simplify reconciling the changes from the former refactor PR. * Fix sass lint * [Mobile] - Refactor gallery - cherry pick image edit native (#31826) * Remove duplicate / conflicting methods from performance refactor * Use context for imageCrop and isGrouped instead of isGallery * Remove non-existent inheritedAttributes attribute * Remove dead code from non-existent context attributes * Remove unused attributes prop from link settings * Cherry-pick BlockListItem changes Note: Since render was changed to renderContent, we should return early from render too, when blockWidth is falsey. * Return early from render instead of renderContent * Cherry-pick plumb blockProps through BlockListBlock I'm not sure yet whether it still makes sense to use blockProps in this way. I'm going to cherry-pick the commits by file, and sort out the need for this mechanism afterwards. * Cherry-pick add GridItem Since this is duplicated from the original mobile gallery code (Tiles component), it might make sense to export it for re-use. Previously, it was only moved, but now that we will maintain both versions, it has become a duplicate implementation. I will defer this to a later commit. * Cherry-pick BlockList Similar to blockProps mentioned earlier, gridProperties will be evaluated after cherry-picking the relevant changes, to see if there is another mechanism that may be more appropriate. * Cherry-pick StylePreview key change * Cherry-pick blockProps and gridProperties in InnerBlocks * Use sass var for galleryAppender padding Note: This also re-adds fullWidth style, which is still being used in both v1 and v2 mobile implementations. If this is superceded by a recent refactor of the block width styles, it may be worth revisiting this and removing / changing the implementation. * Cherry-pick remaining gallery changes Note: as before, blockProps and gridProperties should be re-evaluated in subsequent commits, if necessary. E.g. `imageCrop` is already recieved via context, and `isGroup` may be sufficient, eliminating the need for `isGallery`. * Remove numColumns Going back over the older commits, it seems there were a two strategies used to render the gallery images as a grid. One used the numColumns (same as used in the Columns block), and the other using the Grid component. This commit cleans up the unused parts of the former approach. * Remove blockProps This is no longer necessary, since we are using context to pass gallery-level attributes to the image blocks' rendering. * Fix gallery block.json (delete extra comma) * Remove unused imageCrop * Add back blockWidth contentContainerStyles in block list * Use boolean flags for variants in Platform module These flags allow for a slightly more flexible, performant, and terse way of branching by platform. For more details, see: #18058 (comment) * Use boolean Platform flags * Only render imageSizeOptions loading spinner on web * Add default for destructured context in image edit This is necessary for unit tests, because they instantiate the block's edit component directly, and so the default context is not provided. * Temporarily hard-code experimenal gallery refactor flag to true This will be reverted once the block settings are fetched from the REST API. This is enabled for now for testing purposes. * Update experiments page with warning about the mobile app version * Changes new gallery flag name * Updates mobile warning * Removes the imageCount attribute * Remove the isGrouped context * Fixes lint issue Co-authored-by: Antonis Lilis <antonis.lilis@automattic.com> * [Mobile] Android: Pass the Gallery v2 Flag over from the editor (#33544) Pass the Gallery v2 Flag over from the editor on Android Co-authored-by: Glen Davies <glen.davies@a8c.com> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com> Co-authored-by: Matthew Kevins <mmkevins@yahoo.com> Co-authored-by: Matthew Kevins <mkevins@users.noreply.github.com> Co-authored-by: Antonis Lilis <antonis.lilis@automattic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
How has this been tested?
Manually.
Testing instructions
Screenshots
Note: When gutter is removed or very small it doesn't give any space for drag and drop indicators. Demo of this issue below:
Types of changes
New feature
Checklist: