Yalla Download

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 wpbriefing@wordpress.org, either written or as a voice recording.

Credits

• Editor: Dustin Hartzler
• Logo: Beatriz Fialho
• Production: Chloé Bringmann
• Song: Fearless First by Kevin MacLeod

References

Openverse Repositories

• Catalog: https://github.com/wordpress/openverse-catalog
• API: https://github.com/wordpress/openverse-api
• Frontend: https://github.com/wordpress/openverse-frontend

Tech Stack Outline

• Frontend– Languages:
  • JavaScript, CSS/SCSS
  • Libraries/Services: Vue.js, Nuxt.js# 
• API– Languages:
  • Python, PostgreSQL
  • Libraries/Services: Django, Elasticsearch, Redis
• Catalogue– Languages:
  • Python, PostgreSQL
  • Libraries/Services: Apache Airflow, PySpark

Join the WordPress Slack instance, #openverse

Transcript

Josepha Haden Chomphosy  00:10

Hello, everyone, and welcome to the WordPress Briefing. This is usually the podcast where you can catch quick explanations of some of the ideas is behind the WordPress open source project. Today, I have a little bit of a different topic. It’s still WordPress, it’s still open source, but it’s kind of peering into some stuff for the future as opposed to looking at where we are today or how we got to where we are today.

Josepha Haden Chomphosy  00:36

You might have recently seen an announcement from Matt that CC Search is joining the WordPress project. This is a really exciting thing for open source, for sure, and definitely, from my perspective, for WordPress. And so I invited Matt to join me today to take a look at what he had in mind with bringing that particular project into our project and what we have in mind for the future. And so, today, this is the WordPress Briefing with Matt and Josepha. And I hope you enjoy the conversation we had. Here we go!

Josepha Haden Chomphosy  01:22

So, we recently announced for WordPress that we essentially acquired CC Search, a project that’s been part of Creative Commons. And they recently chose a different kind of roadmap for the work they’re doing in the future. And so it seemed like a really great opportunity to bring this tool and this, I don’t know, this kind of experience for our users into the WordPress project. So Matt, what are your thoughts about how, like this commitment to images with CC licenses, with Creative Commons licenses, can impact WordPress and how we work in the open web.

Matt Mullenweg  02:09

I think it’s pretty exciting because Creative Commons exists to do for media, you know, images, audio, etc., what open source has done for code. And so for people who choose to want to donate their creative work under these licenses, much like anyone who contributes a plugin, or code or documentation or translations for WordPress, now people for whom their method of expression is, let’s say, photography, can put that into the comments like literally, I like why it’s called the Creative Commons, it’s such a good name. It can be accessed within everyone’s dashboard for WordPress. And those images can start to really be part of the fabric of the web the same way that code that runs WordPress or its plugins is part of the fabric of the web.

Josepha Haden Chomphosy  02:57

For anyone who’s listening who’s not actually already familiar with this concept of the tragedy of the commons, do you want to give us the elevator pitch of what that means and why it’s so important for WordPress to try to counterbalance that in our work?

Matt Mullenweg  03:12

Sure, the tragedy of the commons, you know, I think the canonical example is as a shared field in a town, and it doesn’t belong to anyone, so anyone can use it. And when too many farmers took their sheep there, they would overeat the grass, and then there was no more grass left because it was being overutilized, and there was no one owning the field to say, Hey, we need to practice a more sustainable amount of sheep. grass in

Josepha Haden Chomphosy  03:39

Put more grass in there.

Matt Mullenweg  03:41

So basically, the idea is like a shared resource that gets overused and then disappears. With software, we have the opportunity to have the opposite, which is a wealth of comments where every person using the thing actually has the opportunity to make it a little bit better. And that is really beauty of like Wikipedia, open source where every person using it might contribute a small fix, or a translation or a bug report or tell a friend about it, or basically be part of making this thing better, which you know, WordPress is history is very much an example of, and then as it gets better, more people want to use it. And the beautiful thing about software is you can have economics of abundance versus the economics of scarcity. There’s not one field used, but every additional incremental user of WordPress makes this community stronger and creates a larger market for the products inside it. So those types of dynamics can have the opposite of the tragedy of the commons.

Josepha Haden Chomphosy  04:39

