Open NicktheGeek opened 2 years ago
Does this happen with the other built-in text formats, @NicktheGeek?
@aurooba it does not, but they are all using different HTML tags while this relies on a span with a class.
It may be that something changed in registering the text format as well, and I can update that in the plugin. https://github.com/reaktivstudios/screen-reader-text-format/blob/primary/src/sr-only/index.js#L41
This issue was reviewed in today's Editor Bug Scrub. Are you able to confirm if this is still an issue in the latest version of Gutenberg and WordPress?
@NicktheGeek Just checking in once more to see if this issue can still be replicated with the latest version of WordPress and Gutenberg, otherwise we'll go ahead and close it out. Thanks!
This issue was reviewed in today's Editor Bug Scrub. We have been unable to replicate using the latest versions of Gutenberg and WordPress. See the screenshot below. It appears everything is working correctly. Therefore, I am going to close this issue. If anyone can replicate it in the future, please feel free to reopen this issue with additional information.
@ndiego This is the issue that I mentioned to you. I was just now able to reproduce this same issue in 6.5.5 and Twenty Twenty-Four.
Here's an updated screen recording.
It may just be a bug with the Screen Reader Text Format plugin. I compared it to the Lang Attribute for the Block Editor plugin which also uses spans, but it doesn't have this problem, so there must be something different about the implementation.
Thanks @amberhinds, I am going to reopen this for further investigation.
I was able to replicate by building a demo plugin that registers a rich text format using a span
, which is the same as the Screen Reader Text Format plugin. Still investigating, but my guess is that it's something specific to the span
element.
After some further testing, I have narrowed down the issue. It appears to happen whenever a text format includes additional attributes like class
, lang
, etc. The interesting thing is that the formatting breaks only when the text if first formatted. If you save and refresh the page, everything works as expected.
This is difficult to explain in words, so check out the video walkthrough below. Note that this issue can be replicated with custom text formats as well as specific Core-provided text formats that use additional attributes like the Langauge option.
https://github.com/user-attachments/assets/d1501447-bc81-4548-853a-bcb1abb0246c
Testing
Use the following code to register a text format that utilizes a class.
wp.domReady(() => {
const { registerFormatType } = wp.richText;
const { toggleFormat } = wp.richText;
const { RichTextToolbarButton } = wp.editor;
registerFormatType( 'my-custom-format/testing', {
title: 'Testing',
tagName: 'span',
className: 'testing',
edit( { isActive, value, onChange } ) {
return (
<RichTextToolbarButton
icon="editor-code"
title="Testing"
onClick={ () => onChange(
toggleFormat(
value,
{ type: 'my-custom-format/testing' }
)
) }
isActive={isActive}
/>
);
},
} );
} );
cc @ellatrix
Description
This appears to be a bug introduced in WordPress 5.9. I have a plugin that adds a screen reader only text format and then highlights the content with the markup in the WordPress editor while hiding the content visually on the front end.
This worked previously, but it was reported to me last night that this has started highlighting each individual character. It seems this happens when selecting the screen reader text format, then typing. If one types the content, highlights it, then selects the text format, it applies to the whole block of text.
Step-by-step reproduction instructions
The first content will be wrapped in a single span and highlight the content correctly. The second content will wrap each character individually.
Screenshots, screen recording, code snippet
Screen Recording
Environment info
note: Did not check "Please confirm that you have tested with all plugins deactivated except Gutenberg." because Gutenberg is not active and the Screen Reader Text Format plugin is highlighting the issue with the text format applying the span to individual characters.
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
No