Skip to content

Create an alias get_element_class_name to use it in blocks #44099

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ockham merged 3 commits into from
Sep 13, 2022
Merged

Create an alias get_element_class_name to use it in blocks #44099

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
539a304
Alias get_element_class_name to use it in blocks
cbravobernal Sep 12, 2022
6adccca
Use wp as prefix
cbravobernal Sep 13, 2022
e50cc42
Update unit test
cbravobernal Sep 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Alias get_element_class_name to use it in blocks
  • Loading branch information
@cbravobernal
cbravobernal committed Sep 12, 2022
commit 539a304a28fbeb5358ef43539997667e29cf1059
19 changes: 19 additions & 0 deletions lib/compat/wordpress-6.1/theme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,22 @@ function gutenberg_create_initial_theme_features() {
);
}
add_action( 'setup_theme', 'gutenberg_create_initial_theme_features', 0 );



/**
* Given an element name, returns a class name.
* Alias from WP_Theme_JSON_Gutenberg::get_element_class_name.
*
* @param string $element The name of the element.
*
* @return string The name of the class.
*
* @since 6.1.0
*/
function gutenberg_theme_element_class_name( $element ) {
if ( ! class_exists( 'WP_Theme_JSON_Gutenberg' ) || ! method_exists( 'WP_Theme_JSON_Gutenberg', 'get_element_class_name' ) ) {
return '';
Copy link
Contributor Author

@cbravobernal cbravobernal Sep 12, 2022

Choose a reason for hiding this comment

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

I'm not really sure if this case can happen.

Copy link
Member

@gziolo gziolo Sep 13, 2022

Choose a reason for hiding this comment

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

I don't think we use that in other places. The class and the method are present in the Gutenberg plugin so I belive you can skip the check.

}
return WP_Theme_JSON_Gutenberg::get_element_class_name( $element );
}
2 changes: 1 addition & 1 deletion packages/block-library/src/comments/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ function register_block_core_comments() {
*/
function comments_block_form_defaults( $fields ) {
if ( wp_is_block_theme() ) {
$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . wp_theme_element_class_name( 'button' ) . '" value="%4$s" />';
$fields['submit_field'] = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/post-comments-form/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function register_block_core_post_comments_form() {
*/
function post_comments_form_block_form_defaults( $fields ) {
if ( wp_is_block_theme() ) {
$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="wp-block-button__link ' . wp_theme_element_class_name( 'button' ) . '" value="%4$s" />';
$fields['submit_field'] = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/search/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ function render_block_core_search( $attributes ) {
}

// Include the button element class.
$button_classes[] = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' );
$button_classes[] = wp_theme_element_class_name( 'button' );
$button_markup = sprintf(
'<button type="submit" class="%s" %s %s>%s</button>',
esc_attr( implode( ' ', $button_classes ) ),
Expand Down
4 changes: 2 additions & 2 deletions phpunit/class-wp-theme-json-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -797,14 +797,14 @@ function test_remove_invalid_element_pseudo_selectors() {

function test_get_element_class_name_button() {
$expected = 'wp-element-button';
$actual = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' );
$actual = gutenberg_theme_element_class_name( 'button' );

$this->assertEquals( $expected, $actual );
}

function test_get_element_class_name_invalid() {
$expected = '';
$actual = WP_Theme_JSON_Gutenberg::get_element_class_name( 'unknown-element' );
$actual = gutenberg_theme_element_class_name( 'unknown-element' );

$this->assertEquals( $expected, $actual );
}
Expand Down
1 change: 1 addition & 0 deletions tools/webpack/blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const blockViewRegex = new RegExp(
const prefixFunctions = [
'build_query_vars_from_query_block',
'wp_enqueue_block_support_styles',
'wp_theme_element_class_name',
Copy link
Member

@gziolo gziolo Sep 13, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

I would be happier if we wouldn't have to list those functions here. What's the reasoning behind using the function name with gutenberg_ prefix?

Copy link
Contributor

@ockham ockham Sep 13, 2022

Choose a reason for hiding this comment

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

That was my suggestion. I probably applied the conclusion from #43779 (comment) and the naming collision too strongly.

Since we're not dealing with a different version of the same function (as was the case in #43779, which was then superseded by #43859), it's probably fine to name it wp_theme_element_class_name in Gutenberg (and wrap the definition in a ! function_exists() check).

Copy link
Contributor

@ockham ockham Sep 13, 2022

Choose a reason for hiding this comment

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

Aside: @mtias has pointed out to me in Slack that

The one issue with the function check is that it prevents improvements on the plugin to the core functions

-- which was basically the situation we had in #43859. As we've discussed above, this doesn't currently apply to wp_theme_element_class_name -- if we ever decide to modify that function, we can still adopt a prefix-rewriting strategy.

We should probably put some guidelines into writing -- there currently seems to be a bit of confusion around what strategies to apply to avoid collisions (see e.g. #44100).

Copy link
Member

@gziolo gziolo Sep 13, 2022

Choose a reason for hiding this comment

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

There are guidelines present in the documentation:
https://github.com/WordPress/gutenberg/tree/trunk/lib#wrap-functions-and-classes-with--function_exists-and--class_exists

Feel free to add more details, so it makes the process less confusing.

I think there is rarely a reason to use the trick with webpack and prefixFunctions list. Two existing cases are related to the function param changes in the function definition. Otherwise, you can use all sorts of feature detection to figure out what needs to be polyfilled.

];

/**
Expand Down