Make WordPress Core

#56977 closed defect (bug) (reported-upstream)

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

Reported by: umesh84's profile umesh84 Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.1
Component: Bundled Theme Keywords: needs-patch
Focuses: ui, css Cc:

Description

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

Attachments (1)

56977.patch (435 bytes) - added by nidhidhandhukiya 16 months ago.
As per the discussion that we need border-left only so I have applied patch as per the given requirements.

Download all attachments as: .zip

Change History (9)

#1 @nithins53
16 months ago

I can confirm the issue exists. I was able to reproduce it and the border 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 front.

Last edited 16 months ago by nithins53 (previous) (diff)

#2 @poena
16 months ago

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?

#3 @mikachan
16 months ago

Thanks for reporting this!

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

https://cldup.com/NSqGmO8Dmg.png

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).

#4 @poena
16 months ago

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

@nidhidhandhukiya
16 months ago

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

#5 @nithins53
16 months ago

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

#6 @mikachan
16 months ago

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
https://cldup.com/3YAPAencuH.png https://cldup.com/tTkaV8mOpP.png

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

#7 @haritpanchal
16 months ago

#57098 was marked as a duplicate.

#8 @desrosj
16 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed
  • Summary changed from Theme Twenty Twenty-Three Quote block Default Style not reflected on front side to Twenty Twenty-Three: Quote block Default Style not reflected on front side

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.

Note: See TracTickets for help on using tickets.