Absolutely. I love this idea that you brought it up in your question, not your question, in your answer right at the top. I love this idea of acknowledging that code isn’t the only fabric available in open source and certainly not the only fabric of the internet as we know it. This idea of like, let’s bring Creative Commons licensed images into a more long-term space for WordPress. Do you think that that at some point can apply to videos and other sorts of audio files?

Matt Mullenweg  05:21

Absolutely. There already is a ton of Creative Commons licensed content out there that people can use. But there’s a discoverability problem, you know? Each individual image or audio file or video is, is a little bit of an island. So that’s why it’s so important that there’s the equivalent of a search engine that allows people to discover all the great stuff that’s out there. And what happens today is there’s stock photography sites, some of which used to be Creative Commons-based, but many have moved away from that. So they essentially relicense their user contributions. Or people, if we’re being real, people just go to Google images, and they might utilize images that they don’t actually have rights to. It’s not the end of the world, but it’s not ideal. And so we can create this really compelling directory experience of imagery, which people have chosen to share and want to be used. I think that’s a much better outcome than the equivalent of piracy.

Josepha Haden Chomphosy  06:21

Yeah, yeah, absolutely. So I leapt right into this and didn’t really give any context to what CC Search is or anything, but for anyone who is not familiar with this tool already, CC Search is, as Matt mentioned, a search engine that currently is focused specifically on images that use open licenses. The Creative Commons licenses are like the content-specific version of GPL for code, which is a really big deal, I think. If wishes were fishes, Matt, and you had your total hope ahead of you, what is your hope for the relaunch of this product and this tool in WordPress?

Matt Mullenweg  07:15

Well, first and foremost, I think we can improve the experience of designing and contributing themes and then modifying them with this really fantastic image directory if we’re able to build it in the media library. And lots of plugins like Jetpack do some version of this. I think that Jetpack uses Pexels or one of the proprietary, but open libraries. And so we can make it fully, like you said, the equivalent of GPL and open source, all the better. I think longer-term, I’d love to have a way for people who are adding media to the WordPress site to set it to be available under a Creative Commons license. So just to make it easy and built-in for people to create more Creative Commons license imagery. And then, you know, with the integration of Gutenberg and other things, we can make it easy for other people to use it and credit back the original author if they choose to. And what we find is that even though with CC0, which is essentially a kind of like putting something into the public domain, credit is not required. If you make it the default to link back to the original photographer, author, most people believe that because they like creating things that they use. So you get the best of both worlds; you have the freedom of use for any purpose, including not requiring the credit. But then, just by having it by default, when you insert one of these images, a lot of people are going to leave that and link back to the original author, which I think is also really cool. Like you’re not required to have a credit link on WordPress, but most people leave the Powered BY WordPress on there. 

Josepha Haden Chomphosy  08:45

One of the interesting areas, you mentioned Pexels in this case. One of those interesting areas that we, as a project, can really explore here is how to make it so that the metadata gives you confidence in the origin of the image. Like I don’t believe that there are any set standards for that. I’ve just started my research, obviously, because they’re brand new to us, but I just don’t think there are any standards available there. And, I think that there is an opportunity for WordPress as a true supporter of the open web to help change the fact that we don’t have that’s one of the main competitive disadvantages that open source libraries have been trying to combat and especially with Unsplash, who eventually did get purchased by Getty Images. Still, I feel like part of what must have driven that decision to change the licensing terms had to be that they are up against that behemoth of Getty Images where people know where the things came from. They know where the images came from, and they can trust that lineage and model releases and all that stuff. I’m just really interested to see how we can; I don’t know; I hate to say dignify contributors who are offering their contributions to open source in this way. But, it also is kind of that there’s no sense in saying that just because you did not accept payment from getting images, your photos weren’t any good, or your images did not have an excellent path to where they are housed at that moment.

Matt Mullenweg  10:39

I mean, it’s really fun to contribute to something larger than yourself. And for many folks, you know, their gift, their craft is something like photography. And so there’s always going to be the sort of paid marketplaces and, and something like Shutterstock, I think really fantastic companies and services. I think a marketplace for paid content. But we just want to make an alternative, so those who want to donate their work to the world, much like engineers, and designers, and translators of WordPress, donate their work some of that effort to the world, they can do so. Right now, there are some places for that, but we’re going to try to create one that is fully open, has no advertising, has an open API. So other CMSs can access it too.  You know, we’re going to try to bring the WordPress philosophy to this space. 

