[wp-trac] [WordPress Trac] #62522: Whitespace can trip up `WP_Interactivity_API::_process_directives()` when there is a `core/button` `text` block binding

[WordPress Trac]

#62522: Whitespace can trip up `WP_Interactivity_API::_process_directives()` when
there is a `core/button` `text` block binding
-------------------------------+-----------------------------
 Reporter:  wongjn             |      Owner:  (none)
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Interactivity API  |    Version:  6.7.1
 Severity:  normal             |   Keywords:
  Focuses:                     |
-------------------------------+-----------------------------
 == Steps to reproduce

 1. Set `WP_DEBUG` to `true` in `wp-config.php`.
 2. Install clean WordPress 6.7.1.
 3. Activate Twenty Twenty-Four theme.
 4. Replace `/wp-content/themes/twentytwentyfour/templates/single.html`
 with:
 {{{
 <!-- wp:query
 {"queryId":0,"query":{"perPage":10,"pages":"0","offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[],"format":[]},"enhancedPagination":true,"layout":{"type":"constrained"}}
 -->
 <div class="wp-block-query">
         <!-- wp:post-template
 {"layout":{"type":"default","columnCount":3}} -->
                 <!-- wp:buttons -->
                 <div class="wp-block-buttons"><!-- wp:button
 {"metadata":{"bindings":{"text":{"source":"core/post-
 meta","args":{"key":"foo"}}}}} -->
                         <div class="wp-block-button"><a class="wp-block-
 button__link wp-element-button">Get Tickets</a></div>
                         <!-- /wp:button -->
                 </div>
                 <!-- /wp:buttons -->
         <!-- /wp:post-template -->
 </div>
 <!-- /wp:query -->
 }}}
 5. Append the following to `/wp-
 content/themes/twentytwentyfour/functions.php`:
 {{{#!php
 function _test() {
         $args = array(
                 'type'              => 'string',
                 'single'            => true,
                 'sanitize_callback' => '',
                 'show_in_rest'      => true,
                 'revisions_enabled' => true,
         );
         register_post_meta( 'post', 'foo', $args );
         update_post_meta(1, 'foo', 'test' );
 }
 add_action( 'init', '_test' );
 }}}
 6. Navigate to `/index.php?p=1` (the Hello World post) in your browser.
 7. Notice no errors.
 8. Replace `/wp-content/themes/twentytwentyfour/templates/single.html`
 with:
 {{{
 <!-- wp:query
 {"queryId":0,"query":{"perPage":10,"pages":"0","offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[],"format":[]},"enhancedPagination":true,"layout":{"type":"constrained"}}
 -->
 <div class="wp-block-query">
         <!-- wp:post-template
 {"layout":{"type":"default","columnCount":3}} -->
                 <!-- wp:buttons -->
                 <div class="wp-block-buttons">
 <!-- wp:button {"metadata":{"bindings":{"text":{"source":"core/post-
 meta","args":{"key":"foo"}}}}} -->
                         <div class="wp-block-button"><a class="wp-block-
 button__link wp-element-button">Get Tickets</a></div>
                         <!-- /wp:button -->
                 </div>
                 <!-- /wp:buttons -->
         <!-- /wp:post-template -->
 </div>
 <!-- /wp:query -->
 }}}
 9. Navigate to `/index.php?p=1` (the Hello World post) in your browser.
 10. Notice an error displayed:
 {{{
 Notice: Function WP_Interactivity_API::_process_directives was called
 <strong>incorrectly</strong>. Interactivity directives failed to process
 in "" due to a missing "LI" end tag. Please see <a
 href="https://developer.wordpress.org/advanced-administration/debug/debug-
 wordpress/">Debugging in WordPress</a> for more information. (This message
 was added in version 6.6.0.) in /path/to/wordpress/wp-
 includes/functions.php on line 6114
 }}}

 == Other remarkables

 * When the error is displayed, the markup has some HTML in uppercase:
 {{{
 <DIV class="wp-block-button"><a class="wp-block-button__link wp-element-
 button">test</a></DIV>
 }}}
 * Any amount of newline/whitespace seems to cause the error:
 {{{
 <!-- wp:query
 {"queryId":0,"query":{"perPage":10,"pages":"0","offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[],"format":[]},"enhancedPagination":true,"layout":{"type":"constrained"}}
 -->
 <div class="wp-block-query">
         <!-- wp:post-template
 {"layout":{"type":"default","columnCount":3}} -->
                 <!-- wp:buttons -->
                 <div class="wp-block-buttons">
                         <!-- wp:button
 {"metadata":{"bindings":{"text":{"source":"core/post-
 meta","args":{"key":"foo"}}}}} -->
                         <div class="wp-block-button"><a class="wp-block-
 button__link wp-element-button">Get Tickets</a></div>
                         <!-- /wp:button -->
                 </div>
                 <!-- /wp:buttons -->
         <!-- /wp:post-template -->
 </div>
 <!-- /wp:query -->
 }}}
 * Including the same snippet from _Copy All Blocks_ command in the editor,
 but with a newline before the opening {{{core/button}}} comment:
 {{{
 <!-- wp:query
 {"queryId":0,"query":{"perPage":10,"pages":"0","offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[],"format":[]},"enhancedPagination":true,"layout":{"type":"constrained"}}
 -->
 <div class="wp-block-query"><!-- wp:post-template
 {"layout":{"type":"default","columnCount":3}} -->
         <!-- wp:buttons {"layout":{"type":"flex"}} -->
         <div class="wp-block-buttons">
 <!-- wp:button {"metadata":{"bindings":{"text":{"source":"core/post-
 meta","args":{"key":"foo"}}}}} -->
         <div class="wp-block-button"><a class="wp-block-button__link wp-
 element-button">Get Tickets</a></div>
         <!-- /wp:button --></div>
         <!-- /wp:buttons -->
         <!-- /wp:post-template --></div>
         <!-- /wp:query -->
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62522>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform