Twenty Twenty: Quote block border does not reflect text alignment on front-end

[viralsampat]

Hello all,

I have reviewed the "Quote" block into the twenty-twenty theme and found that its align text functionality is not working properly in the front-end site.

When we change "Quote" block align text to "Align Text Right" then in editor side its working and move left border to right side and also changed text align from left to right.

But, when we checked it to front-end side it changed only text from left to right. The border is displaying as it it on the left end side. I think that it should be change from left to right as well.

For better understanding I have attached its screenshots at bottom of the page.

Thanks,

[viralsampat]

Back-end

[viralsampat]

Front-end

[viralsampat]

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

[viralsampat]

After resolved issue Back-end:

[viralsampat]

After resolved issue front-end:

[poena]

Hi

So, the problem is with the border, not the text alignment?

[karmatosed]

I think I have worked out the steps to this just to confirm.

1. Select a quote block.
2. Align it left.
3. The border stays where expected front and back.
4. Align it right.
5. The border stays where expected in the editor but not on the front of the site.

I have uploaded some screenshots to show this.

As a result a solution should resolve this and I haven't tested the attached PR but I will do that.

[sabernhardt]

use text alignment classes with existing rules

[karmatosed]

Thank you @sabernhardt I am going to test this and look at progressing.

[sabernhardt]

While Twenty Twenty was built, the editor had used style attributes for text alignment. Since 5.3, the Quote block has used class names for alignment. I made a patch to update the existing rules for center- and right-aligned Quote blocks.

[karmatosed]

I can confirm in testing this patch resolves it, thank you @sabernhardt. I am now moving this to commit.

[karmatosed]

In 58796:

Twenty Twenty: Fixes Quote block border not reflecting alignment.

This resolves the border not also aligning with the quote block. When this theme was built the editor used style attributes for text alignment. This patch updates existing rules for center and right aligned quote blocks.

Props viralsampat, poena, sabernhardt.
Fixes #61132.