Support » Fixing WordPress » A frustrated block editor user

  • Resolved unklee

    (@unklee)


    Hi, I used to have a blog on wordpress.com, so when the block editor came in, I decided to use it and try to keep up with whatever WordPress was doing. I was not doing that much fancy styling (I had the design upgrade) and I was enjoying using the new block editor.

    But for various reasons I decided I wanted to do a bit more with my blog, so I transferred it to a self hosted site and am trying to do a bit more styling.

    So now the block editor is a nightmare for me. Both the very old pages, which sit in a single classic block, or the newer pages fully in blocks, are difficult. They look OK, and I can edit OK in the visual editor, but as soon as I want to change some style, the trouble starts.

    If I have to get into the code, say to set up internal links, or a div or some specific paragraph styles, the code is a mess. I have another self hosted site where I still use the classic editor, and I keep my code tidy with spaces between the elements so I can find my way around easily. But if I do that in the block editor, it just removes most of my tags and eliminates all the spaces. It takes ages to find the place in the code I want to work on.

    Now it is quite possible that there is something I am doing wrong and there is a simple way around this. At least I hope so. But can somebody help me please?

    If I want to do styling, should I revert to the Classic editor? Or is there some way I can make the code usable? Thanks

    • This topic was modified 3 weeks ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Joy

    (@joyously)

    If you choose to use the block editor, then use it how it was intended, which is visual, not text mode. Select a block to style. If the editor doesn’t have the style controls you want (margin or padding or color or font…whatever), then simply go to Advanced in the sidebar, and put a class on it. Then style that class in custom CSS however you want.
    This keeps you out of the code (trying to find your place), and keeps style separate from content (generalizing class definitions that yo can use all across your site).

    Hi Joy, thanks so much for that information. It is extremely helpful. I began my website adventures coding in HTML, CSS and PHP, and only came later to WordPress and later still to blocks. I think my biggest problem is learning to think in terms of blocks instead of in terms of HTML.

    I’d like to ask you a couple more questions if I may please. (I have searched for most of these things, but I haven’t found it easy to find answers.)

    1. How would you set up in-page links? I previously used div or section tags, each with its own id. Would I put them in HTML blocks?

    2. If I want to style a bunch of paragraphs (say to have a background or a box around them or have them all indented), I would previously have put them all in a div and style that. How do I do it with blocks?

    3. If I find blocks generally have too large a space between them, how do I change that globally?

    Thanks.

    Joy

    (@joyously)

    Don’t make the mistake of thinking that I endorse blocks. I don’t like it at all, and I don’t use the block editor. I don’t actually think it’s a good idea to “think in terms of blocks”. Blocks are just HTML, with a JS interface for convenience.

    1. I assume by in-page links you mean a fragment identifier that you can jump to. I think the block eidotr is behind the times on this. It allows an ID on headings, but that’s about it. But you can always use a Classic block or a Custom HTML block and put whatever you normally would put inside there.

    2. There is a Group block, which is simply a div wrapper for blocks. It can take a background color (the control is already there). You can select all the paragraphs and choose Group from the menu, or start with a Group and add stuff inside it. But you can also use the Advanced input in the sidebar to add a class to any block, and then style that class. Doing this, your styles can be used across pages for consistency. Put the styles into Customizer > Additional CSS, or use a plugin to add CSS.

    3. Don’t judge it by the editor. It can look different on the front end, because the markup in the editor is necessarily different than the front. (and the editor puts some crazy CSS in) But global margins or padding is a theme thing. If your theme has options for that, adjust them. If not, add Additional CSS to fix it or switch themes.

    OK, thanks for that. It has been very helpful in pointing me in the right direction.

    I have developed my own child theme so I can pretty much do anything I want, if only I can figure out how!

    If you have the time, I’d be interested in a brief summary of why you don’t like blocks. I was initially opposed to them because of my background doing everything myself writing HTML and CSS, and a little PHP and javascript. So I’m not converting my first website over. But when I wanted to upgrade my wordpress.com site to a new theme a year or two back, I decide to give the block editor a try, since I thought that was the future. I enjoyed it on wordpress.com while I was happy to not try to change the styles too much, but now I have moved the site to self-hosted, I am a little more aware of its limitations. But I’m thinking I’ll stick with it for a while, but may decide to convert back to classic later.

    For someone who dislikes blocks, you have been very helpful to this rank amateur, so thanks a lot!

    Joy

    (@joyously)

    I’d be interested in a brief summary of why you don’t like blocks.

    First, I don’t like the hype about blocks, as if it is something new to write HTML.
    2. I think the wrong concept was chosen (block), because most of what is on websites is inline: text and images. There is already a known categorization of HTML tags into various types and which ones are allowed within each type (like you can’t put a div in a span).
    3. The choices made by the editor team, that blocks must be a certain syntax that does not include all of HTML, and even though the blocks are HTML, you can’t mix in unrecognized HTML without a block marker.
    4. Instead of a generic UI for inputting HTML, the editor has elaborate code different for each block, making the block more important than the markup. Last year, I saw a PR where someone moved the <cite> in a quote block to be outside the <blockquote> instead of inside. That simple change affected 24 files. HTML has so many possibilities of combinations of tags that it seems silly in the extreme to code each one as a special case.
    5. The block editor team chose to put the UI in the same structure as the HTML being written, which makes it difficult to style without messing up the UI or the admin menu, etc. The classic editor put the content in an iframe, and it was simple to use the same styles as the front end.
    6. Having blocks be so prominent, now there is code everywhere in WP for parsing blocks, saving blocks separately in the posts table (reusable blocks), block plugins, and coming soon Full Site Editing, which changes how themes work although it doesn’t have to…they chose to. WP has always been about publishing, but now everyone wants to build something for the editor. It’s quite amusing if I can forget what a mess it is.
    7. Trying to make the editor look just like the front end makes it more difficult for the user to edit, since the tools appear and disappear and there’s no detail for reference. (like did I get that color correct or is that the small version of that image or the large version?) I would rather see effort put into tools like find/replace, and grammar checking, and writing from an outline, and revision tracking (what did the hired help change?), and saving a draft copy of a published post, etc.

    Sorry, it wasn’t brief. There’s probably more, but I’ll stop here.

    Sorry, it wasn’t brief

    Not at all. I asked and you gave me a most interesting answer. You obviously understand WordPress much better than I do and some of your issues are taking me out of my depth! Just a few thoughts on what you have said …..

    I am part of a volunteer organisation here in Australia, and I inherited the task of developing their website. Someone had already set one up on Wix, so that was what I had to use. I didn’t like it at first, but I took it as a learning opportunity, and in the end I found it quite an interesting experience. It clearly isn’t as good as WordPress in many ways, but it probably is easier for newcomers because it is all done in something that looks like the WordPress blocks and you really don’t have to know anything about code. So if Wix, Squarespace, etc, are the competition, I can understand that WordPress might have felt the pressure to change.

    I find the use of HTML in the block editor to be strange and difficult. Sometimes I get a message that I’m using HTML wrongly (I forget the exact wording), and there is the problem that the code is mashed up. It doesn’t seem very helpful to me.

    And I do find that sometimes the changes I make won’t “take” and I have to re-load the page with the block editor and re-do my pages to get things going again. It can be frustrating like that.

    One final thought. I change from WordPress.com to self hosted because WordPress posted ads in my pages (which I knew) and those ads led to over 300 additional URL calls, which slowed my page down to below 30 on Google Page Speed Insights. I do wonder whether the block editor leads to inefficient code which will also slow the site down, though clearly not as much, so I wil be looking out for that.

    Thanks again. You have been very helpful, generous with your time and expertise, and interesting. What more could I ask for? 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.