This security release features one security fix. Because this is a security release, it is recommended that you update your sites immediately. All versions since WordPress 3.7 have also been updated.
WordPress 5.7.2 is a short-cycle security release. The next major release will be version 5.8.
You can update to WordPress 5.7.2 by downloading from WordPress.org, or visit your Dashboard → Updates and click Update Now.
If you have sites that support automatic background updates, they’ve already started the update process.
Security Updates
One security issue affecting WordPress versions between 3.7 and 5.7. If you haven’t yet updated to 5.7, all WordPress versions since 3.7 have also been updated to fix the following security issue:
Following the recent statement by WordPress’s co-founder Matt Mullenweg and the Creative Commons CEO, Catherine Stihler’s post, I’m happy to formally announce that CC Search (with the new name Openverse) is now part of the WordPress open source project. Both Matt and I are long-time supporters of Creative Commons. I hope that this will provide a long-term, sustainable challenger to closed source photo libraries and further enhance the WordPress ecosystem.
How Does This Affect Current Users?
Current CC Search users will continue searching and using openly licensed images from around the internet. WordPress plans to continue the great work started by the Creative Commons project and expand search capabilities and features.
What’s Next?
We look forward to indexing and searching additional media, such as audio and video. As we expand our capabilities and grow the project, we look forward to integrating directly into WordPress and the media library. We hope to not only allow search and embeds of openly licensed media but pay it forward by additionally licensing and sharing your media back.
How Can You Contribute?
Stop by the Slack channel, #openverse, and take a look at the code repositories moved under the WordPress organization here on GitHub. You can also follow along with the project on its own make page at: https://make.wordpress.org/openverse. We are working on setting up the new team, process, and procedures.
Join us in welcoming the team and community. As a treat, check out the most recent WP Briefing episode, The Commons of Images, in which Matt and I discuss CC Search and our hopes for it as part of the WordPress community.
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 not as well known.
Creating content with WordPress and blogging helped Fike Komala, from Indonesia, build a career where she can work remotely from different locations in the world.
In 2020, Fike joined a US-based company that specializes in form building to work as a content marketer. Using her experience as a freelancer and later a full time employee, she encourages others, particularly women in Asia, to consider remote work as a career option. She is so impressed by remote working benefits, that she is now considering writing about it for a thesis for her Master’s Degree, which she started this year in Europe.
As a keen blogger, WordPress immediately impressed Fike. Her dad is a programmer, and he helped her create the first of many blogs starting when she was 10 years old. She had private and public blogs, and even an English language one to help her practice and improve her skills.
“I got satisfaction and happiness from pouring my thoughts in writing and publishing them in my blog. Writing my thoughts and feelings often helped me process them, and does even now.”
Fike Komala
With a natural talent and love for languages, Fike pursued an Information Systems degree after graduating from high school. Her course covered business learning Java, HTML, CSS, Javascript, and Android programming. She also took courses to learn Bootstrap and Ruby on Rails.
Earning Through Building With WordPress
Fike’s parents had a business building websites. She was drawn to this work and would help proofread and format the articles. This is how she first encountered WordPress, which was to play a pivotal role in her future career.
“I saw WordPress as something more advanced than other platforms, with more themes and plugins to choose from. The default WordPress websites already looked more professional than others.”
Fike Komala
Throughout school, Fike’s experience with WordPress and blogging helped her earn extra money safely online, including translating texts from English to Indonesia, online surveys, and writing articles in English.
Discovering Work You Enjoy
The last year at University required a year-long full-time internship. Fike worked as an intern at a big general insurance company within the IT quality control staff. She enjoyed working with the people she met and learned a lot through this opportunity, but she declined the offer of a full-time position.
Fike is a good student who loves learning and did well in her education. Through her traditional internship experience, she found that programming in an office job did not fulfill her. It strengthened her belief in a finding a career where she could have the freedom and creativity of working remotely.
“I was a good student, I love learning algorithms, but I didn’t love programming. I’m not that person who can stay calm finding errors in their codes, and then finding out that it’s only missing a character,” said Fike. She added: “I don’t really like the fact that I have to wake up at 6 AM and be back home at 7 PM, and do it all over again the next day.”
Adventure Into Remote Work
Fike spent time improving her freelance profile, revising it, and applying to jobs as a virtual assistant. She was willing to do any small website jobs such as formatting WordPress posts, designing social media posts, and processing orders for online shops. Through a freelance job submission site, she was able to work with people from across the globe, including Singapore, Australia, Europe, and America. Through the site, Fike was able to gain experience with remote working tools like Slack, Asana, Trello, and Google Suites, and the work gave her practice writing in English.
It was through this site that Fike saw a job opportunity with a WordPress plugin company. She sent in her profile and blog.
“This was my first time being interviewed via a video call. I was ecstatic but panicked. On the day, I woke up at 4 AM, got dressed, and opened my laptop. Weirdly, my wi-fi died that morning. So I went to the nearest cafe to get the interview done, and it went great!”
She was hired to deliver consistency on the company’s blog.
Through her job, Fike first began to contribute within the WordPress community and was able to attend her first WordCamp, WordCamp Jakarta 2018, sponsored by her firm. Through WordPress, Fike has met many generous, trusting, and helpful people.
She said: “Because I’ve experienced the generosity of the WordPress people, I wanted to give back to the community.”
Swag from WordCamp Jakarta 2018, that’s Wapuu ondel-ondel!
“I got to know the amazing community behind WordPress. How people voluntarily contribute their time, energy, and skills to the community, from development, marketing to translating.It was really inspiring.”
Fike Komala
You Can Inspire Others Through Contributing
Fike has been an inspiration to people in her local community and globally within the WordPress community through her enthusiasm and energy.
So determined to encourage others to become translators of WordPress, she joined the Global Translation Day event with the Indonesian Community last year and took part in wider marketing of the event. She is pictured below with some of the Indonesian polyglots team.
She continues to support the polyglots and is a General Translation Editor for the Indonesian language. Last year, she also voiced an Indonesian translation of the onboarding video for new contributors joining WordPress.org. She has been a regular contributor to the PerempuanWP, an initiative for Indonesian women working in the WordPress world. Working with a firm which uses the WordPress platform has strengthened her familiarity with projects in the community and encourages her interest in contributing.
To learn more about contributing to WordPress, visit make.wordpress.org/ and follow the “get involved” link. You can join any of the weekly team meetings to get started, and there is a lot of help available.
Fike says, “I want to represent Asian women. In the future, I hope I can inspire more women, especially Asians, to work remotely.” She is now studying in Europe for a Master’s in Digital Communication Leadership. She hopes to use her learning to help other women, particularly back in her home country of Indonesia.
She continues to share her energy for learning and remote working.
“Just learn things. As much as you can. From anywhere, about anything. Keep an open mind. Read books, listen to podcasts, and learn new skills.”
She added: “If you’re working in the WordPress world, join the WordPress community. It’s a great place to learn from and connect with great people.”
Contributors
Thanks to Abha Thakor (@webcommsat) and Meg Phillips (@megphillips91) for writing this feature, to Surendra Thakor (@sthakor), Meher Bala (@meher), Larissa Murillo (@lmurillom), Josepha Haden (@chanthaboune), Chloé Bringmann (@cbringmann) for additional support and graphics, and to Topher DeRosia (@topher1kenobe) who created HeroPress. Thank you to Fike Komala (@fikekomala) for sharing her #ContributorStory.
This post is based on an article originally published on HeroPress.com. It highlights people in the WordPress community who have overcome barriers and whose stories would otherwise go unheard.
In this episode, Josepha is joined by the co-founder and project lead of WordPress, Matt Mullenweg. Tune in to hear Matt and Josepha discuss the relaunch of CC Search (Openverse) in WordPress and the facets of the open source ecosystem.
Have a question you’d like answered? You can submit them to [email protected], either written or as a voice recording.
As WordPress grows, both in usage as a CMS and in participation as a community, it’s important for us to shed the idea that software creation is only about what literally can be done to code or what literally can be done to core or what literally can be done to the CMS.
That was Josepha Haden Chomphosy on the “Your Opinion is Our Opportunity” episode of the WP Briefing Podcast, speaking about the importance of co-development and testing for the continued growth and maintenance of WordPress. This month’s updates align closely with these ideas. Read on and see for yourself.
WordPress 5.7.1 is launched
WordPress security and maintenance release – 5.7.1 came out in April. The release fixes two major security issues and includes 26 bug fixes. You can update to the latest version directly from your WordPress dashboard or by downloading it from WordPress.org.
Contributor teams released Gutenberg version 10.3 on April 2, version 10.4 on April 14, and version 10.5 on April 30! Version 10.3 improves the block toolbar and the navigation editor, whereas version 10.4 adds block widgets to the customizer and improvements to the site editor list view. In version 10.5, you will find a set of new block patterns and enhancements to the template editing mode, along with the ability to embed PDFs.
Following the Full Site Editing (FSE) feature demo hosted by Matías Ventura, the project leadership decided that WordPress 5.8 will only include some FSE features, such as a template editor for pages/blank templates, a widget editor screen, and the theme.json mechanism. Other features like the Global Styles interface and Site Editor (managing all templates) will be made available later. The team has started working on the next steps in shipping these chosen FSE features with version 5.8.
One of the most exciting WordPress events, WordCamp Europe 2021, will be held online on June 7-9, 2021! Event organizers have opened up calls for sponsors and media partners. Free tickets for the event will be available soon — sign up for email updates to be notified when they are out!
The Core Team discussed a proposal to treat Federated Learning of Cohorts (FLoC), a Google Chrome feature, as a security concern. The team eventually decided to track the status of the FLoC trial/implementation in a Trac ticket and monitor periodically.
The Training Team has proposed a contributor ladder as a resource for team contributors to understand ways to participate and find growth opportunities.
As the name suggests, the WordPress Design Library is a library of WordPress design assets, enabling anyone to quickly create design prototypes for WordPress UI in Figma.
These tools are useful for designers when creating new UI and for anyone looking to contribute ideas, enhancements, or even solutions to bug reports. Sometimes pictures really do speak a thousand words.
In this post, we’ll talk about some key features of Figma before diving into a practical example that demonstrates some of the WordPress Design Library utilities.
What Is Figma?
Figma is a collaborative design tool that members of the WordPress project’s design team have been using for several years to work on and share design concepts. It offers a variety of handy features such as: in-browser access, rich prototyping tools, component libraries, code inspectors, live embeds, inline commenting, plugins, and much much more.
Perhaps best of all, it is totally free to sign up and start playing around. If you join the WordPress.org Figma organization (instructions below), you’ll gain access to the WordPress Design Library enabling you to design WordPress UI in no time.
What Is the WordPress Design Library?
In Figma, you can share components and styles by publishing them, transforming your file into a library so that you can use instances of those components in other files.
It may be easiest to think of the WordPress Design Library as a visual representation of all the javascript components that compose UI in the WordPress codebase. As an end user of the library, you can use those components in a self-contained environment to create new interface designs. It’s kind of like a big LEGO box containing all the UI pieces (buttons, form inputs, etc.) that you can use to create and try out new designs.
Creating designs with these assets enables rapid ideation on new interfaces by removing mundane processes that one would ordinarily have to work through. Nobody wants to repeatedly double-check that the button they made perfectly matches the buttons rendered by the code! And on the flip-side of that coin, anyone sharing a design with others will generally endeavor to make specific elements (like buttons) match what exists in the code as closely as possible. The WordPress Design Library solves both these headaches and more.
An additional benefit to these assets visually matching what exists in the codebase is that any designs you create with them will inherently make use of the latest WordPress design language and consequently feel like WordPress with almost no effort required. Passing such designs on to developers makes them easier to interpret and implement too.
Figma Fundamentals
Before getting into the practical section of this post, let’s quickly cover some of the fundamental features of Figma libraries. This will help prepare us for working with the WordPress Design Library.
Components
As we touched on above, the library consists of “components” that serve as visual counterparts to their code-based equivalents. That is to say, there is a Button component in Figma, and a matching Button component in the WordPress codebase.
But what is a Figma component?
Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects.
Let’s quickly explore some of the properties of Figma components to understand the ways they help when working on our next design.
Variants
Some Figma components offer variants. One example is Button(s) which all have the following states:
Resting
Hover
Focus
Disabled
These can be manipulated via the variants interface in Figma:
Other examples of components with variants are form inputs and menu items. Variants are a new feature in Figma, so we’ll be adding more over time.
Overrides
Although any components you insert are intrinsically linked to the master component in the library, it is possible to override some properties.
While working with an instance of the Button component, you can change things like the label, or even the background color, while maintaining the link to the master component in the library. If you’re familiar with git workflows, this is kind of like creating a local branch. Any changes you make can easily be reset in a couple of clicks.
Overrides made to your local instance will persist even when the master component is updated. So if your design calls for a button with a green background, you can apply that override safely with the knowledge that even if the master component is updated, your button can inherit those updates and remain green.
We’ve only really scratched the surface of components here. So I would recommend the official Figma documentation for more advanced information.
Figma Styles
In addition to components, styles are also published as part of the WordPress Design Library. They have similar properties to components in that a master style exists in the library and can be utilized in your local Figma file. Just like Components, Styles will receive updates when changes to the library are published.
Styles are used to define colors, typographical rules, and effects like drop-shadows present in the WordPress codebase. They enable you to apply things like text or background colors that will match other UI parts.
Using Styles from the library, you ensure that your creations match existing UI elements, making it easier to implement.
“Stickers” are simply arrangements of Components and Styles that have been combined to represent common UI elements. They are not good candidates for full componentization due to their frequent customization needs. Examples of Stickers include the Inspector sidebar and the block inserter:
Their utility is simple: find the sticker you need, peel (copy) it from the WordPress Design Library, and stick (paste) it into your local file before customizing as needed.
Stickers are not Figma features like Components and Styles, but any stickers you copy to a working file will stay up to date by virtue of their underlying assets.
Views are arrangements of components, styles, and stickers.
Designing a Block Using the WordPress Design Library
Okay, now that we have a handle on the basics of Figma libraries and their features and the utilities of the WordPress Design Library like Stickers and Views, let’s work through a practical example – designing the UI for a brand new block.
Getting Started
All you need to get started is a Figma account added to the WordPress.org Figma organization.
Once you’ve signed up at Figma, simply join the #Design channel on the community Slack and request an invite. Include your Figma username, and a friendly community member will help get you set up in no time.
Now the fun begins!
To create a fresh new design file in Figma, visit the Gutenberg project and click the “+ New” button.
Now let’s include the WordPress Design Library in our working file so that we have access to all the goodies we’ll need:
Open the “Assets” panel and click the little book icon to view the available Team Libraries.
In the modal, toggle the WordPress Design Library on. You can leave the others off for now.
After closing the modal, you’ll notice a number of components become visible in the assets panel. To insert them, they can be dragged on to the canvas:
It’s kind of like inserting a block 🙂
Creating a Pizza Block 🍕
I love to eat pizza, so for fun, I’m going to design a new block that simply allows the user to display a delicious pizza in their posts and pages. I want the block to include options for a total number of slices and different toppings.
Work Out the Flow
I always like to concentrate on individual flows when designing blocks. That is to say, the linear steps a user will take when working with that block. In this case, I want to create visualizations of the following steps/views in our Figma file:
Inserting the block from the Block Inserter
The Pizza Block placeholder state including options in the block, its Toolbar, and the Inspector
The configured Pizza Block settings
The end result – a delicious pizza sitting comfortably on the canvas
Sketch the New States
Thanks to the WordPress Design Library, I’ll be using as many existing UI components as possible, but I still need a rough idea of how they will be composed in the new interfaces that my Pizza block will require. I normally find it helpful to sketch these out on paper.
Here’s the placeholder state which users will see when they first insert the block. This should be all I need:
Prepare the Views and Stickers
Helpfully, there are Views in the WordPress Design Library I can use for each of the steps in the flow outlined above.
I open the library, navigate to the Views page, find the views I need, copy them, and paste into my working file.
It is very important to copy (not cut) Views from the library so that they remain intact and other people can still access them. If you cut them, they’ll be gone forever, so please don’t do that 🙂
I’m also going to need a block placeholder sticker, so I navigate to the Stickers page, copy the one that most closely resembles my sketch from before, and paste it into my working file.
As with views, please only copy stickers; do not cut them.
Gather the Components
Referring back to the placeholder state I sketched out on paper (it can be helpful to import this into your Figma file), I can see that I’m going to need some form elements to realize the design.
I navigate to the Assets panel, locate the components I need, and drag them into my file:
Helpful tip: Once a component has been inserted, you can transform it into another component via its settings panel. Sometimes it is easier to copy/paste a component you already inserted and transform it this way, rather than opening the assets panel over and over.
Arrange the Views, Stickers, and Components to Create a Coherent Design
Now that we’ve gathered all the individual pieces we need, it’s simply a case of arranging them so that they resemble each of the steps of the flow we outlined before. This is done with simple drag and drop.
If you’re familiar with software like Photoshop, Sketch, and others, this should feel very familiar.
Once everything is in place, our flow is complete:
I still find it incredible that we’re able to do this in just a few short moments.
Hook up the Prototype
With each step of our flow created, the last piece of the puzzle is to connect them and form a clickable prototype.
I switch to the Prototype panel and create click behaviors by selecting a layer, then dragging the white dot to the corresponding frame.
There are a variety of behaviors that the Figma prototyping tools support, such as a hover, drag, and click. It is even possible to create smart animations. Perhaps that’s something we can explore in another tutorial, but for now, I will refer you to the Figma documentation for more advanced prototyping.
Now that I’ve connected all the appropriate elements, I am able to take my prototype for a test drive by clicking the Play ▶️ icon:
I tried to keep this tutorial fairly simple and concise; even though we only really got to grips with the basics here, you can see the power of Figma and the WordPress Design Library when it comes to trying out new designs.
The second major release of the year is right around the corner. You might have heard a bit of buzz about full site editing around your WordPress circles, so this post will give you some big picture things to know as well as a few wayfinding links for anyone who wants to know more.
For Site Owners and Operators
If you own and operate a WordPress site, updating to version 5.8 should be a seamless experience, just like any other update. All the conversation around full site editing is very exciting, but shouldn’t be alarming—everything in the next release that relates to full site editing is opt-in. To experiment freely with it, you need a theme that is built for it. Check the links at the end to see a few examples!
For Agencies and Theme/Plugin Developers
If you extend the functionality of the WordPress CMS for clients, updating to version 5.8 should also be seamless. As always, it’s smart to spot-check custom implementations in a staging environment or fully test when the release candidate is made available. Want to test your products and get everything client-ready? Check out any of the testing options below.
For Contributors and Volunteers
If you contribute time and expertise to the WordPress project, you can join us in the interesting work leading up to the WordPress 5.8 release and update your site with the deep satisfaction of a job well done. There is a lot that goes into every release—from design and development to documentation and translation; if you’ve got some time to spare, and want to help support the project that supports the tool that supports your site (whew!), check out the links below.
Copy by Anne McCarthy (@annezazu) and Design by Mel Choyce-Dwan (@melchoyce)
In WordPress circles (whether it’s your local meetup, a trusted publication, or your networking group), you may have heard terms like Core Editor, Gutenberg, and the Block Editor used interchangeably over the last four years. And if you’re following contributor work on the project itself, you may also have heard some additional nuances—Gutenberg plugin, Gutenberg, or Block Editor.
It can get a little confusing, so let’s take a look at four terms that will help you find your way:
WordPress – WordPress refers to the open source software but also to the community that surrounds it.
Gutenberg – Gutenberg is the code name for a multi-year project to update editing areas for the WordPress software.
Editor – The editor refers to a section of the software that allows you to update content on your site’s posts and pages.
Gutenberg Plugin – The Gutenberg plugin is where early work to update the editor is shared.
The Gutenberg Plugin
Now that we’ve cleared up the definitions, let’s talk about the plugin. When might you use it? What would you use it for? You can think of it as an early access program or a “WordPress lab.” The plugin is updated every two weeks, which means that bugs that have been reported are often fixed and that what you see changes rapidly.
The Gutenberg plugin also contains features that aren’t yet ready for their WordPress debut but are ready for curious users to test and provide feedback. This is a common practice that allows stable features to make it to your site in WordPress releases while allowing experimental features to be tested and refined. To get a sense of whether using the Gutenberg Plugin might be something you want to explore to get access to earlier features, check out the “What’s New” release posts and the Core Editor Improvement post series.
Do I Need the Plugin to Use Gutenberg?
It depends on your comfort level! Generally speaking, it is not recommended to use the plugin on a site that has launched and is actively in use unless you’re very comfortable with the code side of WordPress. Fortunately, each WordPress release comes ready to go with multiple versions of the Gutenberg plugin.
But if you are a keen beta tester who loves reporting feedback, or you feel comfortable navigating how to opt-in/out of the experimental aspects of the plugin, here are a few reasons you might want to dig into what the Gutenberg Plugin has to offer:
Test new features and give helpful feedback. For example, you can use the plugin to help test Full Site Editing.
Get early access to the latest & greatest while navigating when to opt-in or out of experimental features.
Prepare for the future whether you’re a theme author, plugin developer, agency owner, etc.
Do you use the Gutenberg plugin and share feedback on GitHub? Thank you! This kind of feedback is what helps ensure stability in what’s shipped in WordPress releases.
This security and maintenance release features 26 bug fixes in addition to two security fixes. Because this is a security release, it is recommended that you update your sites immediately. All versions since WordPress 4.7 have also been updated.
WordPress 5.7.1 is a short-cycle security and maintenance release. The next major release will be version 5.8.
You can download WordPress 5.7.1 by downloading from WordPress.org, or visit your Dashboard → Updates and click Update Now.
If you have sites that support automatic background updates, they’ve already started the update process.
Security Updates
Two security issues affect WordPress versions between 4.7 and 5.7. If you haven’t yet updated to 5.7, all WordPress versions since 4.7 have also been updated to fix the following security issues:
Thank you SonarSource for reporting an XXE vulnerability within the media library affecting PHP 8.
Thanks Mikael Korpela for reporting a data exposure vulnerability within the REST API.
Thank you to all of the reporters for privately disclosing the vulnerabilities. This gave the security team time to fix the vulnerabilities before WordPress sites could be attacked.
