WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

Pullquote Block: In the Classic theme, line-height is not applied on the editor #49261

Open t-hamano opened 1 year ago

t-hamano commented 1 year ago

Description

The line-height is not applied to the body of the Pullquote block in the editor when the following conditions overlap:

When this condition is met, line-height:1.8 is applied to the p tag and the value of the line-height control is not reflected.

classic_editor

This style is probably output from the following definition: https://github.com/WordPress/gutenberg/blob/bda98f1cbe30ab16d9d0021dd2e4a5952b7140b6/packages/block-editor/src/default-editor-styles.scss#L15-L17

Step-by-step reproduction instructions

Use the following files to create a classic theme with line-height support enabled.

mytheme/function.php:

<?php
add_action( 'after_setup_theme', 'custom_setup_theme' );
function custom_setup_theme() {
    add_theme_support( 'custom-line-height' );
}

mytheme/index.php:

<?php
wp_head();
the_content();
wp_footer();

mytheme/style.css:

/*
Theme Name: My Theme
*/

Use the following code to insert a Pullquote block with all typographic styles applied:

<!-- wp:pullquote {"style":{"typography":{"fontSize":"24px","fontStyle":"normal","fontWeight":"700","letterSpacing":"5px","textDecoration":"line-through","textTransform":"uppercase","lineHeight":"4"}},"backgroundColor":"cyan-bluish-gray"} -->
<figure class="wp-block-pullquote has-cyan-bluish-gray-background-color has-background" style="font-size:24px;font-style:normal;font-weight:700;letter-spacing:5px;line-height:4;text-decoration:line-through;text-transform:uppercase"><blockquote><p>Hello World! Hello World! Hello World!<br>Hello World! <br>Hello World! Hello World! </p><cite>Citation. Citation. Citation. Citation.<br>Citation. Citation.<br>Citation. Citation. Citation. Citation.</cite></blockquote></figure>
<!-- /wp:pullquote -->

Screenshots, screen recording, code snippet

https://user-images.githubusercontent.com/54422211/226863724-e64e6411-9f2a-400f-8e4d-e6f9a7d67d4f.mp4

Environment info

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

t-hamano commented 3 months ago

Note: In #11610, it is being considered to deprecate the Pullquote block. If this block is deprecated, there will be no need to deal with this issue.