Josepha Haden Chomphosy  11:29

Gosh, I just love that. While we’re on the question of contributing to something bigger than yourself, bringing the WordPress philosophy into this space, how do you think CC Search will impact the current media library and how WordPress handles media in general? Or do you have an idea about how it will impact that? Sometimes we don’t know until we get in?

Matt Mullenweg  11:53

Yeah, I think within Gutenberg, the idea of adding an image from an online library or a search is something we’ve wanted to do for a while. But either the licensing made it a little tricky, or, you know, some of the sites that did have open things, maybe the site itself had like a lot of advertising or pop-ups or things like that. So by having this hosted by wordpress.org, we’ll have a clean, open source, and ad-free place that people can access. I suppose it’s also worth saying that CC Search, which we’re rebranding as Openverse, is actually all the code behind is open source as well. So there is going to be a new project on WordPress’s GitHub that will be this open source search engine. So that’s also part of the contributions; we’ll be pointing this search engine to try to index and collect Creative Commons license media, but perhaps it could also provide a base for someone else wanting to build a different characters engine or just host Openverse themselves and run it themselves; that is totally fine.

Josepha Haden Chomphosy  13:00

I should probably mention, for any of the WP Briefing listeners who are contributing to the WordPress project itself, there is a brand new team that we’re working on building, and for one wander over and welcome everybody, we are welcoming in an open source community into our open source community. And so, of course, we want to make sure that they know how to get around and feel welcome in the space. But also, anything that you are interested in helping to contribute to that particular project, I think would be helpful. WordPress is big; we have a long history. And so I think I feel confident in saying that, if I were on that team that’s bringing in this new tool, I would hope that there were some OG WordPressers, who were available to help me discover the ins and outs of things, especially as its 18 years of us.

Matt Mullenweg  14:04

Yeah, it’s also a new technology stack. So let’s say you want to be involved in WordPress, but your expertise is more on the Python side, or Elastic Search or something like that. We now have a project where people who are into that or want to learn about it can get involved. Because, of course, you know, contributing and being involved with open source is probably the best way to learn a technology, better than any college degree.

Josepha Haden Chomphosy  14:28

I was just talking to some folks about that; our active learning opportunities and our passive learning opportunities get into a different balance as we get older. And active learning opportunities are for real in school, right? And our passive learning opportunities where you get to look at someone else’s code, you get to review proposals on user flows, and things are harder and harder to come by unless you happen to be in an open source project where we’re just working on that in the open all day, every day. And I’ll put a link to the repos in the show notes, and also, I’ll include a list of the tech stack that we’re looking at there, just so that no one has to like, chase it down. But yeah, I’m excited about this new integration, not only for the CMS but also for the community.

Matt Mullenweg  15:26

And the whole library will be available to any plug-in who wants to call to it. And like we said, even other CMSs, much like we designed Gutenberg to be able to be used by other CMSs, how cool would it be if Drupal or Joomla or others were also able to leverage this library and allow their users to contribute to it as well?

Josepha Haden Chomphosy  15:47

Yeah, absolutely. Absolutely. There is a burning question that I feel like we probably should just go ahead and answer here. I’ve been asked a few times, and I think you have been asked a few times whether this is an actual acquisition. And If yes, then what entity is it under? Is it under the WordPress Foundation? Is it under Automattic?

Matt Mullenweg  16:10

It’s a little complicated because, as you know, WordPress.org is not part of the Foundation. So basically, Automattic paid Creative Commons, the nonprofit. They will essentially redirect the old URL, so old links to Creative Commons Search won’t break. And we ended up hiring some of the people that they were parting ways with into Automattic. And then we put that open source code, and we’ll run the service on WordPress.org, and then those we hired, Automattic hired, will contribute to WordPress.org and the open source projects that power what we’re calling Openverse now.

Josepha Haden Chomphosy  16:54

I am.

Matt Mullenweg  16:56

That’s kind of an acquisition, but also from a nonprofit, and then going into something, which is not a nonprofit, but is open source and sort of freely available, which is WordPress.org, the website.

Josepha Haden Chomphosy  17:06

Yeah, that has been hard for me to answer because you’re right, it’s not like it was donated to WordPress or something. But everything that we’re doing is being donated back to the project, and of course, hopefully, really living into that WordPress ethos that we have of giving back to, to the project, something that made your work and your life better. So there’s some, some finger-crossing going on in there.

