Home Forums Weaver Xtreme Theme What? No more CSS in future WordPress Themes (like 2023)?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #71312
    Weaver
    Keymaster

    I just got around to giving the first official WordPress Block Theme, Twenty Twenty Three, a good look, and well, the future of WordPress is fully laid out there.

    And the future looks daunting. A whole different level of complexity, and a whole different approach to trying to customize your theme.

    So the first thing I tried to do was to add a bit of custom CSS (like to simply change the background color of 2023). That can’t be done! In fact, the whole “Customizer” interface is gone, and thus no “Additional CSS” box. Instead, there’s a new “Edit Site” button on the top admin bar (and the familiar Edit Page/Post when a page or post is displayed.) That “Edit Site” page seems to be the replacement for the Customizer. And it has a jillion options for about every thing from global colors, fonts, etc, and for each block. I didn’t find it very intuitive, but there is a LOT of new stuff to learn.

    Doesn’t seem to be any real great tutorials for this totally new approach yet. There are several new Block Themes available, but I’ve not tried any but 2023.

    A bunch of other things are missing. Everything is a block – including the overall site. So there is a Header and a Footer Block. Didn’t see sidebar blocks. The Menus control is still there, but adding a menu doesn’t seem easy. All very confusing.

    Now I assume that traditional Themes will be supported for quite some time. There are millions and millions of work-hours spent by probably millions of people using WordPress over the years, and I hope the core WP team doesn’t think all that effort can just magically upgrade to what seems to me to be a totally different way to design a theme. It is really really different.

    I find this new approach has one extremely interesting property that I find to be a personal redemption. Way back when Weaver and Weaver Xtreme first came out, there were quite a few posts here and there saying “What? How can a theme have hundreds of options? This idea is simply awful.” I’ve tried to submit other versions of Weaver with a simpler option set, only to have them rejected because of too many option. Well the new Block Theme “Edit Site” interface does not look all that different to me. I think there are, in fact, hundreds of options – but done the WP team way (very confusing, if you ask me). I feel a bit vindicated. No doubt the WP powers that be won’t agree with my assessment, but the new interface speaks for itself.

    Back to the no more CSS part. New block themes can define new CSS, but just not as traditonal CSS. Instead, WP is switching to JSON based CSS – whatever that means. If you want to blow your mind a bit, here is a link to a very recent article on how WP will be switching to JSON based CSS definitions. The first part is not hard to follow, but then it gets fairly technical. In the base, I think it was not that hard for WP site designers to learn enough CSS to add those little design elements to their sites. I think the new JSON standard will be much much harder.

    I’m not overly confident about the future of WordPress. There might be many positive things to say for the new Block Theme approach, but I personally think it may be beyond the reach of individuals who just want to build a site, and semi-professional site designers who are great designers and have managed to learn how to tweak WP to get what they want. I don’t think that might be that easy now. I’m afraid WP, over the next few years, will see a huge dropoff. Cool and elegant isn’t always simple.

    Here’s the crazy article about WP, CSS and JSON:

    Managing CSS Styles in a WordPress Block Theme

    #71326
    Eric Alvarez
    Participant

    Thanks for the insights! Always very helpful 😌

    #71333
    GR8FL
    Participant

    Makes me sad. I have tried a bit to fuss with the block designs and it throws me off. So maybe when this becomes force fed on all of us, it will be time, at least for me to move on.

    Do you think we have at least another year?

     

    #71346
    Weaver
    Keymaster

    Longer than a year.

    WP 6.6.1 had a bunch of very major changes, mostly to support the new FSE model (Full Site Editing – get used to that new term for it is the future of WP).

    But the Twenty Twenty Three theme is the first official theme to actually support FSE, and I’m assuming it will be how all future Twenty somethings themes are developed.

    But there are millions and millions of existing sites using classic WP, and it will be quite a while before they can simply stop supporting those sites. I guess there will be some glitches. The the current WP development team seems focused only on their future ideas, and it is not impossible that they will abandon legacy support. Who knows?

    I guess there might be a split – a legacy version, and an FSE version. Seems like maintaining both paths is not an actually wise choice. The whole size of the WP core must be getting bigger and bigger.

    But I think there will be a path for all of those site designers who have spent years becoming competent in the legacy version.

    I also know a few web site developers who are in fact giving up on WP now, and moving to platforms like Wix or other site builders that are more user friendly than FSE.

    #71381
    GaryMatthews
    Participant

    @Weaver, thanks for writing about this FSE issue. As a longtime fan and user of Weaver themes, I’ve struggled with this new direction WordPress is taking. But I’m finally coming around! A few random thoughts:

    Like you, I always relished the “hundreds of options” you built into Weaver II Pro and Weaver Xtreme. That’s what I also like most about the new FSE blocks — they provide literally thousands of options. They do so in a way that, in my view (and paradoxically), simplifies website building. (You are right to feel vindicated!)

    When I discovered Weaver (see my blog post at https://garymatthews.com/2013/03/10-more-reasons-to-choose-weaver-ii/), I never looked back. Anything I could imagine (or most anything I couldn’t), I could do. Not once did I feel tempted by Elementor, Divi, Beaver, or any other “page builder”. As far as I was concerned, Weaver was the first and best page builder, and that has stayed true.

    Till now, anyway. Gutenberg Full Site Editing (FSE) jangled me, and I hated it. Then one day for me it just “clicked”. I started to “get it” and develop a feel for how it worked. And now I’m finding that most anything I could do with Weaver, I can also do with FSE. The interface is still kludgy, and many features are far less than intuitive. But it’s improving rapidly.

    About custom CSS: You can still apply this; it really has not changed. The easy way is to use a CSS plugin like Simple Custom CSS; there are several good ones. (I think JetPack has an “additional CSS” section?) Once you’ve added CSS classes, you can apply any class to any Gutenberg block under the “Advanced” tab at the bottom of every block settings section. No need to tinker with any JSON theme file, or know anything about JSON at all. Personally, I find that this greatly simplifies the whole process, and opens up a world of customization.

    About block themes: If I’m not mistaken, the first “official” (default) block theme was not Twenty Twenty-Three, but Twenty Twenty-Two (released a year earlier). It’s the one that looks like a birdhouse — and honestly, I think it’s just about the ugliest WordPress default theme ever released! Fortunately, it’s easy to wipe out everything and start from scratch and make it truly beautiful and functional.

    About changing background color: My own blog currently uses Twenty Twenty-Two, and with that, I can and do change background color to anything I want. I haven’t yet tried Twenty Twenty-Three, but from the demos I’ve watched, it’s my impression you can do the same there with any aspect of any block, including the entire site — background, foreground, borders, you name it. Typically without using CSS, though this always is available for special cases.

    About sidebars: You’re right, there is no sidebar block, and I found this exasperating, till I realized that FSE treats a sidebar as simply a column. So you use the columns block, and make your sidebar(s) as wide or narrow as you want. They can be sitewide or page-or-post-specific, also static or mobile-friendly. (The Weaver theme handles mobile response far better than Gutenberg does — at least so far. Stay tuned.) At learn.wordpress.org, there is a good tutorial on how to set up sidebars. On YouTube, there’s also a “Jamie Marsland” channel with a great sidebar tutorial.

    Speaking of tutorials: You’re right, there aren’t yet many good ones for FSE. But Jamie Marsland (mentioned above) has a bunch of really, *really* good tutorials on his YouTube channel. Aside from these, he does a recurring feature where he takes some famous website and shows how to replicate it easily using FSE (within 30 minutes). Each of these episodes is a tutorial unto itself; I’ve learned a ton from watching them. (Jamie is the owner and developer of a service called PootlePress.)

    You’re certainly right that WordPress will find it challenging to back-support millions of “classic” sites while incorporating all the jazzy new Gutenberg stuff. Watch for fireworks!

    Be that as it may, I long have loved, and still love, your Weaver collection of themes. The WP core developers responsible for Gutenberg should study the work you did literally decades before they got started on it. You truly showed how to do it right. A lot of what came afterward built on your foundation, even if the builders didn’t always recognize it. And I haven’t given up hope that going forward, you’ll see your way clear to a new “Weaver Blocks” theme, merging the best of old and new. This might be easier than you think!

    #71382
    Weaver
    Keymaster

    I do recognize that FSE does have the potential to have, as you said, of thousands of options.

    The real issue is getting everyone to take that big step of switching. I think there is an entirely different mindset to using FSE. A lot of re-learning. And that, of course, will be the real issue. As someone who has taught WP classes over the years, I’m not sure of how I would approach FSE. Where to start? I think there will be a learning curve for teaching FSC vs Classic WP, and in the end, once appropriate methods are found, is could be how WP works for most.

    But there are literally millions and millions of Classic WP sites, with a whole bunch of web designers with various levels of expertise. I think that is why Weaver has a lot of web designers as users. It allows flexible design without requiring total CSS expertise, let alone the ability to build child themes with lots of PHP code, let alone Javascript code, or apparently JSON with FSE.

    It will be interesting to see how FSE evolves. At this point, I don’t anticipate building any sort of Weaver FSE theme, but will maintain Weaver Xtreme. Don’t anticipate many changes – just compatibility as long as possible. The next version of Weaver Xtreme Plus will add some blocks that will have a real Weaver-like flavor – lots of options for the block appearance. One other goal I have is to add font selection to some standard blocks like paragraph and headings. But that won’t be real soon. But on the whole, Weaver will remain more classically oriented.

    #71466
    GaryMatthews
    Participant

    @Weaver, reporting a glitch: I just posted an update to the CSS conversation. It appeared in the sequence; I noticed a typo I’d made, and clicked “edit” to correct it. Did so, clicked “submit” — and my entire comment disappeared. Edit and all.

    More weirdly: On the main support-forum menu, this thread is showing seven posts, the latest being the vanished one by me. But inside the thread, it says the last one is yours, that being six of six.

    Not sure if it’s a system error, or user error by myself. If this note appears, I’ll reconstruct and repost my update comment. Here’s hoping I haven’t somehow bollixed things. ≧◔◡◔≦ 😇

    #71467
    GaryMatthews
    Participant

    This just in: The latest version (14.8) of the Gutenberg site editor restores the “custom CSS” panel that inadvertently vanished with the old Customizer.

    I say “inadvertently” because I always figured its absence was an oversight, and that Gutenberg’s developers would bring it back, eventually. Every block has always had a field for “additional CSS classes” (under the “advanced” drop-down). Clearly, there was supposed to be a way to define those classes. The block editor benefits from having a large team of contributors. But one downside of this free-for-all approach is that a crucial task can fall through the cracks, when everyone assumes someone else is taking care of it.

    Anyway, the gap is now plugged. To use the new CSS repository, you have to have the Gutenberg plugin installed; this provides the most recent updates. The feature is still officially “experimental”, so you also have to enable the CSS part under “Gutenberg>Experiments” in admin. I see no reason to doubt that this tweak will be moved into WordPress core in the next platform update.

    Of course, as I wrote above, we’ve always been able to use traditional CSS with Gutenberg site editing. Without the new panel, this was best done with a code injector plugin like Simple Custom CSS. Now you don’t even need that, much less a child theme or messing with theme files.


    @Weaver
    , the first place I ever saw an “additional custom CSS” panel was in Weaver II Pro. You also included a field for inline CSS next to virtually every Weaver element. Your provisions were what inspired me to learn what little CSS I know. And while I’m still really a duffer, you made me feel at the time like a code bad-ass! That was long before there even *was* a Customizer, and at least a decade before this new Gutenberg iteration. Now the latest-and-greatest, bleeding-edge WordPress team is (almost) catching up with your vision. Take a bow!

    NOTE: The above is the gist of the comment I posted earlier, the one that disappeared when I edited and resubmitted it.

    #71468
    hkp
    Participant

    For what it is worth, it came to me a few times within the last couple of weeks, that WP is likely to come to a realization that developing, improving and adding to FSE, while still supporting legacy CSS-WP integration in the same core, is just too much work and effort.

    I believe that before the end of 2023, WP will announce that they will split FSE and legacy CSS-WP, and provide two new core packages, which are not easily interchangeable.

    They will then develop FSE along with all the new ideas they have and will stop development on CSS-WP and only implement fixers for security issues after that.

    As I recall, that is more-or-less what Microsoft did with all their Windows versions.

    Splitting the two makes a lot of sense from every aspect, as far as I can see: staffing resources, core sizes, core complexities, new developments in FSE, WP Support.

    Time will tell…..

    Regards and thanks!

    #71477
    GaryMatthews
    Participant

    @hkp, what you say makes sense. WordPress being open source, there already is a ClassicPress fork. For the moment, it’s languishing, but that might change were it embraced by Automattic.

    This two-track scenario may be complicated by the arrival of “hybrid” themes. The latest WordPress update gives authors of classic themes the option to incorporate block-based “template parts”. A user can modify these parts using the block editor, even if most of the theme retains its classic interface. With minimal patching, any legacy theme can add, say for example, a block header one can swap in place of the existing “classic” header. There’s already a “blockified” version of GeneratePress: Users of that classic theme gain access, simply by updating, to lots of block-editor muscle. I’ve seen a demo and this strikes me as compelling. As this idea spreads, perhaps even site owners entrenched in classic themes may beseech their authors to add such features.

    The next step? It wouldn’t surprise me if WordPress soon allows the user of any classic theme to add entire pages based on full-page block templates! The theme author wouldn’t even need to patch the theme. This could be useful for, say, a landing page, a 404 “page not found” link, the home page, etc. Even developers who want nothing to do with the block editor may discover that much of their clientele is using their classic theme in such mixed ways.

    I’ve also heard murmurings about software to take any existing WordPress page, classic or not, and auto-generate a duplicate using Gutenberg blocks. Why not? And why not rebuild entire sites this way? Download a classic theme you love, customize it to your liking, then click a button and Voila! You have a block-based site infinitely more malleable and future-proof. The developer may then abandon the theme, switch it to a prohibitively expensive subscription plan, or whatnot; you needn’t care.

    There are lots of ways for Gutenberg to infiltrate  the classic ecosystem. We’ve barely seen the first glimmers. No wonder so many web designers are paying close attention!

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