Skip to content

WP Backport Block Supports: Add text columns (column count) to typography block supports #4622

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ramonjd wants to merge 9 commits into from
Closed

WP Backport Block Supports: Add text columns (column count) to typography block supports #4622

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ec6d12b
Add text columns typography block support from https://github.com/Wor…
ramonjd Jun 16, 2023
afe96ab
El LINTO DEL DIABLO!
ramonjd Jun 16, 2023
afa3a59
Add ticket no for tests
ramonjd Jun 16, 2023
1a66dee
Add since annotation
ramonjd Jun 16, 2023
3380152
Added annotation
ramonjd Jun 21, 2023
6218f53
Added style engine changes from https://github.com/WordPress/gutenber…
ramonjd Jun 21, 2023
e3a95f2
Updated tests
ramonjd Jun 21, 2023
ed54b9e
I'll get it right one day
ramonjd Jun 21, 2023
da4cbb2
Add since for properties_metadata
tellthemachines Jun 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/wp-includes/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
* Registers the style and typography block attributes for block types that support it.
*
* @since 5.6.0
* @since 6.3.0 Added support for text-columns.
* @access private
*
* @param WP_Block_Type $block_type Block Type.
Expand All @@ -30,6 +31,7 @@ function wp_register_typography_support( $block_type ) {
$has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
$has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
$has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
$has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), false );
$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
$has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );

Expand All @@ -39,6 +41,7 @@ function wp_register_typography_support( $block_type ) {
|| $has_font_weight_support
|| $has_letter_spacing_support
|| $has_line_height_support
|| $has_text_columns_support
|| $has_text_decoration_support
|| $has_text_transform_support;

Expand Down Expand Up @@ -72,6 +75,7 @@ function wp_register_typography_support( $block_type ) {
*
* @since 5.6.0
* @since 6.1.0 Used the style engine to generate CSS and classnames.
* @since 6.3.0 Added support for text-columns.
* @access private
*
* @param WP_Block_Type $block_type Block type.
Expand All @@ -98,6 +102,7 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
$has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
$has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
$has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
$has_text_columns_support = _wp_array_get( $typography_supports, array( 'textColumns' ), false );
$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
$has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );

Expand All @@ -107,6 +112,7 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
$should_skip_font_style = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' );
$should_skip_font_weight = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' );
$should_skip_line_height = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' );
$should_skip_text_columns = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textColumns' );
$should_skip_text_decoration = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' );
$should_skip_text_transform = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' );
$should_skip_letter_spacing = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' );
Expand Down Expand Up @@ -162,6 +168,10 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
$typography_block_styles['lineHeight'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'lineHeight' ) );
}

if ( $has_text_columns_support && ! $should_skip_text_columns && isset( $block_attributes['style']['typography']['textColumns'] ) ) {
$typography_block_styles['textColumns'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'textColumns' ), null );
}

