If you’ve ever built something for the WordPress block editor — a theme or a plugin — you may have also heard about block patterns.
Looking at the patterns that come bundled with WordPress, I thought it would be nice to dedicate to them a short post. They’re pretty nice, useful shortcuts when you know them, but there’s a good chance you may not know what they are or why you might want to use them.
What’s a block pattern?
Patterns are collections of pre-arranged blocks that can be combined and arranged in many ways making it easier to create beautiful content. They act as a head-start, leaving you to plug and play with your content as you see fit and be as simple as single blocks or as complex as a full-page layout.
They live in a tab in the block library. You can click or drag and you’re able to preview them with your site’s styles.
Basically, a block pattern is just a bunch of blocks put together in advance:
<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator -->
<!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div>
<!-- /wp:image -->
<!-- wp:quote {"align":"center","className":"is-style-large"} -->
<blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote>
<!-- /wp:quote -->
<!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator --></div></div>
<!-- /wp:group -->
That’s also how you create them: just use the block editor to configure a smattering of blocks to your liking, and the hard part’s over.
<?php
/*
Plugin Name: Quote Pattern Example Plugin
*/
register_block_pattern(
'my-plugin/my-quote-pattern',
array(
'title' => __( 'Quote with Avatar', 'my-plugin' ),
'categories' => array( 'text' ),
'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
)
);
?>
👆 That’s a snippet of PHP, which means you can drop it in a WordPress plugin, or perhaps more simply, paste it into the functions.php file from your theme. Done:
For patterns that include images, it’s worth thinking about where those are stored. The TT1 Blocks theme (which is a fancy name for “TwentyTwentyOne Blocks”) stores images in the theme library.
Now what?
The thing about a block pattern is, as soon as you insert it from the block library, it stops being a cohesive unit — now it’s just a smattering of blocks, detached from the pattern you created and meant to be customized to your liking. It’s a shortcut, not a template. That also means you don’t have to worry about switching themes or deactivating pattern plugins: the blocks you already inserted won’t go anywhere.
That being said, if you like this one pattern so much you want to use it again and again, with no customization at all, you can make it into a reusable block:
Reusable blocks are created, as the name implies, to be reused. The feature is a great way to store small bits of commonly used snippets that you can edit in one place to update in all. “Follow me on Twitter,” “Article series,“ or “Subscribe to my podcast” are great examples of that.
What makes a good block pattern?
Patterns, as they ship today, are limited by the features available. If the block editor doesn’t allow you to customize letter-spacing, your block pattern can’t either. While the Global Styles project will expand what’s to blocks, in the meantime, we have to work with the available tools.
Even then, with the most basic ingredients — color, photography, typography — it is possible to do a lot:
Three columns with images and text
Media and text with image on the right
I designed these patterns to potentially land in WordPress core, which all have a few properties in common:
They share a theme.
You can think of a pattern as a section of a website: it is meant to be part of a whole, and so it works best when it can exist in the context of other patterns that share the same theme. There are a few sharing a Nature theme in the patterns above, a few sharing an Art theme, and others sharing an Architecture theme. When seen together, it becomes easier to see how you might be able to piece together multiple pages of your site, one page at a time.
They share a minimalist color palette.
By being parts of a whole, patterns will inevitably land in a context that uses different colors. With a reduced color palette, there’s both a better chance of fitting in and less to customize to make it just right.
The best patterns do things you might have not done otherwise.
Whether that’s images offset to create a unique silhouette, or just using less visible features (like fixed positioning in the Cover block), it’s a way to surface creativity.
Tip: You can use any block in your patterns, including blocks that came from a plugin. And if that block is in the block directory, it will prompt you to install it with one click if it’s missing from your self-hosted WordPress:
Here’s a plugin for you
<?php
/*
Plugin Name: Quote Pattern Example Plugin
*/
register_block_pattern(
'my-plugin/my-quote-pattern',
array(
'title' => __( 'Quote with Avatar', 'my-plugin' ),
'categories' => array( 'text' ),
'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
)
);
?>
In case you want to make patterns, this example plugin features two of the patterns you saw above. Drop it in your plugins folder and they should show up in your block library.
Installed pattern under “Text” Category
Feel free to tweak it, customize it, and make it yours. It’s GPL, after all!
Bringing you fresh colors in the admin, simpler interactions in the editor, and controls right where you need them, WordPress 5.7 lets you focus on the content you create.
Meet “Esperanza”, the first WordPress release of 2021. “Esperanza” is named in honor of Esperanza Spalding, a modern musical prodigy. Her path as a musician is varied and inspiring—learn more about her and give her music a listen!
With this new version, WordPress brings you fresh colors. The editor helps you work in a few places you couldn’t before without getting into code or hiring a pro. The controls you use most are right where you need them. Layout changes that should be simple, are even simpler to make.
Now the new editor is easier to use
Font-size adjustment in more places: now, font-size controls are right where you need them in the List and Code blocks. No more trekking to another screen to make that single change!
Reusable blocks: several enhancements make reusable blocks more stable and easier to use. And now they save automatically with the post when you click the Update button.
Inserter drag-and-drop: drag blocks and block patterns from the inserter right into your post.
You can do more without writing custom code
Full-height alignment: have you ever wanted to make a block, like the Cover block, fill the whole window? Now you can.
Buttons block: now you can choose a vertical or a horizontal layout. And you can set the width of a button to a preset percentage.
Social Icons block: now you can change the size of the icons.
A simpler default color palette
This new streamlined color palette collapses all the colors that used to be in the WordPress source code down to seven core colors and a range of 56 shades that meet the WCAG 2.0 AA recommended contrast ratio against white or black.
Find the new palette in the default WordPress Dashboard color scheme, and use it when you’re building themes, plugins, or any other components. For all the details, check out the Color Palette dev note.
From HTTP to HTTPS in a single click
Starting now, switching a site from HTTP to HTTPS is a one-click move. WordPress will automatically update database URLs when you make the switch. No more hunting and guessing!
New Robots API
The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the max-image-preview: large directive by default. That means search engines can show bigger image previews, which can boost your traffic (unless the site is marked not-public).
Lazy-load your iFrames
Now it’s simple to let iframes lazy-load. By default, WordPress will add a loading="lazy" attribute to iframe tags when both width and height are specified.
Ongoing cleanup after update to jQuery 3.5.1
For years jQuery helped make things move on the screen in ways the basic tools couldn’t—but that keeps changing, and so does jQuery.
In 5.7, jQuery gets more focused and less intrusive, with fewer messages in the console.
Check the Field Guide for more!
Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. WordPress 5.7 Field Guide.
The Squad
The WordPress 5.7 release comes to you from a small and experienced release squad:
This release is the reflection of the hard work of 481 generous volunteer contributors. Collaboration occurred on nearly 250 tickets on Trac and over 950 pull requests on GitHub.
WordPress is open source software, maintained by a global network of contributors. There are many examples of how WordPress has changed people’s lives for the better. In this monthly series, we share some of the amazing stories that are lesser-known.
From a natural interest in computers and fixing things as a young woman, Olga Gleckler from St Petersburg, Russia, found WordPress took her on a journey to becoming a successful female tech entrepreneur. On International Women’s Day, we share her story.
Finding your path can take longer than you expect
From the age of 15, Olga found herself under pressure to find a free place for her professional studies. She said: “I didn’t know how high or low my chances were even if I had very good marks. I could have been just the biggest fish in a small pond. But anyway, I made up my mind to go to technical school.”
On leaving school in St Petersburg with her certificate, Olga felt her knowledge of opportunities was very narrow. She had pictured being an ecologist or guide translator based on the subjects she had been taught at school. There was also an advertising boom in Russia and she began to explore this as a career avenue. She had developed her computer skills and found opportunities to practise by helping her teachers with administrative work.
Though she did not have access to any formal career advice, her journey led her into programming. She said: “The range of technical schools was not wide. I spent four years studying transistor markings, soldering and drawing PCB layouts. Programming courses using Pascal didn’t do anything useful with it.”
A lack of suitable access to English-language courses made things harder for Olga. She was determined that she would master the language later in her life. In the meantime, she left technical school with an honors degree and improved typing skills.
“I faced it was a wild, unfriendly market. I didn’t know how to recognize a genuine job offer or how to avoid the bad ones. It was difficult and I don’t know how long I would’ve looked for work without help.”
Think differently to find where you belong
Olga’s father worked in an IT company and was able to give her some advice and help with potential introductions. When she was still studying, he suggested her strong technical skills might be useful as a substitute typist. When she finished her studies, he helped her apply for a job updating a legal system on clients’ computers.
Six months later, she got a full-time job in the same service department. She liked her position and her clients. However, she was given friendly advice that without a university degree she would not be able to have any further promotions.
At this time, Olga was trying to study PHP from a book. She found it very exciting at first, but a lot of their functions did not give her explanations on how to build something useful. She found when she tried to build practical items from book reading, it did not always make sense and the solutions would often fail.
She said: “It was hard to admit a failure even to myself and it was nagging me for a long time. I had to choose something I could handle, that I was interested in and could afford. It turned out to be advertising.”
She spent most of the family’s holidays on learning sessions during the next six years. Olga recalled: “It was tricky for my husband to make me leave a computer, once I was glued to it, so he bought me my first laptop. English was still hard for me, I got high marks through just memorizing all the words in a textbook and how they should sound.”
Doubting your professional skills can happen when you are at home isolated looking after children. Keeping up your interests is important.
Olga’s life took a change after having a new baby and she spent three years doubting her professional skills and her chances of getting a good job. She tried to get back into other interests through studying, baking and drawing, but found ‘the pram was pulling me back’. She found she became very isolated and felt less able to contribute as the family was relying on her husband’s income as she tried to focus on looking forward.
She said: “I was convinced (and saw) that not too many companies wanted a woman in the office, who with a small baby might need lots of leave.”
She finished her education when she returned to work after three years caring for her son. She secured a promotion but with changes in the company’s staffing, things were tense. She found the difficulties there had become more heightened and felt that young female colleagues were treated as ‘pieces of furniture’ by one manager. She did not want to stay in this environment and in a few months time decided to leave.
Your next chapter may be nearby
Determined to not repeat this type of experience, Olga looked at the brighter side. She said: “I wanted to be a marketer. Knowing how tricky it is to sell intangibles, I wanted a solid product to work with.”
It turned out to be more difficult to find a job outside traditional IT as a young mother. Some human resource officers advised her to remain within the technology arena.
Olga remained hopeful and continued to study hard. She had many learning experiences along the way, which she hopes others can learn from too. One was setting a low bar to employers. She said: “Companies I worked in wanted to get all publicity and sales increases achieved through deductions from my salary.” This happened once and the next time she was in this situation she asked specifically about the budget before signing up. “I was assured this would not be the case, but again I found the budget for publicity came out of my wages. It was a tough period of disappointments. So when I was offered a part-time administrative job with basic sick leave, I took it gladly as a reprieve.”
The job was far from home and involved a lot of travelling. Olga spent two to three hours a day on buses with Harry Potter audio books for company. “In these traffic jams, I started to feel English at last and loved it. It gave me a freedom no money can buy. Life was getting better.”
Though the job did not pay highly, it gave her something valuable – a working website. After her boss and the developer parted company, she was asked to maintain the site. Through some studying and reverse engineering, she discovered how it worked and it gave her an insight into how to write simple websites from scratch.
Olga’s first encounter with JavaScript wasn’t easy: “My first JavaScript calculator almost made me crazy, but I pursued it.”
Quickly she started to get small tasks from friends and relatives, usually to solve some urgent problems and started to meet popular content management systems. One of the first she met with was WordPress. There was an issue in a website theme used by a website which had been changed and not maintained. It took a whole weekend to solve, but she was determined to work it out. Back then, WordPress was ‘just a system’. She didn’t know then how much it was to become part of her life.
Olga spent the next two years in this role. As time went on, she started to feel worried and less satisfied with the work. The last straw for her was a negative statement from her boss, who was not a programmer and who hadn’t seen any of the work done on the website. She felt the approach was unfair as she had done extensive work on the site. She recalls: “I became angry, but it was exactly what I needed to move jobs.”
When Olga was job hunting, she didn’t feel she had the courage to apply for a developer’s role, despite the learning and work she had already done. So instead she started working on projects where she felt she was more like a ‘seller of box-ready websites’. It was another tough half a year for her with a lot of work, low payment and plans not turning out as she had hoped. On top of long hours, she ended up with pneumonia. She said: “I see now that I was doing a disservice to customers, websites are not a microwave meal – quick, cheap and dummy. There was no life in the sites without a lot of work which no one was willing to buy. Most of the sites I sold back then died after the first year and they never were truly alive and useful.”
You need to be brave and have courage
Olga really wanted a developer job but seeking jobs of this type was very frustrating. From the job adverts she found, it felt like most IT companies were asking for geniuses who already knew a lot of technologies and frameworks. She found this very demotivating.
She then found a job offer on a website outside the most popular job portals and it seemed like a perfect fit. They wanted someone with experience to write from scratch, understand someone else’s code and maintain it, with an ability to translate technical documentation and articles, and make simple designs for printing products. After completing a trial task, she was taken on, and enjoyed a better salary, in a calm environment with good colleagues and without the requirement for a lot of extra hours.
The advert turned out to be a direct ad from one of the sales departments in a technology company. By succeeding in the task set, Olga had bypassed the Human Resources team which she felt would not normally have considered her.
Her boss agreed to her working remotely most of the time. It solved any potential leave problems which Olga had thought may be an obstacle.
For Olga it had been 14 years since the original decision to become a programmer and it was only the beginning.
After a few years at what she describes as an ‘amazing experience’ in this workplace, Olga felt able to move on to her next challenge as a developer.
Decision-making can benefit from wider knowledge
After working with different systems Olga became sure that WordPress is the best CMS for developers and clients. But she was disappointed to find that the ease of use meant that good code was not always a priority for some of the sites she looked at.
“The biggest flaw of WordPress – it’s so easy to make things work that some may feel they don’t need to bother to do things right, but this becomes a problem later.”
In custom themes for a site, she also saw sites being made and clients left without any further support, or items hard coded when clients actually needed more control to change regularly.
Olga used to rely on examples she could easily find, documentation and search engines to improve her understanding in using WordPress. She discovered that just by searching for a specific feature or a solution, you can miss the whole picture.
She turned to online courses to get more comprehensive knowledge and then started to attend WordPress events, firstly online and then by foot, trains and planes! She discovered a worldwide community that was very much alive. She didn’t know when she started studying online materials and attending discussions that she would end up contributing herself to the Learn WordPress platform a few years later.
WordCamps and contributor days became a big part of her life. From her early days attending events and starting out contributing to WordPress, she is an active member of the WordPress.org Global Marketing and Polyglots Teams, and supported the recent WordPress release. She is just beginning her first WordCamp organiser experience, joining WordCamp Europe 2021 on the Contribute Team.
Olga said: “Through the wider WordPress community, I knew not only where to look but also whom to ask. Most importantly, I found allies who don’t think I’m going crazy by speaking with delight about work, and with whom I share a passion and fondness for WordPress. This is what matters.
“Now, after more than seven years of full time development, I am still enjoying endless learning, frequent discoveries, mistakes and an impassioned wish to do better.”
This and a desire to help others use WordPress.org is part of Olga’s continued contribution to its Support and Marketing Teams, and led her to be involved in the Release Marketing questions and answers in 2020.
There is no chequered flag on the way
The road to freedom and becoming her own boss has not been easy for Olga. It is the path that got her where she is today, and she continues to find joy in it. She retains the lessons she’s learned and is always hungry to learn more.
“I travelled through a very uneven path, with a lot of obstacles and noise, but for me it’s like a kaleidoscope where a little turn presents a new picture, a new “ah-ha” moment, new excitement after seemingly pointless efforts.”
She added: “When in doubt I remind myself about David Ogilvy (generally considered the Founding Father of the modern advertising industry) who tried a lot of things before he struck gold with advertising, and maybe that’s why he did.”
Finally, she learned not only to keep a good spirit and try different things, but also to dare as you move forward.
This post is based on an article originally published on HeroPress.com, a community initiative created by Topher DeRosia. It highlights people in the WordPress community who have overcome barriers and whose stories would otherwise go unheard.
You don’t have to be rich to have an online presence. You don’t have to find loopholes in proprietary platforms and hope that they never change their terms of service. You own all of the content that you create on a WordPress site and have the liberty to move it to a new host if you need to, or switch your theme if it fits your mood.
That was Josepha Haden Chomphosy on WordPress is Free(dom) episode of the WP Briefing Podcast, speaking about the four freedoms of open-source software. Those four freedoms are core to how WordPress is developed. A lot of the updates we bring you this month will resonate with those freedoms.
WordPress now powers 40% of the web
W3Techs reported that WordPress now powers 40% of the top 10 million websites in the world! Every two minutes, a new website using WordPress says, “Hello world”! For the top 1000 sites, the market share is even higher at 51.8%. Over the past 10 years, the growth rate has increased, which is reflected by the fact that 66.2% of all new websites use WordPress!
WordPress release updates
February was an eventful month for WordPress releases!
WordPress maintenance releases — version 5.6.1 and version 5.6.2 — came out this in February. Update to the latest version directly from your WordPress dashboard or by downloading it from WordPress.org.
Gutenberg celebrates its 100th release with version 10
The 100th release of the Gutenberg plugin — Version 10, launched on February 17th, more than four years after the project was first announced at WordCamp US 2016. Matias Ventura’s post offers a bird’s eye view of the project over the last four years. Version 10 adds the basic pages block and makes the parent block selector visible in the block toolbar. Version 9.9 of Gutenberg — coincidentally, the 99th release of the plugin, which is also the latest Gutenberg release that will be featured in WordPress 5.7, also came out in February. Key highlights of the release include custom icons and background colors in social icons, a redesigned options modal for blocks (which is now called block preferences), and text labels in the block toolbar.
Full Site Editing (FSE) is an exciting new WordPress feature that allows you to use blocks outside the post or page content. The main focus of the Core team for 2021 is to merge FSE into WordPress core. Here’s the latest on the Full Site Editing project:
The Community Team has published handbook pages and a decision-making checklist for organizers to restart in-person meetups at areas where it is safe to do so (e.g., countries such as New Zealand, Australia, and Taiwan, where there are lower COVID-19 risks). However, WordPress meetups and WordCamps in most parts of the world will remain online due to COVID-19.
Pooja Derashri of India was featured in February’s People of WordPress series. A cross-team initiative led by the Marketing Team with support from HeroPress, the series aims to highlight lesser-known stories of WordPress contributors. The Contributor Story series is collecting new features. If you are an active contributor to a WordPress.org team or a local WordCamp, contact the Marketing Team in the #marketing Slack channel for more information.
Have a story that we should include in the next “Month in WordPress” post? Please submit it using this form.
The Month in WordPress post series is a collective effort, and it would not be possible without contributions from different members of the WordPress Community. Starting this month, we would like to credit and thank all individuals that support this effort with their contributions. I would like to thank the following folks for their contributions to February’s Month in WordPress: @adityakane@chaion07@courtneypk@kristastevensand @psykro.
Thank you to all of the contributors who tested the Beta/RC releases and gave feedback. Testing for bugs is a critical part of polishing every release and a great way to contribute to WordPress.
Plugin and Theme Developers
Please test your plugins and themes against WordPress 5.7 and update the Tested up to version in the readme file to 5.7. If you find compatibility problems, please be sure to post to the support forums, so those can be figured out before the final release.
If you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. We’d love to hear from you! If you’re comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.
Recent Comments