Twenty Twelve: support Image block rounded style

[lancewillett]

Steps to reproduce

1. Activate Twenty Twelve version 4.6
2. Create a new post
3. Add an "Image" block
4. Upload an image
5. In block settings, select "Rounded" under "Styles"

What I expected

For the rounded styles to apply both in the editor and on the front-end of the site.

What happened instead

Editor, yes. Front-end, no. Front-end shows square (default) styles.

[sabernhardt]

adds border-radius from WordPress 6.5 block-library styles in Twenty Twelve's blocks.css

[sabernhardt]

The Rounded style had worked with WordPress 6.5, when the block-library stylesheet included

.wp-block-image .is-style-rounded img,
.wp-block-image.is-style-rounded img {
  border-radius: 9999px;
}

6.6 reduced the specificity to

:root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) {
  border-radius: 9999px;
}

which is lower than img styles in Twenty Twelve's style.css:

.entry-content img,
.widget img {
	border-radius: 3px;
}

64041.1.diff​ copies the ​pixel-value radius ruleset from the older block-library styles to the theme, and block-related styles belong in blocks.css.

[mukesh27]

The 64041.1.diff​ working fine in my testing. See attached screenshot.

[mukesh27]

Image block rounded style

Thanks @dhruvang21.

The approach taken in https://core.trac.wordpress.org/attachment/ticket/64041/64041.1.diff is more appropriate then your so i'm going to close these PR.

[rollybueno]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/64041/64041.1.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.29
• Server: nginx/1.29.1
• Database: mysqli (Server: 8.4.6 / Client: mysqlnd 8.2.29)
• Browser: Chrome 140.0.0.0
• OS: Linux
• Theme: Twenty Twelve 4.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

1. Switch your theme to Twenty Twelve 4.6.
2. Create a brand-new post.
3. Insert an Image block.
4. Upload any image to the block.
5. In the block settings sidebar, choose the Rounded style under Styles.

Supplemental Artifacts

Before patch:

• Backend
• Front-end

After patch:

• Front-end

[shailu25]

Test Report

This Report Validates that the indicated patch address the issue.✅

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/64041/64041.1.diff

Environment:

WordPress - 6.8.3
OS - Windows
Browser - Chrome
Theme: Twenty Twelve
PHP - 8.2.27
Plugin - None

Actual Results:

• Issue Resolved with Patch ✅

Supplemental Artifacts

• Backend: ​https://prnt.sc/lup5KD-zUgRF
• Frontend Before Patch: ​https://prnt.sc/J1jGG5Wb8CUA
• Frontend After Patch: ​https://prnt.sc/air0zfePR_Sy

@mukeshpanchal27 can you reopen this PR as i could update the code with latest patch or should create a new PR?

[joedolson]

In 61107:

Twenty Twelve: Restore support for Image block rounded style.

The specificity changes in core block-library styles in 6.6 caused the image block rounded style to have lower specificity than the theme stylesheet.

Add the radius ruleset from the block-library styles to Twenty Twelve to restore support.

Props lancewillett, sabernhardt, mukesh27, dhruvang21, rollybueno, shailu25, joedolson.
Fixes #64041.