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

Add content alignment option into the main reusable block toolbar #17640

Open
MainioMooses opened this issue Sep 29, 2019 · 10 comments
Open

Add content alignment option into the main reusable block toolbar #17640

MainioMooses opened this issue Sep 29, 2019 · 10 comments

Comments

@MainioMooses
Copy link

@MainioMooses MainioMooses commented Sep 29, 2019

EDIT 27 Nov 2019: Changed title of post to match the progression of thought.

Problem: I've converted a centered button block into a reusable one. However, the created reusable block only allows the button to be aligned to the left - even though the buttons for aligning content appear on the reusable block.

Feature request: Allow alignment of content within reusable blocks.

Alternative solutions: 1. Add class / css to achieve this. 2. Drop the reusable block back to single use form after adding the block - alignment becomes available.

Neither of the alternative solutions are acceptable in my opinion.

Attached a .gif with the problem occurring.

Gutenberg tasaa globaali nappi (1)

@MainioMooses

This comment has been minimized.

Copy link
Author

@MainioMooses MainioMooses commented Sep 30, 2019

This problem has been solved in an upcoming release.

@paaljoachim

This comment has been minimized.

Copy link

@paaljoachim paaljoachim commented Nov 7, 2019

Hey Jaakko @MainioMooses

I am working on a site right now and I am using the Gutenberg plugin version 6.8.0. I see no way to align the reusable buttons. As your saying they are automatically aligning to the left.

Has this been solved? How? If not can you reopen this issue?
Thanks.

@mcsf

This comment has been minimized.

Copy link
Contributor

@mcsf mcsf commented Nov 7, 2019

As of today (master, post-6.8), I can't reproduce the issue.

@MainioMooses

This comment has been minimized.

Copy link
Author

@MainioMooses MainioMooses commented Nov 7, 2019

Hello Paal @paaljoachim

Can confirm issue still exists. Here's a link to a video on YouTube, on which I show the issue.

https://youtu.be/f9uJt7HWaWA

Upon converting a block to a Reusable block, you loose the ability to align the items within - at least with a button. Even if you convert a block into a Reusable block AFTER you've aligned the content, the alignment is lost when the block is converted into a Reusable block.

In my mind, this is a major issue as there's no way (without the methods I described in the original post) to have centered buttons in Reusable blocks. Which is just incredeibly silly :P

Cheers.

EDIT: Reopened the issue.

@MainioMooses MainioMooses reopened this Nov 7, 2019
@paaljoachim

This comment has been minimized.

Copy link

@paaljoachim paaljoachim commented Nov 8, 2019

Testing with Gutenberg 6.8.
The button block

Screen Shot 2019-11-07 at 19 37 40

has alignment options.

But changing it to a reusable block the alignment option goes away.

Screen Shot 2019-11-07 at 19 33 50

Comparison to saving a paragraph as a reusable block:
Screen Shot 2019-11-07 at 19 36 20

@mcsf Miguel
Are you saying that for Gutenberg 6.9 (as your saying post 6.8) that alignment options has been included for the reusable button block?

@mcsf

This comment has been minimized.

Copy link
Contributor

@mcsf mcsf commented Nov 11, 2019

I had misunderstood the new reports to be about editing the alignment of the reusable content, not the frame of the reusable content:

gutenberg-reusable-button-alignment

Indeed, the whole frame of the reusable block doesn't support alignment.

@mcsf

This comment has been minimized.

Copy link
Contributor

@mcsf mcsf commented Nov 11, 2019

However, I believe the following to be a separate issue:

Comparison to saving a paragraph as a reusable block

The fact that there are alignment controls appearing on the outer block toolbar seems like a leak from the inner toolbar, because in my testing I see the controls unexpectedly switching from one to the other:

gutenberg-reusable-button-controls

@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Nov 21, 2019

The button block works just fine with alignments in a Reusable block for me as well.

btn 2019-11-20 17_30_28

I'm using Gutenberg 6.9 with WordPress 5.3.

@paaljoachim

This comment has been minimized.

Copy link

@paaljoachim paaljoachim commented Nov 21, 2019

Hey @MainioMooses

With Gutenberg 6.9 I noticed that there is no alignment controls for the buttons block or the paragraph block in the reusable toolbar. I believe that in 6.8 or perhaps earlier I noticed that there were still alignment controls for aligning the paragraph block.

As the reusable toolbar alignment controls are now gone.


As @mcsf and @mapk are mentioning the use of alignment from within the block controls inside the reusable block (as one clicks edit to get to the block to align and then resaves the reusable block) as they have shown examples of above.

It would be helpful to have reusable toolbar alignment controls outside the edit area of the reusable block.

Editing/adding a reusable block one has the block controls. Saving it as a reusable block there are at present no controls to control the reusable block instance used on a page. It would be helpful to align the instance of the reusable block WITHOUT having to edit all the reusable blocks. This would make for page specific reusable block controls affecting ONLY the instance or wrapper used on that page and not all.

Editing a reusable block:

Screen Shot 2019-11-20 at 21 41 31

NEW and suggested control to align a single instance of a reusable block. Aligning an instance will override the default alignment in the block inside the reusable block. Or one might have chosen not to align the block inside the reusable block because one plans on aligning it differently on various pages. I would call the reusable block toolbar the parent and the block controls inside the reusable block the child. The parent will override the child controls.

Reusable-alignment-controls

@paaljoachim

This comment has been minimized.

Copy link

@paaljoachim paaljoachim commented Nov 27, 2019

Hey @MainioMooses
Because of the changes to Gutenberg could you rename this issue to:
"Add alignment option into the main reusable block toolbar."

@MainioMooses MainioMooses changed the title Allow alignment for reusable button blocks Add content alignment option into the main reusable block toolbar Nov 27, 2019
@mapk mapk added the Needs Dev label Nov 27, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.