Merge pull request #7650 from ampproject/fix/navigation-block

Fix interactivity API enabled navigation block
ampproject · Nov 1, 2023 · 789e099 · 789e099
2 parents 6899eeb + 1739125
commit 789e099
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 20 deletions.
diff --git a/.github/workflows/build-test-measure.yml b/.github/workflows/build-test-measure.yml
@@ -682,7 +682,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: upload-to-gcs
     permissions:
-      issues: write
+      pull-requests: write
     steps:
       - name: Check if a comment was already made
         id: find-comment
@@ -697,7 +697,7 @@ jobs:
 
             const comment = comments.find((comment) => comment.body.includes('Plugin builds for'));
 
-            return comment ? comment.id : '';
+            return comment ? comment.id : null;
 
       - name: Get comment body
         id: get-comment-body
@@ -729,7 +729,7 @@ jobs:
           echo "${delimiter}" >> $GITHUB_OUTPUT
 
       - name: Create comment on PR with links to plugin builds
-        if: ${{ steps.find-comment.outputs.result == '' }}
+        if: ${{ steps.find-comment.outputs.result == 'null' }}
         uses: actions/github-script@v6
         with:
           script: |
@@ -741,7 +741,7 @@ jobs:
             });
 
       - name: Update comment on PR with links to plugin builds
-        if: ${{ steps.find-comment.outputs.result != '' }}
+        if: ${{ steps.find-comment.outputs.result != 'null' }}
         uses: actions/github-script@v6
         with:
           script: |

diff --git a/includes/embeds/class-amp-core-block-handler.php b/includes/embeds/class-amp-core-block-handler.php
@@ -339,6 +339,11 @@ public function ampify_navigation_block( $block_content, $block ) {
 			add_action( 'wp_print_footer_scripts', [ $this, 'dequeue_block_navigation_view_script' ], 0 );
 		}
 
+		$is_interactive_block = str_contains(
+			preg_match( '/(?<=<nav)\s[^>]+/', $block_content, $matches ) ? $matches[0] : '',
+			'data-wp-interactive',
+		);
+
 		$this->navigation_block_count++;
 		$modal_state_property = "modal_{$this->navigation_block_count}_expanded";
 
@@ -379,25 +384,43 @@ static function ( $matches ) use ( $modal_state_property, &$submenu_toggles_coun
 			return $block_content;
 		}
 
