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

Layout: Show vertical alignment toolbar with allowSwitching enabled #67022

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from

Conversation

Infinite-Null
Copy link
Contributor

@Infinite-Null Infinite-Null commented Nov 15, 2024

Fixes: #67016

What?

Enable vertical alignment toolbar to display when block layout has allowSwitching enabled and flex layout is active.

Why?

Currently, the vertical alignment toolbar is hidden when allowSwitching is set to true, even when flex layout is selected.

Testing Instructions

  1. Go to any post
  2. Add any block which have:
"supports": {
    "layout": {
        "allowSwitching": true
    }
}
  1. Add the block and test the block toolbar
    image

Screenshots or screencast

Before Fix:

image

After Fix:

image

Remove layout.allowSwitching condition to display vertical alignment
toolbar when flex layout is active.
Copy link

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.

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

Co-authored-by: Infinite-Null <[email protected]>

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

@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Feature] Layout Layout block support, its UI controls, and style output. labels Nov 15, 2024
Comment on lines -97 to -99
if ( layoutBlockSupport?.allowSwitching ) {
return null;
}
Copy link
Member

Choose a reason for hiding this comment

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

I think this early return condition needs to be fixed. It should probably return null when both allowJustification and allowVerticalAlignment are false.

@ntsekouras, can you confirm? I think you worked on the initial implementation of this feature.

Copy link
Contributor

Choose a reason for hiding this comment

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

It's been so long and even by looking at old PRs, I'm still not 100% sure why this check was added. If I remember correctly at that time we explicitly didn't want to show the justification controls in inspector controls too. Having said that, back then there were fewer layout props and there was no vertical alignment.

The allowJustification prop was added specifically for constraint layout but in docs says that can also be applied to flex and defaults to true. There are no checks for it now in flex layout, so I guess we need to take into account both in inspectorControls and toolBarControls.

So, I'm not sure whether the allowSwitching check is still needed, but the other checks (allowVerticalAlignment, allowJustification) should be added.

I'll cc @tellthemachines if she has more context.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cannot align inner blocks in flex layout when allowSwitching is set to true
3 participants