Duplicate horizontal scrollbars on blocks in editor

[helgatheviking]

Hi Weston,

Reporting this from Twitter.

Status: Your plugin active theme: Twenty Twenty One WP: 5.6.2 Gutenberg plugin: none

I am seeing the code block get 2 horizontal scrollbars.

One appears to be on the <pre> element and the second on the nested <div>. Here's the markup showing in the console.

<pre id="block-ef27753d-7549-4f66-b7e8-ca54144eeca7" tabindex="0" role="group" aria-label="Block: Code" data-block="ef27753d-7549-4f66-b7e8-ca54144eeca7" data-type="core/code" data-title="Code" class="wp-block-code block-editor-block-list__block wp-block"><div role="textbox" aria-multiline="true" aria-label="Code" style="white-space: pre-wrap;" class="block-editor-rich-text__editable shcb-textedit  rich-text" contenteditable="true">apply_filters( 'name_of_target_filter', $variable_getting_filtered, $priority, $other_arg ); <br data-rich-text-line-break="true"></div><div aria-hidden="true" class="code-block-overlay" style="font-family: Menlo, Consolas, monaco, monospace; font-size: 18px; overflow: auto; overflow-wrap: break-word; resize: none;"><span class="loc">apply_filters( 'name_of_target_filter', $variable_getting_filtered, $priority, $other_arg ); </span><span class="loc"> </span></div></pre>

[westonruter]

Please switch to the code editor tab and copy the underlying block markup, even the whole post_content for your post.

[helgatheviking]

Here's the HTML for that block

<pre class="wp-block-code"><code>apply_filters( 'name_of_target_filter', $variable_getting_filtered, $priority, $other_arg ); 
</code></pre>

Not sure about how to grab the entire post_content via the block editor.

[westonruter]

Not sure about how to grab the entire post_content via the block editor.

Use the triple dot menu button and select “Code editor”:

You'll then be able to include the HTML comment markup that delineate the blocks.

[helgatheviking]