-		// Replace micromodal toggle logic with AMP state and set modal state property name based on its ID.
-		$block_content = preg_replace(
-			'/\sdata-micromodal-trigger="modal-\w+"/',
-			sprintf( ' on="tap:AMP.setState({ %1$s: !%1$s })"', esc_attr( $modal_state_property ) ),
-			$block_content
-		);
-
 		$block_content = preg_replace_callback(
 			'/(?<=<button)\s[^>]+/',
-			static function ( $matches ) use ( $modal_state_property ) {
+			static function ( $matches ) use ( $modal_state_property, $is_interactive_block ) {
 				$new_block_content = $matches[0];
 
 				// Skip submenu toggles.
 				if ( false !== strpos( $new_block_content, 'wp-block-navigation-submenu__toggle' ) ) {
 					return $new_block_content;
 				}
 
-				// Replace micromodal toggle logic bound with buttons with AMP state.
-				if ( false !== strpos( $new_block_content, ' data-micromodal-close' ) ) {
+				if ( $is_interactive_block ) {
+					// Replace `data-wp-on--click` with AMP state on submenu open button.
+					if ( false !== strpos( $new_block_content, 'wp-block-navigation__responsive-container-open' ) ) {
+						$new_block_content = preg_replace(
+							'/\sdata-wp-on--click="[^"]+"/',
+							sprintf( ' on="tap:AMP.setState({ %1$s: !%1$s })"', esc_attr( $modal_state_property ) ),
+							$new_block_content
+						);
+					}
+
+					// Replace `data-wp-on--click` with AMP state on submenu close button.
+					if ( false !== strpos( $new_block_content, 'wp-block-navigation__responsive-container-close' ) ) {
+						$new_block_content = preg_replace(
+							'/\sdata-wp-on--click="[^"]+"/',
+							sprintf( ' on="tap:AMP.setState({ %1$s: !%1$s })"', esc_attr( $modal_state_property ) ),
+							$new_block_content
+						);
+					}
+				} else {
+					// Replace micromodal toggle logic bound with buttons with AMP state to open the modal.
+					$new_block_content = preg_replace(
+						'/\sdata-micromodal-trigger="modal-\w+"/',
+						sprintf( ' on="tap:AMP.setState({ %1$s: !%1$s })"', esc_attr( $modal_state_property ) ),
+						$new_block_content
+					);
+
+					// Replace micromodal toggle logic bound with buttons with AMP state to close the modal.
 					$new_block_content = str_replace(
 						' data-micromodal-close',
 						sprintf( ' on="tap:AMP.setState({ %1$s: !%1$s })"', esc_attr( $modal_state_property ) ),
@@ -418,9 +441,6 @@ static function ( $matches ) use ( $modal_state_property ) {
 			$block_content
 		);
 
-		// Delete other micromodal-related data attributes.
-		$block_content = preg_replace( '/\sdata-micromodal-close/', '', $block_content );
-
 		// Change a responsive container class name and aria-hidden value based on the AMP state.
 		$block_content = preg_replace_callback(
 			'/(?><.+\sclass="([^"]*wp-block-navigation__responsive-container(?>\s[^"]*)?)"[^>]*>)/',

diff --git a/tests/php/test-class-amp-core-block-handler.php b/tests/php/test-class-amp-core-block-handler.php
@@ -416,7 +416,7 @@ public function get_ampify_navigation_block_test_data() {
 							<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>
 						</button>
 						<div [aria-hidden]="modal_1_expanded ? \'false\' : \'true\'" aria-hidden="true" [class]="modal_1_expanded ? \'wp-block-navigation__responsive-container is-menu-open has-modal-open\' : \'wp-block-navigation__responsive-container\'" class="wp-block-navigation__responsive-container" style="" id="modal-61e6c935457bd">
-							<div class="wp-block-navigation__responsive-close" tabindex="-1">
+							<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 								<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-61e6c935457bd-title">
 									<button aria-label="Close menu" on="tap:AMP.setState({ modal_1_expanded: !modal_1_expanded })" class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
 									<div class="wp-block-navigation__responsive-container-content" id="modal-61e6c935457bd-content">
@@ -487,7 +487,7 @@ public function get_ampify_navigation_block_test_data() {
 							<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>
 						</button>
 						<div [aria-hidden]="modal_1_expanded ? \'false\' : \'true\'" aria-hidden="true" [class]="modal_1_expanded ? \'wp-block-navigation__responsive-container is-menu-open has-modal-open\' : \'wp-block-navigation__responsive-container\'" class="wp-block-navigation__responsive-container" style="" id="modal-61e6c935457bd">
-							<div class="wp-block-navigation__responsive-close" tabindex="-1">
+							<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 								<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-61e6c935457bd-title">
 									<button aria-label="Close menu" on="tap:AMP.setState({ modal_1_expanded: !modal_1_expanded })" class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
 									<div class="wp-block-navigation__responsive-container-content" id="modal-61e6c935457bd-content">
@@ -561,7 +561,7 @@ public function get_ampify_navigation_block_test_data() {
 							<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>
 						</button>
 						<div [aria-hidden]="modal_1_expanded ? \'false\' : \'true\'" aria-hidden="true" [class]="modal_1_expanded ? \'wp-block-navigation__responsive-container hidden-by-default  is-menu-open has-modal-open\' : \'wp-block-navigation__responsive-container hidden-by-default \'" class="wp-block-navigation__responsive-container hidden-by-default " style="" id="modal-61e6c935457bd">
-							<div class="wp-block-navigation__responsive-close" tabindex="-1">
+							<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 								<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-61e6c935457bd-title">
 									<button aria-label="Close menu" on="tap:AMP.setState({ modal_1_expanded: !modal_1_expanded })" class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
 									<div class="wp-block-navigation__responsive-container-content" id="modal-61e6c935457bd-content">
@@ -640,6 +640,82 @@ public function get_ampify_navigation_block_test_data() {
 					</nav>
 				',
 			],
+			'interactivity_api_enabled'                  => [
+				'block_attrs'     => [
+					'overlayMenu'         => 'mobile',
+					'openSubmenusOnClick' => true,
+				],
+				'block_markup'    => '
+					<nav class="is-responsive items-justified-right wp-block-navigation is-horizontal is-content-justification-right is-layout-flex wp-container-core-navigation-layout-1 wp-block-navigation-is-layout-flex" aria-label="Navigation" data-wp-interactive="" data-wp-context="{&quot;core&quot;:{&quot;navigation&quot;:{&quot;overlayOpenedBy&quot;:[],&quot;type&quot;:&quot;overlay&quot;,&quot;roleAttribute&quot;:&quot;&quot;,&quot;ariaLabel&quot;:&quot;Menu&quot;}}}">
+						<button aria-haspopup="true" aria-label="Open menu" class="wp-block-navigation__responsive-container-open" data-wp-on--click="actions.core.navigation.openMenuOnClick" data-wp-on--keydown="actions.core.navigation.handleMenuKeydown">
+							<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+								<rect x="4" y="7.5" width="16" height="1.5"></rect>
+								<rect x="4" y="15" width="16" height="1.5"></rect>
+							</svg>
+						</button>
+						<div class="wp-block-navigation__responsive-container" style="" id="modal-1" data-wp-class--has-modal-open="selectors.core.navigation.isMenuOpen" data-wp-class--is-menu-open="selectors.core.navigation.isMenuOpen" data-wp-effect="effects.core.navigation.initMenu" data-wp-on--keydown="actions.core.navigation.handleMenuKeydown" data-wp-on--focusout="actions.core.navigation.handleMenuFocusout" tabindex="-1">
+							<div class="wp-block-navigation__responsive-close" tabindex="-1">
+								<div class="wp-block-navigation__responsive-dialog" data-wp-bind--aria-modal="selectors.core.navigation.ariaModal" data-wp-bind--aria-label="selectors.core.navigation.ariaLabel" data-wp-bind--role="selectors.core.navigation.roleAttribute" data-wp-effect="effects.core.navigation.focusFirstElement">
+									<button aria-label="Close menu" class="wp-block-navigation__responsive-container-close" data-wp-on--click="actions.core.navigation.closeMenuOnClick">
+										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+											<path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
+										</svg>
+									</button>
+									<div class="wp-block-navigation__responsive-container-content" id="modal-1-content">
+										<ul class="wp-block-navigation__container is-responsive items-justified-right wp-block-navigation">
+											<li class=" wp-block-navigation-item wp-block-navigation-link">
+												<a class="wp-block-navigation-item__content" href="https://example.com/sample-page/">
+													<span class="wp-block-navigation-item__label">Sample Page</span>
+												</a>
+											</li>
+											<li class=" wp-block-navigation-item wp-block-navigation-link">
+												<a class="wp-block-navigation-item__content" href="https://example.com/2023/10/16/hello-world/">
+													<span class="wp-block-navigation-item__label">Hello world!</span>
+												</a>
+											</li>
+										</ul>
+									</div>
+								</div>
+							</div>
+						</div>
+					</nav>
+				',
+				'expected_markup' => '
+					<nav class="is-responsive items-justified-right wp-block-navigation is-horizontal is-content-justification-right is-layout-flex wp-container-core-navigation-layout-1 wp-block-navigation-is-layout-flex" aria-label="Navigation" data-wp-interactive data-wp-context="{&quot;core&quot;:{&quot;navigation&quot;:{&quot;overlayOpenedBy&quot;:[],&quot;type&quot;:&quot;overlay&quot;,&quot;roleAttribute&quot;:&quot;&quot;,&quot;ariaLabel&quot;:&quot;Menu&quot;}}}">
+						<button aria-haspopup="true" aria-label="Open menu" class="wp-block-navigation__responsive-container-open" on="tap:AMP.setState({ modal_1_expanded: !modal_1_expanded })" data-wp-on--keydown="actions.core.navigation.handleMenuKeydown">
+							<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+								<rect x="4" y="7.5" width="16" height="1.5"></rect>
+								<rect x="4" y="15" width="16" height="1.5"></rect>
+							</svg>
+						</button>
+						<div [aria-hidden]="modal_1_expanded ? \'false\' : \'true\'" aria-hidden="true" [class]="modal_1_expanded ? \'wp-block-navigation__responsive-container is-menu-open has-modal-open\' : \'wp-block-navigation__responsive-container\'" class="wp-block-navigation__responsive-container" style id="modal-1" data-wp-class--has-modal-open="selectors.core.navigation.isMenuOpen" data-wp-class--is-menu-open="selectors.core.navigation.isMenuOpen" data-wp-effect="effects.core.navigation.initMenu" data-wp-on--keydown="actions.core.navigation.handleMenuKeydown" data-wp-on--focusout="actions.core.navigation.handleMenuFocusout" tabindex="-1">
+							<div class="wp-block-navigation__responsive-close" tabindex="-1">
+							<div class="wp-block-navigation__responsive-dialog" data-wp-bind--aria-modal="selectors.core.navigation.ariaModal" data-wp-bind--aria-label="selectors.core.navigation.ariaLabel" data-wp-bind--role="selectors.core.navigation.roleAttribute" data-wp-effect="effects.core.navigation.focusFirstElement">
+									<button aria-label="Close menu" class="wp-block-navigation__responsive-container-close" on="tap:AMP.setState({ modal_1_expanded: !modal_1_expanded })">
+										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+											<path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
+										</svg>
+									</button>
+									<div class="wp-block-navigation__responsive-container-content" id="modal-1-content">
+										<ul class="wp-block-navigation__container is-responsive items-justified-right wp-block-navigation">
+											<li class=" wp-block-navigation-item wp-block-navigation-link">
+												<a class="wp-block-navigation-item__content" href="https://example.com/sample-page/">
+													<span class="wp-block-navigation-item__label">Sample Page</span>
+												</a>
+											</li>
+											<li class=" wp-block-navigation-item wp-block-navigation-link">
+												<a class="wp-block-navigation-item__content" href="https://example.com/2023/10/16/hello-world/">
+													<span class="wp-block-navigation-item__label">Hello world!</span>
+												</a>
+											</li>
+										</ul>
+									</div>
+								</div>
+							</div>
+						</div>
+					</nav>
+				',
+			],
 		];
 	}