Matt Mullenweg  17:37

We could have skipped some of the steps because the code was open source; we could have just used it or something like that. But it was also a good opportunity, I think, to support the Creative Commons organization. And like we said, as part of that donation, there’ll be redirecting Creative Commons Search to WordPress.org. And honestly, we don’t need that, but it just from the point of view of keeping links workings, which is a big passion of mine. I like that none of the links will break or things to the Creative Commons Search, which I think has been around for… I don’t actually know the exact timeline, but a very long time. It’s been part of the internet for a long time. So we’re happy that it can now continue and be something that can plausibly be around for many decades to come.

Josepha Haden Chomphosy  18:23

Yeah, we’re going to build ourselves a little sustainable program around this project, and it’s going to be beautiful; I’m excited.

Josepha Haden Chomphosy  18:31

I did want to give everybody a cultural heads up. When I say crossing my fingers, I know that for some of our cultures, that means I was lying. That is not what I’m saying—crossing my fingers and moving forward on this with a lot of hope.

Josepha Haden Chomphosy  18:51

I tried to be careful about my local idioms when I’m talking to folks who don’t know that I’m from Arkansas, so I sometimes say weird things. But I’ve given up on y’all, for instance, like that has made its way right back into my language. 

Matt Mullenweg  19:09

Y’all is great. In Texas, we had a funny thing, which maybe applies to you now, which is “more nervous than a long-tailed cat in a room full of rocking chairs.” I bet you haven’t heard that one. 

Josepha Haden Chomphosy  19:21

I have not, but I love it, and I’m going to fold it into my personal vocabulary for later use. 

Josepha Haden Chomphosy  19:30

The response to this has been overwhelmingly positive, and I know that I am incredibly positive. I just mentioned like I’m moving forward through this with hope, even though there’s a lot of stuff that I don’t actually know about how we can implement it. I have never brought an existing open source community into an open source community that I’m currently working with. So there’s a lot of learning to be done in there. But, from your side Matt, like, are there any things that you are feeling anxiously hopeful about for this? Anything that you hope is right, but you’re not sure about?

Matt Mullenweg  20:14

Oh, this is just the first step of many. So just having the search engine, is I think good to provide a service to the internet. But where we can really leverage it is those next steps we already talked about, which is really building out the API and integrating the API with the WordPress admin to make it easily accessible within people’s dashboards. And the Gutenberg blocks to embed these images, quickly and easily, and with all the proper credit and everything. And then the next step, which was probably the one I’m most excited about, which is enabling folks to contribute to the Creative Commons. And by that, I mean the Commons of Images, which have open licenses and are encouraged for reuse and remixing and all those sorts of great things. And I think that anything we can do to increase more of that stuff on the internet also enables a lot of creativity and innovation.

Josepha Haden Chomphosy  21:10

All right. Well, that was an excellent conversation. I am really excited about this. I want to, for my work, just say a huge welcome to the folks over at CC Search and our brand new group around Openverse, and a big thanks to the folks over at the Creative Commons group. Matt, do you have anything else you want to share with any of our audience?

Matt Mullenweg  21:39

No, I feel great that we could support the Creative Commons, keep this going for the open internet, and so excited to work alongside the folks who have been working on Openverse and take it to the next iterations and the next level. 

Josepha Haden Chomphosy  21:56

Beautiful. Well, Matt, thank you so much for joining me today. This was a wonderful conversation. My friends, this has been Matt Mullenweg, WordPress project co-founder, and project lead.

Matt Mullenweg  22:08

Thank you so much for having me.

Josepha Haden Chomphosy  22:17

Thank you for tuning in today to the WordPress Briefing. I hope that conversation made you as excited as I am about this new adventure that we’re embarking on with CC Search and that whole team. I’m going to put in the show notes a few links to where you can find them, where they’re doing their work, what you can collaborate on, and also some notes about the tech stack that goes into it. I’m your host, Josepha Haden Chomphosy.Thanks again for joining me and I’ll see you in a couple of weeks.

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.

Want to contribute to WordPress 5.8? Check out the 5.8 Development Cycle. To contribute to core, head over to Trac, and pick a 5.8 ticket –– more info in the Core Contributor Handbook. Don’t forget to join the WordPress #core channel in the Make WordPress Slack and follow the Core Team blog. The Core Team hosts weekly chats on Wednesdays at 5 AM and 8 PM UTC. 

