Editing pre

Hi,

I’m afraid I don’t quite understand the question here, what are you trying to achieve, and do you have an example of what it looks like with and without Gutenberg enabled?

If I add a code block (the one that created the <pre> tag) it does not add any p or div tags, so if you could describe this a bit more we can hopefully figure this out together.

Sorry for my translation into English. I wanted to say that I need to add the div and the “expand” button for the “pre” block, and also add the language data, class, but if I want to add this data, the “pre” block is converted to an HTML block.
You try to add your class to “pre” without hooks and java and you will see that this is impossible without converting the block to HTML.

<div class=”block”>
   <button>Expand</button>
    <div class=”text-hidden” tabindex=”0″>

     <pre class="">
        pre[data-lang]::before {
           display: block;
           content: attr(data-lang);
           color: firebrick;
         }
        button {
           font-size: 0.8em;
           background-color: #f5f7f9;
           border-bottom: 5px solid #eb7565;
        }
        .text-hidden {
           display: block;
           height: 100px;
           outline: none;
           overflow: hidden;
        }
     </pre>

   </div>
</div>

• This reply was modified 6 years, 7 months ago by Natalya.

I made a small GIF, where the tag pre added data-lang="HTML".
Screenshot

Of course, this is not the biggest problem, you guys did a great job. But it would be nice if the block pre was not converted to an HTML block when editing.

P.S. By the way, yesterday the tag p was automatically added to the HTML block, but today everything was fine.

Ahh, I see.

So, what is happening here is that Gutenberg looks for pre-approved attributes, the data-lang one is unknown and that’s why it gets stripped away.

We have a ticket to make sure we don’t remove manually inserted data like this from users, which I believe applies to your situation.

You could also use the Custom HTML block if you wanted complete control, if nothing else then as a temporary solution until the ticket above is resolved.

Hello Marius! Unfortunately, the block with arbitrary HTML still automatically inserts tags & nbsp; <br> and <p> when you preview the article and when you publish it. They are generated exactly in the published form. It breaks all the styles of the article. I used to use the hook and shortcode, which remove the automatic creation of tags, now it does not work, even in a classic editor, after installing Gutenberg.

/**
 * Disabling formatting of the visual editor in the right place and create the shortcode.
 */
function my_formatter($content) {
	$new_content = '';
	$pattern_full = '{(\[raw\].*?\[/raw\])}is';
	$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
	$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
 
	foreach ($pieces as $piece) {
		if (preg_match($pattern_contents, $piece, $matches)) {
			$new_content .= $matches[1];
		} else {
			$new_content .= wptexturize(wpautop($piece));
		}
	}
	return $new_content;
} 
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');
 
add_filter('the_content', 'my_formatter', 99);

The screenshot shows that when writing an article in an HTML block, there are no auto-tags, and in the published form they are generated automatically.
Screenshot

Hi,

I’m afraid I’m unable to replicate this my self.

The <br> tag is in the HTML in the top screenshot you showed me, so that is expected to be there in the output, but there are no <p> tags added by the HTML comment lines like you are showing.

Do you perhaps have other plugins (or the theme) interfering with the content? Are you able to try saving yoru content without any other plugins and a default them (such as Twenty Seventeen) and seeing if the problem persists?