if (
$has_text_decoration_support &&
! $should_skip_text_decoration &&
Expand Down
7 changes: 7 additions & 0 deletions src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,7 @@ class WP_Theme_JSON {
* `--wp--style--root--padding-*`, and `box-shadow` properties,
* removed the `--wp--style--block-gap` property.
* @since 6.2.0 Added `outline-*`, and `min-height` properties.
* @since 6.3.0 Added `column-count` property.
*
* @var array
*/
Expand Down Expand Up @@ -228,6 +229,7 @@ class WP_Theme_JSON {
'border-left-width' => array( 'border', 'left', 'width' ),
'border-left-style' => array( 'border', 'left', 'style' ),
'color' => array( 'color', 'text' ),
'column-count' => array( 'typography', 'textColumns' ),
'font-family' => array( 'typography', 'fontFamily' ),
'font-size' => array( 'typography', 'fontSize' ),
'font-style' => array( 'typography', 'fontStyle' ),
Expand Down Expand Up @@ -334,6 +336,8 @@ class WP_Theme_JSON {
* @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
* @since 6.2.0 Added `dimensions.minHeight`, 'shadow.presets', 'shadow.defaultPresets',
* `position.fixed` and `position.sticky`.
* @since 6.3.0 Added support for `typography.textColumns`.
*
* @var array
*/
const VALID_SETTINGS = array(
Expand Down Expand Up @@ -395,6 +399,7 @@ class WP_Theme_JSON {
'fontWeight' => null,
'letterSpacing' => null,
'lineHeight' => null,
'textColumns' => null,
'textDecoration' => null,
'textTransform' => null,
),
Expand All @@ -411,6 +416,7 @@ class WP_Theme_JSON {
* added new property `shadow`,
* updated `blockGap` to be allowed at any level.
* @since 6.2.0 Added `outline`, and `minHeight` properties.
* @since 6.3.0 Added support for `typography.textColumns`.
*
* @var array
*/
Expand Down Expand Up @@ -455,6 +461,7 @@ class WP_Theme_JSON {
'fontWeight' => null,
'letterSpacing' => null,
'lineHeight' => null,
'textColumns' => null,
'textDecoration' => null,
'textTransform' => null,
),
Expand Down
7 changes: 7 additions & 0 deletions src/wp-includes/style-engine/class-wp-style-engine.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
*
* @access private
* @since 6.1.0
* @since 6.3.0 Added support for text-columns.
*/
#[AllowDynamicProperties]
final class WP_Style_Engine {
Expand Down Expand Up @@ -217,6 +218,12 @@ final class WP_Style_Engine {
),
'path' => array( 'typography', 'lineHeight' ),
),
'textColumns' => array(
'property_keys' => array(
'default' => 'column-count',
),
'path' => array( 'typography', 'textColumns' ),
),
'textDecoration' => array(
'property_keys' => array(
'default' => 'text-decoration',
Expand Down
5 changes: 4 additions & 1 deletion tests/phpunit/tests/style-engine/styleEngine.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ public function tear_down() {
* Tests generating block styles and classnames based on various manifestations of the $block_styles argument.
*
* @ticket 56467
* @ticket 58549
*
* @covers ::wp_style_engine_get_styles
*
Expand Down Expand Up @@ -189,20 +190,22 @@ public function data_wp_style_engine_get_styles() {
'fontStyle' => 'italic',
'fontWeight' => '800',
'lineHeight' => '1.3',
'textColumns' => '2',
'textDecoration' => 'underline',
'textTransform' => 'uppercase',
'letterSpacing' => '2',
),
),
'options' => null,
'expected_output' => array(
'css' => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
'css' => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;column-count:2;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
'declarations' => array(
'font-size' => 'clamp(2em, 2vw, 4em)',
'font-family' => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',
'font-style' => 'italic',
'font-weight' => '800',
'line-height' => '1.3',
'column-count' => '2',
'text-decoration' => 'underline',
'text-transform' => 'uppercase',
'letter-spacing' => '2',
Expand Down
16 changes: 11 additions & 5 deletions tests/phpunit/tests/theme/wpThemeJson.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,6 +475,7 @@ public function test_get_stylesheet_renders_enabled_protected_properties() {
* @ticket 53175
* @ticket 54336
* @ticket 56611
* @ticket 58549
*/
public function test_get_stylesheet() {
$theme_json = new WP_Theme_JSON(
Expand Down Expand Up @@ -547,7 +548,7 @@ public function test_get_stylesheet() {
),
),
'blocks' => array(
'core/group' => array(
'core/group' => array(
'color' => array(
'gradient' => 'var:preset|gradient|custom-gradient',
),
Expand All @@ -565,7 +566,7 @@ public function test_get_stylesheet() {
'padding' => '24px',
),
),
'core/heading' => array(
'core/heading' => array(
'color' => array(
'text' => '#123456',
),
Expand All @@ -581,7 +582,7 @@ public function test_get_stylesheet() {
),
),
),
'core/post-date' => array(
'core/post-date' => array(
'color' => array(
'text' => '#123456',
),
Expand All @@ -594,7 +595,12 @@ public function test_get_stylesheet() {
),
),
),
'core/image' => array(
'core/post-excerpt' => array(
'typography' => array(
'textColumns' => 2,
),
),
'core/image' => array(
'border' => array(
'radius' => array(
'topLeft' => '10px',
Expand All @@ -620,7 +626,7 @@ public function test_get_stylesheet() {
);

$variables = "body{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--duotone--custom-duotone: url('#wp-duotone-custom-duotone');--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}";
$styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';
$styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';
$presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';
$all = $variables . $styles . $presets;
$this->assertSame( $all, $theme_json->get_stylesheet() );
Expand Down