Gutenberg Version 10.3, 10.4, and 10.5 are out

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. 

Want to get involved in building Gutenberg? Follow the Core Team blog, contribute to Gutenberg on GitHub, and join the #core-editor channel in the Make WordPress Slack. The “What’s next in Gutenberg” post offers more details on the latest updates. If you are unfamiliar with the Gutenberg plugin, learn more in this post.

Full Site Editing updates

Following the Full Site Editing (FSE) feature demo hosted by Mattias 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.

New to FSE? Check out this blog post for a high-level overview of the project. You can help test FSE by participating in the latest FSE Outreach Program testing call –– leave your feedback by May 5th. Want to participate in future testing calls? Stay updated by following the FSE outreach schedule. You can also submit your questions around FSE right now.

WordCamp Europe 2021 is on the calendar

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!

---

Further Reading

• WordPress now powers 41% of the web!
• Q1 2021 updates from the WordPress project have been published.
• 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 Core Team will remove Internet Explorer 11 support in WordPress version 5.8. 
• The Community Team has opened up a discussion on the path to in-person WordCamps and is requesting feedback from community members.
• The Community Team is also requesting feedback on whether companies who run competitive ads against WordPress can apply to sponsor WordCamps. 
• WordCamp Centroamérica 2021 and WordCamp Greece 2021 were held successfully in April. Videos of WordCamp Centroamérica are now available on WordPress.tv! While you are at it, don’t miss this excellent recap of WordCamp Prague 2021 on the WordCamp Central blog.
• Contributor teams are actively working on building the Block Pattern Directory. You can read about work updates on this project from the Meta Team and the Design Team.
• Check out the blog post on getting started with the Figma WordPress Design Library. You can use the library to create design prototypes for the WordPress UI in Figma.
• The Polyglots Team is making significant progress on the Polyglots Training course.
• The Training Team has proposed a contributor ladder as a resource for team contributors to understand ways to participate and find growth opportunities. 
• The Requests library has moved to the WordPress GitHub organization and has a new release: version 1.8.0. 
• The Docs Team is working on redesigning HelpHub by reviewing its content and design.
• The Themes Team has shared a proposal on fixing upload issues for block themes.
• Tyler Lau from the U.S. was featured in April’s People of WordPress.

Have a story that we should include in the next “Month in WordPress” post? Please submit it using this form.

The following folks contributed to April’s Month in WordPress: @andreamiddleton @cbringmann @chaion07 @hlashbrooke and @jrf 

Created by James Koster, (@jameskoster)

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.

Figma.com

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.

help.figma.com

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.

---

To learn more about styles in Figma, I recommend the official documentation.

Views and Stickers

“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:

1. Open the “Assets” panel and click the little book icon to view the available Team Libraries.
2. 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:

1. Inserting the block from the Block Inserter
2. The Pizza Block placeholder state including options in the block, its Toolbar, and the Inspector
3. The configured Pizza Block settings
4. 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:

You can try it too; just click here.

That’s All, Folks!

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.

Resources

• A few block themes: TT1 Blocks, Hansen, Block-based Bosco, Q
• A few focus areas: Gutenberg plugin focuses
• A few ways you can test: Gutenberg plugin, Beta testing plugin, Gutenberg Times nightly build
• A few pieces of documentation: Full Site Editing Overview

In this episode, Josepha discusses the importance of co-development and testing for the continued growth and maintenance of the WordPress project. 

Have a question you’d like answered? You can submit them to wpbriefing@wordpress.org, either written or as a voice recording.

Credits

• Editor: Dustin Hartzler
• Logo: Beatriz Fialho
• Production: Chloé Bringmann
• Song: Fearless First by Kevin MacLeod

References

• 2.5 Usability Testing Report 
• WordCamp Europe 2021
• Pune Work Along (Self Study) Meetup
• French Mini-Translation Day, April 30, 2021
• April 14, 2021, Full Site Editing Go/No-Go Demo Recap
• Full Site Editing Go/No-Go Next Steps
• Test WordPress.org

Transcript

0:10

