Jamie Marsland Recreates WordPress.org Homepage in 20 Minutes Using the Block Editor – WP Tavern
In response to the current controversy about how lengthy WordPress.org’s new homepage and download page designs ought to take to implement, Gutenberg YouTuber Jamie Marsland determined to attempt his hand at recreating it with the block editor.
Matt Mullenweg had commented on the plans for the brand new designs shifting into growth, saying that it ought to have taken “hours not weeks to implement.” His most incendiary feedback, that fired up a subsequent conversations concerning the realities of working with the block editor, referenced WordPress’ opponents.
“It’s such a fundamental format, it’s laborious to think about it taking a single particular person greater than a day on Squarespace, Wix, Webflow, or one of many WP web page builders,” Mullenweg mentioned.
Marsland determined to take the problem utilizing Gutenberg. For this train he used WordPress’ most up-to-date default theme, Twenty Twenty-Two. His outcomes are usually not equivalent to WordPress’ new designs however are very shut, and he was in a position to whip up the homepage in roughly 20 minutes.
Within the video (embedded under), Marsland walks by the creation of every part of the homepage. He’s what one may describe as an influence person with the block editor. He can rapidly shuffle rows, columns, and teams round, adjusting padding and margins as obligatory, and assign every part the corresponding coloration for the design. At this level, this isn’t one thing most common WordPress customers might do, which is why the video had such a powerful response from viewers. Marsland’s YouTube channel is centered round serving to customers master building pages using Gutenberg and shops with WooCommerce.
“My conclusion was that it’s fairly straightforward to rapidly get 95% of the design achieved, however it’s the ultimate 5% that at all times takes essentially the most time in my expertise,” Marsland mentioned. “My guess is that it was extra about inside course of that triggered the delays, however with out being concerned its laborious to say for certain. I actually needed to indicate that it wasn’t a Gutenberg situation with constructing the design (as Matt Mullenweg talked about Wix and Squarespace and different WP pagebuilders.)”
Alex Shiels, an Automattic-sponsored contributor on the challenge, cited just a few objects unrelated to the block editor, that triggered the delays, together with working in the direction of “affordable requirements for a11y, responsiveness, browser compatibility, search engine marketing, and efficiency,” in addition to collaborating with contributors throughout totally different continents.
In response to Marsland’s try, WordPress developer Patrick Boehner commented on how the little particulars stay extraordinarily vital. “You may positively inform what was design pushed first vs designed within the editor,” Boehner said.
5 years after Gutenberg’s debut in WordPress, theme builders are nonetheless challenged to carry designs to life that weren’t created with a block-first method in thoughts.
“It stays as we speak essentially troublesome to inconceivable to take a historically mocked up web page design and execute that design utilizing blocks,” WordPress developer Jon Brown said. “This can be a downside.
“Certain, blocks are high-quality to ‘design a web page within the browser’ and settle for what you get out of blocks, however blocks proceed to lack the flexibleness and controls wanted to provide a responsive, accessible, pixel excellent format based mostly on a mock-up.
“What used to take a day and a dozen strains of php and a dozen strains of css, now takes weeks of constructing customized blocks as a result of the core blocks can’t simply be tweaked by way of hooks and lack the fundamental controls obligatory.”
Gutenberg contributors are making strides by introducing fluid typography and are tracking a host of issues associated to bettering design tooling consistency. Within the meantime, theme builders are enduring the mandatory rising pains because the block editor matures to accommodate these hoping to make their designs immediately responsive.
“I’ve been constructing a full FSE theme from scratch and was shocked at how a lot of my design I used to be in a position to efficiently replicate with the editor, theme.json and minimal-to-no customized CSS,” veteran theme developer Mike McAlister mentioned. “Certain, it took numerous tinkering, however I used to be impressed nonetheless.
“Nonetheless, as Jon mentions, the second it’s worthwhile to alter one thing for a smaller display screen (or greater display screen when you dare to attempt mobile-first design within the editor), you hit a wall. It’s significantly obvious with margin, padding, and block hole, which haven’t any responsive controls but. You may see this adjusted by way of CSS within the new theme on .org.”
Responsiveness is among the points Shiels cited in why implementing the designs took extra time than merely recreating the design within the block editor.
“Nonetheless, there are hints of enhancements coming for responsiveness,” McAlister commented. “Fluid typography and clamp() actually have helped get typography in examine, however there’ll at all times be circumstances the place you want even finer management. Each different website builder has solved this, there’s no purpose to assume WordPress can’t or received’t. (I actually hope so, as ~50-60% of visitors is coming from cellular units lately!)
“Probably the greatest methods to push previous these rising pains is to have as a lot dog-fooding as doable — utilizing the editor and FSE to construct for as many real-life eventualities as doable to uncover these blindspots.”
Marsland’s quick train reveals simply how shut you will get to recreating WordPress.org’s design in a brief period of time if you understand your method across the block editor. He was profitable in proving that the Gutenberg web page constructing UI isn’t the holdup in reproducing designs created in different functions. Somewhat, it’s all the opposite associated guidelines objects that builders typically must resolve exterior of the editor – together with accessibility, responsiveness, and search engine marketing issues. The nearer Gutenberg can get to decreasing additional work associated to responsiveness and accessibility, the extra approachable it is going to be for normal customers attempting to provide the designs they dream up on their very own.