Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Account for Code blocks containing rich text in Gutenberg 9.2+ #205

Open
westonruter opened this issue Oct 23, 2020 · 1 comment · May be fixed by #698
Open

Account for Code blocks containing rich text in Gutenberg 9.2+ #205

westonruter opened this issue Oct 23, 2020 · 1 comment · May be fixed by #698

Comments

@westonruter
Copy link
Owner

In Gutenberg 9.2, Code blocks now allow rich text editing (via WordPress/gutenberg#24689). This means you can have a Code block with formatting:

<!-- wp:code -->
<pre class="wp-block-code"><code>if ( value === 'something' ) {
    <strong><span style="color:#a30000" class="has-inline-color">// Do something here!</span></strong>
}</code></pre>
<!-- /wp:code -->

In the editor this appears as:

image

On the frontend with this plugin active, however, it appears as:

image

We're not currently expecting markup to be inside of the highlighted text. This means the markup is getting escaped, and the autodetection is also failing. Here it's detecting that the language is xml as opposed to js.

I'm not sure how best to support highlighting Code blocks which already contain rich formatting. One option would be just to bail if the content contains any child elements. That would at least prevent the block from breaking, but we wouldn't get any highlighting.

In order to support highlighting text that also has tags, perhaps we could strip the tags out, do the highlighting, and then re-add the the tags. This could be challenging to correctly re-add the tags in the right places.

@westonruter westonruter linked a pull request Mar 9, 2023 that will close this issue
@westonruter
Copy link
Owner Author

westonruter commented Feb 14, 2024

Something just came to mind related to this. The current mechanism for highlighting lines is not ideal since it's easy for the highlighted lines to shift around when adding content before the highlighted lines. Well, it turns out that Gutenberg has highlighting built-in now! And since rich text is allowed in a Code block, this can be done by just selecting the text you want to highlight, not even an entire line:

image

image

This is way better than having to enter the line numbers manually (moreover as the line numbers currently aren't even shown in the editor):

image

Only thing is that it would be nice if the highlight could extend to the entire line and not just the text selected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant