Make WordPress Core

Opened 4 months ago

Closed 3 months ago

#65164 closed enhancement (fixed)

Responsive styles for blocks

Reported by: isabel_brison Owned by: isabel_brison
Priority: normal Milestone: 7.1
Component: Editor Version:
Severity: normal Keywords: gutenberg-merge has-patch has-unit-tests
Cc: Focuses:

Description

Tracking the needed core updates to implement responsive style states for blocks, as described in https://github.com/WordPress/gutenberg/issues/77817.

The first part of the work in in https://github.com/WordPress/gutenberg/pull/77513.

Change History (22)

#1 @audrasjb
4 months ago

Removing trunk version as this is not going to be shipped with WP 7.0 but in the next releases.

#2 @desrosj
4 months ago

  • Version trunk

Since this is an enhancement, there's no first version of WordPress this can be reproduced in. Removing trunk version.

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


4 months ago
#3

  • Keywords has-patch added

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

## Use of AI Tools

Code copied across from https://github.com/WordPress/gutenberg/pull/78543 with the aid of copilot.

@isabel_brison commented on PR #11966:


4 months ago
#4

noting that https://github.com/WordPress/gutenberg/pull/78543 also has a change to the states block support that is dependent on #11828 which introduces the file.

@ramonopoly commented on PR #11706:


4 months ago
#5

For what it's worth, I checked the changes against https://github.com/WordPress/gutenberg/pull/77513 👍🏻 LGTM

@isabel_brison commented on PR #11706:


4 months ago
#6

Thanks for reviewing @ramonjd! Feedback has been addressed.

@ramonopoly commented on PR #11706:


4 months ago
#7

Looks like the CI is choking trying to pull docker images. Can't see any issues on docker/github status pages. Maybe we hit a temp rate limit 🤔

#8 @isabel_brison
4 months ago

In 62444:

Editor: add responsive global styles for blocks.

Uses block states to represent tablet and mobile breakpoints for block global styles.

Props isabel_brison, ramonopoly.
See #65164.

#10 @sabernhardt
4 months ago

#65390 is a follow-up to [62444] for documentation (which probably should be updated in class-wp-theme-json-gutenberg.php too).

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


3 months ago
#11

  • Keywords has-unit-tests added

@isabel_brison commented on PR #11966:


3 months ago
#12

Thanks for the review @ramonjd! Everything should be fixed now.

#13 @isabel_brison
3 months ago

  • Owner set to isabel_brison
  • Resolutionfixed
  • Status newclosed

In 62478:

Editor: add support for layout responsive styles.

Adds support for setting responsive layout, block spacing and child layout styles.

Props isabel_brison, ramonopoly, audrasjb, desrosj, sabernhardt.
Fixes #65164.

@isabel_brison commented on PR #12077:


3 months ago
#14

whoops I closed the original ticket and this was closed too

#15 @isabel_brison
3 months ago

  • Resolution fixed
  • Status closedreopened

Reopening because https://github.com/WordPress/wordpress-develop/pull/12077 is still in progress and should be part of this ticket.

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


3 months ago
#16

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

## Use of AI Tools

<!--
You are free to use artificial intelligence (AI) tooling to contribute, but you must disclose what tooling you are using and to what extent a pull request has been authored by AI. It is your responsibility to review and take responsibility for what AI generates. See the WordPress AI Guidelines: <https://make.wordpress.org/ai/handbook/ai-guidelines/>.

Copied from Gutenberg PR https://github.com/WordPress/gutenberg/pull/79135/changes with assistance from copilot.

@isabel_brison commented on PR #12077:


3 months ago
#17

I have now updated to match the latest from https://github.com/WordPress/gutenberg/pull/78795 and human-reviewed all the code.

@ramonopoly commented on PR #12077:


3 months ago
#18

I suspect there are some state/responsive pieces missing (?) because it wasn't showing me the results.

Ah maybe the incoming conflicts?

@isabel_brison commented on PR #12077:


3 months ago
#19

Ah maybe the incoming conflicts?

yeah I just committed #12182 😅

I'll solve the conflicts and re-test to be sure. Thanks for reviewing!

#20 @isabel_brison
3 months ago

In 62513:

Editor: add support for aspect ratio and related controls in viewport states.

Enables responsive aspect ratio, scale, width, height and min-height in Image, Featured image and Cover blocks.

Props isabel_brison, ramonopoly.
See #65164.

#22 @isabel_brison
3 months ago

  • Resolutionfixed
  • Status reopenedclosed

In 62514:

Editor: fix responsive element styles front end output.

Outputs viewport-specific state styles for elements such as Link or Heading that are part of a block.

Props isabel_brison, ramonopoly.
Fixes #65164.

Note: See TracTickets for help on using tickets.