How do I highlight text (e.g. )?

  • jobrodie · Member ·

    Hello

    Despite the .org part of my website it is running on dot com and isn’t self-hosted.

    Today I struggled to work out how to do this in the Block Editor so gave up and did it in Classic Editor (where it’s easy). Possibly the solution is just to create posts in Classic Editor then save, reopen and convert to Blocks once ready to publish, but it would be useful to know how how to do the following, thank you.

    Yellow highlights (happy to hear about other colours)
    I wanted to highlight a bit of text in yellow. In Classic Editor it’s just a matter of editing in text mode and sticking <mark> </mark> around the word or phrase. Tried this on Block Editor by adding that to the code but all it did was cause problems for the block which couldn’t be recovered. Trying to fix that caused knock-on misery.

    In the end I had to copy and paste the text of the post into notepad to wipe out any formatting, then re-add all the links and headings and so on and publish it, with the yellow highlight, as a Classic Editor-ed post.

    Greying out text
    I thought I’d worked out how to grey out text while in the Block Editor, by calling up the Classic Block (using /classic or + and typing classic) and the incredibly useful panel re-appeared. However when I clicked on some text to alter its colour the Classic panel disappeared.

    Doing the above (“/classic” but the option pops up before you’ve finished typing the word) brings up this panel. Sadly it’s rather skittish.

    I find the Block Editor very unintuitive and incredibly frustrating (deleting anything using the backspace key often just flings me back into the Admin interface as it seems to get confused between delete and “go backwards one page”). It just feels like a constant fight and having to learn new ways of doing things when previously everything was easily available to me and seemed straightforward. Also, a whole bunch of commented out stuff in the code just adds padding and makes it harder to interact with… but I digress :) Image below is from the same blog: one post in Classic Editor, one using the Blocks Editor.

    That said, I do like the Reusable Blocks though. That is very useful.

    Thank you
    Jo

    The blog I need help with is: (visible only to logged in users)

  • staff-totoro · Staff ·

    Hi there,

    I wanted to highlight a bit of text in yellow. In Classic Editor it’s just a matter of editing in text mode and sticking around the word or phrase. Tried this on Block Editor by adding that to the code but all it did was cause problems for the block which couldn’t be recovered. Trying to fix that caused knock-on misery.

    There is a built in formatting option to highlight text in the block editor that you may not be aware of. You can see it in action here:

    I’m not sure I understood how you use greyed-out text on your site, but the highlight option may work for that as well since you can set text color and background color independently.

    deleting anything using the backspace key often just flings me back into the Admin interface as it seems to get confused between delete and “go backwards one page”.

    That sounds rather unusual, I have not heard of this issue before. Can you walk us through what you are doing here so we can try and retrace your steps on this end. Even better if you can record your screen and share a video of what happens. You can upload the video to your media library and let us know so we can take a look.

    Also, a whole bunch of commented out stuff in the code just adds padding and makes it harder to interact with… but I digress :)

    It sounds like part of what made the classic editor work well for you was the ability to switch to the code editor to make tweaks to the HTML directly? Your example about ading highlighting to words hints at this working style.

    Generally speaking it’s not recommended to edit the block editor code directly, and it’s different from the way you might edit code in the classic editor. With block code, if you’re not precise about how you are authoring it, it usually results in a block error of some kind. Although it contains HTML, it does not respond to direct HTML edits well since it was not designed with direct editing in mind.

    If you find yourself trying to edit code to the block editor to do something that you used to do in the classic editor, you can let us know and we’re happy to confirm if there is a block-native way to do that via settings.

    I find the Block Editor very unintuitive and incredibly frustrating […] That said, I do like the Reusable Blocks though. That is very useful.

    As a long time WordPress user (long before I came to work here) the switch to the block editor was not an easy one for me. So I understand what you are saying. But over time as I’ve used it more I’ve run across things like that, things you can do with blocks that you can’t do otherwise.

    These days I wouldn’t consider switching back, but you can use the classic editor (natively, not the classic block) if you wish. It’s still accessible and you can find it by following the steps here. But I’m hoping you’ll stick with it though, and maybe I can make a believer out of you one block at a time. :)

    Thanks!

  • staff-totoro · Staff ·

    Hi again,

    deleting anything using the backspace key often just flings me back into the Admin interface

    Out of curiosity, do you have your browser configured to use the backspace key as the “back button” that takes you to the previous page in browser history?

    Typically this is disabled in Firefox (to prevent data loss in forms) but I was curious to know if you use that trick on your local computer? Also, do you have this same issue (deleting text) sends you back to admin if you use a different browser from the one you normally do?

    Thanks for the additional info!

  • jobrodie · Member ·

    Thank you very much :) I shall start working my way through this tomorrow but just wanted to quickly answer your question about Firefox and the backspace key. Yes, my default setting on the browser is that clicking backspace will return me to the previous page (I don’t think I set this up in particular, as far as I’m aware all browsers did that). It’s very useful – unless I’m editing.

    I’ve never encountered that particular annoyance when editing using the Classic Editor though, only when using the Blocks Editor. I will certainly try and get a recording but, annoyingly, it doesn’t always happen and there are times when I’ve managed to delete several chunks of text at once without returning to the Admin page and then having to recover stuff.

    Classic Editor has a text-colour-change button (but not a highlight button as far as I can see).

    Also I don’t really like how every time I press Enter on a line I’m met with “Start writing or type / to choose a block”, but… one bleat at a time ;)

    Jo

  • staff-95percentghost · Staff ·

    Thank you very much :) I shall start working my way through this tomorrow but just wanted to quickly answer your question about Firefox and the backspace key. Yes, my default setting on the browser is that clicking backspace will return me to the previous page (I don’t think I set this up in particular, as far as I’m aware all browsers did that). It’s very useful – unless I’m editing.

    I use Firefox as my main browser too, but I have to admit I haven’t experienced that hitting backspace while editing willl send me back to the page list – that does sound incredibly annoying if autosave doesn’t catch your content before it happens! For comparison purposes, I’m using Firefox version 109.0.1 on Mac OS 12.6, is that different to the version you have?

    I had a quick search but it looks lke Mozilla apparently removed that as a default function in February 2021, when they released version 86, according to this bug report of theirs:
    https://bugzilla.mozilla.org/show_bug.cgi?id=1041377

    In theory it looks like it’s possible to disable this if you don’t want it, according to their configuration guide:
    https://support.mozilla.org/en-US/kb/about-config-editor-firefox

    Classic Editor has a text-colour-change button (but not a highlight button as far as I can see).

    As far as I’m aware, the only way to highlight text in the Classic editor is the method you’ve been using, to edit as HTML and add the <mark> tag; the classic block works similarly too.

    I also noticed that the Classic block behaviour has changed, though I’m not sure when as I don’t use it too often. Now when I add a classic block by typing /classic it appears to pop up in a modal within the editor, and it seems I have to make edits there, then save it. If I want to edit the content once more I have to click on the ‘Classic Edit’ button to bring the modal where the classic block editing view becomes visible:

    Also I don’t really like how every time I press Enter on a line I’m met with “Start writing or type / to choose a block”, but… one bleat at a time ;)

    I am unfortunately not too sure if that placeholder can be removed outright! I had a look in the settings but it doesn’t offer any option to hide the placeholder. In theory it might be possible to use custom CSS styling within your browser to hide it, as it’s inserted using a <span> tag with an after pseudoelement.

    If it helps, the commented-out tags in the HTML view are just denoting the open and close of each block and they don’t render on the published front end. They definitely do add padding but from my own experience I have found them to be quite useful in times when I’ve needed to go through the HTML view to pinpoint where there’s a somehow-unclosed (or similar) tag which is causing errors in the visual editor.

    That said, many blocks do have an “edit as HTML” option which switches that block only to HTML view – I’d definitely re-iterate totoro‘s comment about being a little selective in what you edit in HTML view as that can result in an error on that block, if it’s unexpected HTML or indeed CSS. This is where to find that option:

    And (I used some inline CSS to achieve this) here’s the type of error you might see:

  • The topic ‘How do I highlight text (e.g. )?’ is closed to new replies.