Hello, everyone, and welcome to the WordPress briefing, the podcast where you can catch quick explanations of some of the ideas behind the WordPress open source project and the community around it, as well as get a small list of big things coming up in the next two weeks. I’m your host, Josepha Haden Chomphosy. Here we go!

0:39

Prior to Gutenberg, our current multi-year project that is changing the way we see WordPress, another multi-year project changed the way we saw WordPress. Starting in 2008, substantial changes to the WordPress interface came in a series of major releases, starting with WordPress 2.5. That was before my time in the project; I’ve only ever worked with the current dashboard in WordPress. But, from what I’ve read, the user testing that would have gone into it was a huge undertaking and very well coordinated. Now, WordPress has not taken on that type of robust testing project since, but starting around 2014 or 2015, a community testing practice was started. I’ve shared these calls for testing frequently, both on Twitter and in this podcast. But you may not really know why I find the testing program so valuable. So today, I’m going to explore with you the concept of co-developers in open source.

1:52

Open source software, like WordPress, is built by the people who show up. There are a few obvious groups when you think of software, the developers, designers, technical writers, folks who monitor the forums, and really, all the teams you find in our WordPress project. Co-developers or co-creators, if you’ll join me in making our tent a little bigger, refers to the users of an open source product who actively engage and contribute to the work by using the software and sharing any bugs that they find.

2:25

I mentioned this group in the episode about how WordPress improves. Specifically in that episode, I underlined that if you consider users to be part of the collaborative process, as long as people use your product, those people will have opinions about your product’s needs. And today, I’m extending that thought a bit further to say that, as long as there are opinions, there are opportunities.

2:51

When you know what isn’t working, you can focus your attention on a solution, you can focus on making sure that you can make it work. The existence of co-creators is one of the great things about open source. No designer or developer or product owner has to know every sort of user to be able to get feedback from them. If they show up, test the software and get their thoughts written down, then you can start to see patterns and common pain points. It is also, unfortunately, one of the great difficulties of being an open source project. After all, if users don’t show up, or don’t test, or don’t write down their feedback, it’s impossible to know what worked for them and what didn’t. And on top of that, with such a large percentage of the web being supported by WordPress in this case, not every problem is part of a pattern. And not all patterns are part of the current priorities.

3:54

Looking beyond that double-edged sword. Let’s say that this idea of a co-creator makes sense to you. And more than that, you feel like it describes you. What does it mean for you to show up in WordPress? There are lots of good ways to offer this sort of feedback and contribute to those patterns that can help us see through the fog. So I have for you a mini list and, of course, a bunch of links in the show notes for you. 

So some good ways. First, you can participate in any of the dedicated calls for testing. They are short and frequently have a guide. I participate in them and generally find them fun. I say generally because sometimes I also find them frustrating. That’s really okay too; the frustrations helped me to identify that I found a problem. And if I can find a problem, then I have saved someone else from finding that problem in the future. The second thing you can do is file a bug report with information about what happened when you ran into a problem and how someone like me could make your bug happen on their site. Bug

5:00

Reporting is one of the things I’ve grown to really love in my time and open source; I did not love it. At first, I was really scared to do it. I mostly used to send videos of the bugs that I found to other people and ask them to file the bug reports for me. But then, of course, I never knew whether they got fixed or not. So I was scared to do it at first. But once I figured out what makes a “good report,” I felt like I was helping circle hidden treasure on a map or something. I realized also not everyone’s excited about finding hidden treasure on a map. But I play video games and finding hidden treasure on maps is, like, a thing.

5:43

A third really great way to contribute like this is that you can join any community meeting to learn more about what’s happening now and in the future, or just to see what makes WordPress work. As a heads up, these meetings go really fast. And they’re all in text. And there’s sometimes, but not all the time, a little bit of jargon that you have to head to your favorite search engine to find. But I sit in on about half of them myself and get a lot of really good information about things that I’ve been wondering about, things that looked broken, but actually are functioning exactly the way that they should. And I just didn’t want them to function that way. And more often than not, I found out that something that I thought was broken, was already identified and being fixed. Those are three great ways to show up and help give feedback that helps make WordPress better and more functional for more people. 

There are also a few other ways that we see people trying to share that feedback that don’t work quite as well. And I’m going to touch on a few of them just because it’s important to know, as you’re trying to figure out how to get started with this. The first one is just tweeting your frustrations, and I get it like that’s literally what Twitter is for.

