Make WordPress Core

Opened 4 weeks ago

Closed 4 weeks ago

Last modified 3 weeks ago

#60365 closed enhancement (fixed)

Introduce dimensions.aspectRatio block support

Reported by: andrewserong's profile andrewserong Owned by: isabel_brison's profile isabel_brison
Milestone: 6.5 Priority: normal
Severity: normal Version: trunk
Component: Editor Keywords: gutenberg-merge has-patch has-unit-tests add-to-field-guide
Focuses: Cc:

Description

In the Gutenberg plugin, an aspect ratio block support feature was added, with support for both Group and Cover blocks. It would be good to backport this feature for the WP 6.5 release.

While the feature is spread across JS and PHP code, it should be possible to land most of the PHP implementation in advance of the JS packages update for core.

The original feature landed in Gutenberg in the following PR: https://github.com/WordPress/gutenberg/pull/56897

Change History (5)

This ticket was mentioned in PR #5963 on WordPress/wordpress-develop by @andrewserong.


4 weeks ago
#1

  • Keywords has-patch has-unit-tests added

Backport the aspect ratio block support feature from the Gutenberg plugin, that originally landed in: https://github.com/WordPress/gutenberg/pull/56897

Note this PR backports the PHP parts of the block support. This can be safely done prior to the JS packages landing for core, as the UI for the feature will not be exposed until the JS packages are updated.

Testing this PR manually in wordpress-develop is possible via the following steps:

  • Update the Group block's block.json file to include dimensions: { aspectRatio: true } under the supports key. I.e. the dimensions support will now look like:
		"dimensions": {
			"aspectRatio": true,
			"minHeight": true
		},
  • Skip the block.json cache so the changes to the block.json file are picked up. A quick way is to comment out the following lines:

https://github.com/WordPress/wordpress-develop/blob/e108d27762f375cab724789c2db1445c4bcd4477/src/wp-includes/blocks.php#L346-L348

  • In a post or page add the following markup that contains a Group block with an aspect-ratio set:
<div class="wp-block-group has-background" style="background-color:#f0d1d1">
<p>A group block</p>
</div>

  • Note: at this stage you won't yet see the aspect ratio rendered in the editor — this is to be expected as JS rendering will only happen once the JS packages are updated.
  • Save the post or page and load the post on the site frontend. You should see that the aspect ratio rules are output for this block, along with a min-height:unset rule:

https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/14988353/8986d36d-3309-4a1e-9bf0-f182069a1f92

Trac ticket: https://core.trac.wordpress.org/ticket/60365

#2 @isabel_brison
4 weeks ago

  • Owner set to isabel_brison
  • Resolution set to fixed
  • Status changed from new to closed

In 57491:

Editor: introduce dimensions.aspectRatio block support.

Adds front end rendering logic for the dimensions.aspectRatio block support as well as the required logic in WP_Theme_JSON and the style engine.

Props andrewserong.
Fixes #60365.

@isabel_brison commented on PR #5963:


4 weeks ago
#3

Committed in r57491.

@andrewserong commented on PR #5963:


4 weeks ago
#4

Wonderful, thank you @tellthemachines! 🙇

#5 @stevenlinx
3 weeks ago

  • Keywords add-to-field-guide added
Note: See TracTickets for help on using tickets.