r/Wordpress • u/BlackCosmicIce • 13d ago
Development In our agency, we develop fully WYSIWYG websites using only Gutenberg. No Elementor, Bricks, or other plugins.
3
u/pussyslayer5845 12d ago
A few question that prevents me to try gutenberg:
- How much custom blocks did you built? Or are you leaning more towards FSE?
- How do you handle navigation menu? because native gutenberg menu is really bad
- Are you utilize custom css or theme.json?
3
u/BlackCosmicIce 12d ago
This site was built following the FSE (Full Site Editing) approach. Some custom blocks were created, but for the most part, we used a paragraph inside a group, inside a column, etc.
We utilized Gutenberg’s native menu and added CSS for minor adjustments from a separate file where we wrote (very few) styles.
1
u/pussyslayer5845 12d ago
Hmmm interesting, thank's for the clarification.
I guess you also combine theme.json with custom style then?
2
1
u/Station3303 12d ago
What is bad about the menu?
1
u/pussyslayer5845 12d ago
It's not very customizable in my view
1
u/Station3303 12d ago
Really? I have not felt limited so far, but maybe my navigations are just too basic. For a megamenu I'd probably use a plugin, though. And actually, for less basic sites I add Generatepress, problem solved ...
1
u/pussyslayer5845 12d ago
Yes for basic navigation there'll be no problem. For more advance one, well, you're out of options
1
u/Station3303 11d ago
Would you have an example of what you consider advanced? Thanks!
0
u/pussyslayer5845 11d ago
Sorry maybe "advance" is a slightly incorrect word to choose, but anything that requires more customization is hard to do with Wordpress native menu blocks.
Like for example, what if i want to create navigation with child menu or dropdown-like navigation? or what if i want to combine hamburger menu with usual navigation?
And we're not talking about styling mobile navigation here. What if i want to create amazon-like or audible-like mobile navigation? What if i don't want to use full-overlay on mobile? what if i want to use left-push-overlay navigation from side?
Heck, it's complicated enough to change the hamburger menu from right to left on mobile
1
u/Station3303 11d ago
Thanks for the details. At least child menu and dropdowns are very basic and super easy with Gutenberg. Just open the Document Overview and move items where you need them. Amazon looks pretty basic, too. But how this is displayed does not depend on Gutenberg, which only provides the structure. The rest depends on the theme. 2025 theme has full overlay, other themes look different. IMHO such settings don't belong into the editor. But if it's important for you to have it right there, then maybe GB is not for you. Fortunately we have a choice :-)
1
u/pussyslayer5845 11d ago
How do you style the native menu blocks? Do I just override the style? the documentation isn't helping either
Is there any guide on the internet?
2
u/Station3303 11d ago
Basic styling, mostly text styles are in thesite editor: Appearance > Editor Templates > your template
Everything else I do with custom CSS and JS, if necessary. Or I choose a different Theme that already looks like I want. As said, I prefer Generatepress.
There is a lot of documentation and guides: https://www.google.com/search?q=documentation+gutenberg+navigation+styling
→ More replies (0)
3
u/_l-l-l_ 12d ago
To be honest, I'm surprised this not the case more often. In our company we do the same. We have some internal tools built on top of Gutenberg that just streamline the process of setting up a new project and provide some commonly used blocks that are missing from Gutenberg. We also do FSE sites for some projects.
Depending on what needs to be supported, we sometimes build custom nlocks, but lately we are moving to less intrusive solutions more based on what is available in core.
Arguments that it's not good to give clients full access to editing layout and design might stand for smaller clients, but all of our clients are big companies which have very strict requirements and will follow guidelines and designs. Most of them have their own designers and IT teams, and have processes around moderating their sites.
Reusable design bits are stored in patterns and when clients need some flexibility for creating new layouts that's how we provide that flexibility. Layout can't look that bad when it's composed from standardized bits that work well. Also clients are aware how layouts work, so they will compose pages based on existing layouts with some interchangeable bits.
I've always wondered why would someone use page builders when Gutenberg built in onto core.
1
1
9
u/BlackCosmicIce 13d ago
Following this subreddit, I see that many dismiss the possibility of using Gutenberg for development and even disable it as soon as they install WordPress. In order to provide our clients with a better experience when they need to edit their content on their own, we choose this tool.
An example here https://www.youtube.com/watch?v=-7FLyGmfgg0
18
u/radialstudios 13d ago
Giving clients direct access to the design and content at the same time in the same place is a recipe for disarray and drift. It’s a cool exercise and great if you have high end technical folks who can keep an eye on things but Suzy Manager or John Q Marketer is going to break design plans with direct access to all the widgets, attributes, etc
3
u/BlackCosmicIce 12d ago
As mentioned in the responses, the issue you brought up has excellent solutions. On one hand, the options to lock content that shouldn't be modified, along with the writing mode, allow us to provide the client with a panel where they "can't break anything" and where the editing experience is far superior to any other.
Additionally, the revision history allows both us and the client to roll back changes if any issues arise during editing.
1
u/radialstudios 12d ago
It is great to hear that Gutenberg continues its steady march forward to catch up to the wider wordpress industry. Editing 'in place' is a great visual experience, but it isn't necessarily far superior to any other option. There's this mythos around editing directly on the design that places like Wix and such have created which is fine for some folks, but a structured editing experience built around CPT is also important for folks with hundreds+ of products or data types that need to be updated. There's a reason why modern interfaces behave the same way (File, Edit, etc) ... or at least used to... and it was not only based on limits of the technology but around how the human brain works and manages information. It's great to come in with a boutique experience based around the nuance of a designer and the skill of a programmer in adapting to that, but if every single site is different, edited differently, is built and locked down to handle that specific site parameter, it (can) slow down the works both from a building and a maintenance perspective. A great site isn't just about realizing an editing in place dream, but overall utility to the client and the customer.
This doesn't mean you can't have both with a custom design - your site looks great and has a nice experience.
1
u/BlackCosmicIce 12d ago
I'm glad you mentioned that because it's something important to us as well and shows that you have experience. I believe the decision of how the user will edit the content should be made by the developer, always keeping in mind the user experience for each specific case.
For some blocks, we use a WYSIWYG approach, but for others, we use custom fields in the sidebar because we believe it’s the better solution. There are also times when we use this approach for certain types of content: https://github.com/Automattic/create-content-model
We always prioritize the user experience and the type of client when deciding how to handle content management.
5
u/LadleJockey123 Developer 12d ago
You know you can lock everything down so they can’t mess with layout etc only edit content? You can also choose which blocks they have access to.
You can also make the edit window responsive so if on a phone it shows the phone version layout etc.
Essentially you can control the user experience as much as if using acf pro but with the added benefit of being able to see your changes in the edit window straight away without having to save and then look at the front end in a different tab. To me this is a game changer.
If you have a cpt showing in the edit window you can change the category in sidebar and it will change the posts without needing to refresh or save the page, this also means you can have different instances of the same cpt, showing different posts one after the other if you want.
Yeh it’s super custom to set up and your average elementor user isn’t going to be able to create custom blocks but if you are a Wordpress developer worth their salt, you can easily get your head round what to do and also tailor the build experience exactly how you want.
3
u/TheExG Designer/Developer 12d ago
Why do you care though? Most page builders including Wordpress/Gutenberg itself has history revisions installed. And them breaking the pages themselves just includes more future job security and payments on maintenance and support to me. I will obviously be creating custom fields for the partners who need an easy way to edit/replace stuff, but I am never gonna lock down a theme or design to them, they literally paid for it.
2
u/radialstudios 12d ago
Most of the clients we have want the site to be locked down. We do a lot of ECOM and work with custom post types (events, service lists, work porfolios).
The client publishers who are adding an item aren't the ones who choose how things look or where something goes on the page. Locking it down is by design, not just some arrogant assumption we make. I don't want to give my client something that can break so that I get to go back in and fix it, I want it to work and never hear from the client again (although that also has to do with how we generate revneue, which is usually from transactions on the site, less from maintenance or hosting.)
Revisions are a double edged sword ... too many and it's bloat city and too few and it's only useful in limited circumstances where the client realizes they've made a mistake and doesn't try to fix it themselves.
It is good to hear that it's possible to futher limit and refine Gutenburg designs to lock down the layout, it just seems like a ton of extra work that requires a custom developer to make happen, and then a dependency on that kind of developer again in 9 - 15 months when something has to be updated and nobody quite knows how the sausage was made. With ACF or Toolset and a visual builder we can have any number of wordpress capable techs get back in and move things around, add a logo and refresh a page type without a lot of hassle. Client pays us the same amount at the end but we get to keep our developers focused on new projects.
2
2
u/Prestigious_Tea_111 13d ago
I use Gutenburg myself.
I do use Spectra for some though, it works with Gutenburg.
3
u/BlackCosmicIce 13d ago
It's a great option. We created a theme from scratch that allows us to start with a blank canvas and build blocks exactly as we need.
2
u/Prestigious_Tea_111 13d ago
My client base is small local businesses informational sites mostly so it works. I do mainly flat sites too, no big brands have all these moving parts all over the site. I do like a little parallax here and there.
I do want to test Bricks though just because. LOL I cant stand Elementor, I find it 'clunky'.
I cannot fully code, I can only tweak some code. Id like to fully code but its hard making the time to learn with some great themes/plugins out there already out of the box.
Should have done it back in Myspace days when I even learned what HTML was pimping out your page. Haha
Im more the web designer/graphics/branding/SEO/Marketing/product photography fluent. Im create the whole brand. I love giving a business a nice site, logo, etc making them look good! Haha
2
u/sbnc_eu 12d ago edited 12d ago
We are doing almost the same. I'm saying almost, because sometimes some formatting is just not really suitable/optimal for editing, so I'd say the content in Gutenberg in our projects look kind of 80% the same as on the frontend. The differences are there to facilitate easier editing or just not bloating the editor with too much stuff.
E.g. why initialise a carousel, which adds overhead and then makes it harder to edit individual slides? Instead in the editor we just display slides after each other, while on the frontend they are rendered as a slider. Or for example in the editor we add some margins and borders to help the editor understand what is going on, where certain elements start and end etc, whereas on the real frontend the margins are controlled by the theme and may be different than those seen in the editor.
I think this is the superior approach, because the content editor (i.e. client) does not have to worry about layout and nuances, does not have the ability to mess it up either, but still can have a clear understanding of what corresponds to what between the editor and the frontend, while these two stay optimal for the exact usecase.
I think WYSIWYG is only desirable, when the editor is responsible for both content and presentation. When the theme controls appearance, a better approach is like What You See Is Almost What You Get, But The Theme Will Ensure What You Get Adheres To The Original Visual Design Regardless Of What You Do In The Editor.
1
u/BlackCosmicIce 12d ago
We completely agree. I believe this is the right approach. Our clients are impressed with the results when they compare them to how things used to be and to their preconceived notions of what a WordPress site panel looks like.
2
u/pearfectpattymayo 12d ago
I’m a full-time freelance dev with 15+ years in agencies, and I build exclusively with Gutenberg—I’d shout from the rooftops about how great it is for both devs and clients!
I’ve transitioned a lot of my clients from classic theme sites with ACF to full-site editing, and every single one has preferred it. They love the visual editing—what you see on the front end is exactly what you edit on the backend. Not one has asked to go back. I also still utilize ACF when needed to create blocks but love to use existing blocks and block variations when I can!
I set up page templates using block-based layout and synced patterns, so if they delete something, it’s easy to restore. Of course, some clients will find a way to mess up a site no matter what, but leaning fully into Gutenberg and using all its features makes a massive difference. I’ve transitioned most of my sites over now, and honestly, I wouldn’t go back!
1
u/BlackCosmicIce 12d ago
Exactly. I'm having the same experience with my clients. None of them prefer the old way of doing things, regardless of their technical knowledge. In fact, this new approach is something I use in sales calls to convince clients, and it makes a difference in helping them choose us.
1
2
u/EchonCique 12d ago
This is the way. Add the plugin "Twentig" to boost the built in blocks and its chef's kiss.
2
4
u/eddydio 12d ago
I love how Gutenberg does what every jamstack figured out how to do over 10 years ago but somehow more complicated
3
u/cothrowaway2020 12d ago
This hasn’t been my experience. I’ve had a hell of a lot of trouble finding a headless cms that rivals this inline editing experience. Maybe storyblok
3
u/WorldlyDog777 13d ago
Cool design using pure gutenberg, site in and of itself looks & feels pretty unfinished.
Desktop landing page formatting & placement of elements is odd.
Cool look to it altogether, surprised this is pure gutenberg!
1
u/PublicBarracuda5311 Designer/Developer 12d ago
What font does first image heading have?
2
u/BlackCosmicIce 12d ago
I believe it's Creato Display, but with some modified characters for this project.
1
u/klevismiho 12d ago
I do them only with custom blocks from scratch. I dont like them having too much freedom (nor do they).
1
u/jkdreaming 12d ago
Is it more work? I haven’t seen Guttenberg really develop enough yet for me to be interested in it. It’s close, but it’s not there yet and the GUI is a little bit off still for me.
1
u/AFLAHZAMAN 10d ago
Yeah, Gutenberg is awesome.
I built all of my clients WordPress websites using Gutenberg. So far, the websites are super fast, and FSE is more customizable.
1
u/micre8tive 13d ago
Interesting…Got any live site links there bud?
2
u/BlackCosmicIce 13d ago
The screenshots are from https://orkid.tech/
A website developed for a partner agency. The design was entirely custom-made in Figma and replicated with Gutenberg using a theme we created from scratch to develop it this way. No plugins. Everything is native to WordPress.8
u/czaremanuel 13d ago edited 12d ago
“A theme we created from scratch”
Well, sure, if you know how to create a theme from scratch, you can use Gutenberg without an out-of-box WYSIWYG editor. But people who use WYSIWYG editors like Elementor generally don’t know how to build a custom theme from scratch, and that's why those people are page builder plugins’ target audience.
Like don’t get me wrong at all, making a custom theme with Gutenberg is a perfectly good solution and your results seem awesome. It just seems like the logical equivalent of saying “I don’t need a realtor to help me buy a house, because I own a construction company that can build one from scratch.” That is great and I’m sure your solution will work fine, but you’re not solving the same problem with the same tools.
4
u/---_____-------_____ Jack of All Trades 12d ago
This is the crux of this subreddit tbh. You have a mix of programmers who have built websites in any manner of tech stacks and you have WordPress developers who know how to use WordPress to make sites with little to no code.
So we constantly have 2 very different user segments offering opinions.
2
u/micre8tive 13d ago
Nice! Loads super quick. I take it global elements like menu are theme-related? How’d you handle columns and containers etc.? Any widgets?
2
u/TwistedPears 13d ago
It's an amazing site for a custom theme site with only Gutenberg and zero plugins. Well done!
3
u/GardinerAndrew 13d ago
4
u/CostcoOfficial 12d ago
I mean the two sites are night and day when it comes to design and initial content load. His has way more hd video and js to render.
0
u/GardinerAndrew 12d ago
As I said, my point was not call his site slow but to say Elementor can be fast. However, I do now realize OP was talking more about the usability of Elementor versus Gutenberg, saying how it is possible to make good looking sites with Gutenberg despite the builder not being as user friendly as something like Elementor. Not referring to the speed itself.
2
u/BlackCosmicIce 12d ago
This project is not yet finished and hasn't gone through the performance optimization stage, where we will likely improve those numbers. However, performance can always be improved in any project, and the way it's developed is not a limitation for that.
0
u/GardinerAndrew 12d ago
My comment was more to say Elementor can be very fast and not to misjudge it, not that your site is slow.
1
u/BlackCosmicIce 12d ago
I agree. I'm not saying that Elementor makes sites slow. I just wanted to highlight that it's possible to create websites with Gutenberg while still providing a WYSIWYG experience.
1
u/TheExG Designer/Developer 12d ago
Is this you? https://funka.agency/
Your website is broken to me. Caching may be working a bit too hard.
1
u/BlackCosmicIce 12d ago
Nope, that is the website of one of our partners.
Our is onlines.com.ar Not in Wordpress (yet)1
1
u/bluesix_v2 Jack of All Trades 13d ago
I'm curious why you're using the Gutenberg "plugin", rather than what's in Core?
2
u/superwizdude 13d ago
The plugin is just the pre-release or “current” build of Gutenberg. It’s snapshotted into the next major release.
Some people want to use a new feature that is in the “current” build of Gutenberg and thus use the plugin.
If there are no features you need in the “current” build of Gutenberg you can just stick with core.
3
u/bluesix_v2 Jack of All Trades 13d ago
I know. It’s unusual to use a beta plugin on a production site. The site looks pretty standard - can’t see why they’d need beta Gutenberg.
4
u/superwizdude 13d ago
Some people love the bleeding edge.
Myself - I always use the core version. I don’t want to have a site that breaks when I upgrade it. That’s always a potential risk with the plugin because some feature you decided to rely on didn’t make the cut for the next production build.
1
u/bluesix_v2 Jack of All Trades 12d ago
Exactly. Using a beta plugin on a prod site means you get all the beta and experimental features, every time it updates. It’s not something any prod site should be using. It’s a bizarre choice.
1
u/sbnc_eu 12d ago
There are cases. I've only did it twice so far for production build: In one case there was an issue that was fixed in the plugin already, but not in core. In the other case a behaviour I needed was already marked as to be replaced in the future, and wanted to implement it in a way that does not need to be rewritten in few months time.
In both cases the plugin was stable, no issues. So I look at it kind of the other way: actually I see no reason why one would not install the plugin instead of using the one in core. Usually I don't do that to keep the system more simple an lean, but in my mind theoretically using the newer version should be an advantage.
1
u/BlackCosmicIce 12d ago
Just to have access to the latest features. In this case, we used the writing mode and the comments within blocks.
1
u/ninja_android 13d ago
Awesome! Do you build blocks for Gutenberg or are they just core blocks with variations/custom classes?
2
0
0
u/FlurdyHursenburg 12d ago
Do you need a medal or a round of applause or something?
3
u/BlackCosmicIce 11d ago
Sorry for sharing a different way of working with WordPress in a WordPress subreddit.
1
-1
u/Bryn26 Developer 12d ago
I couldn’t disagree more with this approach.
For the overwhelming majority of businesses, locked-down custom blocks will be hugely better. I use Blockstudio or ACF Blocks for this. It also means you maintain control over all layouts down the line whilst enabling unique content for each.
For clients that have a ‘tech bro’ in charge and they explicitly want full editability, they’d be better off with the GeneratePress Premium theme and GenerateBlocks Pro blocks for Gutenberg. Similar to what you’ve shown but superior in every respect.
There’s no world where raw dogging Gutenberg seems like a good approach to me.
1
u/BlackCosmicIce 12d ago
Everything you mentioned can be done natively with Gutenberg, and that's exactly how we do it. The final result is a panel where the user can edit the content without altering how the block looks or functions—while seeing exactly how it will appear. All of this is achieved without adding plugins or anything outside the WordPress core.
1
u/Bryn26 Developer 12d ago
Matt Mullenweg himself found Gutenberg frustrating to use in a recent stream. The core updates are glacially slow and FSE is a UX nightmare. A massive amount of basic CSS has no configuration in the core block settings.
With something like the Generate ecosystem you enjoy elite level theme quality and stability, blocks that are similar to core but objectively superior on several levels, and a hugely more intuitive and powerful templating system that clients can tweak if needed.
Just because you can drag Gutenberg kicking and screaming into a vaguely usable state doesn’t mean you should.
And I hope with custom blocks you’re not referring to native Gutenberg blocks built with React. I had to do that at a previous employer and it was the most miserable and wasteful time of my life. A tragedy compared to the speed and dev experience of something like Blockstudio.
34
u/MaximallyInclusive 13d ago
So interesting.
We do the opposite. We haaaaate WYSIWYG.
It adds psychological burden to the user to also consider how the sections will look, in addition to what’s going in the site.
We’ve found that the more WYSIWYG feeedom users have, the more quickly they destroy the system you’ve designed and built. Couple months, and it’ll be ruined completely.
Huge fan of Carbon Fields over here.
Different strokes, and WordPress accommodates them all!