Add content alignment option into the main reusable block toolbar

[mainiomooses]

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.

[mainiomooses]

This problem has been solved in an upcoming release.

[paaljoachim]

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]

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

[mainiomooses]

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.

[paaljoachim]

Testing with Gutenberg 6.8.
The button block

has alignment options.

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

Comparison to saving a paragraph as a reusable block:

@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]

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

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

[mcsf]

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:

[mapk]

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

I'm using Gutenberg 6.9 with WordPress 5.3.

[paaljoachim]

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:

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.

[paaljoachim]

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

[noisysocks]

This could possibly be done by adding the align attribute to core/block and modifying its render_callback to replace the referenced block's align class with the reusable block's align class.

[talldan]

Agree that adding alignment options to the reusable block would be a nice way to solve it, would be interesting to see a PR exploring that.

#28024 is an issue that I've closed and covers a similar issue for the reusable block—if you make a full-width block reusable it suddenly becomes non-full-width, there's no way to make it full-width again. Adding the alignment option seems like a good way to solve the issue.

#22479 also mentions that aligned content can overflow a reusable block.

[jordesign]

With greater control over the internal content of Synced Patterns now - I'm inclined to say this issue is no longer relevant. I'll leave it open for 2 more weeks and then close it unless I hear otherwise.