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.

Sign up for GitHub

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

Jump to bottom

Feature/allow spacer block gallery #55505

Open
wants to merge 6 commits into
base: trunk
Choose a base branch
from
Open

Feature/allow spacer block gallery #55505

wants to merge 6 commits into from

Conversation

alexhdd
Copy link

@alexhdd alexhdd commented Oct 20, 2023

What?

We added the option add a resizable spacer block in the gallery block.

Why?

We worked (@devfle and me) on issue #52171 during Wordcamp Germany 2023. We offer a solution, so that not all slots in a gallery have to be used for an image. Instead a spacer may be added to allow different formatting of the gallery.

How?

We allowed the spacer block for images. Furthermore the orientation of the spacer is handled differently regarding his position in the gallery. Two edge cases that are also handled are if the gallery block has only one column and if the spacer is the last element in the gallery.

Testing Instructions

  1. Open a post or page.
  2. Insert a gallery block.
  3. Insert images and spacer in the gallery block.
  4. Move the spacer to different positions and resize it.
  5. Change the number of columns of the gallery.
  6. Move the spacer to different positions and resize it.

Testing Instructions for Keyboard

No additional controls for the keyboard has been added.

Screenshots or screencast

Screenshot 2023-10-20 at 11 46 21 Screenshot 2023-10-20 at 11 46 05

devfle and others added 5 commits October 19, 2023 18:35
@devfle @alexhdd
feat: allow spacer block inside gallery
3907d5b 
Co-authored-by: alexhdd <115178520+alexhdd@users.noreply.github.com>
@alexhdd @devfle
feat: add vertical mode depending on spacer position
752857b 
Co-authored-by: devfle <52854338+devfle@users.noreply.github.com>
@devfle @alexhdd
fix: increase spacer width and height in gallery mode
5468d67 
Co-authored-by: alexhdd <115178520+alexhdd@users.noreply.github.com>
@alexhdd @devfle
fix: spacer height in gallery
195e930 
Co-authored-by: devfle <52854338+devfle@users.noreply.github.com>
@alexhdd @devfle
docs: update core blocks docs
fafe2ac 
Co-authored-by: devfle <52854338+devfle@users.noreply.github.com>
@github-actions
Copy link

github-actions bot commented Oct 20, 2023 •
edited
Loading

Warning: Type of PR label error

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
  • Labels found: [Block] Gallery, First-time Contributor.

Read more about Type labels in Gutenberg.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Oct 20, 2023
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @alexhdd! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

glendaviesnz
glendaviesnz reviewed Oct 20, 2023
View reviewed changes
packages/block-library/src/spacer/edit.js
} ) => {
const disableCustomSpacingSizes = useSelect( ( select ) => {
const editorSettings = select( blockEditorStore ).getSettings();
return editorSettings?.disableCustomSpacingSizes;
} );
const { orientation } = context;

const galleryChildBlocks = useSelect( ( select ) => {
Copy link
Contributor

@glendaviesnz glendaviesnz Oct 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I wonder if we need to make this gallery specific. This could potentially be useful in other column related layouts at some point so maybe this could be columnChildBlocks and isInsideGallery could be isInsideColumns ?

Copy link
Contributor

@devfle devfle Oct 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

@glendaviesnz Good idea! Do you have any other cases already in mind?

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't have any specific use cases in mind, but it opens the possibility for more options if we make it more generic up front.

@skorasaurus skorasaurus added the [Block] Gallery Affects the Gallery Block - used to display groups of images label Oct 20, 2023
@alexhdd @devfle
fix: remove unexpected whitespace
f9fe838 
Co-authored-by: devfle <52854338+devfle@users.noreply.github.com>
@richtabor
Copy link
Member

I wonder if this is still necessary, if the grid experiment for galleries ends up resolving. #60022

@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 29, 2024 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @alexhdd.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: alexhdd.

Co-authored-by: devfle <devle@git.wordpress.org>
Co-authored-by: glendaviesnz <glendaviesnz@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@mtias
Copy link
Member

mtias commented Aug 2, 2024

Where are we on this? It still seems like a valuable addition.

@devfle
Copy link
Contributor

devfle commented Aug 4, 2024

I wonder if this is still necessary, if the grid experiment for galleries ends up resolving. #60022

In any case! We are happy to update the PR if there is a real need for it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@devfle devfle devfle left review comments

@glendaviesnz glendaviesnz glendaviesnz left review comments

@geriux geriux Awaiting requested review from geriux geriux is a code owner

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@ryanwelcher ryanwelcher Awaiting requested review from ryanwelcher

@juanmaguitar juanmaguitar Awaiting requested review from juanmaguitar juanmaguitar is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

@ndiego ndiego Awaiting requested review from ndiego ndiego is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@alexhdd @richtabor @mtias @devfle @glendaviesnz @skorasaurus