Open t-hamano opened 1 year ago
The line-height is not applied to the body of the Pullquote block in the editor when the following conditions overlap:
line-height
theme.json
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.
line-height:1.8
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
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 -->
https://user-images.githubusercontent.com/54422211/226863724-e64e6411-9f2a-400f-8e4d-e6f9a7d67d4f.mp4
Yes
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.
Description
The
line-height
is not applied to the body of the Pullquote block in the editor when the following conditions overlap:theme.json
)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.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:
mytheme/index.php:
mytheme/style.css:
Use the following code to insert a Pullquote block with all typographic styles applied:
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