<!-- wp:paragraph -->
<p>Ok, so you’ve read my previous articles on PHP basics and how to use WordPress action hooks. Now you want to play with the big boys and girls and try your hand at filters. Just a reminder that you are still essentially learning a new language. Be patient with yourself. It took me close to a year to really understand filters, so if I can help you learn it quicker than that I’ll consider this a successful article.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In my discussion of hooks and functions I have described the system of hooks in WordPress as being similar to a parking lot. The hooks are like spaces, the cars are like functions that can be parked anywhere and can be moved around. To expound on this metaphor, (or to beat it to death) I think a filter is similar to changing something about the car while leaving it in the same place. A filter is like a magic function box that takes a value in ( remember I talked about parameters in by Basics tutorial ) do something with it and send it back. So you have a red Porsche on the lot, send it to a filter and it might become a blue Porsche. Or a black pickup truck. Whatever. But it will still be parked in the back, 2 spots from the end.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When browsing WordPress core, themes and plugins, you will be alerted to the availability of a filter by the appearance of the <code>apply_filters()</code> function. In generic terms it will look like so:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>apply_filters( 'name_of_target_filter', $variable_getting_filtered, $priority, $other_arg ); 
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>It might look like:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>return apply_filters( 'name_of_target_filter', $variable_getting_filtered, $priority, $other_arg ); 
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>or:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>echo apply_filters( 'name_of_target_filter', $variable_getting_filtered, $priority, $other_arg ); 
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>or even:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$variable_getting_filtered = apply_filters( 'name_of_target_filter', $variable_getting_filtered, $priority, $other_arg ); 
</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>Parameters for the Filters</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>But I repeat, the big tip off is the <code>apply_filters()</code> function. The <code>apply_filters()</code> function can take an unlimited number of parameters but only the first two are required. 1. The first is the name of the filter. I was very confused early on because the Thematic framework tended to name the filters the same thing as the functions that contained them. And then in the one instance where they were different, I couldn’t get my filter to work for anything. I swore and threw things, cried and probably shaved a few days off my life from the stress. Turns out their sharing names was a convenience factor that makes a lot more sense to me now. So, just remember that first parameter is the filter’s name. 2. This is an important one, because this parameter is the variable that your function will receive. This is the value we’re going to change. This is the red car that we will turn blue. 3. This it the priority. Just like with adding functions to hooks, this controls the order that filter functions will be applied should there be more than one. The default is 10, so if you need your filter to run before that you’d use a lower number. This is rare, and usually you need to run your filters after others, so you’d want to use a higher number. In fact, until you are sure that you are conflicting with another function you can pretty much just leave it at 10. 4+. These are other variables that might give you some useful information for manipulating the variable getting filtered. Remember we talked about scope in the PHP Basics. Instead of declaring these globally and hoping they arrive intact, WordPress will send your filtered variable along with some friends.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>A Filter with Training Wheels</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In super generic terms let’s take a look at the basic set up for filtering.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>function sample_filter_function( $in_from_function, $other_arg ) {
    $out_to_function = $in_from_function . " add some bacon here!";
    return $out_to_function; 
} 
add_filter('name_of_target_filter','sample_filter_function', $priority, 2 ); 
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>The structure is almost exactly the same as that for add_action(). In reality, we are adding an action, just of a slightly different type: one that modifies a specific variable’s value. One thing to note here, is the number 2. This is the number of parameters that you are passing into the function. You’ll always pass 1 variable ( ie. the variable that you are filtering ) and in this case you wouldn’t even need to declare it. That’s the default value, just as 10 is the default value for #priority. However, some filters provide access to other variables (like our fake $other_arg), and if you want to use them in your filter function then you have to name them inside the parentheses and then write the correct number at the end of the <code>add_filter()</code> statement.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you have 2 parameters in the function, but don’t have the number 2 at the end of <code>add_filter()</code> you will get White Screen of Death. If you have the number 2, but don’t declare two parameters, guess what, you will also get WSOD. So make sure your parameters match up. And you absolutely, must, sans doute, return a value. If you do not, that is essentially the same as returning a null string. If you echo something here, it will likely not appear where you expect it, so don’t. RETURN, RETURN, RETURN.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Remember in my PHP basics I talked about two functions playing catch. The return statement, is you throwing your modified version of the variable back to the apply_filters() function so that WordPress can continue on its merry way, but using your value now.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>You’re a Real Boy Now, Pinocchio.</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A Real Filter If you’ve managed to read all this, then… well… Bless you. I want to end on a real filter that you can drop into your theme’s functions.php and actually see a working result.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>function kia_the_title( $title ) { 
    $title .= " TACOS!"; 
    return $title; 
} 
add_filter( 'the_title', 'kia_the_title' ); 
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>I am using Tacos in my testing code because tacos are delicious. WordPress has a filter called <code>the_title</code> that lets you modify the title of every post! As written above it will literally add TACOS everywhere <code>the_title()</code> is called. Tacos everywhere, all the time has its appeal, sure, but I will whet your appetite with some neato WordPress conditional logic that will only add Tacos to the titles in the main loop, and only on the front-end.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>function kia_the_title( $title ) { 
    if ( ! is_admin() &amp;&amp; is_main_loop() ) { 
        $title .= " TACOS!"; 
    } 
    return $title; 
} 
add_filter( 'the_title','kia_the_title' );
</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>Conclusion</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I hope that helps things make more sense. Remember, THIS IS HARD!! Do not be discouraged if you don’t get it right away. I cannot provide specific support in the comments ( <a href="http://kathyisawesome.com/contact">Hire Me, instead!</a> but do let me know if there are places where I could be more clear.</p>
<!-- /wp:paragraph -->

Possibly of note, I do believe this post (because it is soooo old!) was converted to blocks.

[westonruter]

Sorry for the delay.

I just checked and here is what I see in WP 5.7 w/o Gutenberg in the editor:

On macOS the scrollbars are hidden by default, so I just changed the setting to always show them:

And now in fact I do see the doubled scrollbars:

The fix appears to be simply to hide the overflow for the .code-block-overlay element.

[helgatheviking]

No apologies needed for free software! :) Sounds like you found the issue though.

[westonruter]

Fix opened in #302.