Quote Block: styles are different between front end and editor

[mikachan]

Description

The default styles of the quote block are different between the editor and the front end:

Editor	Front end

Text alignment examples:

Editor	Front end

Step-by-step reproduction instructions

1. Insert a quote block
2. Try left, right and center alignments
3. Compare the editor and front end views

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

Hi @mikachan & @NidhiDhandhukiya74
I tested this with and without Gutenberg version 15 active.

With Gutenberg active:
In TT3: the border is not visible on the front or in the editor.
In "Empty theme", a border is visible both in the editor and the front.

Do you think this issue might already be solved but is an issue with TT3 theme.json?
Related core trac issue 57506

[mikachan]

I can't test just at the moment but I have a feeling this is related to there not being a functions.php file in TT3, or maybe more specifically that there is no available logic to enqueue editor styles. i.e. TT3 is missing something like the following code:

if ( ! function_exists( 'emptytheme_support' ) ) :
	function emptytheme_support()  {

		// Enqueue editor styles.
		add_editor_style( 'style.css' );
	}
	add_action( 'after_setup_theme', 'emptytheme_support' );
endif;

I think this may have a similar underlying issue to what I was exploring here (there is a similar issue with the separator block being different on the front end and editor): #45351

[carolinan]

Then the style should show on the front when Gutenberg is active, no?

[Pathan-Amaankhan]

Hello @carolinan @mikachan,

These issues are caused because our TT3 theme is missing support for block styles. i.e. wp-block-styles.

Before	After adding wp-block-styles support

Before	After adding wp-block-styles support

This also fixes the bug with Separator block mentioned in #45351.

Before	After adding wp-block-styles support

Have created & added a patch in https://core.trac.wordpress.org/ticket/57506.

Please let me know if I can create PR for the same.

Please forgive me if I have made any mistakes as this is my first contribution.

[carolinan]

The block styles have been left out on purpose during development of this theme, they do not only add styles to the quote block.

[mikachan]

Then the style should show on the front when Gutenberg is active, no?

Ah yeah... in this case, it's the editor styles that are correct, not the front end.

If we update the styles in theme.json to this:

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

Then every quote block will have a left border, which doesn't look the best for the centered and right-aligned versions. Perhaps we need a way to style the different alignments via theme.json.

[carolinan]

I think the block should have a border option that allows the user to remove or add it even if they center the block.
As in, enable the block support:
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/quote/block.json#L30
It will make the pull quote obsolete though.

[mikachan]

I think the block should have a border option that allows the user to remove or add it even if they center the block.

This sounds like a good idea. And I don't think making the pull quote obsolete is a bad thing, as long as users can still achieve the same thing.

[carolinan]

@NidhiDhandhukiya74 @Pathan-Amaankhan Is that something you would like to work on?

[Pathan-Amaankhan]

@carolinan Sure,
Can I add the toggle boder option to our quote block?

Just had a few questions before starting.

1. We are going to keep the styles similar to the TT2 theme? i.e.

2. When the block is aligned center, at what position (left or right) we are going to keep our border?

cc: @mikachan

[carolinan]

By adding the support for border controls, the users themselves will decide where they want the border, and the default border can be kept to the left.

Support for borders first need to be added to block.json.
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/quote/block.json#L30
We need to decide which of the border controls that should be visible by default.
I think it may be best for it to match the pull quote? I would suggest copying the code from there:
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/pullquote/block.json#L53

After that, we need to test that the border style options work in the editors and when added in theme.json.