[ad_1] It was the early days of the Gutenberg project. Many on the Theme Review Team and those in design circles were trying to wrap their heads around this new concept called blocks. In particular, we wanted to know how it could be applied to theme development. There were many discussions on the pros and cons of the early editor. Overall, there was a bit of cautious excitement in the air, our optimism tempered by a buggy version of alpha-level software. The block system could potentially solve one of the biggest hurdles of theme development: inserting default/demo content for a full page into the editor. I cannot remember who initially explained the idea, but it was a lightbulb moment for many at the time. The general concept was pre-building a custom homepage or any page design that users could choose visually. It would all be done through a standardized block system, and we would no longer need to rely on piecemeal theme options, third-party plugins, or attempt to work around the review team’s “do not create content” guideline. No one really knew how this would work in practice, but we understood the theory of how it would make the life of a theme developer much simpler. In October 2019, Automattic developer Jorge Bernal opened a ticket titled Starter Page Templates. His team was working on a template selector for mobile apps, and the WordPress.com Editing Toolkit already had the feature. The goal was to bring it to the core platform, allowing third-party theme designs to build on top of it. Starter page templates idea initially shared in the ticket. Because the term “template” is overused in the WordPress space, I will refer to these as “page patterns.” This naming convention was coined by Noah Allen, a software engineer for Automattic, in the ticket. It makes sense because we are actually talking about a page’s content rather than the wrapping template. The Genesis Blocks plugin is one of the best ways to understand the page pattern concept. It has a Layouts button at the top of the editor that, when clicked, creates an overlay of designs to choose from. Selecting a full-page layout from Genesis Blocks. These designs are split between sections and layouts. Sections are the same thing as patterns in core WordPress: small, reusable pieces of starter content. Layouts are full-page starting points for users to create various types of pages. The StudioPress/Genesis team was not the first to market this concept. However, they have created a well-rounded user experience on top of the WordPress editor. You will find similar experiences via GoDaddy’s onboarding process for its managed hosting service. The Redux Framework allows much the same, and Editor Plus offers templates and patterns from the Extendify library. That initial excitement has waned a bit. It felt like that early promise was a dream that would never be a reality. Theme authors, especially in the commercial space, have long offered home-brewed solutions for the one-click insertion of full-page content. Whether via a ThemeForest project or a popular theme on WordPress.org, there are endless examples of everyone solving the same problem. One might even argue that these custom inserters are so ingrained into theme agency systems that anything WordPress offers at this point will not appeal to those who have already brought their solutions to market. Where the core platform has failed to meet user demands, our development community has stepped up. Some of you may be thinking that the current block patterns system works for this. Yes, and no. Theme authors could shoehorn full-page designs into it, but the user experience is lacking compared to third-party solutions. Patterns today are one of the best theming tools available, but they fall short of what is needed to see this thing through. The foundation of this feature exists via the Patterns API. From the theme author’s perspective, they merely need a method for flagging a pattern as a full-page layout, separate from the others. However, the UI and UX flow need an overhaul. The flyout panel for the current inserter does not cut it, especially on large screens. A fullscreen overlay has become the de facto standard among other systems. Users should also have another option between selecting from an existing page pattern or starting empty upon creation. “I think this would be so useful to have in the core,” wrote Ana Segota of Anariel Design in a recent comment on the ticket. “I created 2 FSE themes so far and also our latest premium theme is made with block patterns and this is exactly what I thought and talked with few people about. It would be great when a user opens a new page, to chose design/page patterns however we called it and it starts editing it right away. Most of the users just want to add a page, choose a layout and start adding their content.” Of course, this is not a revelation to the average theme author who works with end-users daily. Inserting or importing entire page designs into WordPress is one of the most common requests. WordPress is almost there with its current patterns system. We just need to take it to the next level. Like this: Like Loading… [ad_2] Source link
Continue readingTag Archives: Patterns
A Showcase of Block Patterns by Anariel Design – WP Tavern
[ad_1] Clove theme homepage. Earlier today, Ana Segota tweeted and announced via the Anariel Design blog that her company had submitted its second block-based theme to WordPress.org. Clove is a more well-rounded follow-up to her first such theme, Naledi. It is currently under review for inclusion in the official directory, but anyone can give it a test run by snagging the ZIP file from its ticket. Or, just peruse the live demo. This should officially be the 10th block-based theme to go live in the WordPress.org theme directory (note that a couple by Automattic are not tagged). That is assuming all goes well during the review process. It has been a long road thus far, but 10 themes with the Full Site Editing tag is a notable milestone. The Q theme by Ari Stathopoulos was the first to land in the directory back in October 2020. Now, eight months later, there is still room for other theme authors to become pioneers in the space. With almost no competition, who will design that first block theme that squeezes its way into the most popular list? If “practice makes perfect,” Segota is now ahead of the curve by pushing her second theme to the directory. This makes her theme company only one of two with multiple block themes. Clove is experimental, as all block themes are. It relies on the ever-shifting parts of the Gutenberg plugin, but it all comes together into a floral, nature-themed design. There are hints of inspiration from Twenty Twenty-One, but it feels more structured, less chaotic. The design is less of a theme and more of a showcase of block patterns and styles. Even on the template level, it reuses those same elements across each of its seven templates, providing multiple entryways for users to tinker with its features. Clove even includes pricing columns. I seem to recall writing about how theme authors could implement them via patterns just over a month ago. Maybe the Anariel Design team came to the same conclusion. Maybe they took my message and ran with it. I like to think the latter is true. Either way, the result is a beautiful, theme-specific pattern — the sort of artistry that is tough to achieve from a plugin. Customizing the Pricing Columns pattern in the WordPress editor. I am less of the fan of the overlapping and uneven columns in some of the designs designs, preferring some of the more-structured patterns, such as Three Quotes Images: Three-column pattern that showcases images along with quotes. Despite my general dislike of the uneven column style, my favorite piece of the entire theme is the Illustrations page template, which leans into that design method. The page intro section is an announcement to the world, “Hey, check out my work.” Illustrations template intro section. I also like the Illustrations page template’s widgets-like area in the footer. It manages to stuff several blocks in without feeling too crowded. It even showcases a box for artists to highlight their next exhibition. Illustrations page template footer “widget” area. The Clove theme also registers 10 block styles for users to choose from. Most of them add different types of borders or frames to various elements. Plus, there is the fun-but-kind-of-an-oddball blob “Shape” for images. Segota was one of several people to submit custom designs to the upcoming block pattern directory. There is some noticeable crossover between her current theme work and submissions, such as the Playful Gallery pattern that did not quite make the cut. Others, like her Recipe design, did. There is still an open invitation for people to contribute. I am always like a kid in a toy store when a new block theme comes along, reaching out to grab the latest gadget. I want to see more experiments like Clove. Keep them coming, theme authors. Side note: For people interested in the background-clipped text design used in Clove’s site logo, I opened a ticket to take us one step closer to doing it in the editor. Currently, users must create an off-site image and upload it. Like this: Like Loading… [ad_2] Source link
Continue readingRefreshing Old Twenty* WordPress Themes With Block Patterns – WordPress Tavern
[ad_1] What began as a project in August 2020 has now become a reality. All past Twenty* default WordPress themes now have their own unique block patterns. In recent weeks, Twenty Ten through Twenty Fifteen received updates. Designer Mel Choyce-Dwan kick-started tickets for all previous 10 default themes before the WordPress 5.5 release, the first version to support patterns. Twenty Twenty, Twenty Nineteen, Twenty Seventeen, and Twenty Sixteen each made the cut for that update. However, the remaining default themes were left to languish, at least for a few months and WordPress updates. Jumping back over a decade to update past themes might seem extreme, but all of the default themes are still some of the most popular from the directory. Granted, they had the benefit of being installed directly in WordPress. Still, the current number of active installations means they are worth a small refresh: Twenty Fifteen: 100,000+ Twenty Fourteen: 100,000+ Twenty Thirteen: 70,000+ Twenty Twelve: 100,000+ Twenty Eleven: 100,000+ Twenty Ten: 100,000+ Despite having the lowest installation total, Twenty Thirteen has some of the best pattern designs. The Informational Section and Decorative Gallery patterns stand out the most, but all fit well with the overall theme design. Informational Section Decorative Gallery Twenty Thirteen is also the only remaining default theme that supports wide and full alignments. Its one-column layout affords it more flexibility, and the old design feels fresh again with its new pattern choices. Perhaps they can revive the theme’s lagging numbers relative to the other defaults. The initial pattern designs for the theme included a suite of layouts for post formats, one of the features Twenty Thirteen leaned on. Something similar to the first gallery design landed, but the others were left out. Patterns designed to match post formats. Post formats never garnered widespread support past their launch, and the core development team all but abandoned them, never building atop the feature. However, all of the format-specific patterns might be welcome for those users still running the theme. They would have been a nostalgic nod to the old WordPress, a throwback to yesteryear. If nothing else, maybe they can serve as inspiration for those of us still clinging to that tiny sliver of hope that post formats will make a roaring comeback. These theme-bundled designs highlight how the upcoming pattern directory is not meant to be the only destination for snagging the best layout sections to drop into the block editor. Often, the best choices will be specific to the theme. Much of the flavor of custom design is lost when building for a general audience. What looks good with Twenty Twenty-One may look terrible in another and vice versa. Maybe that will change as block design tools become more robust and how they are used becomes standardized, but for now, at least, the most artistic patterns are those that designers include with their themes. Aside from Twenty Thirteen, Twenty Ten’s new patterns stood out the most. The theme was the first of the new era of yearly themes, and its classic blog design has weathered the years well — just ignore the 12-pixel sidebar font size. Twenty Ten’s new patterns. The three patterns are at home in the theme. The Introduction pattern, which showcases the Image, Heading, and Paragraph blocks, is simple, but it relies on Twenty Ten’s typography for an elegant article intro. The Quote and Alternating image layouts do not try to do too much, simply highlighting the theme’s design. Landing squarely in my favorite-but-most-disappointing category was Twenty Fourteen. The About pattern’s image and text looked elegant and roomy in the editor, but the front-end view painted a different picture. Because the theme lacks wide-alignment support, the photo was scrunched up. The gallery-supported Summary pattern has a lot of potential as a full-width pattern, but it falls short in the theme’s 474-pixel wide content area. About Pattern Summary Pattern There is really no reason why Twenty Fourteen could not support wide and full alignments. It has free space. At least the timeline-esque List pattern is pretty sweet in both the editor and front-end views. I may borrow that for my own projects. List pattern included with Twenty Fourteen. I was not particularly excited over the other patterns, but I am happy to see a little love thrown toward the 600,000 or so users with these themes still active. I am sure many will find something they can use on their own sites. The themes are aging; the wrinkles and weaknesses of their designs are showing. With the site editor looming ahead, it might be time to consider retiring them. That is assuming no one wants to take the reigns and update them for a modern era. Otherwise, they will continue falling behind, remaining a relic of classic WordPress. Like this: Like Loading… [ad_2] Source link
Continue reading