Skip to content

Commit

Permalink
Script Modules API: update the code and move it to the compat/wordpre…
Browse files Browse the repository at this point in the history 
…ss-6.5 folder (#57778)

* Move modules api to 6.5 folder

* Update functions to use wp_modules instead of gutenberg_modules

* Prevent class redeclaration

* Add classic themes conditional

* Yet another script position movement

* Add gutenberg_*_module deprecations

* Add correct version deprecations

* Add correct version deprecations

* Use correct order for module hooks

* Rename module functions to script_module

* Rename module functions to script_module

* Update files from WP Core

Includes this PR WordPress/wordpress-develop#5931

* Fix deprecated version and rename experimental file

* Add warning to upcoming deleted file

* Refactor file to use only modules

* Refactor search block to use only modules

* Refactor query block to use only modules

* Refactor image block to use only modules

* Refactor navigation block to use only modules

* Fix some params and add missing DocBlock

* Update DEWP readme

* Remove tests

This code is now tested in WordPress Core.

* Update enqueue in new e2e tests

* Fix wrong print function names

* Remove unnecessary extra argument

* Add missing function

* Fix redeclared class problem

Fixes an issue in PHP 7.0 where we'd see a redeclared class fatal error.

* Remove we from docs

---------

Co-authored-by: Luis Herranz <luisherranz@gmail.com>
Co-authored-by: Jon Surrell <sirreal@users.noreply.github.com>
  • Loading branch information
@cbravobernal @luisherranz @sirreal
3 people authored Jan 24, 2024
1 parent b3fdade commit 01fb505
Show file tree
Hide file tree
Showing 42 changed files with 830 additions and 1,100 deletions.
79 changes: 30 additions & 49 deletions lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,13 @@ private static function has_submenus( $inner_blocks ) {
}

/**
* Determine whether to load the view script.
* Determine whether the navigation blocks is interactive.
*
* @param array $attributes The block attributes.
* @param WP_Block_List $inner_blocks The list of inner blocks.
* @return bool Returns whether or not to load the view script.
*/
private static function should_load_view_script( $attributes, $inner_blocks ) {
private static function is_interactive( $attributes, $inner_blocks ) {
$has_submenus = static::has_submenus( $inner_blocks );
$is_responsive_menu = static::is_responsive( $attributes );
return ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) || $is_responsive_menu;
Expand Down Expand Up @@ -129,8 +129,8 @@ private static function get_markup_for_inner_block( $inner_block ) {
* @return string Returns the html for the inner blocks of the navigation block.
*/
private static function get_inner_blocks_html( $attributes, $inner_blocks ) {
$has_submenus = static::has_submenus( $inner_blocks );
$should_load_view_script = static::should_load_view_script( $attributes, $inner_blocks );
$has_submenus = static::has_submenus( $inner_blocks );
$is_interactive = static::is_interactive( $attributes, $inner_blocks );

$style = static::get_styles( $attributes );
$class = static::get_classes( $attributes );
Expand Down Expand Up @@ -168,7 +168,7 @@ private static function get_inner_blocks_html( $attributes, $inner_blocks ) {
}

// Add directives to the submenu if needed.
if ( $has_submenus && $should_load_view_script ) {
if ( $has_submenus && $is_interactive ) {
$tags = new WP_HTML_Tag_Processor( $inner_blocks_html );
$inner_blocks_html = gutenberg_block_core_navigation_add_directives_to_submenu( $tags, $attributes );
}
Expand Down Expand Up @@ -402,9 +402,9 @@ private static function get_styles( $attributes ) {
* @return string Returns the container markup.
*/
private static function get_responsive_container_markup( $attributes, $inner_blocks, $inner_blocks_html ) {
$should_load_view_script = static::should_load_view_script( $attributes, $inner_blocks );
$colors = gutenberg_block_core_navigation_build_css_colors( $attributes );
$modal_unique_id = wp_unique_id( 'modal-' );
$is_interactive = static::is_interactive( $attributes, $inner_blocks );
$colors = gutenberg_block_core_navigation_build_css_colors( $attributes );
$modal_unique_id = wp_unique_id( 'modal-' );

$responsive_container_classes = array(
'wp-block-navigation__responsive-container',
Expand Down Expand Up @@ -432,7 +432,7 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
$responsive_container_directives = '';
$responsive_dialog_directives = '';
$close_button_directives = '';
if ( $should_load_view_script ) {
if ( $is_interactive ) {
$open_button_directives = '
data-wp-on--click="actions.openMenuOnClick"
data-wp-on--keydown="actions.handleMenuKeydown"
Expand Down Expand Up @@ -495,12 +495,12 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
* @return string Returns the navigation block markup.
*/
private static function get_nav_wrapper_attributes( $attributes, $inner_blocks ) {
$nav_menu_name = static::get_unique_navigation_name( $attributes );
$should_load_view_script = static::should_load_view_script( $attributes, $inner_blocks );
$is_responsive_menu = static::is_responsive( $attributes );
$style = static::get_styles( $attributes );
$class = static::get_classes( $attributes );
$wrapper_attributes = get_block_wrapper_attributes(
$nav_menu_name = static::get_unique_navigation_name( $attributes );
$is_interactive = static::is_interactive( $attributes, $inner_blocks );
$is_responsive_menu = static::is_responsive( $attributes );
$style = static::get_styles( $attributes );
$class = static::get_classes( $attributes );
$wrapper_attributes = get_block_wrapper_attributes(
array(
'class' => $class,
'style' => $style,
Expand All @@ -509,21 +509,22 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks )
);

if ( $is_responsive_menu ) {
$nav_element_directives = static::get_nav_element_directives( $should_load_view_script, $attributes );
$nav_element_directives = static::get_nav_element_directives( $is_interactive, $attributes );
$wrapper_attributes .= ' ' . $nav_element_directives;
}

return $wrapper_attributes;
}

/**
* Get the nav element directives
* Gets the nav element directives.
*
* @param bool $should_load_view_script Whether or not the view script should be loaded.
* @param bool $is_interactive Whether the block is interactive.
* @param array $attributes The block attributes.
* @return string the directives for the navigation element.
*/
private static function get_nav_element_directives( $should_load_view_script, $attributes ) {
if ( ! $should_load_view_script ) {
private static function get_nav_element_directives( $is_interactive, $attributes ) {
if ( ! $is_interactive ) {
return '';
}
// When adding to this array be mindful of security concerns.
Expand All @@ -541,8 +542,10 @@ private static function get_nav_element_directives( $should_load_view_script, $a
data-wp-context=\'' . $nav_element_context . '\'
';

// When the navigation overlayMenu attribute is set to "always"
// we don't need to use JavaScript to collapse the menu as we set the class manually.
/*
* When the navigation's 'overlayMenu' attribute is set to 'always', JavaScript
* is not needed for collapsing the menu because the class is set manually.
*/
if ( ! static::is_always_overlay( $attributes ) ) {
$nav_element_directives .= 'data-wp-init="callbacks.initNav"';
$nav_element_directives .= ' '; // space separator
Expand All @@ -553,37 +556,15 @@ private static function get_nav_element_directives( $should_load_view_script, $a
}

/**
* Handle view script loading.
* Handle view script module loading.
*
* @param array $attributes The block attributes.
* @param WP_Block $block The parsed block.
* @param WP_Block_List $inner_blocks The list of inner blocks.
*/
private static function handle_view_script_loading( $attributes, $block, $inner_blocks ) {
$should_load_view_script = static::should_load_view_script( $attributes, $inner_blocks );
$is_gutenberg_plugin = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
$view_js_file = 'wp-block-navigation-view';
$script_handles = $block->block_type->view_script_handles;

if ( $is_gutenberg_plugin ) {
if ( $should_load_view_script ) {
gutenberg_enqueue_module( '@wordpress/block-library/navigation-block' );
}
// Remove the view script because we are using the module.
$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
} else {
// If the script already exists, there is no point in removing it from viewScript.
if ( ! wp_script_is( $view_js_file ) ) {

// If the script is not needed, and it is still in the `view_script_handles`, remove it.
if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) {
$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
}
// If the script is needed, but it was previously removed, add it again.
if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) {
$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
}
}
private static function handle_view_script_module_loading( $attributes, $block, $inner_blocks ) {
if ( static::is_interactive( $attributes, $inner_blocks ) ) {
wp_enqueue_script_module( '@wordpress/block-library/navigation-block' );
}
}

Expand Down Expand Up @@ -653,7 +634,7 @@ public static function render( $attributes, $content, $block ) {
return '';
}

static::handle_view_script_loading( $attributes, $block, $inner_blocks );
static::handle_view_script_module_loading( $attributes, $block, $inner_blocks );

return sprintf(
'<nav %1$s>%2$s</nav>',
Expand Down
Loading

0 comments on commit 01fb505

Please sign in to comment.