Skip to content

Conversation

@t-hamano
Copy link
Contributor

@t-hamano t-hamano commented Feb 7, 2025

What?

Why?

In #69002, we updated the schema and added a migration to change the attribute value to a comment delimiter so that the ariaLabel block support would work in dynamic blocks.

However, because server-side processing was missing, this support did not work properly in blocks that used the ServerSideRender component, for example.

How?

Like many other block supports, add block support via the register method.

Testing Instructions

Here we will test adding ariaLabel support to the archive block.

First, make the following changes:

Diff

Note that the get_block_wrapper_attributes function is in lines 46 and 92. Update line 92.

diff --git a/packages/block-library/src/archives/block.json b/packages/block-library/src/archives/block.json
index 0351a4b694..80e037e390 100644
--- a/packages/block-library/src/archives/block.json
+++ b/packages/block-library/src/archives/block.json
@@ -25,6 +25,7 @@
                }
        },
        "supports": {
+               "ariaLabel": true,
                "align": true,
                "__experimentalBorder": {
                        "radius": true,
diff --git a/packages/block-library/src/archives/index.php b/packages/block-library/src/archives/index.php
index 2846b6ca1a..6ef5190a66 100644
--- a/packages/block-library/src/archives/index.php
+++ b/packages/block-library/src/archives/index.php
@@ -89,7 +89,7 @@ function render_block_core_archives( $attributes ) {
 
        $archives = wp_get_archives( $archives_args );
 
-       $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) );
+       $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class, 'aria-label' => $attributes['ariaLabel'] ) );
 
        if ( empty( $archives ) ) {
                return sprintf(

In the post content, insert the following HTML:

<!-- wp:archives {"ariaLabel":"Archive Block Aria Label"} /-->

Confirm that the aria-label attribute is added to the block in both the frontend and the editor.

In the trunk branch, you’ll get an error like this:

image

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Feature] Block API API that allows to express the block paradigm. labels Feb 7, 2025
@github-actions
Copy link

github-actions bot commented Feb 7, 2025

Flaky tests detected in f97978a.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/13199665831
📝 Reported issues:

@t-hamano t-hamano self-assigned this Feb 7, 2025
@@ -0,0 +1,85 @@
<?php
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This unit test is identical to the test in the core backport PR:
https://github.com/WordPress/wordpress-develop/pull/8274/files#diff-0f32f800b7e03fe08c378308dfb322156ea606714e2f39d095971d02add72a93

On the other hand, the following unit test cannot be included in this PR because it will not pass unless the aria-label attribute is allowed by default in the get_block_wrapper_attributes function:
https://github.com/WordPress/wordpress-develop/pull/8274/files#diff-699d565e390f7fb85d4d1c7ade8706b63fe2cec31043e8e18117961ca3f7083d

@t-hamano t-hamano marked this pull request as ready for review February 10, 2025 01:45
@github-actions
Copy link

github-actions bot commented Feb 10, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: joemcgill <joemcgill@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@aaronrobertshaw
Copy link
Contributor

Appreciate the ping for review @t-hamano 👍

Unfortunately, my bandwidth is still limited for the time being, such that I won't be able to assist with reviews or testing here. I believe @tellthemachines is also in the same boat, so I've removed us both from the list of reviewers.

It might be worth pinging a few more people to get enough eyes on this PR.

@t-hamano
Copy link
Contributor Author

Thank you for your reply. Just to be sure, I would like to ping @WordPress/gutenberg-core, not specific people.

@carolinan
Copy link
Contributor

I followed the testing instructions but I don't see the label on the front.
Do I need to include anything from the core patch?

@t-hamano
Copy link
Contributor Author

@carolinan Thanks for the testing. Did you perform the following steps?

First, make the following changes:

Diff
diff --git a/packages/block-library/src/archives/block.json b/packages/block-library/src/archives/block.json
index 0351a4b694..80e037e390 100644
--- a/packages/block-library/src/archives/block.json
+++ b/packages/block-library/src/archives/block.json
@@ -25,6 +25,7 @@
                }
        },
        "supports": {
+               "ariaLabel": true,
                "align": true,
                "__experimentalBorder": {
                        "radius": true,
diff --git a/packages/block-library/src/archives/index.php b/packages/block-library/src/archives/index.php
index 2846b6ca1a..6ef5190a66 100644
--- a/packages/block-library/src/archives/index.php
+++ b/packages/block-library/src/archives/index.php
@@ -89,7 +89,7 @@ function render_block_core_archives( $attributes ) {
 
        $archives = wp_get_archives( $archives_args );
 
-       $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) );
+       $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class, 'aria-label' => $attributes['ariaLabel'] ) );
 
        if ( empty( $archives ) ) {
                return sprintf(

@carolinan
Copy link
Contributor

Yes.

@joemcgill
Copy link
Member

We're getting very close to the deadline for this shipping in WordPress 6.8. I've added it to the WordPress 6.8 Editor Tasks project board for visibility.

@t-hamano
Copy link
Contributor Author

It works correctly in my environment.

Did you perform the following steps?

Maybe I was unclear about which line to update. This might be the cause. I have updated the testing instructions.

First, make the following changes:
Note that the get_block_wrapper_attributes function is in lines 46 and 92. Update line 92.

@carolinan
Copy link
Contributor

I updated the correct line in index.php and it is working now:

The archive block with the aria-label present in the markup

@carolinan
Copy link
Contributor

carolinan commented Feb 24, 2025

I wasn't able to run the test alone, --filter etc are not working: I am sure I am missing a command.
If I just use npm run test:unit:php I get an OK, but I can't see a full list of which tests were run.

Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @t-hamano!

I think this is good to merge. If there's any additional feedback regarding coding standards in core PR, it could be synced back.

@carolinan, I think test:unit:php doesn't work with --filter because it uses npm-run-all script. Try using test:unit:php:base.

@t-hamano
Copy link
Contributor Author

Thanks for the review!

@t-hamano t-hamano merged commit 3e6ddf9 into trunk Feb 25, 2025
73 checks passed
@t-hamano t-hamano deleted the aria-label-server-side-support branch February 25, 2025 04:17
@github-actions github-actions bot added this to the Gutenberg 20.4 milestone Feb 25, 2025
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
)

* Block support: Add server-side processing for ariaLabel

* Add backport changelog

* Add unit test

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: joemcgill <joemcgill@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Block API API that allows to express the block paradigm. [Type] Bug An existing feature does not function as intended

Projects

No open projects

Development

Successfully merging this pull request may close these issues.

Block API: Improve ariaLabel block support

6 participants