Twenty Twenty-Three: Quote block Default Style not reflected on front side

[umesh84]

In the Theme Twenty Twenty-Three Quote block Default Style not reflected on front side

1: Activate the Twenty Twenty-Three Themes

2: Insert Quote block

3: Add content and apply the default style

4: Border Left not reflected on front side

For better understanding I provide video attachment link.
URL: ​https://www.loom.com/share/121a2bf118634cd89651b1e3b6d2400f

[nithins53]

I can confirm the issue exists. I was able to reproduce it and the vertical line on the left-hand side is only displayed on the editor and not on the front end. The default style is only properly displayed on the editor and not on the frontend.

[poena]

Hi!

Thank you for reporting this. I am also able to reproduce it.

I can also confirm that if I activate the Gutenberg plugin, the style does not show in the editor either.

If I add a border style to the quote block in theme.json, the border works for me.

			"core/quote": {
				"border": {
					"width": "1px",
					"style": "solid"
				},

But before we can do a patch, @mikachan I can't recall if the design was to only have a left border, or a border on all sides?

[mikachan]

Thanks for reporting this!

I believe the design was to only have a border on the left, according to ​this conversation, like this:

Although I think the border should move to the right when the quote is right-aligned and should be removed when the quote is centered (like how the borders currently work in the editor).

[poena]

Good point. Right now we can't move the border conditionally using theme.json.

[nidhidhandhukiya]

As per the discussion that we need border-left only so I have applied patch as per the given requirements.

[nithins53]

@nidhidhandhukiya Can you check whether the Plain style is working after applying the patch?

[mikachan]

The problem with applying a border to the left via theme.json is that this will be applied to all quote blocks, including if they are not left-aligned.

For example, with this patch, this is how the other alignments will display:

Centered	Right-aligned

I recommend that we fix this upstream so that the editor styles match the front end styles. I've opened an issue here: ​https://github.com/WordPress/gutenberg/issues/45547

[haritpanchal]

#57098 was marked as a duplicate.

[desrosj]

I'm going to close this out as reported-upstream and direct further comments to ​https://github.com/WordPress/gutenberg/issues/45547.

If it turns out this requires specific changes in Twenty Twenty-Three, this can be reopened to tackle these changes.