7:03

But also it’s hard to create a block from “I am frustrated, behold my hateful rhetoric.” Not that any of you, my dear listeners, ever tweet hateful rhetoric. Still, that is really hard for anyone to figure out what was actually wrong in that moment. Another thing that is not the most functional way to give feedback is review brigading. The Internet rewards this kind of behavior, but I have found at least for WordPress, those false positives and false negatives can be really confusing for our new users. And the third way, that’s not our best way, and probably is the least best way, is just by giving up and not telling anyone what broke for you.

7:45

I know that I already said it’s not possible to fix everyone’s problems. But while it’s not possible to fix everyone’s problems the moment they get shared, it’s also truly impossible to fix any problems that no one knows exist. And so giving up and not sharing an issue so that we can identify it as part of a pattern of problems is probably the least effective way to help us help you get your problem solved.

8:13

This brings me back to the question of the value of WordPress users as co creators in the development process. 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. It’s also important for us to constantly remind ourselves that the best outcomes are the result of collaboration with the people who use WordPress the most. I know that not every type of user we have is showing up to give us feedback about where WordPress doesn’t work for them. And I would love to see more feedback that helps us to figure out where our patterns are.

9:03

So the bottom line is this without user feedback that has some clarity of what was expected versus what happened, the work to make a good choice involves a whole lot of guessing. So since open source software is built by the people who show up, I hope this gives you an idea of how you can show up and help improve the tool that powers your sites.

9:32

That brings us to today’s community highlight every episode or so I share either a great story of WordPress success or a great story of a WordPress contributor who helped some folks along the way. Today’s community highlight comes from @trishacodes who shared one of her early to WordPress mentors. She says “@RianRietveld was such an encouragement and helped me find the courage to speak up.” I have had myself many conversations with Rian, and that rings true for me as well. 

10:00

That brings us to the moment you’ve all been waiting for, the small list of big things. It’s actually kind of a medium list. Today, I’ve got four whole things to share with you all. The first thing on my list is that WordCamp Europe is coming, that will be June 7th through the 10th. It’s a multi-day online event. I will share in the show notes a link to the main website; there you can get an idea of what will happen, the schedule, and get your hands on some tickets so that you can get it in your calendar and prepare yourselves. 

The second thing I want to share is for all of our polyglots out there. The French team is planning a translation day coming up on April 30. I will share a link to that as well so that you can get an idea of what that takes if you’re feeling like you want to do some translation work. The third thing I want to share is that the Indian community in Pune actually started a new meetup series. It is a translation work along self-study – also for all of our polyglots out there. I would love to see as many people as are interested in both learning about how to do translations and certainly translating WordPress get registered for that. A final thing I want to share with you all is that if you are curious about what full site editing features will be included in the 5.8 release, that’s the WordPress release that’s coming out in the middle of July, you can check out my recap and recording of the demo that was held with Matt, Matias, and the rest of the team. There’s are also a number of other posts of next step ideas that I will share in the show notes as well.

11:51

That, my friends, is your small list of big things. Thank you for joining in today for the WordPress briefing. I’m your host, Josepha Haden Chomphosy. I’ll see you again in a couple of weeks!

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. 

---

The WordPress mobile apps are the best way to manage your site from anywhere. If you’re already using the app, you might have noticed a new visual design that’s been rolling out. That rollout is complete in WordPress 17.1, which is available today for both Android and iOS. If you’re not already using it this is the perfect time to give it a try!

We add new features and improve the WordPress apps in every release, but our visual design hasn’t changed much in the last few years. Over the last few months we’ve thought about how to modernize the design of the apps. As we’ve implemented features like Dark Mode, we’re taking advantage of new components made available in the latest versions of iOS and Android.  

Bigger, bolder headers call out key product areas and create a distinction between the top level tabs and deeper levels of the apps. A new color palette pairs a more neutral background that lets your content shine with brighter blues that make interactive elements even more noticeable. A new serif typeface is a nod to WordPress’s roots in writing and publishing.

We hope you enjoy these updates as you use the apps and we’d love to hear your feedback. Reach out to us from within the app by going to My Site, tapping your photo on the top right, tapping Help & Support, and then selecting Contact Support.

Here’s a peek at the latest changes in the block editor — subtle-yet-practical enhancements that help you create beautiful posts and pages more efficiently:

