navigation-block-interactivity.php — Widget Options – Advanced Conditional Visibility for Gutenberg Blocks & Classic Widgets 4.0.7

widget-options / includes / widgets / gutenberg / lib / experimental / interactivity-api / navigation-block-interactivity.php

widget-options / includes / widgets / gutenberg / lib / experimental / interactivity-api Last commit date

navigation-block-interactivity.php 1 year ago script-loader.php 1 year ago

navigation-block-interactivity.php

241 lines

1	<?php
2	/**
3	* Extend WordPress core navigation block to use the Interactivity API.
4	* Interactivity API directives are added using the Tag Processor while it is experimental.
5	*
6	* @package gutenberg
7	*/
8
9	/**
10	* Add Interactivity API directives to the navigation block markup using the Tag Processor
11	* The final HTML of the navigation block will look similar to this:
12	*
13	* <nav
14	* data-wp-island
15	* data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": true, "roleAttribute": "" } } }'
16	* >
17	* <button
18	* class="wp-block-navigation__responsive-container-open"
19	* data-wp-on.click="actions.core.navigation.openMenu"
20	* data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
21	* >
22	* <div
23	* class="wp-block-navigation__responsive-container"
24	* data-wp-class.has-modal-open="context.core.navigation.isMenuOpen"
25	* data-wp-class.is-menu-open="context.core.navigation.isMenuOpen"
26	* data-wp-bind.aria-hidden="!context.core.navigation.isMenuOpen"
27	* data-wp-effect="effects.core.navigation.initModal"
28	* data-wp-on.keydow="actions.core.navigation.handleMenuKeydown"
29	* data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
30	* tabindex="-1"
31	* >
32	* <div class="wp-block-navigation__responsive-close">
33	* <div
34	* class="wp-block-navigation__responsive-dialog"
35	* data-wp-bind.aria-modal="context.core.navigation.isMenuOpen"
36	* data-wp-bind.role="selectors.core.navigation.roleAttribute"
37	* data-wp-effect="effects.core.navigation.focusFirstElement"
38	* >
39	* <button
40	* class="wp-block-navigation__responsive-container-close"
41	* data-wp-on.click="actions.core.navigation.closeMenu"
42	* >
43	* <svg>
44	* <button>
45	* MENU ITEMS
46	* </div>
47	* </div>
48	* </div>
49	* </nav>
50	*
51	* @param string $block_content Markup of the navigation block.
52	*
53	* @return string Navigation block markup with the proper directives
54	*/
55	function gutenberg_block_core_navigation_add_directives_to_markup( $block_content ) {
56	$w = new WP_HTML_Tag_Processor( $block_content );
57	// Add directives to the `<nav>` element.
58	if ( $w->next_tag( 'nav' ) ) {
59	$w->set_attribute( 'data-wp-island', '' );
60	$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": true, "roleAttribute": "" } } }' );
61	};
62
63	// Add directives to the open menu button.
64	if ( $w->next_tag(
65	array(
66	'tag_name' => 'BUTTON',
67	'class_name' => 'wp-block-navigation__responsive-container-open',
68	)
69	) ) {
70	$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenu' );
71	$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
72	$w->remove_attribute( 'data-micromodal-trigger' );
73	} else {
74	// If the open modal button not found, we handle submenus immediately.
75	$w = new WP_HTML_Tag_Processor( $w->get_updated_html() );
76
77	// Add directives to the menu container.
78	if ( $w->next_tag(
79	array(
80	'tag_name' => 'UL',
81	'class_name' => 'wp-block-navigation__container',
82	)
83	) ) {
84	$w->set_attribute( 'data-wp-class.is-menu-open', 'context.core.navigation.isMenuOpen' );
85	$w->set_attribute( 'data-wp-bind.aria-hidden', '!context.core.navigation.isMenuOpen' );
86	$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
87	$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
88	$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
89	$w->set_attribute( 'tabindex', '-1' );
90	};
91
92	gutenberg_block_core_navigation_add_directives_to_submenu( $w );
93
94	return $w->get_updated_html();
95	}
96
97	// Add directives to the menu container.
98	if ( $w->next_tag(
99	array(
100	'tag_name' => 'DIV',
101	'class_name' => 'wp-block-navigation__responsive-container',
102	)
103	) ) {
104	$w->set_attribute( 'data-wp-class.has-modal-open', 'context.core.navigation.isMenuOpen' );
105	$w->set_attribute( 'data-wp-class.is-menu-open', 'context.core.navigation.isMenuOpen' );
106	$w->set_attribute( 'data-wp-bind.aria-hidden', '!context.core.navigation.isMenuOpen' );
107	$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
108	$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
109	$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
110	$w->set_attribute( 'tabindex', '-1' );
111	};
112
113	// Remove micromodal attribute.
114	if ( $w->next_tag(
115	array(
116	'tag_name' => 'DIV',
117	'class_name' => 'wp-block-navigation__responsive-close',
118	)
119	) ) {
120	$w->remove_attribute( 'data-micromodal-close' );
121	};
122
123	// Add directives to the dialog container.
124	if ( $w->next_tag(
125	array(
126	'tag_name' => 'DIV',
127	'class_name' => 'wp-block-navigation__responsive-dialog',
128	)
129	) ) {
130	$w->set_attribute( 'data-wp-bind.aria-modal', 'context.core.navigation.isMenuOpen' );
131	$w->set_attribute( 'data-wp-bind.role', 'selectors.core.navigation.roleAttribute' );
132	$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.focusFirstElement' );
133	};
134
135	// Add directives to the close button.
136	if ( $w->next_tag(
137	array(
138	'tag_name' => 'BUTTON',
139	'class_name' => 'wp-block-navigation__responsive-container-close',
140	)
141	) ) {
142	$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.closeMenu' );
143	$w->remove_attribute( 'data-micromodal-close' );
144	};
145
146	// Submenus.
147	gutenberg_block_core_navigation_add_directives_to_submenu( $w );
148
149	return $w->get_updated_html();
150	};
151
152	/**
153	* Add Interactivity API directives to the navigation-submenu and page-list blocks markup using the Tag Processor
154	* The final HTML of the navigation-submenu and the page-list blocks will look similar to this:
155	*
156	* <li
157	* class="has-child"
158	* data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }'
159	* >
160	* <button
161	* class="wp-block-navigation-submenu__toggle"
162	* data-wp-on.click="actions.core.navigation.openMenu"
163	* data-wp-bind.aria-expanded="context.core.navigation.isMenuOpen"
164	* data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
165	* data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
166	* >
167	* </button>
168	* <span>Title</span>
169	* <ul
170	* class="wp-block-navigation__submenu-container"
171	* data-wp-effect="effects.core.navigation.initModal"
172	* data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
173	* data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
174	* >
175	* SUBMENU ITEMS
176	* </ul>
177	* </li>
178	*
179	* @param string $w Markup of the navigation block.
180	*
181	* @return void
182	*/
183	function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) {
184	while ( $w->next_tag(
185	array(
186	'tag_name' => 'LI',
187	'class_name' => 'has-child',
188	)
189	) ) {
190	// Add directives to the parent `<li>`.
191	$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }' );
192
193	// Add directives to the toggle submenu button.
194	if ( $w->next_tag(
195	array(
196	'tag_name' => 'BUTTON',
197	'class_name' => 'wp-block-navigation-submenu__toggle',
198	)
199	) ) {
200	$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenu' );
201	$w->set_attribute( 'data-wp-bind.aria-expanded', 'context.core.navigation.isMenuOpen' );
202	$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
203	$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
204	};
205
206	// Add directives to the `<ul>` containing the subitems.
207	if ( $w->next_tag(
208	array(
209	'tag_name' => 'UL',
210	'class_name' => 'wp-block-navigation__submenu-container',
211	)
212	) ) {
213	$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
214	$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
215	$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
216	};
217	// Iterate through subitems if exist.
218	gutenberg_block_core_navigation_add_directives_to_submenu( $w );
219	}
220	};
221
222	add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 1 );
223
224	// Enqueue the `interactivity.js` file with the store.
225	add_filter(
226	'block_type_metadata',
227	function ( $metadata ) {
228	if ( 'core/navigation' === $metadata['name'] ) {
229	wp_register_script(
230	'wp-block-navigation-view',
231	gutenberg_url( 'build/block-library/interactive-blocks/navigation.min.js' ),
232	array( 'wp-interactivity-runtime' )
233	);
234	$metadata['viewScript'] = array( 'wp-block-navigation-view' );
235	}
236	return $metadata;
237	},
238	10,
239	1
240	);
241