Make WordPress Core

Opened 3 weeks ago

Last modified 3 weeks ago

#65899 new enhancement

Backport: add support for label element on the elements API

Reported by: sarthaknagoshe2002 Owned by:
Priority: normal Milestone: 7.2
Component: Themes Version:
Severity: normal Keywords: has-patch gutenberg-merge
Cc: Focuses:

Description

Backport for https://github.com/WordPress/gutenberg/pull/81160

What?

Part of https://github.com/WordPress/gutenberg/issues/34198
This PR adds elements support to the label element.

Why?

So a theme can consistently style how form labels look across the site, regardless of the blocks or third party plugins used. This continues the form elements work recently done for inputs and selects.

How?

By allowing styling of label using the elements API

Testing Instructions

  1. Add the following to theme.json file:
"styles": {
		"elements": {
			"label": {
				"color": {
					"text": "red",
					"background": "blue"
				},
				"spacing": {
					"padding": {
						"top": "25px",
						"bottom": "25px",
						"left": "25px",
						"right": "25px"
					}
				}
			}
		}
	},
  1. Insert a Custom HTML block with <label>Test Label</label> and verify the colors applied correctly in the editor and on the frontend.

Screenshots or screencast

https://github.com/user-attachments/assets/70f73614-7840-4649-9228-4bd936c7c861

Trunk This PR with theme.json changes This PR with no theme.json changes
https://github.com/user-attachments/assets/6af4ee3b-d4f9-4725-9b50-ad938d92e84fhttps://github.com/user-attachments/assets/06af4a58-7ef7-4371-8d44-fda1bc42d5f8https://github.com/user-attachments/assets/a4744499-6a45-41cf-9d29-1fcaa1d814d9

Fixes https://github.com/WordPress/gutenberg/pull/81647.

Change History (2)

#2 @wildworks
3 weeks ago

  • Keywords gutenberg-merge added
  • Milestone 7.17.2

Since the pull request https://github.com/WordPress/gutenberg/pull/81160 has not yet been merged, I believe the milestone should be 7.2, not 7.1.

Note: See TracTickets for help on using tickets.