• New page layout picker experience.
• Convert text and images into Columns block.
• Improved spacing options for social links and buttons.
• Streamlined behavior of the writing prompt.

Let’s dive in!

New Page Layout Picker

Page layouts are pre-designed templates that make creating beautiful pages a breeze. In this update we focused on improving the layout picker, making it easier to quickly browse different categories and select your layout.

Convert text and images into Columns Block

Transforming one block into another is a nifty trick that can greatly improve the editing experience. With the latest update, text (and images too!) can be automatically converted to a Columns block with the click of a button.

Select two or more blocks (these could be Paragraph, Heading, Image, etc.), click on the grouped block icon, and select “Columns” from the list of transformation options. The number of blocks selected will correspond to the number of columns.

Improved spacing options for Social Links and Buttons

Get creative with new ways to arrange your social links and buttons. This update brings you greater control over spacing and unlocks some neat layout ideas.

The correct alignment will be visible once you finish editing the Social Icons block.

Streamlined behavior of the writing prompt

You’re probably familiar with the writing prompt that greets you every time you start a new post or  page. Until now you’d also see it on every new line in your document. We’re happy to report that’s no longer the case! To streamline the writing process the prompt will now only appear once. There will be no subsequent prompts with every new line — just space for you to write your thoughts without distractions.

You keep building, we’ll keep improving

We can’t wait to see what you build with the improved block editor. In the meantime, we’ll keep new updates coming your way.

Happy editing!

WordPress 5.7.1 is now available!

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.

Props to Adam Zielinski, Pascal Birchler, Peter Wilson, Juliette Reinders Folmer, Alex Concha, Ehtisham Siddiqui, Timothy Jacobs and the WordPress security team for their work on these issues.

For more information, browse the full list of changes on Trac, or check out the version 5.7.1 HelpHub documentation page.

Thanks and props!

The 5.7.1 release was led by @peterwilsoncc and @audrasjb.

In addition to the security researchers and release squad members mentioned above, thank you to everyone who helped make WordPress 5.7.1 happen:

99w, Adam Silverstein, Andrew Ozz, annalamprou, anotherdave, Ari Stathopoulos, Ayesh Karunaratne, bobbingwide, Brecht, Daniel Richards, David Baumwald, dkoo, Dominik Schilling, dragongate, eatsleepcode, Ella van Durpe, Erik, Fabian Pimminger, Felix Arntz, Florian TIAR, gab81, Gal Baras, Geoffrey, George Mamadashvili, Glen Davies, Greg Ziółkowski, grzim, Ipstenu (Mika Epstein), Jake Spurlock, Jayman Pandya, Jb Audras, Joen A., Johan Jonk Stenström, Johannes Kinast, John Blackbourn, John James Jacoby, Jonathan Desrosiers, Josee Wouters, Joy, k3nsai, Kelly Choyce-Dwan, Kerry Liu, Marius L. J., Mel Choyce-Dwan, Mikhail Kobzarev, mmuyskens, Mukesh Panchal, nicegamer7, Otshelnik-Fm, Paal Joachim Romdahl, palmiak, Pascal Birchler, Peter Wilson, pwallner, Rachel Baker, Riad Benguella, Rinat Khaziev, Robert Anderson, Roger Theriault, Sergey Biryukov, Sergey Yakimov, SirStuey, stefanjoebstl, Stephen Bernhardt, Sumit Singh, Sybre Waaijer, Synchro, Terri Ann, tigertech, Timothy Jacobs, tmatsuur, TobiasBg, Tonya Mork, Toru Miki, Ulrich, and Vlad T.

Your website is a product of your hard work and passion. Therefore, when your site hits a milestone — it shouldn’t go unrecognized. To make it easier for you to keep track of your site’s achievements, we’ll be rolling out a new celebratory notification that will alert you when your site reaches or surpasses a certain number of views. 

We hope these celebrations are meaningful and motivational for you and that they inspire you to take time to pause, reflect, and celebrate. 

If you have the WordPress app on your mobile, we also have a little surprise for you each time you unlock a milestone! Be sure to update your WordPress app to the latest version. If you don’t have the app yet, download it for free on both Android and iOS.

We’d love to hear your feedback! Reach out to us from within the app by going to My Site, tapping your photo on the top right, tapping Help & Support,  and then selecting Contact Support.