oik-css can cause `Notice: WP_Interactivity_API::_process_directives was called incorrectly` unless automatic paragraph creation is disabled

bobbingwide commented 1 week ago

As discovered in seriouslybonkers.com ( see https://github.com/bobbingwide/bobbingwide/issues/137 ) there are situations where wpautop() related processing can cause WordPress 6.6 and above to display the following message

Notice: Function WP_Interactivity_API::_process_directives was called incorrectly. Interactivity directives failed to process in "" due to a missing "DIV" end tag. Please see Debugging in WordPress for more information. (This message was added in version 6.6.0.) in C:\apache\htdocs\wp63\wp-includes\functions.php on line 6087

The message wasn't of much help since the problem was actually an extra </p> tag before the <figure> tag.

<div class="entry-content alignfull wp-block-post-content has-medium-font-size has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained">
</p>
<figure data-wp-context="{&quot;imageId&quot;:&quot;671bb5fe5d8cc&quot;}" data-wp-interactive="core/image" class="wp-block-image size-full is-resized wp-lightbox-container"><img fetchpriority="high" decoding="async" width="1024" height="1024" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on-async--click="actions.showLightbox" data-wp-on-async--load="callbacks.setButtonStyles" data-wp-on-async-window--resize="callbacks.setButtonStyles" src="https://s.b/wp63/wp-content/uploads/2023/08/DALL·E-2024-02-22-18.46.35-A-digital-illustration-of-a-surreal-object-resembling-a-piece-of-butter-or-cheese-with-wavy-ribbon-like-textures-on-its-surface.-Its-suspended-in-th.webp" alt="" class="wp-image-11" style="width:323px;height:auto" srcset="https://s.b/wp63/wp-content/uploads/2023/08/DALL·E-2024-02-22-18.46.35-A-digital-illustration-of-a-surreal-object-resembling-a-piece-of-butter-or-cheese-with-wavy-ribbon-like-textures-on-its-surface.-Its-suspended-in-th.webp 1024w, https://s.b/wp63/wp-content/uploads/2023/08/DALL·E-2024-02-22-18.46.35-A-digital-illustration-of-a-surreal-object-resembling-a-piece-of-butter-or-cheese-with-wavy-ribbon-like-textures-on-its-surface.-Its-suspended-in-th-300x300.webp 300w, https://s.b/wp63/wp-content/uploads/2023/08/DALL·E-2024-02-22-18.46.35-A-digital-illustration-of-a-surreal-object-resembling-a-piece-of-butter-or-cheese-with-wavy-ribbon-like-textures-on-its-surface.-Its-suspended-in-th-150x150.webp 150w, https://s.b/wp63/wp-content/uploads/2023/08/DALL·E-2024-02-22-18.46.35-A-digital-illustration-of-a-surreal-object-resembling-a-piece-of-butter-or-cheese-with-wavy-ribbon-like-textures-on-its-surface.-Its-suspended-in-th-768x768.webp 768w" sizes="(max-width: 1024px) 100vw, 1024px" />
<button
            class="lightbox-trigger"
            type="button"
            aria-haspopup="dialog"
            aria-label="Enlarge image"
            data-wp-init="callbacks.initTriggerButton"
            data-wp-on-async--click="actions.showLightbox"
            data-wp-style--right="state.imageButtonRight"
            data-wp-style--top="state.imageButtonTop"
        >
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
                <path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
            </svg>
        </button>
</figure>
</div>

This extra tag was added by the wpautop() code run by oik-css in a slightly different order to that run in vanilla WordPress.

Steps to reproduce

Activate oik
Activate oik-css
Visit oik options Overview
In oik-CSS options ensure "Disable automatic paragraph creation is not checked.
Create a post
Insert an empty paragraph
Insert an image
Click on the link tool icon

Choose Expand on click
Publish the post
View the post - it will display OK
View the home page
The unwanted Notice: will be displayed.

Workaround

Either

From the dashboard choose oik options > Overview
In the oik-CSS options section select the checkbox to Disable automatic paragraph creation

OR

remove the empty paragraph

Note: This alternative workaround may only work in this trivial scenario

Proposed solution

The need to run wpautop() has significantly reduced with block based themes.
In fact it's probably safe to say that wpautop() processing is a right pain.
oik-css was written a long time before the block editor appeared
but now the altered behaviour - written to cater for many oik based shortcode - is needed less often.

Before altering the behaviour so that oik-css will no longer fiddle around with hook priorities I plan to investigate where the problem actually occurs when oik-css is activated and to see if there's a simple fix.

bobbingwide commented 1 week ago

Note: While attempting to simplify the scenario even further I removed everything from the blog home template except the post content block. The problem went away!

The minimum template to produce the problem consists of:

Query loop
  Post Template
    Content

bobbingwide commented 1 week ago

Before altering the behaviour so that oik-css will no longer fiddle around with hook priorities I plan to investigate where the problem actually occurs when oik-css is activated and to see if there's a simple fix.

In block based themes the problem occurs with the simplest scenario ( image with expand on click and an empty paragraph) It's bw_wpautop, hooked in at priority 99, that adds the unwanted end paragraph tags.

With a classic theme, such as Twenty Eleven, the problem will occur if a simplest scenario post is displayed in a post_content block in a query loop.

It even occurs within the block editor!

Again, it's bw_wpautop that causes the problem.

I conclude that we can't just automatically disable bw_wpautop processing for block based themes... The problem also occurs with classic themes and we should cater for them too. Therefore it looks like it's time to consider retiring bw_wpautop altogether.

bobbingwide commented 1 week ago

I made a change in oik-css.php's oik_css_oik_loaded() function to disable bw_wpautop() processing when it's a block based theme.

$theme         =wp_get_theme();
$is_block_theme=$theme->is_block_theme();
if ( $is_block_theme ) {
    bw_better_autop( false );
} else {
    $bw_disable_autop=bw_get_option( "bw_autop", "bw_css_options" );
    $bw_autop        = ! $bw_disable_autop;
    bw_better_autop( $bw_autop );
}

Now several of the PHPUnit tests for oik fail. These tests were written when wpautop processing was adding unwanted paragraphs. The following is a comment from test_sc__snippet()

* -  The test is dependent upon oik-css being active -
*  and for Disable automatic paragraph creation to be deselected; it alters automatic paragraph creation

I don't want to change the tests so that they require a classic theme. There are three options to resolve this:

Call bw_better_autop( true ) in each of the test cases that fails.
OR change the expected HTML
OR change the calls to bw_better_autop() in oik_css_oik_loaded() ... if it's a block theme pass true when PHP is being run in the command line and false otherwise.

I've chosen 3. - the pragmatic option; it's less change. Note: I'll still have to document the Notice that may still be produced for classic themes.

bobbingwide / oik-css