Skip to content

Commit

Permalink
Additional work on navigation changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@brettsmason
brettsmason committed Jul 12, 2024
1 parent 89e1f51 commit 8b65100
Showing 1 changed file with 88 additions and 34 deletions.
122 changes: 88 additions & 34 deletions includes/classes/Editor/Render/Navigation.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,43 @@
*/
class Navigation implements Bootable {


/**
* The submenu blocks.
*
* @var array
*/
var $submenu_blocks = [
'core/navigation-submenu',
'pulsar/navigation-megamenu',
];

/**
* The icons.
*
* @var array
*/
var $icons = [
'open' => 'navigation-open',
'close' => 'navigation-close',
'submenu' => 'navigation-submenu',
'back' => 'navigation-back',
];

/**
* Bootstraps the class' actions/filters.
*
* @access public
* @return void
*/
public function boot(): void {
add_filter( 'render_block_core/navigation', [ $this, 'modify_icon' ], 10, 2 );
add_filter( 'render_block_core/navigation-submenu', [ $this, 'prepend_back_to_submenu' ], 10, 2 );
add_filter( 'render_block_pulsar/navigation-megamenu', [ $this, 'prepend_back_to_megamenu' ], 10, 2 );

// Update icons
add_filter( 'render_block_core/navigation', [ $this, 'modify_open_icon' ], 10, 2 );
add_filter( 'render_block', [ $this, 'modify_submenu_icon' ], 10, 2 );

// Add submenu header
add_filter( 'render_block', [ $this, 'prepend_submenu_header' ], 10, 2 );
}

/**
Expand All @@ -37,16 +64,16 @@ public function boot(): void {
* @param array $block The block.
* @return string
*/
public function modify_icon( string $block_content, array $block ): string {
public function modify_open_icon( string $block_content, array $block ): string {

$tags = new WP_HTML_Tag_Processor( $block_content );

$tags->next_tag( [ 'class_name' => 'wp-block-navigation__responsive-container-open' ] );
$tags->set_attribute( 'data-wp-on--click', 'actions.toggleMenuOnClick' );

$block_content = $tags->get_updated_html();
$open_icon = render_svg( 'navigation-open' );
$close_icon = render_svg( 'navigation-close' );
$open_icon = render_svg( $this->icons['open'] );
$close_icon = render_svg( $this->icons['close'] );

// Find the closing SVG tag and add another SVG after it.
$block_content = preg_replace('/\<svg width(.*?)\<\/svg\>/', $open_icon . $close_icon, $block_content, 1 );
Expand All @@ -55,27 +82,46 @@ public function modify_icon( string $block_content, array $block ): string {
}

/**
* Prepend a back button to the submenu.
* Allow the navigation icon to toggle the menu, rather than just opening it by default.
* This is done by adding a data attribute to the icon.
* Also replace the SVGs with our own custom SVGs.
*
* @param string $block_content The block content.
* @param array $block The block.
* @return string
*/
public function prepend_back_to_submenu( string $block_content, array $block ): string {
public function modify_submenu_icon( string $block_content, array $block ): string {

$back_icon = render_svg( 'navigation-back' );
if ( ! in_array( $block['blockName'], $this->submenu_blocks, true ) ) {
return $block_content;
}

$back_button = sprintf(
'<li class="wp-block-navigation-item wp-block-navigation-link wp-block-navigation-back">
<button
class="wp-block-navigation-item__content wp-block-navigation-item__back"
data-wp-on--click="actions.toggleMenuOnClick"
>
%1$s %2$s
</button>
</li>',
$back_icon,
$icon = render_svg( $this->icons['submenu'] );

// Find the closing SVG tag and add another SVG after it.
$block_content = preg_replace( '/<svg(.*?)<\/svg>/', $icon, $block_content, 1 );

return $block_content;
}

/**
* Prepend a header to a submenu.
*
* @param string $block_content The block content.
* @param array $block The block.
* @return string
*/
public function prepend_submenu_header( string $block_content, array $block ): string {

if ( ! in_array( $block['blockName'], $this->submenu_blocks, true ) ) {
return $block_content;
}

$back_button = $this->submenu_header_markup(
__( 'Back', 'pulsar' ),
$block['attrs']['label'],
$block['attrs']['url'],
__( 'View all', 'pulsar' ) . '<span class="screen-reader-text"> ' . $block['attrs']['label'] . '</span>',
);

// Find the opening UL tag and add the back button within it.
Expand All @@ -85,32 +131,40 @@ class="wp-block-navigation-item__content wp-block-navigation-item__back"
}

/**
* Prepend a back button to the megamenu.
* Render the submenu header markup.
*
* @param string $block_content The block content.
* @param array $block The block.
* @param string $back_text The back text.
* @param string $label The submenu title.
* @param string $all_url The view all URL.
* @param string $all_text The view all text.
* @return string
*/
public function prepend_back_to_megamenu( string $block_content, array $block ): string {
public function submenu_header_markup( $back_text, $label, $all_url, $all_text ) {

$back_icon = render_svg( 'navigation-back' );
$back_icon = render_svg( $this->icons['back'] );

$back_button = sprintf(
'<div class="wp-block-navigation-item wp-block-navigation-link wp-block-navigation-back">
return sprintf(
'<li class="wp-block-navigation-item wp-block-navigation-submenu__header">
<button
class="wp-block-navigation-item__content wp-block-navigation-item__back"
class="wp-block-navigation-item__content wp-block-navigation-submenu__back"
data-wp-on--click="actions.toggleMenuOnClick"
>
%1$s %2$s
</button>
</div>',
$back_icon,
__( 'Back', 'pulsar' ),
);
// Find the opening DIV tag and add the back button within it.
$block_content = preg_replace( '/<div(.*?)>/', '$0' . $back_button, $block_content, 1 );
<span class="wp-block-navigation-submenu__label">
%3$s
</span>
return $block_content;
<a href="%4$s" class="wp-block-navigation-submenu__all">
%5$s
</a>
</li>',
$back_icon,
$back_text,
$label,
$all_url,
$all_text,
);
}
}

0 comments on commit 8b65100

Please sign in to comment.