Wordpress Planet

Subscribe to Wordpress Planet feed
WordPress Planet - http://planet.wordpress.org/
Updated: 1 week 5 days ago

WPTavern: GiveWP Launches Peer-to-Peer Fundraising Add-On

Wed, 10/06/2021 - 00:42

The GiveWP team announced an extension of its flagship donation plugin for allowing peer-to-peer (P2P) fundraising in late September. The solution should make the project even more appealing than before for those looking to break from third-party donation services and go the self-hosted route. The first version rolls out individual and team fundraising pages, leaderboards, campaign sponsor support, and more.

In the past, GiveWP offered a simple solution for setting up donations on a website. People could use it for everything from nonprofit organizations to fundraising smalltown baseball team jerseys. However, any efforts to raise money fell squarely on the site owner’s shoulders.

The Peer-to-Peer add-on changes that by allowing people who support a particular cause to be both an evangelist and a fundraiser for the project.

“Peer-to-Peer is a unique form of fundraising,” said GiveWP co-founder Matt Cromwell. “To date, GiveWP has been focused primarily on the single donation form. But Peer-to-Peer is about grouping individual fundraisers into teams, each with their own form and campaign goal.”

Campaign fundraising page.

The extension allows site owners to create an overarching campaign while breaking it down into smaller individual or team-led sub-goals. For example, a campaign can have a donation goal of $100,00, but teams can reach for smaller chunks of that, such as $10,000. Ultimately, all donations are pooled together into the campaign total.

“This is a type of fundraiser that nonprofits use to raise significant funds,” said Cromwell. “These aren’t one-off simple fundraisers typically.”

The extension adds a bit of gamification to fundraising campaigns. Individuals and teams are both added to separate leaderboards, showing their rank among their peers.

Campaign leaderboards.

Individuals and teams can do more than just compete for the top rank on a campaign. They can customize their own fundraising page. It is this social element that helps bring a bit more humanity to a project.

“Examples of this type of fundraising are the Susan G Komen ‘Race for the Cure’ or the Boston Marathon,” said Cromwell. “Individuals sign up to be team captains, they recruit team members. Members have goals that lead to the team goal. All teams together go toward the total campaign goal.”

There are times when some fundraising efforts can feel a bit faceless, almost corporate-like entities asking for donations. When you start adding people from outside an organization to do some legwork, they may feel like part of something bigger.

Custom team page.

“Of course, we consulted with our customers, we held a Town Hall to get their input and feedback,” said Cromwell. “Our customers have been asking to do this type of fundraising for years. We have a lot of input on this in our feedback system. The human element is part and parcel to the success of this popular form of fundraising.”

A P2P solution was the top-voted feature request through the GiveWP feedback system. As for the future of the add-on plugin, it is easy to see what the GiveWP’s users are asking for through its own feedback channel. Currently, there is no shortage of ideas.

“We are dedicating at least two developers per development cycle over the next few cycles to continue to improve and enhance P2P based on the ongoing feedback we get from our users,” said Cromwell.

He did not give any specific details about other projects the GiveWP team is working on. However, he did note that they are excited about providing more solutions for nonprofits.

“We’d love to see our team providing more solutions outside of only the donation form side of things,” he said. “Nonprofits need stable, beautiful, and performant websites, and we think we can help on that front now too.”

WordPress.org blog: The Month in WordPress: September 2021

Tue, 10/05/2021 - 20:01

There’s a lot of tolerance in open source software for shipping slightly imperfect work. And that’s good. When we ship software that’s a little bit imperfect, it makes it clear how everyone can participate, how everyone could participate, if they could find this WordPress community that supports the CMS.

That was Josepha Haden on the “A Sneak Peek at WordPress 5.9” episode of the WP Briefing Podcast, talking about what goes into a WordPress release like version 5.9. Read on to find out more about updates on the latest release and the latest WordPress news from September 2021.

WordPress Translation Day 2021 Celebrations ran for 30 days

WordPress Contributor teams, led by the Polyglots and Marketing teams, organized WordPress Translation Day celebrations for the entire month of September. Contributors from across the world joined the celebrations by translating WordPress into their own languages. Additionally, the team organized a host of global and local events. Translation sprints were organized by the Community and Training teams, as well as local groups.

As part of the celebrations, nominations were invited for contributors who had made a significant impact on the translation of WordPress and its availability in so many languages worldwide. More than 30 notable polyglot contributors were nominated for their contributions. They will be featured in the coming month on the WP Translation Day website, together with event recaps and more news.

Read the latest People of WordPress feature on polyglots contributor Yordan Soares, from South America.

WordPress Release updates

Want to contribute to WordPress core? Join the #core channel, follow the Core Team blog, and check out the team handbook. Don’t miss the Core Team chats on Wednesdays at 5 AM and 8 PM UTC. 

Say hi to Gutenberg Versions 11.4 and 11.5

We launched Gutenberg version 11.4 and version 11.5 this month. Version 11.4 adds image blocks to the gallery block, duotone filters for featured images, and padding support for Button Blocks. Version 11.5 adds flex layout support to the group and social icon blocks along with widget group blocks. It will support the addition of a site logo or title directly into menus.

Want to get involved in developing 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 gives details on the latest updates.

New Guidelines for in-person WordCamps

The Community Team published new guidelines for returning to in-person WordCamps in regions where in-person events are allowed by the local public health authorities. 

Community members can now organize in-person WordCamps for fully vaccinated, recently tested negative, or recently recovered folks (in the last three months) — provided their region passes the in-person safety checklist OR if vaccines and/or COVID testing are accessible to all. Organizers can continue to plan online WordCamps if their region does not meet the guideline. 

New guidelines are also available on the return of in-person do_action hackathons.

Want to get involved in the Community Team and help bring back in-person WordPress events? Follow the Community Team blog and join the #community-events channel in the Make WordPress Slack! Check out the following upcoming WordCamps and meetups.

Important Team announcements/updates Feedback/Testing requests from Contributor Teams WordPress Events updates Further reading

Have a story that we could include in the next ‘Month in WordPress’ post? Please submit it using this form

The following folks contributed to September’s Month in WordPress: @webcommsat, @chaion07, @dansoschin, @harishanker, @meher, and @tobifjellner

WPTavern: Facebook Outage Rekindles Push for a Free and Open Web

Tue, 10/05/2021 - 02:45

Facebook, Workplace, Instagram, and WhatsApp went down today for roughly six hours due to a Border Gateway Protocol (BGP) configuration error. Cloudflare describes BGP as “the postal service of the Internet.” It is responsible for routing Facebook’s traffic and making all of its domains accessible to visitors.

To be more precise (and Geek Factor 5) the BGP routes serving Facebook's authoritative DNS were withdrawn, rendering all Facebook domains inaccessible. That's per @DougMadory , who knows a few things about BGP/DNS.

— briankrebs (@briankrebs) October 4, 2021

At first glance, the outage appeared to be a malicious attack following a Facebook whistleblower’s revelations on 60 Minutes Sunday evening. BGP routing can be hijacked, but so far there is no evidence to suggest that it’s anything other than an ill-timed configuration error.

“The thing I saw at Facebook over and over again was there were conflicts of interest between what was good for the public and what was good for Facebook, and Facebook over and over again chose to optimize for its own interests, like making more money,”  former Facebook product manager Frances Haugen told 60 Minutes.

Haugen copied tens of thousands of documents of internal research before leaving, one which stated: “We have evidence from a variety of sources that hate speech, divisive political speech and misinformation on Facebook and the family of apps are affecting societies around the world.”

Haugen’s interview with 60 Minutes had already made Facebook’s lack of ethical compass a hot topic at media outlets before all of its web properties went down earlier today. This outage is one of the most severe in the company’s 17-year history, due to the cascading effects of Facebook’s infrastructure being tied into so many aspects of every day life. According to The Independent, reports of problems at internet and phone companies started rolling in, as Facebook and its related apps are often confused with the internet.

The whistleblower’s evidence of the pernicious nature of Facebook’s algorithms, combined with the widespread outage of the company’s network of services, has sparked a renewed call for people and businesses to return to the open web.

Seems like a good time to remind every business owner that you do not own your audience on social media. Whether you have 10 followers or 10,000,000, they can be gone in an instant. Build your email list and create content on your own website.

— Quincy Zikmund (@quincyzikmund) October 4, 2021

Now is an excellent time to email your local authorities, school, camp, church, soccer league, whatever – and tell them:

"Please stop posting your updates on Facebook and Instagram, which are liable to disappear. Instead, use a website on the open web, and email updates."

— Mark Hurst (@markhurst) October 4, 2021

These kinds of outages disrupt those who have built their communications and commerce on top of Facebook’s products. Businesses put themselves in a vulnerable place when they rely on a walled garden to deliver audience engagement, especially when that garden’s algorithms promote divisive discourse and misinformation. Business owners should take recent events as a wakeup call and revoke all the permissions given to unaccountable platforms for short-term gains. It’s time to invest in the long-term health of your online presence by building on the open web.

While we're at it: if you don't have a Web site of your own and you've been blogging and creating content on third-party platforms, now might be a good time to reconsider creating one and owning your own little corner of the internet. 🔑

— Sara Soueidan (@SaraSoueidan) October 4, 2021

As good people work to expose the inner workings of companies that have abandoned principles in pursuit of profit, I am hopeful the web will right itself and applications will become more open and adept at helping people navigate these turbulent times. For those today who are remembering what it’s like to have a breath of fresh air in Facebook’s absence, challenge yourself to start creating content on your own site. Make your website the original source of your work and distribute it out to social networks where you want to extend your reach.

WPTavern: The Next Web Publishes Storyblok-Sponsored Hit Piece on WordPress

Mon, 10/04/2021 - 22:32

Last week, under its news section, The Next Web published what could only be described as a hit piece: Developers hate WordPress — and so should marketers. The claim was that, despite its current 40% market share, folks should start looking at alternatives for a better experience.

The first developer interviewed for this piece was the CEO of Storyblok, Dominik Angerer. Storyblok is a headless CMS, a competitor to WordPress.

The second person interviewed for the article was Doeke Leeuwis, the founder and technical director for Story of AMS. The agency focuses on headless eCommerce. What is one of the three platforms it uses? If you guessed Storyblok, you would have gotten it right. Bonus points if you predicted it was listed first of the three in their marketing material.

The third developer interviewed was Mitchel van Bever, who also works for Story of AMS. The company has been featured multiple times on the Storyblok blog and is a featured case study.

Are you starting to see a pattern yet?

If you read through the rest of the article, you will note that the post was sponsored by Storyblok. At least they were honest about it.

Somehow I believe most readers would have skipped the article if that was posted before the content.

It is easy to find developers who dislike WordPress. But, you lose credibility when writing a piece that features interviewees who are either directly sponsoring or benefitting from the story.

The centerpiece for the entire story hinged on the 2019 and 2020 Stack Overflow annual developer survey. There is a lot to glean from the data provided by over 65,000 workers in the field. However, the article merely focused on a single point: WordPress was voted the most dreaded language or technology at 67% in the last year. Everything else centered on what those with a vested interest in Storyblok had to say.

We could talk about scalability, but with WordPress.com as a prime example of running the WordPress software at scale, do we really need to?

We could talk about flexibility, but when WordPress has more free third-party plugins (59,000+) than Storyblok has in total live websites (500+ according to BuiltWith), is it really worth diving into?

As a writer in the WordPress sphere, you may think I am entirely biased. That is at least partially true. However, I have worked with multiple systems. Laravel is one of my favorites, but its beautiful architecture does not always translate to quickly getting a job done in the same way as WordPress. I have helped friends and family launch projects on several non-WordPress services. It all depends on what the best tool for the job is.

I have even created my own custom CMS for my personal blog. I felt like WordPress was overkill for what I needed. It is OK to use another tool even when you typically prefer working with something else. My custom blogging system was built just for me, but it now runs on two websites. I had another developer friend crazy enough to try it.

My love for WordPress is not absolute. It is not unconditional.

But I still love it. There are 1,000s of others who love working with it too, and these developers are more likely to tell you what the actual issues with the platform are. We can criticize it honestly because we are down in the trenches, working with the platform every day. We know it is not always the ideal programming experience. We know it has some legacy baggage. Despite its warts, we have built something that most others only dream of doing. We have created a vast community.

If you thought it was all about who had the shiniest code, you would be wrong.

It is about business competitors willing to communicate and even help others in their space.

It is about Five for the Future, a program where WordPress-related companies contribute to free software.

It is about support forum volunteers lending a helping hand.

It is about the 100s of folks on the Make WordPress teams who contribute to various aspects of the project, everything from code reviews to translations.

It is about sharing a drink with a years-long friend you just met IRL for the first time at a WordCamp, albeit mostly virtual for the last couple of years.

It is about the podcasts that people produce for the love of the platform and its surrounding projects.

It is about quitting your nine-to-five to launch a new business as a plugin developer.

It is about taking part in a movement that has allowed millions to publish on the web.

No, not every developer who participates in the annual Stack Overflow survey loves WordPress. Most of them may dread working with the platform, and that trend may very well continue. What we have is bigger. WordPress is its community.

This smells like just another hit piece from a WordPress competitor like we have seen before. At least some of the Wix videos were funny (come on, you know you laughed at at least one or two of them), and folks got free headphones from the deal. This Storyblok-sponsored post just leaves a sour taste.

Like my grandma — probably everyone’s grandma — used to say, “You catch more flies with honey.” This was an opportunity to sell potential users on Storyblok’s features. Maybe bashing competitors brings traffic, but I doubt it brings any goodwill or long-lasting benefits.

WordPress.org blog: WP Briefing: Episode 17: WordPressing Your Way to Digital Literacy

Mon, 10/04/2021 - 12:00

In episode 17 of the WordPress Briefing, Josepha Haden Chomphosy reflects on her WordCamp US keynote and digs into how participating in open source projects can help you learn 21st Century Skills. 

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

Credits References

WordPress 5.9 Planning

5.9 Target Features

WordCamp US 2021

Transcript

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

Josepha Haden Chomphosy  00:42

Today I want to talk to you a little bit about the digital divide, where it is, maybe a bit of where it’s headed, and which parts of the WordPress open source project and CMS can help. This is a focused look, though, so I won’t touch on some of the hurdles that everyone is aware of when you get outside of in-person environments, things like parental modeling or supervision, education on the relevance of technology, etc. This is a follow-up to the conversation that I had at WordCamp US last week—and so doing a little bit of a deeper dive here. And we’re gonna start with what exactly is the digital divide. 

Josepha Haden Chomphosy  01:23

So the digital divide is considered those who benefit from the digital age versus those who don’t; that feels like a really big concept. And the current discussion is primarily about access, or for years that has been about access anyway, especially physical access. So those who have computers versus those who do not have internet in their homes versus those who do not. But I don’t necessarily agree with that particular, really focused definition of the problem. 

Josepha Haden Chomphosy  01:59

If the only problem we see is access, then the solution becomes to get cheap devices and internet to everyone, which certainly has led to more people being connected than ever before.

Josepha Haden Chomphosy  02:12

With this proliferation of devices that are considered both smart and mobile (mobile in this context, meaning handheld or pocket-sized), the discussion over the last few years has been shifting. It’s been shifting into more of a discussion around the education around the relevance of internet access, discussions around the quality of access to the Internet, and also discussions around Wi-Fi and dial-up and the surprising cost of data.

Josepha Haden Chomphosy  02:42

But from my perspective, there are a number of really dangerous assumptions that we make when we boil it all the way down to who has access and the quality of that kind of access. 

Josepha Haden Chomphosy  02:54

The first dangerous assumption is that we run the risk of conflating being tech-savvy with being digitally literate, and they’re not really the same things. The second assumption that we run the risk of is assuming that access to cellular data equals access to the internet through any other means. And also assuming that cost is always the determining factor.

Josepha Haden Chomphosy  03:19

And the final fairly dangerous assumption that we’re making there is that we allow ourselves the ability to mark the digital divide is fixed in our minds. Once we get enough access to everyone, we’re just done. There is no more divide. But as a way of illustration, if you think about access, not in the context of technology, like high technology, digital technology, and in the context of like writing, you probably own a writing utensil, and you probably have access to paper of some sort, which is great. But just because you have like a pencil and a piece of paper doesn’t mean that I can send you home right now – I guess most of you are listening at home.

Josepha Haden Chomphosy  04:07

It doesn’t mean that I can send you to your desk right now. And consider you prepared to write a best-selling novel, right? Because giving you physical tools no more makes you a novelist than handing me a computer when I was a teen made me digitally literate. 

Josepha Haden Chomphosy  04:24

So let’s talk about what it takes to be digitally literate. I’ve lumped the following skills into three groups. It’s broadly defined as 21st-century skills, but the groups that I have them in is not a comprehensive list of those 21st-century skills. 

Josepha Haden Chomphosy  04:41

The first group that is a large component of digital literacy is critical thinking skills. So computational thinking and problem-solving. That particular one is not new, exactly. But the computational thinking part certainly is. Not all problems are solved with code, but the basis for thinking through things procedurally is increasingly important. 

Josepha Haden Chomphosy  05:04

The second one in that set is communication through multiple media, consuming communications or content through Twitter, Instagram, Snapchat, or any other format, but also creating the things that communicate—writing blogs, creating videos, both calls and standalone, and forums, things like that. 

Josepha Haden Chomphosy  05:27

The third set in that group of critical thinking skills is around collaboration, which some people will say is more about communication. But I find that collaboration both online and in-person is a skill set all to its own. Communication only gets you so far when you’re learning to cook to collaborate with people that you don’t normally work with. And so, I have lumped that into critical thinking skills. 

Josepha Haden Chomphosy  05:54

The second big bucket for digital literacy is actually literally digital literacy. So I have three, three things in here as well. Evaluating information is obviously incredibly important in the environment that we’re in right now, for just information’s sake. But then things like understanding the differences between copyright versus copyleft licenses, understanding the difference between an .org ending URL and a .com ending URL, and evaluating the general veracity of sources that you’re finding on the web.

Josepha Haden Chomphosy  06:32

The second part of that group is media use and creation, understanding the difference between folks who consume and folks who create the content we have, how to find information online, and the most sensible places to keep information online. And the third area of digital literacy that I find to be vitally important is the ethics of licenses both around use and access. So again, things like copyright vs. Copy, copyleft. And specifically for WordPress, that means understanding things like the Creative Commons licenses, GPL, MIT, but then also copyright is its own complicated question unto itself. But the other things that show up for us for WordPress that show up for us with technology are also things like open access versus proprietary information and sources. And things like plagiarism versus sampling.

Josepha Haden Chomphosy  07:33

And our third big bucket, which has become increasingly complex, but the third big bucket for digital literacy to my mind is actually considered something that I call life skills. So things like self-direction, knowing what you want to do next, and how to get it done. Time management is also in there, knowing how much time something will take and being able to make sure that you are getting things done over time, as opposed to trying to accomplish everything at the last second. 

Josepha Haden Chomphosy  08:03

A big part of these life skills is cross-cultural and social communication. The internet is tricky, right? Because it’s simultaneously incredibly insular and increasingly global. Like you can if you wanted only ever read things that already confirm your existing biases. But the very nature of the internet, the very nature of the web, means that the world is much smaller. We have more ready access faster to everyone everywhere in the world than we used to have. This means, of course, that cultural awareness is an absolute must now more than ever. This is for what it’s worth the time of year when I give this talk. And that’s because of this last part of the life skills section, which is digital citizenship. 

Josepha Haden Chomphosy  08:54

Digital citizenship generally is the second week of October 2 or the third week of October. And it’s one of my favorite weeks because it is something that comes up all the time in our ecosystem. It comes up all the time and open source in general, but certainly for WordPress. So those are our three big buckets of digital literacy, a subset of 21st-century skills as a whole.

Josepha Haden Chomphosy  09:22

That’s a lot of stuff, I know. And it’s also really hard to figure out how you can learn any of those skills, and from my experience, I really believe that WordPress as an open source project can help people learn those things.

Josepha Haden Chomphosy  09:43

Once upon a time, ages and ages ago, my mother told me that in order for me to become a better writer, I would have to read and in order to become a better communicator, it would probably help if I spent a little bit more time writing, and I have always felt that the same must be true for all the things that we learn, you find a positive example and study it to become better. Or, depending on what you’re learning and how you’re trying to learn it, you find a passive example of something that you want to be able to do better from an active standpoint and participate in that so that your active production of the other part is better.

Josepha Haden Chomphosy  10:24

Here are a few parts of the WordPress project and WordPress itself that can help with this.

Josepha Haden Chomphosy  10:31

So there are first a few really specific teams; if you’re contributing to a team like Themes, or Plugins, or Core, the three areas of those digital literacy skills that you have an opportunity to learn there. For critical thinking, you’re going to run into problem-solving and computational thinking. You’re also going to run into distributed collaboration, which was really important as just a concept when I first wrote this talk. And now it is currently really important as a reality because we have a bunch of companies that are going to either remote work or partially distributed or fully distributed. And that’s the way that WordPress has worked for a pretty long time.

Josepha Haden Chomphosy  11:19

So I’ve always felt like it was important because it was important to WordPress, but it’s also becoming increasingly an important part of just how to exist in the world at the moment. For those three teams, the things that you can really tap into and practice for the life skill section are digital literacy, nope, digital citizenship, self-direction, and time management obviously comes up in any open source project because you are volunteering your time and it is up to you to kind of decide how much you can commit or not various other parts of time management and directing one’s own project. Now, but you also get the opportunity to test and practice your cross-cultural communication, social communication and learning what it means to collaborate across cultures in that way.

Josepha Haden Chomphosy  12:15

On the digital literacy side, you also get a little bit of that information evaluation and synthesis for what it’s worth. And then obviously get to learn more about the ethics of various types of licenses and how use and access relate to those things.

Josepha Haden Chomphosy  12:35

We also have a team or two; these are not really teams or twos. These are things that you can do that are either solo activities or group activities. One is working or checking out the support forums, and the other is blogging. We’ll start with support forums. 

Josepha Haden Chomphosy  12:52

If you’re doing this as a group activity, there are a couple of extra things that that you can practice here. But suppose you’re doing it as a solo, just way to give back to the project sort of thing or way to learn some of these skills sort of thing. In that case, you can get almost all of these digital literacy skills woven into working in the support forums, depending on what’s happening in the moment and the questions people have brought up. But for critical thinking, obviously, you get some problem solving in there, not as much the computational thinking as the procedural thinking part. But you certainly also get to tap into communication with multiple types of media, collaboration in person and online, depending on whether you’re doing this as a solo effort or a group effort. And then, of course, research, which I didn’t really bring up in any of those groupings for digital literacy, is certainly a very important part of it.

Josepha Haden Chomphosy  13:49

For the digital literacy grouping of skills related to digital literacy, you get to work on evaluating information and, depending on how complicated an answer might be. You can also get that opportunity to practice synthesizing complex information and research, a digital literacy skill. And then, once people have responded to a topic you’ve answered, you also get to tap into that life skill section. You get to be you get the opportunity to practice digital citizenship related to synchronous or asynchronous conversation. You also get to see more about how cross-cultural communication and collaboration works and social communication across those various boundaries that naturally show up when we’re working across cultures that way. And as I mentioned previously, information synthesis, as well.

Josepha Haden Chomphosy  14:53

The second one that I have mentioned can be like a solo effort or a group effort, depending on what you do. Blogging, for most people who use WordPress, is probably the most common application of how WordPress can help you do stuff. So I often see it as the most relevant and the most immediately accessible to anyone. But you know, you got to meet people where they are. So, I would strongly believe that this is our best way to help people learn these things. 

Josepha Haden Chomphosy  15:30

So blogging for the critical thinking sorts of things, you have an opportunity to practice communication across mediums. You will probably get an opportunity to practice your research skills, chances are, you’re going to get the opportunity to practice some problem solving, and honestly, like if you’re hosting your site, problem-solving is going to come up when using WordPress as soon as you add in plugins and themes, because you sometimes kind of have to figure out what’s working and what’s not, and what’s playing nicely with other things and what’s not. It’s possible that with blogging, you’re also going to have an opportunity to get to practice some distributed collaboration. But that’s probably going to depend on what you’re doing with your site as well.

Josepha Haden Chomphosy  16:30

Licenses and how they apply to the thing that you’re using feel a bit different when you are the one who’s creating. And so learning about how those things work and don’t work and how they can best suit what you’re trying to do. Blogging is absolutely an excellent opportunity to dig into that a bit and learn a bit more about that. As far as your life skills go,

Josepha Haden Chomphosy  16:56

that’s where you, again, get to practice some digital citizenship by figuring out who your audiences are and also when you have to communicate with them via the comments or any other way that you have built up a feedback mechanism there. 

Josepha Haden Chomphosy  17:11

Self-direction obviously will come into this, maybe time management if you are blogging on, I was gonna say on a paid basis, but that’s not really I don’t know, on a project basis, like some of us are students and have to write things based on deadlines. And so, you know, self-direction, potentially time management, always cross-cultural communication, social communication, research, all of these things show up in there.

Josepha Haden Chomphosy  17:41

And, you know, I really believe in this concept of how blogging and bringing people into maintaining a website can teach you all of these skills. Because when I was younger, I was a bad communicator. And now, I am across the board known for my effective communication and my ability to work across cultures. And so the defining moment, which was like a four-year moment, and so not necessarily a moment, but the thing that really made all the difference was when my mom challenged me to write every single day. She had noted that I was not necessarily great at getting from one point to the next. I wasn’t necessarily great at building my arguments when I had to explain something to people. And she suggested that writing every day would help me tap into this big thing about communication and working with other people collaboration, all of that. And as an adult on the other side of it. Like, I thought she was super wrong when I was younger, because don’t we all think our parents are wrong when we’re younger. But as an adult on the other side of it, not only was that an opportunity for me to literally learn how to communicate better. But it also, when I look at it, gave me access to opportunities to practice all sorts of 21st-century skills and digital literacy skills in an environment that was relatively safe. And so, I am a big proponent of this particular one.

Josepha Haden Chomphosy  19:26

Another team that helps us tap into and practice a lot of our digital literacy skills is the Documentation team. I recommend that you let this be a supervised activity if you’re doing this with students because, you know, it’s a wiki. You can put weird things in there on accident or just inaccurate things. So for critical thinking, the primary skill that you’re going to be able to practice if you’re working on documentation is collaboration. You would think that it was also like information synthesis and information evaluation. But for a lot of the work that we’re doing, the documentation exists. And what we’re looking at is trying to figure out where it no longer matches what is currently in the CMS, or currently in the project or currently in the team, whatever it is that you’re working on at that moment. And so, it’s a strong collaborative effort in the WordPress project. You have to have done the general work to figure out what needs to be changed in the documentation. But a lot of times, you need to figure out who has access to make the changes, what has prevented us from making changes in the past, and things like that. And so I say, collaboration is the only one to learn and critical thinking, but it’s actually a really big one and can take a fair amount of effort in this particular context.

Josepha Haden Chomphosy  20:49

From the digital literacy aspect, of course, there is evaluating information. But this particular type of information evaluation is a little different for documentation. And this actually is true for the Documentation team, for the Training team, and also for the new Learn team. This question is true for all of them. There is a huge difference between presentation versus application of information. The way you present information for people who already know it and just need confirmation of something or are using it for reference material is really different from when people are looking at a piece of documentation that should be telling them how to accomplish something. And they try to apply it either to their own processes at the moment or apply it to teaching other people. And so evaluating information to make sure that what is presented can be applied, and all of the ways that that very complicated journey with managing information can kind of work or not, depending on how things are going in your section of the open source project at the moment.

Josepha Haden Chomphosy  21:59

The third group of skills that you can really dig into in those teams, again, is digital citizenship, basically, everything is digital citizenship in WordPress because we’re just people online.

Josepha Haden Chomphosy  22:24

And this final grouping that we have this final team and group of skills. So the Community team is a substantial and far-ranging team; they have many things that fall into their area of expertise. And so this has traditionally kind of functioned as a linchpin around education and ensuring that that was all relevant for users and attendees of events. The Community team will remain pivotal to so many things that we do now. But now that we have really awakened the Learn team and re-enlivened that Training team, this will shift a little over time. But yes, so that grain of salt that depending on when you listen to this, if you listen to it in 2050, maybe it’s not accurate anymore. Hopefully, most of what I say is not accurate in 2050. But you know, still.

Josepha Haden Chomphosy  23:27

 Anyway! Critical thinking that’s where we were. So the critical thinking group of skills inside the Community team, you are going to have an opportunity to practice problem-solving. And frequently also procedural thinking, depending on what you’re working on in that team. Multimedia communication is absolutely true. And that’s true, whether you contribute to the team itself and make sure that the team is functioning and doing their basic tasks. Or if you are organizing an entire event, whether it’s online or offline or however that is being accomplished. 

Josepha Haden Chomphosy  24:07

Multimedia communication for this particular team is constant for all of their work and something that everyone who works on there gets to practice all the time. For digital literacy, this comes up a lot if what you’re doing is working through any sort of like programming plans, making sure that what we have in place for events is really excellent. It’s a really excellent opportunity for practicing the evaluation of information, learning more about media use and creation, and then naturally, everything to do with licenses copyright copyleft, not only for everything that we produce but then also for everyone in the ecosystem. 

Josepha Haden Chomphosy  24:55

This team helps so many plugins, authors and theme developers, and other groups who participate in the ecosystem understand the nuances of the GPL and why it matters so much to WordPress. And then in the life skill section, there’s the obvious life skill section, life skills that have come up for all of them—so digital citizenship, cross-cultural and social communication. But also you have the opportunity to tap into that self-direction and time management practice, which probably should also be considered in all of these teams. But, you know, things change as we go. 

Josepha Haden Chomphosy  25:45

Those are the most likely digital literacy skills that you would end up practicing in the Community team, depending on how you are participating in the Community team at that moment.

Josepha Haden Chomphosy  25:59

So I said that we would talk a little bit about where this is all headed and what to do next. And like I just said, when I got lost in my own reverie, they’re like, hopefully, everything that I’ve shared here is out of date by 2050. Like, if we can come back to this particular podcast, or this presentation, or anything I’ve ever said, about digital literacy over my time with WordPress. And if we could come back to that in 2050, or, you know, I was going to say, 20 years from now, 2041 feels really close. But, you know, come back to it in the future, and say, that was all really excellent information to know at the moment. And we did do those things. And now, WordPress has proven that open source contribution and collaboration can teach all of the necessary 21st-century skills that anyone would need to survive in the world. And we did do it, that would be really cool. But I don’t think that that’s where we’re headed. Not because I don’t think people believe in what I’m saying or care about what I’m saying. But because it’s very easy to kind of let these things go at some point.

Josepha Haden Chomphosy  27:20

Even if you at some point, were proficient in all of what is considered 21st-century skills, sometimes our skills don’t get used very much. And so we lose track of them. And we don’t know, or we don’t know how to teach them to other people and various ways to do that. So I hope that when we revisit this in the time capsule of the internet 20 years from now, we can say that was a great explanation. And we learned so much. And we made so many changes in such progress that now we need a new version of this. That’s really all we can do, always striving to leave the world in a better position than when we found it.

Josepha Haden Chomphosy  28:07

All right, that brings us to our small list of big things. I don’t have a ton to share with you today. But what I do have to share with you is a really big deal. So we are about a week away from the Go/No-Go point of WordPress 5.9. That is the final release of the year. And as soon as we know what is a go or a no go from that meeting on October 12th,  everyone is going just to hit the ground running. And so, if you are interested in contributing to that release, either by being a participant in the release squad or leading some part of the release squad. Absolutely. Drop by and let me know because I am interested to know who wants to learn more about doing that. And this is actually something that has gone by. I mentioned at the top that I spoke at WordCamp US.  That is still true; I did do it. And so did a bunch of other really excellent presenters. If you missed WordCamp US on Friday, for whatever reason, because you know, life is complicated. Pretty soon, we will have the videos. We’ll have all the videos up with captions quickly and have those available for everyone to watch and learn more from as their schedule allows and as their attention allows. And that is your small list of big things. Thank you for tuning in today for the WordPress Briefing. I’m your host, Josepha Haden Chomphos, and I’ll see you again in a couple of weeks.

WPTavern: Logtivity: A WordPress Activity Log Service With Customizable Charts, Alerts, and CSV Exports

Fri, 10/01/2021 - 21:49

Launched by Ralph Morris and Steve Burge in June this year, Logtivity is a plugin and service that allows site owners to track everything that happens on their WordPress installs. The duo has made continual updates to the plugin since. In the past couple of months, they have added deep integration with Easy Digital Downloads. They are also planning to build around more eCommerce-related plugins.

Burge mentioned that using the Logtivity service allows site owners to track and log activity at scale. While small sites could get by with an on-site solution, it can be harder to do while growing. “This offers a strong alternative to using a plugin because you don’t need to store huge amounts of data on your own server,” he said.

The service provides graphs so that end-users can visualize their data, but they can also dive directly into the logs and look at specific actions. Users can also set up unlimited alert notifications through email or Slack and download reports as CSV files.

Site dashboard showing different chart types.

The Logitivity WordPress plugin is free to download and install, but it merely serves as a bridge to the commercial service. The pricing page has three tiers that start at $9.50/month and run to $49.50. The rates primarily differ on the number of logs generated, user access, and length of data retention. However, each tier can be used on an unlimited number of sites.

I have been running the service on WP Tavern for a couple of weeks. There are not many things I would want to track specific to this site other than posts published and commenting numbers. The short-term data has not told me much that I did not know already. However, I could see how these logs could come in handy over months or years. If we were running an eCommerce website, the information could be invaluable.

Viewing a specific set of logs based on an action.

Users can create reports of specific logs and display them as either bar or line charts. These can be generated based on an action, such as “Post Published” or “Comment Created.” Users can also add a specific context, such as a post ID. For example, a user could display a chart for each product file download through the plugin’s deep integration with Easy Digital Downloads.

This is the type of thing that the team has in mind at the moment. The primary use case since launch has been logging eCommerce activity.

“People who run eCommerce sites need to track registrations, subscription changes, file downloads, license key activations, login activity, and more,” said Burge. “eCommerce site owners need this for customer support and also to deal with refund requests and chargebacks.”

Currently, each of the service’s features is handled via the Logtivity site. The team has plans to bring them into the WordPress admin interface. However, it could be late 2021 or early 2022 before the integration happens.

“We’d love to bring Logtivity data directly into WordPress,” said Burge. “And because there’s no need to worry about Logtivity slowing down your site, we have some interesting ideas for how and where user activity can be displayed in the WordPress admin area.”

How It Started and Where It Is Going

Burge serves as the marketing brains behind the project. His primary WordPress-related business is PublishPress, but his customers had asked for a project like Logitivity for several years.

“Ralph Morris started Logtivity for a customer at the web dev agency he works at,” said Burge. “The customer’s site has around 100,000 users and gets a great deal of activity every day, from new registrations and subscriptions to resources being downloaded and cancellations. They were using a WordPress plugin to track customer activity, but as the number of logs grew, this process took longer and longer and became more clunky to perform. The final straw was when they were unable to perform the CSV exports, as it would keep timing out. Ralph scratched the itch and built a little MVP. After a few weeks, he showed it to his colleagues and got permission from his boss to offer it to the client to be the first user, and a little while later, the first paying customer.”

He said the two connected thanks to Iain Poulson, who recently co-launched the acquisitions marketplace FlipWP.

“Ralph lives really close to where I grew up in Hampshire, England,” said Burge. “We got our heads together and decided on a partnership: Ralph as the developer and myself as the marketer.”

Outside of integrating more directly with the WordPress admin, the Logtivity team has a roadmap that will keep them busy for a while. Topping that list are more integrations with third-party plugins.

“Our primary use-case is eCommerce sites, so WooCommerce is central to our plans,” said Burge. “But we also plan deeper integrations with more plugins that WordPress eCommerce sites use, including LearnDash, MemberPress, Paid Memberships Pro, and more.”

Several players in the space are moving toward broad integrations across the ecosystem. Chris Lema talked about it being a vital strategy for business growth with StellarWP’s recent acquisition of LearnDash.

Burge also noted that his team plans to continue improving the service’s alert system. “In future versions of Logtivity, you’ll be able to send more flexible alerts to more channels. We also plan to provide SMS alerts for your most important notifications.”

Akismet: Version 4.2.1 of the Akismet WordPress Plugin is Now Available

Fri, 10/01/2021 - 18:31

Version 4.2.1 of the Akismet plugin for WordPress is now available.

This update contains a fix for a bug in version 4.2 that could cause AMP validation errors on some sites, depending on the template they were using.

To upgrade, visit the Updates page of your WordPress dashboard and follow the instructions. If you need to download the plugin zip file directly, links to all versions are available in the WordPress plugins directory.

WPTavern: Gutenberg 11.6 Introduces New API for Locking Blocks

Fri, 10/01/2021 - 05:00

Gutenberg 11.6 was released this week with a new API for managing lock control at the block-type level. When defining a block, developers can now use the lock attribute to designate whether a block can be moved or removed. The PR introduces parts of the locking support mechanisms proposed by Matias Ventura in a separate issue earlier this year.

Ventura explained that while the editor already has template locking support to prevent inserting or moving blocks (i.e. for custom post type templates), it doesn’t yet offer much granular control or a UI for the different locking states. He identified block themes as an important use case for establishing a new block-level API for representing lock status. Block themes may necessitate the ability to lock down key elements, such as preventing the removal of the post-content for a single post template. If you have ever played around with the template editor then you have likely discovered how easy it is to remove important elements by accident.

Block locking UI mockup

“Another use case that we’re building for is having a Checkout Block with different blocks that act as fundamental steps,” WooCommerce and Gutenberg engineer Seghir Nadir said. “We don’t want people to delete or move those steps since they’re fundamental and their order is also important, but we want to allow people to select them, access settings, and insert blocks in between them.”

During this week’s core editor chat, Paal Joachim Romdahl highlighted the need for a locking mechanism for Reusable blocks.

“At the moment it is too easy to make an accidental change to a Reusable block,” Romdahl said. “I worry that only having the hover overlay and the initial click [to] select the parent Reusable block is just not good enough, that we soon should get a lock mechanism in place. There is a lot of feedback from users who have accidentally deleted the inner contents of the blocks and wondered what happened.”

Romdahl has created several issues about to the possibility of adding a locking mechanism to the inline toolbar for reusable blocks, where users would need to unlock to edit the contents.

Now that the foundational infrastructure is in place for managing lock control at the block-type level, contributors can begin building a UI to control it, as outlined in the Locking and TemplateLocking issue. Ventura said future iterations should include a UI that indicates which blocks are user-editable and also display block status in the list view and block inspector.

WPTavern: Gutenberg 11.6 Improves the Global Styles UI, Adds Child Theme Support

Fri, 10/01/2021 - 01:45

Gutenberg 11.6 landed yesterday. Contributors added dozens of enhancements and bug fixes. Admittedly, there was not a whole lot that excited me as a user about this release.

Typography options for the Post Title block. Nice.

Cropping for the Site Logo. A necessary addition.

Toolbar button for converting old Gallery blocks to the new — still experimental — format. Sweet.

For the most part, the release felt like a slew of routine enhancements that have been in the pipeline for those of us closely following the plugin’s development. Almost boring. And that is not a bad thing at all. Less excitement and smaller doses of iterative improvements can be healthy for the project and its developers. We do not always need to feel like we are chasing the next big thing. This is a well-rounded release that polishes many areas, from navigation to widgets to general block enhancements.

There were two features that I am happy to see movement on. That is the site editor’s Global Styles system and child theme support.

Global Styles Updates Default site editor look with Global Styles panel open.

Global Styles is the system that will truly connect end-users to theme developers and vice versa for the first time in WordPress history. We have made some attempts at this, such as the customizer. However, this feature will handle it on top of the standardized block system.

Essentially, themes will talk to WordPress through their theme.json files, and users will speak the same language through the Global Styles panel.

For example, imagine a theme author sets up the default text color as black and the background as white. This will appear on the front end of the site but also be reflected in the site editor. The Global Styles interface allows users to change those two colors to something they prefer. They can also see of a preview of their color and typography styles in the box at the top of the panel.

Updating colors, preview shown in editor and at top of panel.

And, it does not stop at a couple of simple colors. Users can modify all sorts of design aspects like typography and spacing at the root and block levels.

Gutenberg 11.6 adds a navigation component to the Global Styles sidebar. Overall, it feels much smoother working through the top and sub-levels while editing my theme’s styles.

Updating the global padding for the Code block.

This is sort of a small but vital step toward overhauling the overall Global Styles interface. There is still much work to be done, but I am eager to see where the Gutenberg contributors take this component in the coming weeks and months.

I did run into one snag. Clicking on the Typography tab at the root level produces an error. However, it works at the block level.

Contributors also updated the old “Aa” icon representing the Global Styles panel with a half-dark-half-light circle button. My immediate reaction was that it was for switching between light and dark modes.

This was a sentiment shared by a user (from a now-deleted account) in the GitHub ticket.

Global Styles is not a new system disconnected from styles and themes, indeed is an improvement to the current themes system. If we were to consider the strength of WordPress’ past and present, we would perceive that on the dashboard, indeed a brush icon has been developed for years in people’s memory as an association with appearance, themes, styles, personalization. Therefore, the icon that would be most comprehensible in people’s memory regarding the new Customizer remains a brush. I say new and better Customizer, because this is how common people manifest what they understand about Global Styles. Departing from a pencil brush to yin-yang, moon, or water drop, I have not tested yet with public, but from past experience I assure you people are going to find this new icon unrelated and confusing.

Block Child Theme Support

As one of the pioneers of child theming in WordPress, using them long before they were officially supported, this is something near and dear to my heart. I created my first theme shop on this foundation. I have loads of ideas about how the block paradigm can reshape the theme space, and child themes are at the center of many of them.

However, all of the components of Full Site Editing have not entirely supported child themes until now. There are still a few pieces left to fit into the puzzle, but the system should work, mostly.

Templates, template parts, and theme.json files from a child theme should now completely overrule those from the parent. These changes work on both the front end and in the site editor.

Some open questions are being worked through in a related GitHub ticket. The most crucial development is still to come, which will handle merging values between the parent and child theme.json files. For example, it makes sense that child themes should be able to overwrite colors and typography while skipping definitions for layout-related values, falling back to the parent.

Once that is in place, designers will have an easy-yet-powerful way to realize the original vision behind CSS Zen Garden, a project that at least partially inspired child theming’s adoption by WordPress.

Akismet: Version 4.2 of the Akismet WordPress Plugin is Now Available

Thu, 09/30/2021 - 18:55

Version 4.2 of the Akismet plugin for WordPress is now available. It contains the following changes:

  • Improved compatibility with the most popular contact form plugins, which should lead to improved accuracy.
  • Added links to additional information on API usage notifications.
  • Reduced the number of network requests required on a comment page when running Akismet.

To upgrade, visit the Updates page of your WordPress dashboard and follow the instructions. If you need to download the plugin zip file directly, links to all versions are available in the WordPress plugins directory.

Gutenberg Times: Full-site Editing MVP: Can I Build a Landing Page?

Thu, 09/30/2021 - 18:15

Josepha Haden Chomphosy was the featured guest on the inaugural episode of the WPTavern Jukebox podcast, hosted by Nathan Wrigley. In their conversation, they covered a lot of ground. The show is definitely worth your 40 minutes of listen.

Around minute 23 of the audio they talked a bit more about Full-Site Editing and its merge into the core. Chomphosy said she knows ‘this summer’ is an ambitions goal, and she also assured the listeners that the team won’t release something that’s not functional and usable.

Go/NoGo Mid to End of April

The Core release and Gutenberg teams will make the Go/NoGo decision to merge Full-Site Editing for the next WordPress release in July (5.8) on April 17 or on April 23. In other words, the state of Full Site editing in Gutenberg plugin version 10.4 and 10.5. If it doesn’t get merged into 5.8, Full-Site Editing will be merged in WordPress 5.9 to be released in December 2021

Chomphosy also shared her – unofficial – benchmark of what should be possible with the prototype of the Site Editor by April: Can you – without writing code – create a landing page with Full-site editing tools. She calls it “the smallest viable sentence. The I-AM of websites.”

A Landing page is the smallest viable unit

This single web page consists of a header, a footer, a hero image with a button, some text, a form or a call to action. This narrows the focus of the MVP, the prototype, considerably. It also increases the probability that the first low-key, opt-in version of Full-Site editing might actually make it into the next WordPress version. A narrow scope will also help content creators, teachers and developers get started working on their discovery of the new WordPress feature. As soon as it is merged into WordPress core, plugin developer and theme builders can test their ideas against it and get familiar with the underlying concepts.

It’s a good way to ease-in content creators, too. When you are not dealing with the header and footer of a big site, but just for a single page, it’s not so critical if you get lost on the way from content editing to template part (header, footer) editing and back again. It’s all on the same page, literally.

This transition was one of the major causes of confusion during the first few testing calls for the FSE outreach program and the developers are working on making it less confusing. With this unofficial benchmark of a single landing page creation, the team will have additional time and input on how to better handle that switch between editing a template that is used for many pages and the content of a single post or page content.

A very tangible goal, “Can I build a landing page with the tools available?” makes it straightforward for WordPress contributors who work on the parts that make that are not code, like documentation, marketing, training and testing.

Call For Testing: Create a Header

The 4th call for testing via the WordPress FSE-Outreach program asks you to create a header for a Restaurant. Anne McCarthy has detailed instructions for you as well as video if you are in a testing mood. Your input is definitely wanted!

Chomphosy also added that Matias Ventura, the technical lead for Gutenberg, might have different benchmarks for the MVP. I am curious, and answer Josepha’s call for questions on Full-Site Editing for her next episode of the WPBriefing podcast when Matias will be her guest.

Full-Side Editing project encompasses a lot more than the Site Editor with template parts. There are Global Styles, Widgets in Customizer, a new Navigation and Widget screen, block-based themes with a theme.json file and query block. Some of it will work its way into the MVP. We will see how far the team progresses on their journey, that will only begin once Full-Site editing comes to Millions of WordPress users. No Fear, though. It will all be opt-in. Nothing will break.

“Given enough eyeballs, all bugs are shallow” — Eric Raymond’s Linus’ Law

Leave Your Email for our Weekend EditionSubscribe

We hate spam, too. We only share your email address
with our Email provider Mailchimp

Thanks for subscribing.

Take a deep dive into

Full-Edit Editing

Ultimate Resources List

Gutenberg Times: Live Q & A: The Making of Open-Source Story by Yoast with Blocks

Thu, 09/30/2021 - 18:15

Yoast partner and CTO, Omar Reiss and content team lead Willemien Hallebeek took us behind the scenes of the making of the Open-Source Story, a richly illustrated and interactive post about the nature of open-source from a collaborative business point of view. They also shared how they built it with the WordPress block editor, explain their approaches and answer your questions.

Transcript

Birgit Pauli-Haack: 26 Gutenberg Live Q&A. My name is Birgit Pauli-Haack and I’m your host, and the curator of Gutenberg Times. Thank you all for watching, it’s great to have you. 

In today’s show, we will discuss The Making of the Post Open Source Better Solutions and more inclusive society that the content creators at Yoast and the techies put together. I’m extremely honored to have as guests three wonderful experts to discuss this and answer all your questions. We have Willemien Hallebeek, she’s the manager of content at Yoast. Hi, Willemien. How are you this evening?

Willemien Hallebeek: Hi. I’m doing great. Thank you so much for having us.

Birgit Pauli-Haack: It’s awesome that you’re here and then I finally get to meet you. I read a lot of your content. We also have with us Anne McCarthy, developer relations wrangler at Automattic and on loan to the WordPress open source project. She’s also co-host of the show. Good afternoon, Anne. How are you today?

Willemien Hallebeek: Doing great. Thanks so much for having me.

Birgit Pauli-Haack: Awesome. And then, we have Omar Reiss, partner and CTO at Yoast. Hi, Omar. Welcome to the show. Thank you for all three of you, you’ve taken the time out of your day and be with us together. So how are you doing?

Omar Reiss: Great, great. Thank you so much for having us.

Birgit Pauli-Haack: All right. Well, and welcome to Bob from Las Vegas. Who else is in there? Yeah, well, use the chat window to let us know more about you, dear listeners. Before we do proper introductions, in less than a minute, I hope, I have a few housekeeping notes and an announcement. This is going to be a mixed conversation, so we have demos, we have the questions that we have, and then we have your questions. If you have questions, please add them to the YouTube chat on the right, or use the Q&A feature on the bottom of your screen to let us know your questions. We will give answers in between segments, so put them in here so they’re in the queue and we can get right to them. Feel free also to share your thoughts and comments in the chat, but please be kind, even if you disagree. This is a family-friendly endeavor.

Announcement

Before we go into the deep weeds, and I have you here and your attention, State of the Word, the annual keynote by WordPress co-founder Matt Mullenweg is next week. Because WordCamp US was canceled, this is going to be a live stream event simultaneously streamed to the WordPress YouTube channel, the WordPress Facebook page, and the WordPress Twitter account. So mark your calendar. It’s on December 17th at 16:00 UTC. That is 11 a.m in Eastern, it’s 8 a.m Pacific, and it’s 5 o’clock Middle European time, I think. 

For the Q&A part of the live stream, and that’s something totally new, you can pre-record your question via a video. And a big emphasis on landscape format, not landscape, and send it before the event. Actually, the deadline for that is tomorrow, so you don’t have a whole lot of time left. Detailed instructions are in the news post on the WordPress.org, so go there. Yes, so that’s out of the way.

Introductions

I’m thrilled you’re all here. So let’s start. Omar, it’s been a while that we connected on WordCamp. I think we met in 2019 or so in … no, ’18.

Omar Reiss: 2018.

Birgit Pauli-Haack: In Nashville.

Omar Reiss: Yeah.

Birgit Pauli-Haack: You’re a partner with Yoast, one of four, now six, I heard, or the border is now six, and you’re the chief technology officer. What exactly are you doing with Yoast? What’s your responsibility?

Omar Reiss: Well, yeah, I’m just in charge of everything that has to do with technology at Yoast. So the development teams, the QA teams, and the devops teams all report to me. I am also responsible for software architecture, so basically, the design of the code itself.

Birgit Pauli-Haack: All right. Interesting. Are you also going to fix my printer or you don’t have any printers anymore?

Omar Reiss: No. That’s the only part of technology that I’m not responsible for at the Yoast. That’s part of the operations side of things.

Birgit Pauli-Haack: All right. Well, thank you. Yoast is, after Automattic, the biggest corporate contributor to the open source project, WordPress open source project. How deep are you involved in this part of the Yoast team.

Omar Reiss: Well, I’m starting to get quite involved again. The team is led by Francesca Morano, who you might know.

Birgit Pauli-Haack: Yes.

Omar Reiss: I led a couple of WordPress releases. I think we have meetings every Tuesday where we discuss our efforts, and I’m generally present there. It kind of got the contributor virus reactivated, and I plan to work on some build tooling stuff for WordPress 5.7. So, yeah, ready to get back in the game.

Birgit Pauli-Haack: Okay, excellent. 

Anne, we had many, many chats conversations on Slack about the various aspects of Gutenberg adoption events and the testing part of it. I’m so thrilled that you’re a co-host on the show today. You work as developer relations wrangler on loan through the WordPress project. What exactly do you do?

Anne McCarthy: It’s a good question. I also just want to say it’s so awesome to actually be able to collaborate with you on this. I feel like we talk so much. It’s really, really an honor, so thank you for having me. 

Yeah, I focus on the developer experience, whether that’s through creating better product feedback loops, through things like the full site outreach program, or calls for testing, trying to help get developers better connected both with each other and with the wider community and sharing resources. I helped kind of start a thing called Hallway Hangouts, which a bunch of people have done, which is super exciting. Trying to make it easier for new devs, that they’re first coming in to get acquainted with the community and get onboarded. So there’s been a couple different like documentation initiatives with that.

Most recently, if you join co-editor for the first time, you’ll get a nice little Slack bot ping introducing you to things. So trying to be a bit creative there, especially while we can’t gather in person. And probably the last thing is just community-wide communication to get people excited about what’s happening with development and kind of just making it known in a way that’s user-focused and just builds excitement about the future of WordPress. So that’s kind of it in a nutshell.

Birgit Pauli-Haack: Yeah, but that’s a lot of work. I’m glad that you’re doing it. 

Willemien, it’s such a pleasure to meet you, manager of content. Knowing Yoast’s work in SEO, that sounds like a big job. What is it exactly that you do and how many people do you have doing it?

Willemien Hallebeek: Well, yeah, it’s a great job. It details a lot of content. Yoast.com has a lot of content. My main focus used to be on our blog, but since you’re short while, I’m also responsible for all the content on Yoast.com. That means we have a lot of help pages, feature pages, product pages. Well, I’m responsible for the entire thing, so make sure what’s created, and check the coherence and consistency of it. Because we’re growing, more people are working on our content, we want to prevent that we’re doing on one side something and on the other side the same thing. Yeah. It’s like the overview, overall responsibility of the content.

How many people? Yeah, that’s actually quite difficult. Well, I have three people in my blog team, well, we’re three actually; and three people from our academy team, they make our courses but also contribute a lot to the website; and then we have some people who actually work on the website but are not necessarily in my team, people creating content for our product pages, feature pages.

Birgit Pauli-Haack: Yeah, interesting.

Willemien Hallebeek: Yeah.

Birgit Pauli-Haack: Who writes documentation at Yoast?

Willemien Hallebeek: Documentation. I think … Omar, I think it’s Jimmy who writes for the dev portal documentation, right?

Omar Reiss: Yeah. Even Joost himself still writes a lot of documentation. Jono-

Willemien Hallebeek: Yeah.

Omar Reiss: … Jimmy. That’s a lot of development documentation and the support team does a lot of the help documentation.

Birgit Pauli-Haack: Okay.

Omar Reiss: I think the academy team recently rewrote a lot of the stuff as well.

Willemien Hallebeek: Exactly, yeah. Yeah. We had a huge knowledge base, which was transformed to our help section of the site, and academy did a great job in making that very easy to understand for people. Because if you’re looking for a help article, it needs to be you know understandable for many people.

Omar Reiss: Yeah. It’s not mainly the academy job. Yeah.

Birgit Pauli-Haack: It needs all the green lights on the Yoast plug-in, right?

Willemien Hallebeek: Exactly, yeah. Yeah. We read all of that on our website. Yeah.

Open-Source Story

Birgit Pauli-Haack: So taking this open-source story that’s our topic today, as an example, so what’s your process from idea to publishing? What’s the genesis pretty much of that post on your site?

Willemien Hallebeek: Yeah. The idea, I think Omar can tell that story best because he was there when the idea was born. I just took it on later.

Omar Reiss: You can tell something about the creation process that’s been mostly your job.

Willemien Hallebeek: Exactly. I can tell …

Omar Reiss: But let me give a brief, I think I was with Marieke at a WordCamp, Marieke, our CEO, and she gave a really great talk about gender stereotypes and prejudices. It’s a really, really nice talk. If you’re into diversity, I think it’s a really nice talk to also go look up on WordPress.tv. At Yoast, we’ve traditionally been really strong in our core values. We have a couple of things that are important to us, diversity is one, open source is another one. We have all these great stories that we tell on WordCamps, wouldn’t it be awesome to have these in a digital story format on Yoast.com as well, as really rich content that is dynamic and interactive?

With Gutenberg being present at the time, that was actually something that seemed really attainable. We basically said, “Let’s go. Let’s turn our important sort of core value stories that are close to our hearts. Let’s turn them into digital stories on Yoast.com and really give people something special. And then we turn to Willemien to create that.

Willemien Hallebeek: Yeah.

Omar Reiss: That’s how that process goes.

Willemien Hallebeek: And then I was involved.

Birgit Pauli-Haack: Yeah, go ahead.

Willemien Hallebeek: I got this idea, and then what we did was I started, first, we thought what do we want to tell people of course. And then I started gathering content we already had on our website, because we had some story, well, not stories, just more posts about why open source is great, or how to contribute. We had smaller parts of the story already on our website. I started gathering that and writing a complete story of it. We would really have a long read, and then I started thinking about what is a nice way to visualize this? We also had videos and we had a copy on some parts. I thought about a quiz for instance that we could add.

So, yeah, that was just a big document actually with ideas and content, some links to videos and that went to our design department. They’ve created this awesome design of the page. They already kept in mind the blocks that were created previously for the prejudice story. Because they’ve kept that in mind, in fact, it was quite easy to create the content in the editor because the blocks were there, the content was there, and mainly, it was just on the getting it in.

Birgit Pauli-Haack: Sure.

Willemien Hallebeek: Making sure it all looks fine on the front end.

Birgit Pauli-Haack: Yeah. I think it would be a good occasion here to have Omar kind of walk us through the back end, just scroll through the front end and then also through the back end of it and kind of talk about those segments. You can certainly, both of you kind of talk about things. What do you think?

Omar Reiss: Definitely. 

Birgit Pauli-Haack: Okay.

Omar Reiss: Let me show you the page.

Birgit Pauli-Haack: Yeah.

Omar Reiss: Just for reference, I’ve also opened up the first one that we made, which is the ‘Gender, stereotypes and prejudice’ one and you see that it’s also got animations; the open source one, we left it out for this time, but something that you can also do with Gutenberg, and I might show a little bit later. Basically, most of the stuff you see here, even this probably, it can be done with Gutenberg natively, which is really nice, even though, in our case, this table of contents is block, because we generated it with a special block, but we’ll show you about that later.

Birgit Pauli-Haack: Okay.

Omar Reiss: This was added later, right, Willemien?

Willemien Hallebeek: Yeah, it was added later. It was actually some feedback from Yoast. He thought, well, maybe we could have something at the beginning just making clear what you can find in the story. Because it’s a long story, so you want to take people by the hand and already give them some idea of what’s in it.

Omar Reiss: Yeah. The funny thing is right at the start of the story you see this sort of card game where you can basically do sort of a quiz, where you can guess, so is this washing machine? Is it partly or created with the help of open source technology? And then you can guess like, “Well, no, it’s a washing machine, it’s not open source.” It’s like … no, oops.

Anne McCarthy: I love this. I thought this was such a cool way to bring home the power of open source and engage with the page.

Omar Reiss: Right.

Willemien Hallebeek: Yeah. This part was really, because I thought, well, maybe people know some software is open source, but perhaps they don’t know washing machines can be open source.

Omar Reiss: This kind of quiz sort of format we actually reused it from the stereotype where you have to choose if this is a stereotype or a prejudice. Basically, “This sentence, is it the prejudice?” And they’re like, “Yes, well done. It’s a prejudice because it makes a harmful judgment based ….” It’s the exact same kind of quiz format where you have to guess if it’s one or the other, but it’s a completely different game because this is aimed at understanding the difference between a stereotype and a prejudice. Here, it’s aimed at sort of simply guessing if open source is involved or not. You can even imagine a true or false game or whatever. There’s many different things that you could use this block for.

But the funny thing is that, like for instance, behind here, you can see a nice cover. That’s something that is just using Gutenberg natively. I’ll show you that in a minute. Yeah. So it’s got all kinds of this kind of interactive elements. You can see that there is a regular video here and that it has a sort of special functionality, that you can read also the transcript of that video. So it’s in there, if you want to read it; and if you want to hide it, you can hide it. So that makes it a really dynamic story. You can watch the video and it will tell you a little bit more, and then you continue farther into the story. 

Yeah. Like I said, most of what you can see here, you can do this in Gutenberg. There’s nothing needed to make this work. It’s just an image in a column block, and I will show you that later, which I think is amazing because what we set out to do … like, you have a couple of these examples of big publishers like the New York Times who creates these really compelling interactive digital stories. That’s really costly to do and they need designers and developers to make it. Basically, all of them have tried also turning that stuff into a framework that can be reused to create other stories. Well, basically, with Gutenberg, in a few blocks you have this framework. It’s really easy for anyone to sort of create this sort of rich, compelling content by themselves. It only requires a few blocks and a really nice book editor. So, yeah.

Anne McCarthy: That reminds me of the snow article from New York Times. I think Mel Choyce might have given a WordPress TV. I think it’s a WordPress TV talked about that, how you can recreate that in Gutenberg and how much it’s unlocked. It’s super cool.

Omar Reiss: I’d love to see that talk. That’s exactly the kind of ….

Anne McCarthy: I’ll get back on you when I find it.

Omar Reiss: That’s exactly the kind of example that I was thinking about.

Anne McCarthy: Yeah.

Omar Reiss: It’s also the example that I gave I think about four years ago in the cafeteria of the Yoast.

Willemien Hallebeek: Yeah, I remember.

Omar Reiss: I gave a presentation about digital storytelling and I gave that example as well. It’s like so cool what you could do. But it was so hard to make that at that time.

Anne McCarthy: They spent months on that, right? It was a huge undertaking from them to do that.

Omar Reiss: Exactly. You can see there’s some design things that are being reused. I’ll show you some examples from the other story as well what we did. Let me look if I can find another compelling block. 

This is the important. This ‘Thrive for the future’ talk here, which is a talk by Joost and Marieke, and it’s been done in different forms also by Joost alone and he also did it together in a couple of occasions, which is really sort of our story about open source. That story sort of explained here in WordPress.tv, but then it’s also completely explained here in the whole ‘Tragedy of the commons’ and how open source can help lead to a sort of reverse tragedy of the commons, and how can we get to a victory of the commons. Basically, the whole fight for the future thing in WordPress is explained and why it’s important. It’s a really important story for us and we really like to tell it. And you see the ‘Five for the Future’ is explained here.

Birgit Pauli-Haack: Right. Are these column blocks or are these media and text blocks?

Omar Reiss: We should watch it. Let’s briefly go to the back end to see what this looks like. Let’s first go to those blocks that we were just looking at. Yeah, we were looking at this one, right?

Birgit Pauli-Haack: Oh, they’re column blocks, yeah. Okay, got it.

Omar Reiss: So these are column blocks. I think, just here, if you look at this, this is I think is a group block. No, that’s a column block, and then this is a group block, and then these are columns. It’s so incredible what you can just do with playing old Gutenberg right out of the box.

Birgit Pauli-Haack: Yeah. So that’s a gallery, I would assume, the pictures up there.

Omar Reiss: Oh, yeah. We’re looking at this one. Which one did you say, gallery?

Birgit Pauli-Haack: The four pictures, kind of in the further up I think it was.

Omar Reiss: Oh, yeah. Right. So it seems like this is also a column block with multiple images.

Birgit Pauli-Haack: Yeah.

Omar Reiss: And then to right below each other. This is a group.

Birgit Pauli-Haack: Yeah.

Omar Reiss: And you can see the structure here.

Birgit Pauli-Haack: Yeah, it’s called the list view now. It was the block navigator. Just kind of a little tidbit here, we changed the interface, everything.

Omar Reiss: Yeah. That’s been quite some interface changes, but fortunately, it all still works.

Birgit Pauli-Haack: Right.

Omar Reiss: I think a good thing to take a look at now is the how we use ACF. Because that’s made it so much easier to do this stuff, right?

Birgit Pauli-Haack: Yeah.

Omar Reiss: We actually have a native table of contents block in Yoast SEO, but it doesn’t include this sort of image format. So if you go to that, you see these images that are in front of the table of contents and then basically the sub-headings. We created the sort of custom fields block for that where you can….

Birgit Pauli-Haack: Oh, okay, yeah.

Omar Reiss: Yeah. Basically this is … I think it’s a repeater where you can have multiple links.

Birgit Pauli-Haack: These are the three sections, yeah.

Willemien Hallebeek: Yeah.

Omar Reiss: Yeah. The downside of this is that it’s not 100% what-you-see-is-what-you-get. But the upside of this is that it’s really easy to give rich elements, interactive elements and just fill them with the data and the content that’s needed.

Birgit Pauli-Haack: Yeah, even more so with the quiz, I would think.

Omar Reiss: Definitely, this is a really good example. So this is the quiz. What I really find compelling about is that here you see there’s a Cover block, there’s a Group inside there with a Heading and a Paragraph, which is these two, and then the Yoast Stories Card Game and it all just seamlessly works together. I think it’s really miraculous how intuitive that is.

Birgit Pauli-Haack: Yeah. So, in ACF, you create your field group, and then you tell in the field group that is for a block, and then you need to…?

Omar Reiss: Yeah. Let me show you the card game. Here, this is our field groups in ACF. Basically, what we did is we defined upfront what a card game is in terms of data. Here, we’ve defined that, we’re saying basically a card game is a repeater block and every sort of card game has its own image: Option A, Option B, Statement, and Explanation. Yeah, what you get here to put there. Basically, what ACF requires you to do to turn a sort of field group into a block is you need to register a template for that block, and then the template can use the fields. And then that’s basically how you can use it as a blog.

Anne McCarthy: How quickly did you realize you needed to use ACF for this? Did you try to use Gutenberg first and then it was like, “This isn’t going to work, we have to switch over,” or did you live with this?

Omar Reiss: No. Basically, we knew that it wasn’t possible to do it with Gutenberg natively without coding a block so we would have to create a custom block. Then you can do it with ACF, which is really simple to do, especially if you have a little bit of development power. But anybody who’s able to create a WordPress theme or even tweak a WordPress theme could create an ACF block. 

If you want to create a custom sort of Javascript powered what-you-see-is-what-you-get block in Gutenberg, it’s much more work, basically. You have to completely think through the entire interface of how to interact with that. Yeah, it’s really not trivial to do, especially if you want to make something dynamic and interactive.

Birgit Pauli-Haack: Have you tried any other of the non-Javascript block builders like Block Lab that’s now Genesis Blocks Pro, I think it’s called, the other one is called Lazy Blocks?

Omar Reiss: I haven’t tried those yet. But I have created a lot of custom blocks sort of from scratch. Also, Yoast SEO has got a couple of ones. So we are definitely familiar with how to create native blocks, so to speak. But I haven’t tried the other sort of custom block solutions that are out there.

Birgit Pauli-Haack: Yeah. I did a few months back, maybe a year and a half ago, kind of a summary on that, on the W Tavern from creating blocks without Javascript and comparing all three of them. I’m going to try if I can grab that and share it in a bit. Yeah. Oh, and then you wanted to show us the video, the special features?

Video data in ACF Block

Omar Reiss: Yeah. I just wanted to show you this example because I think it would have been nice to create this as a native block, because this is a video. A video is something that the Gutenberg Editor actually knows how to do. But then again, because we also wanted to have a transcript, we sort of took a shortcut. And it was just the easiest thing to do this in an ACF block because I would only have to worry about the template. Well, it kind of works, but then again, this would not have been hard to do more natively. Maybe if we put in like two hours extra, then this could have been a nicer, better experience.

Birgit Pauli-Haack: Well, I’m always on the impression, if it works, why change it?

Omar Reiss: Yeah, that’s true as well.

Anne McCarthy: It also adds a nice experience for people who are building the content to kind of prime them to include a transcript, which I think on the content side I’m sure that’s also helpful.

Birgit Pauli-Haack: Yes, it’s absolutely helpful. Yeah. Because not everybody can listen to audio on their computers.

Willemien Hallebeek: Yeah, exactly. That’s why these are added.

Omar Reiss: I think I’d like to show … Oh, sorry?

Willemien Hallebeek: I just want to say we added them to these two videos.

Birgit Pauli-Haack: Yeah. I’m just making a call for our audience here. If you have any questions to Willemien and Omar, please use the Q&A on the bottom of the screen and then we can kind of read them here for both of them to answer. Just not seeing any, so I think I need to coax a little bit more.

Anne McCarthy: Won’t you pull up the animations? I know, Omar, you said you might show how that’s done.

Animations

Omar Reiss: Wanted to show you is there’s two things about this post that I really like, that I also wanted to showcase, because it shows a little bit more what’s possible even. All of these animations are powered by a library called Lottie. Lottie is basically a Javascript library that allows you to animate SVGs in a certain format. If you use I think Adobe, some kind of Adobe product, it’s really easy to make those animations with Lottie. It’s a library by Airbnb. Basically, what I did is I included Lottie with Yoast.com. So it now comes with Yoast.com and you can now directly export these sort of animated SVGs from Adobe and upload them to Yoast.com and use them in any content, basically.

So this was an experiment to do that. I think it’s really cool that sort of Yoast.com now by default supports these animations in the block editor. I actually got it to work … Let me, this is going to be a live demo risk, but I’m still going to take it. Let me see. I think they work also in the editor themselves, which I was like, you know, my nerd heart beating….

Anne McCarthy: I have one of those moments.

Omar Reiss: Yeah. So because I want, when I upload those images, and I hope I can find an example, yeah … that I can see them animate in the editor.

Anne McCarthy: Wow, that’s really cool.

Omar Reiss: That would be the magic moment for me. That, I got to work so. Yeah, that was a really big, big victory and a lot of fun.

Anne McCarthy: Do you share how you’re doing it all? Have you all written up like the process you went through, to integrate the library?

Omar Reiss: Yeah, actually I think I do.

Anne McCarthy: That would be super cool to see.

Omar Reiss: Yeah. Frontliners …

Anne McCarthy: I’m glad we all Google the same way for things.

Omar Reiss: Yeah. I wrote this post.

Anne McCarthy: But Yoast app just wouldn’t be showing up in Google.

Omar Reiss: In 2020, I wrote this post ‘Digital storytelling in the age of blocks’ where I explained every step and, basically, the basics just use the block editor. I also show how we did a lot of the stuff and also the templating and stuff. Because one of the things that I was excited about, and I also show in this post, is that we actually use the Yoast FAQ block. Let me try to find it.

Birgit Pauli-Haack: Yeah. I’m glad you mentioned that.

Omar Reiss: Here, in this post, this is just the Yoast FAQ block. You can see that this “Are men smarter than women?” This format is not what you see on the front end because what you see on the front end is this, it’s where the answer is actually hidden and these prejudices are shown. And then you sort of first get to think about it and then you show the answer and you hopefully get confronted with something to think about even more.

So what I did is on the front end I filtered the blocks, the Yoast FAQ block, and came up with a different representation of the same block, which sort of turned it a little bit in this game format. It’s just one other example of how incredibly flexible the block editor is and blocks are to use to your advantage. I thought it was really compelling, nice example of how we can reuse an existing block actually made by a plugin in our, in this case, our plugin. But, yeah, that was really exciting for me.

In terms of demo, I think that’s the most important thing. Is there anything you would like me to showcase or show?

Questions

Birgit Pauli-Haack: Well, ask the people in the audience I think … well, we certainly have a few questions.

Anne McCarthy: I’m also happy to jump in with some too because this has been really fun.

Birgit Pauli-Haack: When do you decide between kind of using something like ACF or do you want to do custom build blocks. It’s certainly one that I’m always struggling with. Also, what does Willemien think about ACF versus a custom-built block and all that. 

Willemien Hallebeek: Well, yeah, I’m really the least technical person here. Awesome. I think that the nice thing is if you really use block … for us, it’s mostly important that you can see what you get. So, yeah, if it gets closest to that, if you’re creating the content in the back end, it’s just so nice that you don’t have to switch all the time between preview and go back to the editor and doesn’t really look like what you want to. Yeah, that’s mainly ….

Birgit Pauli-Haack: Yeah. That’s a very important one. 

Willemien Hallebeek: I think, well, it’s just nice to see, to do most stuff in the editor whenever it’s possible, what Omar said as well.

Omar Reiss: And if-

Birgit Pauli-Haack: Yeah. Go ahead, Omar.

Omar Reiss: No, I just want to share, if anybody wants to see anything, I can always share again.

Birgit Pauli-Haack: Yeah, sure.

Omar Reiss: But I like to see you large as well, so that’s right.

Birgit Pauli-Haack: Yeah. I think it’s important to, what you say, Willemien, in terms of, well, on that blog or post, you only had maybe three videos in ACF and that quiz, but when you look at larger publishers’ websites, yeah, I went to the WordCamp for publishers and one of the speakers showed nine pages of ACF fields with all kinds of different data. But only when you hit Preview, you were able to actually see what you put where and where it will show up. I think that what you see is what you get is really important. Yeah.

Willemien Hallebeek: Yeah. It makes our job a lot easier, yeah.

Omar Reiss: I totally agree with the long list of ACF that is not a great user experience. We’ve created a couple of dynamic blocks because this is what we’re talking about. Basically, blocks that are rendered in the PHP via a template, that’s very easy to create. 

What I think I prefer in those blocks and maybe the other examples that you gave just now Birgit. It more like that is where you have sort of the server-side render component in the editor where you actually see what is being rendered in the editor. And you do the editing in the sidebar and then, on mobile, this is not the best experience maybe, but it’s a really nice experience on desktop where you can actually see what you’re editing. That might be a good middle ground. But generally the reason why we chose ACF blocks for this kind of stuff is just also cost. A cost reason because it’s just you know it’s really easy, much easier to do and cheaper.

Anne McCarthy: Yeah. Quickly, there’s an attendee question that we can answer. The question’s anonymous and it’s, “How About Site Speed in such long stories? Were there any measurements done in terms of site speed both front-end and back end good question yes thank you well a really.

Birgit Pauli-Haack: Good question, thank you.

Omar Reiss: Well, it’s a really good question. I remember having the question the first time, I don’t know, did you look at site speed for the open source post that we did.

Willemien Hallebeek: We did. After we posted it, we checked it. We found out we could improve some images so we really we turned them all into png to make sure they can be with clouds there. They now are transferred, they’re now made into a web pea and I think that’s the fastest way and to make them as small as possible actually I think there are also Lazy Loaded now, right?

Willemien Hallebeek: Yeah. I think yeah.

Omar Reiss: When you scroll….

Willemien Hallebeek: Yeah. Lazy Loading. I don’t know about the animations and those are actually ….

Omar Reiss: SVGs, yeah.

Birgit Pauli-Haack: Yeah.

Omar Reiss: So the animated image, I remember also looking at that, they’re not very big but there are a lot of them on the page. I think in the end we also … but I should check if that if that indeed works. But I think we also managed to lazily load those SVGs.

Birgit Pauli-Haack: It’s always a little bit of a technical, so what’s speed and what’s perceived speed.

Omar Reiss: Yeah.

Birgit Pauli-Haack: So as soon as I can read something very quickly, yeah, I don’t care that much how long it takes that what I’m not who I’m not scrolling to is not there. Yet, yes, it kind of comes back comes later so I think that … have you done any measurements in that regard or optimized your site like the text is not, that the site doesn’t have to be fully built to show people something, or fully rendered.

Omar Reiss: I think the main thing that we lazily load is the images. So those are not rendered on page. But all the rest is entirely cached in CloudFlare, so generally Yoast.com pages, even bigger pages are really quite fast to load because they’re completely cached and nothing has to be sort of made ready to download before it can come to your browser.

Willemien Hallebeek: Yeah. It’s definitely something to keep in mind when you create a story like this.

Birgit Pauli-Haack: So does that answer the question of Anonymous? All right. Yes. Okay, good. 

I had also a question that we put together. Now that it’s out there and how you built it, if you had it to do all over again, would you do anything differently or what is it to improve?

Willemien Hallebeek: I can’t tell, but after looking again at the other story, I just really regret that we didn’t add more animations in it. Yeah, because they mostly make it just more fun to watch, more dynamic. But they also take more time to be created, to be developed. So, it’s kind of the….

Anne McCarthy: The victory of the commons, I feel like that could have been really cool, like people cycling together kind of thing.

Willemien Hallebeek: Yeah, exactly.

Anne McCarthy: The animations.

Omar Reiss: And you can make it alive, right? Yeah. There’s lots of ideas, right? We are actually planning on another big one. I think it’s coming out in a couple of weeks.

Willemien Hallebeek: Yeah, Schema.

Omar Reiss: It’s a big one on Schema. But the idea from the start was to have a framework and to improve on it. Basically, we wanted to just see how difficult is it to create a framework for digital storytelling now that we have this awesome block editor. I think the experience with this second post, the second story, was that it really didn’t require a lot of extra work to build it technically. We got a new table of contents idea there and it was built by a front end there. It was added to what we had already and mostly we could build with the building blocks that we had. I do think that it would be nice to explore the other options, for instance, that you shared, I think Atomic Blocks, is that the one??

Birgit Pauli-Haack: Atomic Blocks. Yeah. You mean not using Javascript but a templating thing for that?

Omar Reiss: Yeah.

Birgit Pauli-Haack: One is the Genesis Blocks actually, which is the Block Lab out of Australia, was bought by WP Engines, and they are now Genesis Blocks Pro I think.

Omar Reiss: Right. Yeah.

Birgit Pauli-Haack: They have a free version in the repository. That was actually quite powerful. Actually, when I scrolled through this and now listening to you, have you thought about would it be even faster to put together if you had section block patterns instead of kind of having, yeah, together three … I can see that the columns block was the group block with a different background and with the different images in there take actually quite a bit to put together from scratch. If you had a block pattern then you could just kind of pull it in and say, “Okay. I have these two guys to the right with text and then in the middle column and just kind of pull it in with the background.” Yeah. Have you thought about doing that and kind of improving on your framework?

Omar Reiss: Yeah, definitely. I haven’t thought about it yet, but it sounds like a great idea.

Willemien Hallebeek: Yeah. It sounds like a dream for a content editor to be able to drag it in. Yeah.

Anne McCarthy: I made a site recently and I did something like that with some patterns where at first I was like manually copying-pasting, removing the stuff I didn’t want and all of a sudden I was like, “Wait a second. I can just have a pattern, have it ago, and just plug and play,” so for content, it’s amazing, especially….

Omar Reiss: Did you need to do any development for that or is it something that you can do as a content editor?

Anne McCarthy: No. I did it just on the side. A lot of it was done, for this site in particular, I did it on WordPress.com which has come in with built-in like I think 117 block patterns. So this was just kind of like a for fun. I have a lot of for fun sites.

Omar Reiss: Nice.

Anne McCarthy: But it was kind of showing the future where we’re going to go. I’ll link to the WordPress.com pattern library.

Birgit Pauli-Haack: Yeah, it’s pretty cool. Well, there is a plugin out there by JB Audras where you can actually convert your reusable blocks to block patterns, kind of get over that problem that if you change reusable blocks you change it on all of them instead of using it as a template. Here, in his plugin, he has a feature where you can actually transfer it. And then there’s another plugin out there called Block Pattern Builder and the author is Blockmeister. They also let you kind of highlight a block and then have a menu in the more options block save as a block pattern.

Yeah. So content creators can at least start out with that. And if you need them tweaking you can hand it to your designer because it’s pretty much templating, yeah, that can be added to theme. Yeah. There is a resource list of all the things Block Patterns on the Gutenberg Times. I think it was the second last post that I did and it has a lot of additional ideas on themes that have come with Block Patterns. So it’s definitely something to take a look at.

Anne McCarthy: Did you all explore or have you looked into Google’s web stories plugin? Because I feel like they’re trying to accomplish a similar thing. I haven’t played around with it yet though.

Willemien Hallebeek: Yeah. We’re actually experimenting a bit with that as well. It was really nice that we got a tweet from someone who is also working on the web stories and he contacted us saying, “Well, this is actually…”

Anne McCarthy: Perfect use case.

Willemien Hallebeek: Yeah. This would be a perfect web story. Definitely, I think we’re now in the process of getting it on Yoast.com. We really want to start creating some web stories. Well, I don’t know if we’re going to choose this topic or another one, but yeah, definitely, something we’d like to … it will be like, yeah, we have to play around with it and see what we can make with. It might be a bit you know shorter I think. The content needs to be even more snackable than what we have here.

Anne McCarthy: Do you struggle with that at all, of trying to make something snackable like you said versus like a long form, or have you intentionally gone more long form with this stuff?

Willemien Hallebeek: Yeah. I think it’s intentionally more long form because … yeah. We really want to tell the story well and otherwise it gets … snackable, is nice but this is something like maybe elaborate a bit more.

Anne McCarthy: I’m all for long form, so you can consider me a fan.

Birgit Pauli-Haack: Me too. Me too. But I liked how you broke it up. Yeah. So it’s kind of snackable to kind of come back and say okay yeah this is the topic and then they have bullet lists and not this wall of text that others have. So you kind of really … yeah.

Anne McCarthy: The best of both worlds.

Birgit Pauli-Haack: Both worlds, yeah. Yeah, and having a good designer as well, with the iconography. Even if it’s just a non-animated thing, it still kind of breaks up the text so much. Yeah. My favorite block right now is the media and text block because the image can change the size of it, depending on the text. So you can fill the full bleed of the column with an image and then you have the text next to it. So I really like that.

Willemien Hallebeek: So it’s dynamic to the amount of text you ….

Birgit Pauli-Haack: Yeah.

Willemien Hallebeek: Great.

Birgit Pauli-Haack: So if you have a long picture, you don’t need to have long text to go with it there. You can say crop it to the text size and that’s really good.

Willemien Hallebeek: Yeah.

Birgit Pauli-Haack: So use it a bit more.

Willemien Hallebeek: Yeah.

Birgit Pauli-Haack: That’s why I was asking are these columns or are these media and text blocks at the beginning. And I can see that columns from the idea is really easy to grasp, “Okay. I have two columns, three columns, four columns,” but then, yeah, so I really like that.

Well, yeah, so we don’t have any more audience questions. Do you have any more questions, Anne, that you want to ask them?

Anne McCarthy: I’d love to know if you have any more stories coming up, just like content wise? Is there another WordPress related open source maybe inspired story that you all are trying to tell, like a next version because these are the next things we we’re going to get into.

Willemien Hallebeek: We wanted to build the next story on Schema and structured data. So that will be coming out. 

Birgit Pauli-Haack: There’s a there’s a lot of things to do: that’s reviews, it’s recipes.

Willemien Hallebeek: Oh, yeah.

Omar Reiss: Also, just the higher level, philosophically.

Willemien Hallebeek: Yeah. I think we will be….

Omar Reiss: It’s super interesting. It’s basically the story of open data and of the sort of evolution of the web. Yeah. So that’s also something near and dear.

Birgit Pauli-Haack: So you’re going back to Adam and Eve, practically.

Willemien Hallebeek: Yeah. I’m not sure if you go back that far, but … No.

Birgit Pauli-Haack: It’s not your fault, that’s 2000 years. Yeah. Andrea had a question here from the audience, “Based on your experience working in the block editor for complex posts like this, is there a particular request you’d like to make to the team working on Gutenberg?” Apart from switching off the full screen.

Omar Reiss: I’m leaving it to our competitor, but otherwise … I also have a request, but I think it’s already on the roadmap.

Willemien Hallebeek: Okay. Yeah. That’s a hard question. Yeah. Well, let me think about it. Yeah. Maybe we have to add some help from front end, making tweaks to headings and stuff to be able to move them easily. I don’t know if that’s something ….

Anne McCarthy: Yeah, drag-and-drop is a big thing.

Birgit Pauli-Haack: Oh, maybe the alignment, kind of full width.

Willemien Hallebeek: Alignment option.

Omar Reiss: Yeah, alignment options.

Anne McCarthy: Yeah.

Birgit Pauli-Haack: Do you want to control line heights as well?

Willemien Hallebeek: Yeah.

Birgit Pauli-Haack: Sometimes it’s something a little bit too compressed and if you have more line height, control ….

Omar Reiss: Sometimes you might have like a heading in the design, which I think it’s probably already possible where you have a relatively small heading, but you need a bigger heading level. That’s probably already possible. I can almost not imagine that to be a problem today. I know you have a font size. You have a font size.

Anne McCarthy: Yeah, there’s a font size. I regularly mess with that.

Willemien Hallebeek: Yeah.

Anne McCarthy: Well, the heading, yeah.

Omar Reiss: Yeah. I would personally really, really like collaborative editing features.

Birgit Pauli-Haack: Okay.

Omar Reiss: It would make me completely skip Google Docs in writing. I really like collaborative editing personally for whatever I do. It’s not for everyone maybe, but especially the commenting part of that.

Willemien Hallebeek: Yeah.

Omar Reiss: I don’t need to be in the same document with someone necessarily, but I would really like some editorial workflows where you can comment on stuff and give suggestions.

Birgit Pauli-Haack: Yeah.

Willemien Hallebeek: Yeah. Skip the heading part, focus on that, that’s better, that’s the best idea, definitely.

Birgit Pauli-Haack: Yeah. What I struggle with is that, if I have an older post yeah and when I edit it I have to kind of copy it somewhere else, edit it, and then get it back because I cannot finish it in one session. And I cannot schedule these revisions, yeah.

Willemien Hallebeek: Yeah.

Birgit Pauli-Haack: And that’s kind of one thing, but, yeah, collaboration is on the roadmap. You’re right, Omar.

Anne McCarthy: I just dropped a link to something Riad had experimented with. Yeah.

Birgit Pauli-Haack: Riad had experimented with it, yeah. Quite, quite a bit actually here. Site up there it’s called Asblocks.com, but it’s on the roadmap for the next phase. So, I think 2023 or something like that.

Omar Reiss: Yeah.

Birgit Pauli-Haack: Or 22, yeah. I think ’21 is already over and I’m thinking ’22, but that’s not right. That’s not right. ’20 is almost over.

Anne McCarthy: We’re still just trying to get through 2020. I mean, I think there’s also already a plug-in offering it. And yeah, and I really reapps work on this as well. I remember when he tweeted his AS blocks out, it’s, yeah, good to be reminded of that.

Birgit Pauli-Haack: Yeah.

Omar Reiss: But it’s just so exciting. I want to see it. Also, we will probably utilize it if we have something like that in Yoast SEO. We can imagine using a sort of commenting system to give inline feedback really granularly. That I think could turn into a really amazing experience where you sort of enable sort of SEO mode and you get really granular SEO comments sort of automated editorial workflows, that kind of stuff.

Birgit Pauli-Haack: Yeah.

Willemien Hallebeek: Yeah.

Omar Reiss: Really promising.

Willemien Hallebeek: We already have the readability analysis that says, “Your sentences are too long.” So if you could get this kind of feedback on a more granular level that would be super helpful.

Birgit Pauli-Haack: Yeah. Andrea, you indeed specialize in hard questions, that’s okay.

Omar Reiss: It’s really cool to see you also like the collaborative editing.

Birgit Pauli-Haack: So much, yeah. So we are at the end of our show. I could probably talk with you another two more hours, but I want to, yeah, let you go. And we probably can do this again. Thank you for the questions from the audience. At this point, I have two more questions for you, all three of you. 

Do you have any announcements that you couldn’t get to talk about before, what you want people to keep in mind? If people want to get in touch with you, what would be the best way? Willemein, do you want to start?

Willemien Hallebeek: Yeah. I don’t really have any announcements I think.

Birgit Pauli-Haack: Which is fine.

Willemien Hallebeek: Yeah. Well, you can find me on Twitter and reach out to me on willemien@yoast.com.

Birgit Pauli-Haack: Via email, yeah, cool.

Willemien Hallebeek: Yeah, the best, fastest way.

Birgit Pauli-Haack: Yeah. Omar?

Omar Reiss: The best way to reach me is either Twitter @OmarReiss or on the WordPress Slack where I typically respond quite fast. No announcements here either.

Birgit Pauli-Haack: No announcement.

Omar Reiss: I would like to say that I really enjoyed this webinar, of course.

Birgit Pauli-Haack: Okay. We enjoyed having you, of course. Anne?

Anne McCarthy: I actually do have some announcements.

Birgit Pauli-Haack: Yeah.

Anne McCarthy: There’s a great post speaking of kind of the phases of the core editor. Matias just posted a really awesome update kind of showing what’s happening with editing. I think it’s really worth reading through and kind of getting excited about it. I read through it and just kind of had my brain exploding with ideas and hopefully it does the same for you. 

I also just want to give a big props to the 5.16 that release just came out this week. It was the first women in non-binary-led release for WordPress, which feels pretty historic. So I just want to like shout that out and major props to everyone involved in that effort. 

And then, for keeping in touch. I’m a weird millennial who doesn’t like social media, but I blog at nomad.blog and you can find me on WordPress.org slack as annezazu. Feel free to reach out to me either place.

Birgit Pauli-Haack: All right. And that’s it. Big thank you to the viewers. Big thank you to you for being here. You can reach out to me on twitter or on the WordPress Slack. You could also send emails to pauli@gutenbergtimes.com, a recording of this will be available in a few minutes on YouTube and I’ll share it of course also with a panelist, so you can share it, but also over the social media. 

Well, it was a joy talking to you. Yeah. I wish everybody wonderful holidays. Happy Hanukkah to Israel and the Jewish community Merry Christmas and happy holiday. This is also the last show of the year from Gutenberg Times we won’t have a Changelog because the team. We always do a Changelog podcast after the release and the release moved a week into my holiday or into my vacation time, so we will be back January 8th with a Changelog and we will cover two Gutenberg releases. And so, that’s my announcement. I wish you all yeah good evening, a nice afternoon, and thank you for watching and being with me here.

Willemien Hallebeek: Thanks so much, Brigit. This was wonderful.

Birgit Pauli-Haack: Thank you.

Omar Reiss: Thank you so much. It was a pleasure.

Birgit Pauli-Haack: Thank you.

Resources mentioned

Gutenberg Times: Site Editor Demo #SOTW

Thu, 09/30/2021 - 18:15

During State of the Word 2020, Joan Asmussen gave a 3-minute demo of the beta-version of the Site Editor that will come to WordPress as part of the Full-Site Editing experience in 2021. There are a few places where you can catch the whole State of the Word. This post is about the Site-Editor demo.

State of the Word 2020

This year, Matt Mullenweg, co-founder of WordPress and CEO of Automattic gave his keynote from home. He reviewed the year 2020. Afterwards, he and other members of the WordPress team answered questions from the community. The event was livestreamed on Dec. 17, 2020.

Joen Asmussen, one of the designers on the Gutenberg project from the beginning, did a walk-through of the current version of the Site Editor.

Matt said: “2021 makes it easier than ever to get your vision onto your site, and your site onto the web. And now we’d like to show you a sneak peek at some of what’s coming around the corner with Gutenberg.”

Excerpt of the State of the Word 2020

Full Transcript is below

For his demo, Joen used the theme Twenty-Twenty-One Blocks Theme (TT1-Blocks). The team is preparing this year’s default theme, Twenty-Twenty One, for the release of the full-site editing experience in 2021. You can find it in the Theme Experiments Repo on GitHub.

To use the theme yourself you need to install the Gutenberg plugin, and the full-site-editing experience will be available to you after activating the TT1-Blocks theme or any other block-based themes from the themes-experiments.

“Warning: Full Site Editing is an experimental feature and potential API changes are to be expected!”

The full-site experience comprises the Site-Editor, Navigation & Widget Screens and Global Styles sidebar. You can read about the current status of development of each part in Matias Ventura’s post Status Check: Site Editing and Customization

I also want to point out that the speed in which Joen change screens and reloads his updates seems a wee bit faster than in real life. It will depend heavily on the oomph of your server and Internet speed how fast you can navigate and change settings on the editor.

The first feature, Joen points out is the Query Block, a feature rich block for the Loop – a list of posts or pages or other content types, displayed on the homepage or on archive pages. The already available “Latest post” block is its first iteration. The query block will give users and theme developers alike great flexibility with an easy integration and customization process.

Without knowing the technical terms, you can change the Site Title, the Navigation and the tagline right from the Site Editor screen. Use the Block List View to orient yourself and jump directly to the various sections of your site. Behind the scenes, the Site Editor Engine keeps track of all your edits, displays them in a sidebar overview and save the various parts and template at the right places.

You can pull into the Site-Editor any kind of template, Joen mentions the default error handling page (also 404-page), and modify it with existing blocks and familiar tools.

With a Theme’s block patterns, you should have a set of ready-made templates you can add to your site’s footer or pages for various display options.

The Global Styles controls in the sidebar of the site editor allow you to make decision on the color palette of your site and you can review your pages and posts on how they change the design on the fly.

After watching this demo, I can only echo Matt’s “(…) We’ve come a long, long way with Gutenberg from those first versions you might’ve seen and tried out. If you haven’t given a try recently, I encourage you to check out Gutenberg.” I have been following the project with you here on the Gutenberg Times for the last three years and I can still get excited about the new features the team adds to the editor to make it a tool of creativity on the web.

Live Q & A: WordPress Site-Editor (TNG) Jan 28, 2020 Ari Stathopoulos Carolina Nymark Anne McCarthy

In our next Live Q & A, we will have Carolina Nymark back, our resident expert on Full-site Editing as well as Ari Stathopoulos, Core Contributor and who landed the first block-based theme, Q, in the repository and Anne McCarthy, who runs the Full-Site editing outreach program. We have the latest updates for you on January 28th, 2020 at 11am ET / 16:00 UTCYou can already reserve your seat.

Until then, enjoy our previous discussions on Full-Site Editing and block-based themes. Or browse through the show notes of the Gutenberg changelog podcast next door. Each episode comes with a ton of links to resources.

Discussions on Block-Based Themes with Theme designers and Gutenberg developers


Block-based WordPress Themes / Full Site Editing with Carolina Nymark, Kjell Reigstad and Eileen Violini
June 2020

Themes and the Full Site Editing experience for WordPress (experimental) with Enrique Piqueras
January 2020

Rethinking WordPress Themes with Ellen Bauer, William Patton, and Rich Tabor
December 2019

Transcript

Matt Mullenweg: 2021 makes it easier than ever to get your vision onto your site, and your site onto the web. And now we’d like to show you a sneak peek at some of what’s coming around the corner with Gutenberg. We have Joen showing the site editor beta.

Joen Asmussen:  In this demo, I’d like to walk you through the new Gutenberg site editor. The site editor allows you to edit the theme templates beyond the post content. It introduces several new blocks like the query loop. When you make a modification like adding a featured image, it naturally adds it to every post in the query. You can configure the layout, make simple tweaks, and it propagates to all the posts. If you prefer the featured image above the titles, no problem. All the familiar block interactions are available.

While the header is a separate template part, it could be edited seamlessly. Everything is a block, navigation, the site title, the tagline, making it easy to edit anything and make use of all the block tools available. The block list view shows all the different areas like header and footer for quick access. Since everything is created with blocks, it’s easy to edit. The site editor engine keeps track of all the modifications, giving the user a clear overview of what has been modified. The site title, the header area, etcetera. You can open the 404 template, modify it like any other content. With the introduction of block patterns to WordPress, themes will be able to offer any number of designs, providing a shortcut to replicating demo sites or swapping out aspects users may not like with another that they do.

This is the culmination of several ongoing projects to improve and expand upon the customization possibilities in WordPress. Both templates and regular pages can be edited in the site editor. Small previews can be seen when hovering the different templates. The style customization panel allows making global changes like text, link, or background color. These modifications can be quickly checked against the different pages in the site. You can customize any template of the site, such as the page template. Drag and drop the page title into a cover block to use a gradient for that page. The possibilities are endless. We can’t wait to see what you build with this.

Matt Mullenweg: As you can see, we’ve come a long, long way with Gutenberg from those first versions you might’ve seen and tried out. If you haven’t given a try recently, I encourage you to check out Gutenberg. By creating this common framework that every theme and plugin can build on we’re reducing the Balkanization within WordPress from people who are solving these problems lots of different ways, and providing what I believe is the basis for the next decade of WordPress’s growth. So we’re about two years into a 10 year project. We’ve got good chunks of phase one and phase two of Gutenberg done. That’s the post and page editing and then editing the entire site. I’m excited to continue these in 2021 and hopefully start to get to phases three and four.

Gutenberg Times: Video: Full-Site Editing Overview with Anne McCarthy

Thu, 09/30/2021 - 18:15

As part of the Meta Meetup on April 15th 2021, Anne McCarthy gave a presentation on what Full-Site Editing entails, the updated scope of WordPress 5.8, what the FSE outreach program is and what issues surfaced during the four calls for testing from the group.

It’s a fantastic and fast-paced presentation and covers a lot of ground. It’s ideal for WordPress users that just now want to catch up on all the buzz around Full–Site Editing and learn what will come to WordPress in the 5.8 release in July 2021.

Big Thank You to Anne for allowing us to publish the video here with the transcript.

For those interested how the template editor works, jump right in to Marcus Kasmierczak’s live demo portion of the WordPress Mega Meetup recording

Shared Resources

See transcript below

gutenbergtimes.comFull-Site-Editing – the Ultimate Resource ListNothing in life is to be feared, it is only to be understood. Now is the time to understand more, so that we may fear less. — Marie Curie 29 Jul 2021 gutenbergtimes.comFull-site Editing MVP: Can I Build a Landing Page?Josepha Haden Chomphosy was the featured guest on the inaugural episode of the WPTavern Jukebox podcast, hosted by Nathan Wrigley. Chomphosy explained her unofficial benchmark for the Go/NoGo decision on Full-site Editing for the WordPress core merge. 27 Mar 2021

Transcript

Featured image: 404 template by Channing Ritter on critterverse.blog

Howdy. To start, thanks so much for having me. This is a presentation about full site editing. I’m very excited to talk with you. This is a feature I’ve been thinking a lot about over the last year and I’m excited to share with you all. I’m also really keen to learn from each of you what you’re worried about, what you’re excited about, how you think full-site editing can improve your workflows, and more. So this is prerecorded because I wanted to make sure with so much information going around, wanted to make sure I had all the details lined up and so I could pause and rework certain sections. But please know that I welcome questions. So while you can’t interrupt me during the presentation, there will be a whole section at the end. Pull out your pen and paper, write them down, and know that they’re very, very welcomed. But for now, let’s dig in.

So briefly about me, I’m actually originally from Winter Park, Florida. So I haven’t been home in about a year and a half, and thank you for letting me virtually return home by participating in this meetup. In 2011, I first found WordPress as a student at UNC Chapel Hill. I worked on their multi-site, had a great time. 2013, I went to my first ever WordCamp. 2014, joined Automatic as a happiness engineer focused on VaultPress and had a great time focusing on security of websites. It gave me a really interesting look into concerns people have about websites that most people don’t think about. Then 2020, I switched into the developer relations position at Automatic and have been there ever since.

So let’s get meta and talk about the talk. (laughing). So to start, I’m going to zoom out really big and then slowly put pieces together until we kind of get a nice map of what full-site editing is with all the details. So this will look kind of like first answering some big, high-level questions, digging into then how the work is actually being done, so going from high level, “What is this? Why does it help me?” to “How is this work actually being approached? What are the pieces of the work that I need to know, the role of the outreach program?” Then I want to address some key topics and questions that I often get asked when I’ve presented at other places and talked on other podcasts about full-site editing or just one-on-one with people. I love to talk about full-site editing. So hopefully some of the key topics and questions can help get people thinking about other things they want to ask about.

So let’s dig into the first big picture question. Why is this being done at all? Simply put, it’s to empower users. Rather than having a specific part of the site locked away in a theme or requiring a plugin, full-site editing will basically open it up to customize any part of your site the way you want to, or, on the flip side, you can let it be, or if you’re an agency, you could lock certain sites down or certain parts of a site down, depending upon how you want users to have access. So it’s a pretty powerful, big mission to actually deliver on full site editing.

So I answered why is this being done. Now let’s dig into how does this fit into the WordPress roadmap? So full-site editing is a major part of phase two of the current roadmap. It’s not the only part, though. There’s actually other interrelated projects, including things like block patterns, the block directory, block-based themes. So it’s just one piece of this larger roadmap, but it’s one of the major grounding points of phase two of the roadmap.

So what is full-site editing at a high level? Essentially, it’s a collection of features, and it’s important that you get the collection part. But it’s a collection of features that bring the familiar experience of blocks to all parts of your site, rather than just posts and pages. But Anne, what does a collection of features mean? Basically, I’ve noticed people tend to refer to full-site editing as one big thing. It’s like an on-off switch. It’s this monolith, and it’s actually not. It’s not this binary thing. It’s way better to talk about how there’s different pieces that fit together and interrelate, because it actually gives flexibility for release squads to release what’s ready, rather than all of it at once. So while it might be easier to talk about how it’s this one big thing, I encourage you all to kind of think about the different pieces, if you can, and I’ll touch on this more in a bit.

Okay. So what does full-site editing actually allow me to do, right? So cool, Anne, a collection of features, but show me the money. (laughing). So this is an example of a 404 page. So a 404 page, typically you’re not actually able to edit, but with full-site editing, you could actually create this 404 page. This was actually done by one of the automatic designers, Channing. Shout-out to Channing. She did this as part of one of the tests for full-site editing, the outreach program. So it’s a pretty beautiful thing. While we all might not have the design chops that Channing does, it is pretty neat to see kind of a very tangible, hands-on example of what full-site editing unlocks you to be able to do.

To get more specific, basically, if you’re a user, imagine editing the template that a specific post has for a specific category. For theme authors, you’ll be able to tap into design tools that allow you to focus more on actually creating a really compelling experience and less on getting the code in place and hacking things up. You can also out in and out of whatever you’re ready for, which is really exciting. But ideally, for theme authors, it’s going to be a huge change. It’ll allow creating themes to be much, much easier. If you’re an agency, you’ll have greater control over what you can offer clients, including setting custom brand colors with presets to locking down various aspects for consistency, such as typography or wanting only certain default colors to be used.

Milestones of Full-Site Editing Experience

So how is this work being done? So rather than trying to go through everything in one go, this project has actually been broken down into seven different milestones. Some of these milestones are completely separate, their own thing. Some are very interrelated. Some mix and match in different ways. But we’re going to go through each of them so you can get a sense of how this is being done. I’m going to try to stay at a high level before going into a very brief demo midway through the presentation. But hopefully this’ll give you a sense of what this looks like.

Infrastructure       

So milestone one, this was actually such a big milestone that it was broken into two parts. Essentially, this is all about laying the foundation, everything from multi-entity saving, which is actually being displayed here in the GIF that you see, where you can actually update multiple things at once, including a template part. You update your header, you update a post, and you update your footer. It’ll show all the changes happening and allow you to check and uncheck different boxes to save. Basically, just think about this as building the foundation of the experience, the technical foundation, unlocking things like being able to edit a template directly to working on specific blocks for full-site editing, like the site title. So we have a site title block, and it updates everywhere you have it listed.

Browsing Templates and Template Parts

Milestone two, browsing. Again, there’s another little visual so you can see what this actually looks like. This is basically giving you a map and a GPS to know your location, how to get where you need to go for your site. So because there are these new parts of editing your site that are unlocked with full-site editing, like template editing and template parts, like a header or footer, there needs to be a way to navigate between them. So this milestone is dedicated to that. How can we make it as easy as possible for you to you get where you need to go?

Styling – Global Styles + theme.json

Milestone three, styling. So this actually covers a couple different layers. I’m going to break it down in this slide and then the next one to help give you a sense visually of what this looks like. But this includes everything from the technical requirements to make various levels work and the UI for users. So you can actually see a depiction of the future design for the UI that users will interact with in the imagery here. So there’s generally three layers, including selling for local blocks, theme defaults, and then global modifications or what we often call global styles. You can think of global styles as basically having the option to edit all aspects of your site. So if you want to set a typography that goes across your entire site, if you want to have certain colors for all H1 headers, you can set that up with global styles.

Currently, much of the work has been focused on the technical underpinnings, especially around aspects like theme.json, which is a very key component for block themes and a really big tool for block theme authors. But for 5.8, the focus is generally going to be on merging the non-user interface parts of global styles. So don’t expect to interact with this system unless you’re a theme author. If you are a theme authro, get really excited. Here’s a little visual, just you can get a sense of it. So these are the different layers that have to interact in the styling system and hierarchy that needs to be thought of when working on this milestone.

20+ Theme Blocks

Milestone four, theme blocks. So because full-site editing opens up so many more aspects of the site to edit, new blocks had to be created, basically. So if you’re creating a new template for a specific category and you’re putting in post content and you want to add the post author block, which you can see here, you can quickly add it in, customize it to your liking, add in post comment, add in post data, remove the post date. You can edit each parts of these things, which pretty excited about this, is there’s actually 20-plus blocks that fall into this category. If all goes as planned, some of those will be released for 5.8 and available potentially for all sites. So even if you’re not using a block theme, you could have access to these theme blocks, which is pretty powerful and pretty cool.

Query Block – The Loop or Post List

Query block. So the query block has its own milestone, because it’s a pretty powerful block. It’s also meant to be a theme author tool, so in the long run, if you’re a user, imagine that you interact with what we call block variations, which basically are just different variations of a block, as the name implies. But imagine you want to add in your latest post. You’ll add the latest post block, but underneath it, what will be powering that experience of adding your latest post will be the query block. Essentially, as the name implies, it allows you to query posts and pages and display them in different arrangements on the page. I’m very excited, actually. In Gutenberg 10.5, which will be released in just about two weeks, there’s going to be some new patterns. You can see right here, large, medium, small are the current selection of patterns that you have for the query block. But pretty soon, there’s going to be a grid pattern and a couple other cool ones, which is pretty exciting. Generally speaking, though, if you’re an end user, don’t expect to interact with this. If you’re a theme author, get excited.

Navigation Block

Navigation block. Again, this is just a single block, but don’t be fooled. It’s definitely a mighty one. So this last one is dedicated to all things navigation block, both in terms of structure and design. You can see in this little GIF I have going on, I’m just kind of making little design changes and moving things around so you can get a sense of what it’s like to interact with this block. This milestone actually includes everything from how do you build a really simple menu with a few items to thinking about how to create a really large mega menu and add in new blocks, like the search block that you can see here. We’re even adding sub-menus, different designs, different layouts, and more.

Gradual Adoption – Widgets, Customizer, Hybrid Themes 

So the last piece of the milestones is the gradual adoption. I hope this GIF makes you laugh, but also seriously, this is the intent, is we slowly want people to be able to adapt in the way that they can. Once more of these pieces are completed, there’s basically a ton of room to start exploring how adoption might look like for those who can’t or don’t want to restructure a full theme. So this might be an intermix of block-based things and regular PHP templates, or it might be covered by projects like the block-based widget editor and the navigation screen. Both of those projects I’ll cover later, but for now, just keep in mind that this is intentionally a milestone. We want to allow for gradual adoption and want people to have lots of pathways in to taking advantage of full site editing.

What’s coming to WordPress 5.8

So what’s coming to WordPress 5.8? So just last week, a post went out from Josepha, who is the executive director of the WordPress project. I want to read a quote from it just to kind of set the tone and give you a sense. So full-site editing is a collection of projects, and together, they represent a big change, arguably too much for a single release. The most important context to share is that it isn’t shipping as the full default experience for users. One of the clearest pieces of feedback from the phase one merge process was that there wasn’t enough time for extenders, agencies, theme authors, plugin developers, site builders, et cetera to prepare for the upcoming changes. With that in mind, this merge process won’t be an on-off switch, and you can see I’ve bolded various specific parts that I hope you take home with you.

All right. So let’s talk WordPress 5.8 plans. This is up-to-date information as of today. A post was released from Josepha on [inaudible 00:12:21], if you’d like to check it out. From the call that the project leadership had, this is what they came up with for the 5.8 plans. This includes improvements from Gutenberg 9.9 and beyond. So we always package different versions of Gutenberg into major releases. This release is no different. There’ll be an introduction of new blocks, including query, site logo, navigation, et cetera. These are each very powerful blocks, very exciting to see. theme.json mechanism, this is part of what allows block themes to use different global styling, which will be very cool for block authors to get their hands on.

The template editor for pages and a blank template, I’ll actually be showing a demo of this in a moment. So hang tight there, but it’ll all make sense in a bit. The widget screen and block widgets in the customizer, this is basically work being done to bring blocks to the widgets experience. I will talk more about that later, about how it’s a stepping stone towards full-site editing. Then finally, design tools, so even more design tools that people can hook into, including duotone, which adds a really cool color filter, layout controls, padding, and more.

Short Demo: Template Editing, Navigation Block and Multi-Entity Saving

So at this point, let’s pause for a minute and actually show off one of the features that is aimed to be included in 5.8. 

I’m going to show you template editing, the navigation block, and just some of the cool flows with multi-entity saving is one of the things that we talked about that will make it into this release. So I’m in the post editor. I have a new post. I love to blog and write and present. I hit Update. Super happy, whatever. Open up the post settings, and there’s this new section that allows you to both create a brand new template. This will ideally be used both in themes that are block-based themes, so they’re ready for full-site editing, and potentially for classic themes. There’s actually work underway so that this will be available in anything being used in WordPress right now.

So right now, if I hit Edit, this will take me into the template that this post is using. So let’s do that now. So as you can see, this drops me into what looks like the entire site. So you can see I have my header up here, I have the footer down here, and I can make changes directly to them. So, for example, if I jump in here, this is the navigation block, and I haven’t yet set it up. So I can say add all pages, and I can start empty. In this case, I’ll say, “You know what? Let’s start empty.” Let’s say I want to add a custom link. One of the cool things you can actually do, you can quickly select from here, or let’s say I want to add a new post. Let me first select post link.

So adventures around the world. Let’s pretend I’m just inspired where I’m writing this. I can actually create a draft post, which is pretty cool, and it’ll show up here. It will not show up on the front end, since it’s a draft, but it actually creates a page draft for this with this title automatically. So let’s say I’m scrolling through here. I’m going, “Oh, this looks pretty good. Actually, I kind of want to see what it looks like if I add an image to the post here.” Pull up an image block. Oh, my media library. Hammocks. Can’t get enough hammocks. Going to throw that in there. Great. So at this point, I’ve made changes to the actual header. I’ve made changes to the post. I’m just going to apply and see what happens.

So this is the multi-entity saving that I mentioned earlier. Now, as you can see, it has a section for posts, so it’s saying, “Hey, you edited this post,” and it has a section saying, “Hey, you edited the header.” So at this point, I’m going to hit Save, because I want both those changes to propagate. Now I’m back into my post, into the writing flow, and I can easily switch back and forth. I can also select a new one. But yeah, hopefully this gives you a good sense of one of the key parts that’s being worked on for inclusion in 5.8. There will be a demo later, but this is just a taste.

Timeline of 5.8 Release

To help set the stage for what you can prepare for, here are some upcoming dates to keep in mind. If you’re like me, time is moving really strangely, so I like to have dates to kind of anchor me. Feel free to take a screenshot of this or write it down if you’d like. So April 13th and April 27th, these are the go and no-go decision dates. So right now, project leadership actually has gathered. So you might notice if you are good with dates and good with time right now, April 13th has come and gone. So this date has passed, and project leadership has met actually to go through different FSE-related features and projects to figure out what might be ready for 5.8. I would expect to see more high-level posts throughout the month, especially after the second date, the April 27th date. That’s when final decisions will be made around 5.8.

Then if all goes well, the beta period for WordPress 5.8 will start on June 8th. So people can actually start getting their hands on the tools that are going to be in place in the actual release and testing it and finding bugs and improving things from there. July 20th is the actual date of WordPress 5.8 and when it’s released. This is being considered as an open beta, where theme authors, plugin authors, agencies, and more can dig into the tools that are being offered and that I went over previously. Then in December 2021, that’s around the time when WordPress 5.9 will be released, and this is when I expect to move from tools for extenders into tools actually for users and more user-facing interactions with full-site editing and having things unlocked in the interface that previously in 5.8, most users won’t notice and won’t interact with. In 5.9, I expect that to be more visible.

So some key takeaways. I know this is a lot of information. So only what’s ready from the various milestones will be shipped. This is not an on-off switch, and it won’t take over your site. The focus right now is on giving tools to extenders first, before user-facing changes. That’s a big lesson that was learned from the 5.0 merge, where Gutenberg and the core editor was brought into the WordPress experience. This is something that, thankfully, we’re in a position where because of these interrelated projects, we’re able to move in a more flexible and adaptable way to release what’s ready and not anything else.

What is the FSE Outreach Experiment Program?

All right. At this point, let’s jump into the full-site editing outreach program. As a reminder, this is the program that I actually run, so consider this free rein to ask me whatever question you’d like, because I think probably too much about this program. But it’s something I’m really excited to talk to you about, and I think it’s a really neat vehicle for both feedback and education about full site editing.

So let’s go over some big picture questions, kind of like we did earlier on, and just get the details of the way. So let’s start. What is it? So essentially, it’s just a program focused on full-site editing. It’s in the form of a Slack channel right now. I’ll go over how to join it in a bit. But it has curated calls for testing, summary posts of the feedback that we get, and various educational opportunities that you can hop in on, mainly in the form of live streams. I’m running some hallway hangouts, which are basically just Zoom calls. People can come in, and we can talk about full site editing.

What’s the goal

What’s the goal? So the goal is pretty simple, help improve full-site editing experience by gathering feedback from WordPress site builders. While the group originally started solely to be about feedback, there’s actually this really neat educational component that has come up as the feature has developed and as more people have gotten curious about it. So people can join just to build their own awareness about what’s happening with full-site editing and kind of just look at a glance or just help amplify the posts that are coming through.

Why was it started?

Why was it started? So I’m going to quote Josepha from the kickoff post. During the WordPress 5.0 retrospective, which is when Gutenberg was merged and the core editor was merged, one of the things that came up routinely was the need for better engagement with users. It was generally agreed from all levels and area of contribution that users would be most impacted by Gutenberg, but the users were also the group we had the least channels of communication to. To help get user feedback to WordPress developers a little bit more seamlessly, I’m going to try and experiment outreach program. So basically, this is a lesson that was learned from the 5.0 release. In order to prevent another situation where people are caught by surprise, this program is in place to help people get excited and on ramped and on boarded onto full-site editing, as well as getting feedback so that we know if a major workflow change is coming into play, we can actually get user feedback to make it a little bit easier.

How to Join FSE Outreach Experiment

All right. At this point, I bet you’re just so stoked. You’re ready to dive in. Awesome. (laughing). All you’ve got to do is join FSE Outreach Experiment in Make WordPress Slack, and then you’re all set. You’ll just get a bunch of annoying pings for me with prompts for how to test, interesting posts related to full site editing, and more. I promise it’s also not as scary as this dive, which looks absolutely terrifying, but also beautiful.

High-Level Feedback from Calls for Testing

So because at this point, we’re on our fifth call for testing, I want to go over some high-level pieces of feedback that we’ve actually gotten about the experience so far. Basically, across all the calls for testing, these are repeated themes that have come up. But keep in mind that because there are certain aspects that we actually haven’t tested, so global styles, for example, the UI isn’t available really for users, and it’s not refined for users, so it’s not something that we’ve had as a focus part of testing, even though there is a UI that is available. So certain things are left out purely because they aren’t necessarily ready for testing, but these are the top pieces of feedback. So bear with me.

Preview Content

Previewing content. Publish a post. You want to go preview it, or you’re editing a post. You want to go preview the content. The same thing is true with full site editing. This is a big thing that kept coming up. My question is, is this a necessary workflow, or is it a symptom of other problems? Because in general, the site editor should be as WYSIWYG, as what you see is what you get, as possible.

So if you’re making a change, it should look exactly the same as the front end of your site, and because it doesn’t right now, it’s causing this tension. There actually is a preview site option under discussion, as well as a browse mode option, which basically, if you’re actually editing your site, it would turn off everything that wouldn’t actually show up on the front end. So if you only have one page of posts, but you have pagination set up so if you had multiple pages, that would actually go away. So as you can imagine, this is currently up for discussion, but there actually are a couple different pathways to try and address this problem. But it’s a very important one to address.

Saving Process

Saving process. I like to say it’s technically reliable, but not yet delightful. So basically, it’s left a lot to be desired right now, and it’s resulted in a fair bit of confusion. There’s a lot of feature requests and enhancements and bugs that have come up related to saving. This is likely because the multi-entity saving aspect that I demoed earlier is very new for WordPress users. It’s not something we’re used to having as part of our workflow. So it’s something that inherently needs some work on. So whether it was people requesting more granular saving options to show specifically what was being changed to issues with saving for screen readers to confusion around even just what the general parts mean, like what you’re actually selecting or unselecting, This was definitely a big, big area of feedback.

Distinction between editing area.

Distinction between editing area. So basically, because you can edit all parts of your site, it’s hard to know, “Am I editing the header for all of my site, or am I editing just a specific piece of content on a post?” This kind of distinction, jumping between different levels of, “Oh, you’re changing this. This will change everything” to “You’re just changing this one thing in this one spot” is pretty tricky. Right now, there’s not a lot of friction, and there’s not a lot clarity in the actual experience to show when you’re actually jumping between those different levels. So this was a big piece that’s come up, and it’s something that is an active area of iteration and exploration to kind of get the right amount of friction in place.

Rethinking Width and Alignment.

So rethinking width and alignment. Previously, alignment in full-site editing worked to optimize how traditional things worked, where basically, traditional things provided their own alignment styles. This worked okay for the project up until this point. But recently, work has been shipped to reimagine how this dynamic should work to allow for actually more control over alignments when using the site editor. This should actually help make sure that whether you want something that’s full width or you want to change the actual width of your content that’s showing up that it’ll actually be what you see is what you get. Right now, this is another piece of feedback at a high level that’s impacted what you see is what you get experience.

General usability improvements.

Generally usability improvements. I admit this is totally a catchall, and it covers a ton of stuff, but it’s actually a very important one to think of, because it’ll actually move the site editing experience from being just functional to actually delightful, which is really exciting. There’s a ton of issues that are included in this, including some enhancement requests, bug reports, all that good stuff. One of my favorites to talk about is creating a background image on a template part. So imagine you have a header. You’re working on it. You’re super excited, and you’re almost done. Then you’re like, “Oh, do you what would be really cool is if I had mountains in the background. Maybe I’ll add a cover block in the background and add an image and set the opacity pretty low, but have mountains going in the background of the site.” That’s really hard to do.(laughing). You basically would have to delete everything and add the block in and then add everything back. So those are the kinds of experiences that we’re trying to improve right now.

Improving Placeholders.

Improving placeholders. So placeholders, especially for some of the newer blocks, are a powerful way to both guide people and a current point of confusion. So you probably saw this with the navigation block earlier, where it had those little grayed boxes. It’s like, “How do we explain to people, ‘Hey, this is something you have to set up and engage with, but here’s generally what it will look like and what it will do’?” 

The feedback for this mainly came into play with the query block, social icon block, featured image block, and the navigation block. Each currently actually also get users started in different ways. So not only are there different placeholders for different experiences, the actual experience of interacting with the placeholders are all pretty inconsistent right now. So I think in the long run, it seems that users will benefit a bunch from a standardized, consistent way to interact with placeholder content so that it becomes a really familiar interaction when you’re working with a more powerful block. This especially is true for the query block and navigation block.

Okay, now that we’ve covered the milestones, the outreach program, high-level pieces of feedback, I’m going to quickly run through some key topics that I imagine you’re going to have questions about. Just because I cover them here does not mean I don’t want to answer questions, so please don’t see this as a sign that you can’t also still ask questions about these topics. This is just what I’ve been hearing from folks.

Will full site editing take over my site?

Hopefully by this point, you all can say no in a resounding way. But no, this is not something that’s going to all of a sudden, on-off switch, you upgrade to 5.8, it takes everything over. Not at all. You very much have to opt into it through using a theme blocking that supports, actually, these features. In time, more pathways are going to be built as well so that when you’re actually using full-site editing, you’ll likely be using pieces in all of it. So you could just be using the query block, or you could just be using global styles without it taking over your entire site.

What about the block-based navigation and widget screens?

What’s the deal there? So in case you missed it, there’s actually two additional projects that are dedicated to bringing blocks to more areas of the site outside of full site, I think. This include the navigation screens. You can build out menus and the widget screens. You can build out your widget sections, and this is pretty powerful and high-impact work. They are both separate projects that are tangential to full-site editing, but you can think of them as stepping stones, basically. So you could have a theme that is a classic theme, but it uses a block-based widget screen so that people can have the power blocks with their widgets. Essentially, the whole point, like I said, it’s a stepping stone to get people used to using blocks more places.                                                       

Site builders

I could write a thesis about this, because there’s so much to talk about here. I imagine I’m going to get questions about this, but essentially, full-site editing is being built partially so people don’t get stuck or locked into one site builder or another. It’s also being built in a way that site builders can actually hook into what’s being created if they choose to. I’ve heard from a lot of folks, though, that they expect full-site editing to actually fully replicate their favorite site builder’s functionality, and I’m here to say that while the goals between full-site editing and site builders are pretty similar in terms of empowering users and giving better tools to customize a site, the difference is that we’re building for 40% of the Internet, and we’re building even for site builders, where site builders have a much more targeted approach.

In the future, I do think there will always be room for specific takes of how to have an ideal site editing experience, whether that’s geared to a specific group, like a marketing style approach, or if you want to have things locked down or if you want to have things opened up. But generally speaking, full-site editing is meant to actually expand the way WordPress as a whole uses blocks, so don’t expect it to fully replicate any sort of site builder, your favorite site builder, essentially.

How is this going to impact themes?

How is this going to impact themes? So in the long run, this should actually make theme development much easier. I think Marcus’s demonstration later will show that, and much simpler, especially with the design tools that will be essentially ready at your fingertips to tap into. Ideally, because of what’s being released, it should allow theme authors to focus less on coding and functions and more on design aesthetics, integrating block patterns, and all that good stuff. But because one of the key things I wanted to really drive home in this section, though, is that because full-site editing requires a block-based theme or a theme with certain functionality enabled, this makes theming extremely important to get right. So I’ve heard people say like, “Oh, themes are a thing of the past.” It’s very much not true. I’d actually argue the opposite, that theme is almost key to this experience, to having it be delightful and having it makes sense.

What pathways are going to be created?

I know I’ve talked a lot about pathways this entire time, but it is the entire focus of the final month milestone for full-site editing. So expect a lot of pathways. For now, this includes everything from having a classic theme that can take advantage of global styles to template editing or a block-based widget screen. This also includes things like allowing certain full-site editing, really, blocks to be available for users, regardless of if they’re using a classic theme or a block theme or enabling the ability to edit block templates directly, kind of like I showed in the demo earlier. So there’s going to be a ton of options here, and I’m actually really excited to see what happens once 5.8 kind of sparks the creativity of the community, because I imagine both that people will create their own pathways and start experimenting, and we’ll also get a very clear sense of, “Hey, I actually really need X, Y, and Z pathway.” We’ll get a sense of demand from the community of core, which is super exciting to have.

What’s the best way to prepare? 

So this depends on who you are. (laughing). So depending on whoever you are, at a high level, this is what I recommend. Join the FSE Outreach Program. I know this is the thing that I run. I’m very biased. But seriously, join it. I think it’s really, really helpful to get a sense both of feedback, what’s being currently iterated on, and just general education opportunities. If you’re a theme author, I really recommend checking out the theme experiments repo and joining the block-based theme meetings to learn about the latest and greatest, because lots of good information is shared there. In general, too, it’s often also helpful to join the weekly core editor meetings, because there’s regular updates about the projects and PRs people working on. Finally, pay attention to upcoming content on Learn WordPress, because I think there’s going to be a ton of stuff coming up about full-site editing, depending upon what’s scoped for 5.8 and 5.9, including building a block-based theme, for example. That will really help, I think, everyone level up.

Stay connected with Anne McCarthy

All right. So we’re at the very end. At this point, if you want to stay connected with me or you have follow-up questions after this talk, I very much welcome them. You can find me on WordPress or on Slack @annezazu, or you can reach me at my site, nomad.blog. I will also try and drop my automatic email address separately. I just won’t on a live presentation, in case you want to follow up directly via email. I’m not on Twitter. I’m not on Facebook. I’m on and off of Instagram. So please don’t try to contact me those ways.

Finally, I just want to say thanks so much for your time. Let’s hear your questions at this point. I’m really excited to hear what you all are thinking and curious about. I do want to say I don’t know everything, but I can find anything, and I’ve talked with David about how he can follow up after this presentation to get you all information and answers that you all want to questions that I might not be able to answer. So at this point, I’m going to pass it off to live and current Anne and give a high-five from past Anne.

Gutenberg Times: OEmbed and WordPress Embed blocks for Facebook and Instagram will stop working Oct 24, 2020

Thu, 09/30/2021 - 18:15

In August, Facebook announced updates to their Marketing API .

By October 24, 2020, developers must leverage a user, app, or client token when querying Graph API for user profile pictures via UID, FB OEmbeds and IG OEmbeds.

This means, the old embed request will result in an error with a 400-status. In the future, Facebook embeds will require an authentication token, available to users who have a Facebook developer account and created a Facebook app.

Ahead of this change, the Gutenberg team removed the Facebook and Instagram blocks in the 9.0 version, which will come to WordPress core in December’s 5.6 releases. WordPress core will also remove the oEmbed call for the next version(5.6).

Although the blocks are removed in Gutenberg plugin 9.0 version, the auto-oEmbed of pasted links into an empty row will still work until Facebook switches off the open format endpoint.

Frequently Asked Questions How will that work with legacy embeds? Is the data that is stored in post meta still usable?

As with other broken embeds, instead of the embed, the used link will show.

Does this also apply to Instagram embeds?

Yes. If there was an Instagram link embedding a photo, instead of a photo showing it would be a link to the Instagram post.

Is there a way WordPress could assist?

There’s nothing that WordPress can do about existing embeds, when the provider, here Facebook decides to turn off the oEmbed endpoint. If the oEmbed endpoint for a service ceases to work and the embed HTML isn’t in the post meta cache, then it will stop working.

Is there another way to embed Facebook and Instagram links?

Instagram has a menu item called embed, that will give you the embed code and you can use the Custom HTML block to add it to your page. Various Facebook posts format have a similar feature.

How to get the necessary Facebook developer & app credentials?

PHP.Watch has detailed instructions on how to go through the process. Site owners and their consultants only have to go through this once.

Using native embed code

Both Facebook and Instagram offer in their menus embed functionality and provide iframe code for embedding in 3rd party sites. As far as we know, those will still be available.

This video shows how to use the feature to embed an Instagram photo.

Plugin to Migrate Embeds to new API calls

Ayesh Karunaratne created the oEmbed Plus plugin to ease the pain for publishers and bloggers, who might have used hundreds of Facebook embed views in their news.

This plugin implements the new Facebook APIs to bring back support for Facebook and Instagram content embedding. Each site owner would need to register as developer and get app credentials to add them to the plugin’s settings page.

Screenshot: Oembed Plus plugin

Sarah Gooding also wrote about this on the WPTavern with more background on what oEmbed is and how it came about.

How are you handling this breaking change from Facebook?
Leave your ideas and questions in the comments.

Receive your Block Editor & Gutenberg Fix every Saturday at noon EDT.

Subscribe

Gutenberg Times: Customizing WordPress Block Editor for Client Projects

Thu, 09/30/2021 - 18:15
Recording of a Live Q & A with Victor Ramirez, TheKnottWW

Victor Ramirez is the Lead product analytics engineer @TheKnotWW and worked @DowJones @WSJ until about 9 months ago? He is also a co-organizer of WordCamp NYC and WordPress meetup. Founder of the Abstract Agency doing digital marketing and content strategy for customers. 

Over Labor Day weekend he posted a twitter thread on his progressive plant to customizing the WordPress editor for clients.

This is the tweet that started the thread:

1/
Because I am overly opinionated I present

The progressive plan for customizing the WordPress (Gutenberg) editor for clients.

First 3 levels require ZERO plugins & are 90% CSS.

— Victor M Ramirez (@isvictoriousss) September 5, 2020

For better readability, I posted the other tweets here.

The progressive plan for customizing the WordPress Editor for clientx

Level 1

Level 2

Level 3

  • Build Gutenberg block patterns by grouping together core blocks and styling with CSS.
  • Pro-tip: also disable columns. They’re too messy & your patterns can cover these.

We still have not created a custom block, installed any plugins, or added dependencies

Level 4

More Block Editor & Development Resources Transcript

Birgit Pauli-Haack: So, hi there. Welcome to the 21st Gutenberg Times Live Q&A. My name is Birgit Pauli-Haack and I’m your host and the publisher of Gutenberg Times. Thank you all for watching and joining us on this short-term notice, kind of two days before the event. Today’s show, we will discuss a multitude approach on customizing the block editor for clients. 

Victor Ramirez is here with me and we will take a look at how he and his team approach it. Thank you, Victor, for taking the time and putting this together. Walk us through the process.

We’ll do some proper introduction in less than a minute. I have just a few housekeeping notes. As you all know, there is on the right-hand side … oh, on the bottom of the screen you see the chat window and that’s where you can post comments and say hi and where you’re coming from or where you’re watching from. Then there’s another one that says Q&A and that’s when you can put in your question and I will then, with Victor, kind of answer those. On YouTube, we are also live now and there’s on the right-hand side, there’s the chat window where you can leave your questions and your comments.

So thank you, all, for watching. Also those that are watching this on the re-run, welcome.

Well, if you make sure that you keep your questions question-like, not so much a blog post but more a question, and then also keep it family-friendly. Even if you disagree, be kind. That’s part of our housekeeping here. Yeah.

Well, Victor, you agreed to come to the show and I get an hour with you to talk about your work. But let me introduce you. 

Victor Ramirez is the lead on product analytics engineer at The Knot WW, and formerly worked at Dow Jones and the Wall Street Journal until about nine months ago, and he’s also co-organizer for WordCamp New York City. One of my favorite WordCamps, of the WordPress MeetUp. He’s also the founder of Abstract Agency, doing digital marketing and content strategy for customers.

Hi, Victor. How are you and what’s new in your life?

Victor Ramirez: Just living through a pandemic like everyone else and just moved into a … you and I were just talking before. I moved into a co-working space to kind of get out of the house a little bit. I am isolated, though. I’m in my own little two desk space. Just moved in, so there’s … I don’t know if anyone sees the mess behind me. But yeah, doing that. And interesting enough, this year, even though it’s been a terrible year for the economy, I’m very lucky. Still employed, fingers crossed, at The Knot, but also my side business doing WordPress has been busier than ever just because clients are looking for ways to streamline content creation, and I’ve been working a lot with that, so I’ve been really busy.

Birgit Pauli-Haack: Wow, that’s awesome. I’ve had actually the same occurrence with February, March I got really busy and it got busier, busier. Right now, I’m still a little bit in the summer, summer ditch a bit which is actually good for recovering. So, I say hi to Ramona from Colorado. Hi to Rita from Reno. Thanks for saying hi in the chat.

You got my attention when you, Victor, when you tweeted over Labor Day weekend, and I think not only my attention but somebody else. Very quite insightful and succinct. This four-tiered approach on customizing block editor for clients. I think it’s very helpful for developers, aspiring developers and also developer designers who are just getting started with WordPress or Gutenberg. You started out with, because I’m overly opinionated … aren’t we all, Victor? The progressive plan for customizing WordPress Gutenberg and level one … so we have levels one, two and three. Then they require zero plug-ins and 90% cascading side sheets and level four. So do you want to walk us through the levels and kind of get started on that?

Hi, Andre.

Victor Ramirez: Yeah. Yeah, so the … it’s interesting. So my girlfriend and my coworkers have been telling me to begin to document the stuff that we’re doing because one of the things that I’ve gotten really, and I think it’s just from being involved in the meetup, in the WordCamp, and as like a quick FYI, every time a speaker flakes, and I don’t mean flakes. Things happen, people get busy, people can’t make a call. So I will step in as the speaker and so the challenge to me is then to have to write something quickly and what I do is at my day job, not just at The Knot doing analytics but my side business doing WordPress, most of the work I do is educating my developers and educating my clients about how we use WordPress.

So what I had to begin to do was … so I guess like my one teammate, she calls them Victor-isms, and they’re things that where I compartmentalize ideas to be in very kind of digestible steps that not only allow us to communicate to the client, but to communicate to the developers and communicate to the larger groups. For example, and this comes from the concept of when I was at Dow Jones, it took us two months to get a local environment set up, and I said, “Guys, it should take one day. Why does it take … a student can set up tensor flow in a weekend,” tensor flow’s a machine learning algorithm from Google, “and it takes us two months to set up a local environment for a WordPress website.” Now I keep that in my mind when I work with clients and I work with developers.

We recently hired some developers from offshore. One developer’s based in Vietnam, one’s based in Brazil, and then I work with a developer in Croatia. Every developer has their own approach, so what I wanted to do was try to one, have a uniform approach but two, I wanted to hire from less … from different talent pools. So one of the things when I hired the person that I hired from Vietnam, he’s like 23, just graduated college with two kids so he’s a very busy guy, and the other person, this young woman in Brazil, she is mainly a view developer, not a WordPress developer, but she knows WordPress enough. 

So by doing this kind of leveled framework of where I’m like, “Hey guys,” they immediately would go, “Yeah, no, I’m going to go away for four weeks and do all this the way I do it and research things.” Now that could lead to a nightmare because some people might use ACF for fields, someone might use Metabox for fields, someone might roll their own fields. Again, think about all the things that are involved in a WordPress, basic WordPress project, right? Whereas I said, “Hey, I don’t want you to go away for four weeks because by the time that happens, WordPress could change completely, Gutenberg could change. Let’s work incrementally. What could we do in a week? What could we do in two weeks?” 

So when I add a developer, the developer from Vietnam when I tested him before being hired, I gave him an HTML template to add in and he added the HTML template and knew how to use Gulp and SaaS and because of that, he was more able to get to what I would say the level two or level three of my tweets better than some WordPress developers because a lot of WordPress developers are so focused on PHP. They’re still using PH … most WordPress plug-ins and tutorials are still using PHP 5. You can cut and paste from PHP 5, 6. So what I tried to do was say, “Hey, let’s break this down where it’s just what can I do? What can I have a low level developer from Vietnam, Brazil, who’s just starting out do in three steps?” So the first three levels, I can hand them a handbook, walk away, and one week later they’ve completed it.

Birgit Pauli-Haack: So the level one is kind of … has three things on it, right? One is style the editor and the core blocks to match the client theme. Then this enables the custom colors and the fonts to keep the client on brand, and then disable all core blocks that your client doesn’t need for post type. Too many options are confusing. I totally agree with that. So style the editor and core blocks to match the client theme.

What other tools that you suggest to developers? You linked a page, or a website, an article by Rich Tabor saying how to add retro theme styles to Gutenberg. I’m going to share that link.

Victor Ramirez: Yeah, and if you want, what I can do also share my screen about….

Birgit Pauli-Haack: Right. 

Victor Ramirez: I brought up … so WordCamp Phoenix, I did a talk about Gutenberg and the joke was that you don’t even need to know a reactor JavaScript to do half the things that we’re doing here. So this is my … and by the way, after the call, or after this Zoom or YouTube or whatever we’re calling it these days, this is a repository. It’s public. It’s on my GitHub user name is victorious. It’s WCHPX 2020. Shout Out out to WordCamp Phoenix. That was a really fun time. They had laser tag.

So basic WordPress … so if you see, the first step was style the editor and the core blocks to match the client theme. What I did was I would say to them, “Hey, look, the first thing I set up, and I even have it on my own personal site to show you guys,” I have them set up Richard Tabor’s block unit test. So that is not actually available in the WordPress repository anymore, but Richard Tabor’s project was acquired by GoDaddy and he was acqui-hired, but the plug-in is still available on the Go Daddy repository.

So the first thing my developers do is they go in and install the block unit test and what the block unit test does is creates every single available version of every single core block in the system and creates a mega page. Then what we do is if the developer … sorry, if the client already has brand styles, then we just match the brand styles to this. So for example, this is Heading One, Two, Three through Six, and we will then say to the client, “Do you have any alternate styles?” What we will do is then we will add, and this is in the level two I’ll talk about that, but we say, “Hey, do you have any H One through Six?” And it’s kind of funny. A lot of times, clients won’t have these styled, and this is one of the most frustrating things about WordPress. A lot of times when agencies sell a theme, they sell an incomplete theme. They sell a theme that only designs what the clients sees, whereas with this block unit test, we’re designing everything the client could potentially see in the future.

So we have the designer go and style these on the front end and on the back end as well so that not only when the user or the site owner is interacting with the blocks, they are interacting with it, excuse me, in the way that the user would. So we expect the same thing from our developers and it’s a challenge to them.

So in level one, they’re going and … let me just jump into this site to show you how the block unit test actually works.

Birgit Pauli-Haack: Mm-hmm. Yeah. That’s cool.

Victor Ramirez: So when that loads, like I said, from Richard Tabor, the block unit test and that plug-in goes and creates a page, and that page I have here called Block Unit Test, and the other thing, too, is we say to the developer, because a lot of times developers will just go and style the front end and they’ll go … and so many developers I found are used to the WordPress backend just being ugly and not looking nice. So what I say to them, “No, no. Look. This has to work this way and the client should be able to …” so that’s the level one, right? Just go and style all the things that are available in the core blocks.

The level two is disable custom colors and fonts. This isn’t on my site, but I can just let you know why this is a problem. You give this client this beautiful H 1. It matches their branding exactly. Then the client goes and instead of going to H 6 to make it smaller, they go and … oh, sorry. We did disable this. We remove the default font picker so they can’t go and pick the font size for these. The reason we do that is we don’t want the client to go and highlight this and then go make this font size 35 and all of sudden, they’re not using the H 1 in the way that it was meant … they’re going to take an H 6 and resize it, right?

The other thing is we usually disable custom colors, but we import the client colors. You can do a color palette for the client and have all their colors there, and then remove the custom color because in reality, they’re just going to go and do something silly like put a black font on a dark blue background and make it unreadable. So we restrict that.

Then in that same thing, we go and disable core blocks, and this is actually … this is kind of a nightmare. I have these things, there’s the affiliate’s image. That’s from my site, and I’m a WordPress user so I know what needs to be there, like layout elements, but one of the things we found is that clients … the column system is just not, and this isn’t any … it’s not even just like … it is not the system because Beaver Builder, Elementor, they’ve kind of been working on columns for four years. Clients just don’t understand columns. They’re never going to get a column to work correctly on mobile. So what we do is we disable the column picker, we disable Spotify, and we create a spreadsheet. 

What I actually do is I go and I actively do a rest API, call up all the available blocks, dump it to a spreadsheet on a monthly basis, and when we onboard a client, we quickly go through and go, “Here’s your suggested configuration and here’s some blocks that we’re turning off. Do you think you need Spotify?” And the clients are like, “No,” and it’s very easy to turn off, by the way. Just to show you what I wanted to show you was in the repository that I shared from WordCamp Phoenix, I didn’t get into block development but I got into customizing the editor. What we went and did on every single type, this is … we create a custom functionality plug-in, and again this is more modern development that WordPress developers may not be used to. They go into everything into functions.php. The problem is if you throw everything into fucntions.php, and you change your theme, you lose everything. 

So we go and add all of our blocks … sorry, all of our custom functionality that is not related to the theme into a file in a core functionality plug-in. In that core functionality plug-in, we require, once all the types and so for example here, we have this type of service and I think it’s the type of case study, I think, is where we removed … we did a block white list in one of these, so this was in February that I did this talk so I forget … ah, here we go. So in this February talk, all we do is run this big function, and I know I don’t normally like commented code left in a PR, but we leave this here so the client can just go and say … the client goes, “Oh, I want gallery back.” Okay, we comment it back on. “Okay, we want this back.” Oh, we turn it back. In each CPT file, we just have this big directory of the available blocks. So for this promotion, we limited it to only paragraphs, images, and headings for this CPT.

Birgit Pauli-Haack: CPT is custom post type?

Victor Ramirez: The other thing I do, just if anyone asks custom post type. Custom post type. Correct. Sorry. Thank you for that. I forget that we’re … outside the WordPress, we get in our little bubble. 

Birgit Pauli-Haack: That’s okay. That’s okay. 

Victor Ramirez: Yeah. There’s some other things that I highly recommend in this. Always document your functions. So we document the function of what it does. Restricts blocks for promotions post type. Put a link, so you can do at link. Again, if you borrow this repo, I put a hot link to every single function and you can command click it in VS Code or PhpStorm, and that way instead of my developers coming and going, “How’d you do that?” I literally link to every single thing because I’m not that smart and it makes it easier. So we’re documenting in the code, where the developers then, we go and hack and borrow from our own code. 

So that’s level one and that was a lot, but those little things all of a sudden, cleaning up the client theme so it looks exactly how they want it, removing certain functionalities so they can’t make it look the way they don’t want it, because you don’t want a phone call when the client goes, “All my text is blue when I’m green,” and then disable the blocks they don’t need and then already the editor is much cleaner.

Birgit Pauli-Haack: Yeah. So there are, I think, two functions. One is to disable the core block colors and the other one is disable the core block font types.

Victor Ramirez: Correct.

Birgit Pauli-Haack: Okay. Yeah. Yeah, and the … you said you used the API column to clean, install, and then have that in a spreadsheet when you try to serve all available blocks?

Victor Ramirez: Yeah. So let me actually bring up my … in my other window, I have it. Let me … I’m just looking for it because we’ve done so many client projects recently with this, but it is called 03 and it is structure, so one second here. I’m actually going to show you one of the spreadsheets that we do this with, and it’s called … I’m in another window. Here we go.

So when we go and plan out the CMS, and this is something we’re doing now for clients, and I’ll show you guys in the window, we go … we don’t even work in the CMS with the client, because the client, they start to get blind. They go and see all these things in CMS, so we work in spreadsheets, and this client, for example, they had … their dashboard had all this garbage in there and so we were like, “Hey, we’re going to go and make it so all these are hidden and sliders, etc.,” then we go and get the types and then finally what I do is I hit the rest API and the rest API gives you all the available blocks. It can print out all the blocks. And we just shoot it into a spreadsheet and we go … if you recognize, let me zoom in a little bit here. If you recognize common formatting, all of these blocks, we go and say to the client, “Hey, which ones will be available per post type?” So the blog will have paragraph, we’re turning off audio, we’re going to turn on this.

Then also to make it easier for the client to understand, we go and link to every single … we do a demo where they as the … because everything’s remote and I kind of, not that I don’t like phone calls, it’s just exhausting to be talking all day. And so what I do is I say to the client, and also the client, I’m working with a CMO or marketing director or a manager, they don’t want to have to go and bother them so what they do is they can share this in a 20-person team and they’re like, “Well, what’s a quote block and how does that work?” Then I link to that for each one and then they go and … they just go and, “Oh, that’s a quote block and that’s great. Wait a minute. But our quote blocks should look different,” and that brings me to level two where we go and say, “Hey, you can choose styles,” and that’s how we demo this. We say, “Hey, look. There’s quote style one and quote style two, but we can do … what’s your brand’s quote style one and quote style two?” So yeah, so that’s how we plan that.

Birgit Pauli-Haack: That’s awesome. Thank you for sharing that. Yeah. So any questions for this level one customization from our people that are watching? Well, hi, Yuca, on YouTube. She had a comment. Although seeing the Gutenberg engine already, but definitely interested in this show. Super big thanks. Okay. Cool. There was this funny joke, you saw it kind of. Are those short stack developers instead of full stack developers? That’s pretty cool.

Victor Ramirez: Yes. Yeah, and it’s … but I think the thing, too, is we don’t … it’s not even like we’re not trying … I’m not hiring developers that are purposely lower skilled. It’s that also there are some developers who just to get up and running on WordPress, it’s so much work. It’s easier to find someone, in my opinion, who understands semantic HTML, CSS, and build tools, and then we disable the PHP engine and we just say, “Hey, look, now the WordPress site, the template, looks the way it needs to look, the HTML template looks the way it needs to look. Please go and use JavaScript and CSS to add the UI functionality that we need for the client to be happy.”

Birgit Pauli-Haack: Yeah. I totally get it, yeah. So if that’s level one, what’s level two? It says customize the core blocks by adding block styles, and then extend the existing functionality. Example, you don’t need a custom testimonial block. What you actually need is a block quote with a custom style and a link attribute. That’s kind of the next tweet. There was a lot of information in this Twitter thread.

Victor Ramirez: Right. So I don’t have … again, I don’t have styles loaded from a client, but if you guys steal somebody’s screen, this is a default functionality of WordPress core. So again, this is not anything custom. This is the default block quote from WordPress and it comes in two styles, default and large. What a lot of people may not realize is you can then … what this large is actually doing, and all it’s doing, is it is going and adding a wrapper, a class wrapper, around this block quote, with the class of let’s say large, right? And then so when I go to that quote, so then the client comes to us and says, “Oh, well, our block quote looks a certain way.” We can just go to this actual … find the block quote and see it says is style large, right? Well, now I just go look for that is style large in my CSS, and I could go and target only that particular style large class, right? 

So when you go, and that’s why kind of that Richard Tabor tutorial, and actually I think the other one that’s really good that keeps it very straightforward, Bill Erickson does Gutenberg styles and he does block styles. Again, because I don’t have an option ready, he shows two versions. He just modified large and modified a regular, right? Again, you can just use the default styles, but then you can add an additional style by adding a JavaScript call. You do need a custom JavaScript file for your core editor and you can see here, some of what I was talking about before, he did Heading 1 through 6 one style, had a style two. So it’s about … I think it’s about 10 lines of code. You’re creating and queuing custom scripts that load in the editor and then he is registering the custom style and he labeled it alternate.

So they’re doing the same thing here in core, where they’re saying is large. You’re going to do is alternate, and then your new style will be available for each of these. You can do these for any of these. You can make your headings … I worked with clients where when you add that style, now that style will be pickable there, and that happens all the time where a client may have a cursive font or some kind of CTA font they want. You can do that even with buttons. We have, and actually I think that’s in core, in core there’s button style one and button style two. Actually, this is from this theme that I’m using. So you can go build your own.

Then extending the custom functionality, again I don’t have one right in front of me right now, but we had a client that wanted to do quotes, and what we did was we found okay, they wanted quotes with a link to the author’s name. All we did was we extended it, and I think linked in there to add extended functionality. That’s from Jeffrey Carandang. Sorry, Jeffrey, if I’m butchering your name. I know we’ve met twice. 

So he has it’s extending blocks and it’s Jeffrey Carandang. So all you do is again, basic JavaScript. Now that you’ve added that basic JavaScript file that loads particular styles, you can use that same JavaScript file to add an attribute. What you can see he’s doing here is he is adding a custom attribute to a core Gutenberg block of like, and it adds an attribute and what it looks like it’s doing here is it’s assigning an attribute of visible on mobile and he’s registering it to … let me see here. Where he’s passing it? Right. Custom panel control. See, he added mobile, and this is a toggle. Mobile device visibility.

So recently we did that for a client where all we did was we added a text field and let them add a URL, and we didn’t add a custom testimonial block. All we did was add a custom attribute of a URL and they could click … they could highlight here, or click there, and have the URL and add the link. So you can modify the basic WordPress blocks very easily. So what we try to do is when we go and work with a client on a project, we work through these and we say, “Okay, do they need level one, level two, level three,” and that gives us also a better way to scope time.

So yeah, that’s what I was saying here. You don’t need a testimonial block. And also the other thing, too, is you can actually use Inner Blocks to cheat. I guess I should have put that as a level 2.5, where now ACF has Inner Blocks and even Gutenberg has Inner Blocks. An Inner Block is where you essentially create a block that calls in other blocks. So you can make your own testimonial block by using the H 1, the paragraph, a link, and then an image. Then now, use Inner Blocks to put those in with default attributes and now you’ve created your own testimonial block, but you’re not actually … you didn’t actually create a block. You’re just using the core blocks and calling them in a pattern.

Birgit Pauli-Haack: Yeah, so Juca Pauline has a question on YouTube. Is name scope a problem in doing Gutenberg blocks? Can the component be easily shielded into its own name space?

Victor Ramirez: So I’ve not run into any issue, but name spacing is important to make sure when you’re going and it’s all about how you build your files. So whenever we’re working with CSS, prefixing all of our functions, prefixing everything and actually had that in the demo. We’re building out currently where all of our CSS, all of our JavaScript is modularized where it is all name spaced and so by default, ES 6, and if you guys can see my screen, we go through all of our code and we make sure to name space this … sorry, I just pulled this down. I have a developer working on it. So yeah, for all that, you will run into name space issues if you don’t properly prefix, name space, and work with your code.

So that is one of the things that gets frustrating for developers, but that’s why I recommend, again, starting with level one and two. You really shouldn’t run into those issues as long as you’re using the core blocks and you’re, again, prefixing your functions, making sure to name space things and import properly. But yeah, that will be an issue if you go to scale and you don’t plan for those things.

Birgit Pauli-Haack: I’m just making a little pause here to make sure that people who have questions can kind of be more targeted and not have to wait until later. If you have questions about adding custom block styles as well as extending core blocks, now is a good time. Of course, we can do the Q&A later, but just to get the first questions out of the way.

Victor Ramirez: Then one more thing. On my screen, you might see there’s this guy, Igor Benic, who’s really….

Birgit Pauli-Haack: Benic.

Victor Ramirez: Yeah, Benic. Sorry. I’m going to butcher his name, yeah. So butchering names today. But yeah, so he writes great stuff and he actually wrote this a while back. If you look at this article, he talks about Inner Blocks but the thing I think that he did great was he showed how CoBlocks, which is owned by Richard Tabor, went and used the Accordion lock and the Accordion Block is using Inner Blocks. They didn’t really go and write their own block, they just used the core blocks to create a block called Accordion that uses Inner Blocks.

Birgit Pauli-Haack: Yeah, I’m glad that you mentioned that. That is actually one of the most clicked links on one of our resource pages from the Gutenberg Times. It’s Enable Inner Blocks for Gutenberg. It’s kind of interesting, yeah. Yeah. Okay. So we have that. I’m looking around the space and I don’t see any questions right now. Oh, good. Yuca Pauline says, “Good tip on naming.”

All right. We are at level three. Build Gutenberg block patterns by grouping together core blocks and styling with CSS. Pro tip, also disable columns. That’s what you mentioned before. Nobody gets that right. The Gutenberg block patterns is just new in WordPress 5.5, but it was around the Gutenberg plug-in for quite a while, and we have another link to Rich Tabor, How to Build Block Patterns for the WordPress Editor.

Victor Ramirez: Right. So the way that I came into that, I didn’t even know it was called block patterns because I had not been really following the block pattern build-out. So I left Dow Jones in January and I had not really been involved, kind of like tracking the active development of Gutenberg, but I did go … and what I was doing was we were using StudioPress Genesis, and a couple of things I actually kind of don’t like about StudioPress Genesis. I want to give a warning because sometimes I feel like some people may go and purchase something because I recommend it and then get mad because I didn’t warn them about something.

One of the things I don’t like about Genesis is it goes and changes default functional … I’m very opinionated in the sense that everything that you do should be as close to core as possible because you’re doing your clients and your user a disservice. So for example, if I want to change the layout of this to full width sidebar, in default WordPress you would go to page attributes and choose the … this should say sidebar left, sidebar right, but Genesis does this thing where it does layout. We actually kill this, get rid of this whole custom sidebar and move all the settings back over here via custom attributes.

Again, they had that. It wasn’t … again, they may be doing it for a particular reason. We did it and moved it over, and now we’re moving back to Patterns because before Atomic Blocks and Genesis, before Patterns was out, they had this thing called Layouts, and it actually was Patterns, but built a different way. So we would go and it wasn’t really well documented, but Atomic Blocks had in their repository you could go and make your own patterns. So these are patterns. 

So if you see the way I’m doing this now, if I want to go and add something here on this page, instead of going add a block, and by the way in the new WordPress, in 5.5 which I don’t have active right here now, you would go like and instead of just adding a block, these patterns would show up next to your blocks as well and you can add a preview of each one. The layout picker, the way it works from Genesis or Atomic, is if I go and pick a layout and then I go and pick this and I click it, it goes and adds a layout, and what do you know? Three columns, right? I’ve disabled, again not in this instance, but they went and added in this layout, they went and added columns, they added column gap. So this whole pattern has its own controls, had its own functionality. 

So now it’s really restricting the user, but it’s restricting the user in a good way. If you remember I said remove columns, now it’s easier because there’s so many times where a client will say, “Oh, I want to add two columns,” but then they go and … I had a client who was adding … they kept making columns and trying to put the media text block. If anyone’s not familiar, the media text is like a hero type image. But they kept trying to put the media text block into four columns and then getting annoyed that it looked terrible on mobile, but they didn’t understand padding, they didn’t understand all these things. So what we did was by getting rid of columns and restricting to layouts, they couldn’t just go and add other blocks in other places. If you see here actually, I can’t go and add other blocks into this layout. 

So by restricting that, you’re taking away control for the client, but you’re also giving high value adds where you’re saying to the client, “Hey, just give me all of the available patterns or all the things you use, and I will add these for you.” Now some clients, I hear marketers and people that use Beaver Builder screaming, but what I do is I restrict … I will go and create a custom post type of promotions and restrict the page builder to only promotions of a custom post type. That way when the user logs in, they can only ruin those pages and then they can fight with the designer on how to get that. But for the primary users, we use this. So that’s what I like to do there.

Then yeah, that’s kind of it, really. They’re simple. You can build these blocks and similar to Richard Tabor’s tutorial, once I build out a group of blocks, I can just take that group and then export it and turn it into a pattern.

Birgit Pauli-Haack: Yeah. Yeah, and that’s what Rich is showing. I also shared a link to the Gutenberg Times WordPress Block Pattern resource list, which is actually covering the whole aspect of it, not only how you use them but also how there are plug-ins available that you can install as a site owner on your site, and then create, with the core blocks, your pattern so to speak, and then save it to the Pattern and it will show up as a pattern in your inserter. Those are quite nice. There’s some other cool links in there, also. 

I found three themes that do block patterns quite well, so you can actually look at them and maybe learn from it and do some creative inspiration there. But that is … with 5.5, it has been … I think it’s a game changer, block patterns, because it can be done by anybody to do these templates but you don’t really need JavaScript for it. What Rich is showing is actually how to put it in your Functions page or a separate plug-in but also using the block editor to create them. You can style them and everything, so it’s really interesting. 

I would suggest that any designer and developer to learn more about block patterns because it helps you so much with the Gutenberg and making really good with the clients, yeah.

All right. So, but we … as you said in your tweet, we still have not created a single custom block, installed any plug-ins, or added any dependencies, right?

Victor Ramirez: Right.

Birgit Pauli-Haack: So now we come to level four, or do we have questions before we go to level four? No question here. Nope. Nope. Yeah, go ahead.

Victor Ramirez: Okay, cool. Yeah, so on the level four, and again, there was actually someone that commented on the tweet, or the tweet storm I guess, that I did and they said, “Oh, I don’t agree about ACF.” I’ll be honest. I actually, when I was at Dow Jones, I kind of began to not like Advanced Custom Fields but the other thing was I … and I think a lot of developers make this mistake that you are in the WordPress developer bubble because what happens is you end up thinking, “Yeah, man. It’s just easy to maintain a block,” and it’s like if it was so easy to maintain code, I mean look at it like, what is it? Space Jam? Has anyone ever seen that, by the way? The Space Jam website, the Michael Jordan cartoon movie, the website’s still standing, I think 20 years later. Twenty years later this site is still standing, right, but if we were to go and look at the source code it is just plain HTML. There’s nothing in here. There’s no scripts. There’s nothing. I think there’s a script for a policy update warning and that’s it.

Birgit Pauli-Haack: There’s a tracker, yeah.

Victor Ramirez: Yeah, where as modern development, there’s so many different changes, so many things going in and when you are … and you’re doing yourself, in my opinion, a disservice. You can’t be mad at a client who pays you $10,000 for a website and then when you … when a block breaks they call you three months later to fix it and you’re like, “Oh, that will be another $500,” because now you’re charging them 5%. They’re abstracted from that mentally, meaning where they are like … and the one reason I bring that up, too, is I would say at Dow Jones and I even say at The Knot, we’re competing with Domino’s and the reason is that the user experience, when you go and order a Domino’s pizza, there’s a pizza tracker and you can watch from the minute the person puts the pizza in the oven to the minute the person delivers the pizza. For $10, that’s the user experience they get. People don’t realize there’s a 500-person development team at Domino’s who’s building their infrastructure systems, but to the user, they’re like, “Why does my $10 pizza have a better user experience than my $10,000 website,” right?

So one of the big things that I brought from being in enterprise development to now still doing websites for marketing for start-ups for their marketing websites is kind of how’s this thing going to stay standing? So AVF may … it doesn’t have inline … the one thing that drove me nuts, it didn’t have inline editing, right? You’re essentially just putting fields inside of the Gutenberg editor. The one thing that it does do is it handles the dependencies. Your client only has to worry about updating Advanced Custom Fields. They don’t have to worry about updating low dash, updating babble, updated web pack, updating all these JavaScript technologies, right? So ACF is really beneficial for that.

Now, of course, if you’re dealing with an enterprise client where you’re on an annual retainer and you have the development hours, go for it. Build custom blocks, right, but like I said, if you don’t have a client on a retainer and they’re not doing a maintenance plan you’re putting yourself in for a world of trouble by not using Advanced Custom Fields. The other thing, too….

Birgit Pauli-Haack: Especially now, yeah. Especially now that Gutenberg is still so volatile, changing APIs left and right and CSS and all that. Yeah.

Victor Ramirez: Right. And JavaScript and the web in general is getting volatile with core web vitals now, the way that we track speed. Everything’s changing.

But the beauty of Advanced Custom Fields is that, and actually I can even show you. Let me see if I have a demo available. So this is … let me see if this still works. Give me one second. And probably not, but let me see if I get in here. Give me one second. And auto fill. Nope, that’s the old one. Other pro tip, use a password manager always.

Birgit Pauli-Haack: Yeah.

Victor Ramirez: And so….

Birgit Pauli-Haack: Yeah, so I shared in the chat the link to the documentation for ACF guide, how to do blocks, so people can then study for themselves later on. Yeah.

Victor Ramirez: Yeah. And so this is actually one of my favorite examples of what we do now for clients. This is like full circle WordPress 101, okay? This is actually … this is what I spoke about at WordCamp Phoenix. If you go and borrow that repo, it’s what I built in here. 

So the number one thing that drives me nuts at most WordPress build-outs is you will see here that notice it says Search. That should say Search Testimonials. But even Modern Tribe Events Calendar Pro, when you go and hit view or whatever, it will say when you hit Add a New Testimonial or you publish a testimonial or publish an event, it will say View Post. That drives me crazy. It’s not a post, it’s an event. Again remember, get out of your WordPress bubble. Outside of the WordPress bubble, that is very confusing because you know that an event is a custom post type because you’re in the bubble. Outside the bubble, they don’t know that.

So the other thing is that on most people when they go and create CPTs, they leave this button up here that says View Posts, View Testimonials. Well, this testimonial is headless, meaning where we don’t even allow … there’s no render. And so what people don’t realize you can do, and I did this at WordCamp Phoenix, is you can go to the type of testimonial, and I did this here. I went and disabled … I changed all the labels to match exactly which is insert testimonial, view testimonial, filter testimonials, et cetera, et cetera. I go and remove … I leave the title, by the way. It drives me nuts when people change the default title to an ACF field. There’s so much rich functionality that the default title field does. You’re creating work for yourself. Don’t do it. So I change that. 

Then we go and do this kind of work, and again it’s documented here at site point, where we go and it says testimonial updated, testimonial created, and if there is no front forward facing publicly queryable link, it will not say view update. It will just say updated. It won’t say view updated testimonial.

So why does this all matter? The reason this is great is now we have this set up where there’s a front-end submission form where the client, via gravity forms, can send it to the user, they go and fill out the form with their testimonial. When the testimonial … and then they see it as a draft. The client goes into the testimonial and then publishes it. If you see here, just standard ACF, they can go and see here. It gets categorized, the testimonials, the user image, and then the program type. The reason I’m showing you CPT when I’m talking about blocks or ACF and blocks is now this user can go and simply add this testimonial wherever they want. 

The way that we’ve written these … let me just go here. The way that we’ve written these blocks is if the testimonial that they chose has been deleted, it will fall back to the most recent testimonial. So that way if the client forgets to put a testimonial, and so I can go here. And the other thing we did was we put the user’s … we put the site’s keywords into each custom block. So if you see here, this is ACF, ACF, ACF. So they have SEI testimonials, and then it by default lists all the testimonials but they can go pick one, they can select the testimonials. So a lot of the stuff that I see people doing with custom blocks, the client doesn’t want a custom block. All they want to be able to do is get the content into here.

Now an example of that is you go and get a tool like … I was using, in my younger days when I was in WordPress, eight years ago, I would go and reach for a plug-in. I would go and say, “Okay, they want testimonials. What’s the best testimonials plug-in? Tick, tick, tick. Okay, what’s the best whatever?” And then there was a great plug-in called like Super … not Super. Great Testimonial … there was a great testimonial plug-in, but the user would have to go and create a testimonial view, then take that testimonial short code and paste it where they wanted it. Then they would have to go and add the testimonials in the testimonials section. That was actually good … so you’re sending the user all these places.

Now think about this. The people who maintain this site, they don’t have to actually go and create the testimonials. They’re submitted to a page. They go and get an alert when there’s a new testimonial via Gravity forms that needs to be approved. They approve it and then the people creating the content can just go and grab the testimonials and add them where they want them, swap them out, select the testimonials here. They can even go taxonomy. So now you’ve made this … and there’s nothing to change, there’s nothing here. They can’t really break it because they’re not actually choosing the testimonials.

Now some people might say, “Well, why not just make a testimonial block they can fill in,” right? Well, you’re assuming that someone wants to go and change the testimonials on 50 different pages, right? What I’m doing here is I’m giving them hey, you never have to touch this page again because it’s using a CPT and it’s querying those. 

So that even means like when we’ve done … outside of this, I’ve done logo sliders. I’ve done logo arrays where people show off their favorite clients and all they have to do … and even bigger, and this is kind of like I don’t want to jump off Gutenberg, you can use something like WP All Import and there’s other ones too, that synchronize via CSV and we have clients where they have sites with thousands of posts. They don’t actually go into WordPress, they edit the event via CSV in a Google sheet. The Google sheet is dynamically being pulled in the blocks and then people can go and style and do whatever they want to do and add different things to the pages, but the events are automatically pulled into CPTs and no one can even actually edit the custom types. 

So that’s why I love … again, I went on a little diatribe there, but that’s why I love ACF for blocks for CPTs.

Birgit Pauli-Haack: Yeah, yeah, very interesting. Good. Then you shared … so you shared the post with ACF, how to bridge custom blocks, but you’re still … so it’s without code on that side, but you still need to template the block on how it’s rendered.

Victor Ramirez: Right. So that would require … yeah. And to show you kind of, let me bring it up. SAI. So this is the code base. It’s not public, sorry. I probably should make an OpenSource of a full theme that we did. Again, we do everything in the functions file. So the types and taxonomies are in the functions file….

Birgit Pauli-Haack: Of the plug-in.

Victor Ramirez: Of the plug-in, correct. The plug-in function file. But then for the theme, we do put all of the in the lib, all of the blocks which are actually under … man, I haven’t touched this in forever, and I’m actually on the wrong branch, I think. Ah, doo, doo, doo. It’s under either template parts … here we go. Template parts. And so for the testimonials, they have the block CSS and this is all it is. Block PHP and it’s just a loop to, “Hey, here’s the loop.” If the testimonials are ordered by single or by count or selected and remember I told you all we do is go and get basic HTML and this is super basic HTML. It’s going and getting the post thumbnail, the attachment URL. By the way, that’s because I prefer thumbnails over custom fields. Gets the attachment responsive. Post meta. And that’s it. That’s the template to go and create the block and then the CSS is very light as well. 

Again, just basic CSS and then the block is actually declared, because again this belongs to the theme itself. The type, the data still exists, but the block belongs to the theme in this case. So in that case, we went and moved … again, this is crazy. This was built four or five months ago, and now we’re realizing no, this is not how we want to do it. We want to move these over somewhere else. But we go and register those here, so like that. And that’s all it is. Like 10 lines. 

Birgit Pauli-Haack: Yeah. Yeah, and then in the level four, you also shared a link to the 6-Step Guide To Custom Post Loop Gutenberg Blocks by Joey Farruggio, I think was his name. So I’m going to share that out as well, because you want to….

Victor Ramirez: And actually my comments are … I have a super comment on there where I told him, “Hey man, you probably should not use the word post because people don’t know what that means. It should be select testimonials,” and when you see in his tutorial, he literally tells people select post, and that makes no sense. Again, because he’s using WordPress brain, not user brain.

Birgit Pauli-Haack: Yeah. All right. So well, we are all through the level one with styling, core block disabling parts. Then customizing the core blocks with adding block styles, adding stuff. That’s the level two. Level three is build the Gutenberg block patterns with a lot of resources there, and then level four is build the custom block with ACF, or if you are willing to do that, you can certainly do this in JavaScript and build your own custom blocks, but for maintainability….

Victor Ramirez: By the way, I just saw Carrie … sorry. I just saw Carrie Delzazon here, by the way. So Carrie, if I did anything stupid with Genesis, tweet me because now I’m like, “Uh oh.” I’m checking the names to make sure … yeah.

Birgit Pauli-Haack: Yeah. 

Victor Ramirez: Carrie … I steal all of Carrie’s … can I just say that the best part of the WordPress community, I feel like we’re all just Mad Max ripping stuff off each other’s car and trying to put together hot rods and I borrow Carrie’s. Carrie’s like … if anyone is interested in Genesis after this, go look up Carrie’s LinkedIn courses, and then also Tonya Mork has this great site called Know the Code, and so I borrow their stuff from Genesis. So I’m like all these concepts I borrowed from the Genesis community and the Atomic community who gave me a heads-up. You can tell I kind of have my favorite artists that I follow, right? It’s like a record collection. You have these certain labels and groups. If anyone remembers, you used to follow a record label, you know?

Birgit Pauli-Haack: Yeah, yeah. So Tom, yes. This show will be shared on YouTube and I have the links here. I’ll put them on gutenbergtimes.com. So each of our live Q&As has its own post on the Gutenberg Times with all the links that were shared in a transcript later on. You can always use it as a resource. Carrie Dils just published another article on Gutenberg blocks and Genesis, so we will have that in our newsletter that comes out tomorrow. So if you want to sign up for it.

All right. Now are there any questions, apart from things? Yeah, hi, Carrie. Any other questions? I see … yeah, this is awesome. All right. 

We also have … the Gutenberg Times also has the Gutenberg Changelog podcast. The number 28 has been published, or the episode 28 has been published and we will record next week, Friday, after Gutenberg 9.0 comes out and do that.

Other announcements I don’t have. Do you have anything?

So if people want to contact you, Victor, thank you so much for leading us through this and giving a little deep insight on how you and your team work this all out. Is there a place … how can they reach you and if you have anything else that you want to have last words, so to speak?

Victor Ramirez: One thing I did not mention in this tweet storm, and I probably should add it at the end, is I use WPGulp. It’s not … it hasn’t updated in a minute. It’s by a guy named Ahmad Awais. WPGulp, there’s a comment in there … I think Carrie and I actually uploaded the comment and I even … the guy has had a … there’s a guy who made a PR and it’s how to split your code between so you can write one file for your fonts and it will automatically split it between the editor and the front end. Same thing with JavaScript, same thing so you’re not having one giant, 20,000-line front end code item. You can split your code, and I even now have it where I split code by CPT, split code by the editor if we have a really large set of data for our front-end component. So I highly recommend that.

If you want to talk to me, just talk to me on Twitter is probably the best space. DMs, there’s just so much spam out there and that way, too, on Twitter, it makes it I can share answers with everybody. So yeah, check it out on there. That’s the best … or even go to … we have a meetup. Shout out to WordPress NYC. We have a meetup this Tuesday. Luckily I’m not speaking this week, but someone will be speaking about unit testing and we are 100% virtual, so just go to meetup or just Google meetup WP NYC, and also more of my talks are on wpnyc.org, we record all of those, or you can check me out on WordPress TV.

Birgit, you’re muted, Birgit.

Birgit Pauli-Haack: Well, I didn’t want to … I muted myself because I was typing and some folks kind of get those vibration on the show. I just shared the WPGulp link in the chat and it’s by Ahmad Awais, who also is kind of very strong in VS code stuff as well as he was the first with cool grade Guten blocks.

Victor Ramirez: Yeah. CGB.

Birgit Pauli-Haack: Yeah. So it’s a great community. Thank you so much, Victor. This was an awesome show walk-through. Within one hour you kind of have the whole development process revolutionized for a few people. Thank you so much and it was great that we had you.

Victor Ramirez: By the way, I’m flattered that you even thought that, so thank you for everyone who was impressed by that tweet, so thank you.

Birgit Pauli-Haack: Well, thank everybody for attending. If you have any questions, just shoot me an email or also connect on Twitter. Well, this was it. Thank you so much, everybody. Have a great weekend, and I’ll see you when I see you.

Victor Ramirez: Bye. Thanks, guys.

Birgit Pauli-Haack: Bye. Bye bye. Bye, Peter. Bye, Rita. Kristen. Bye bye. 

Gutenberg Times: New Block-Based Widget Screen in Gutenberg 8.9 – First Tests

Thu, 09/30/2021 - 18:15

With the Gutenberg 8.9 release, WordPress developers removed the ‘experimental flag’ from the new block-based Widget Screen and it will take over the default way of managing widgets.

Not to be a spoiler, but the widget screen is still experimental. If you use the Gutenberg plugin in a production environment, you might be accustomed to a polished interface with great workflows and smooth transition. In its first iteration, the block-based widget handling is – as expected – not there yet.

Riad Benguella wrote the September 2nd meeting:

“Unfortunately, the screen has been there for a long time now but received very little feedback, and since we’re approaching WordPress 5.6, making it default + call for testing post is the best way to ensure we receive the necessary feedback before landing it on Core.”

Riad Benguella, #core-editor meeting September 2, 2020 Table of Contents TL;DR: How can I Switch off the block-based Widget Screen?

Funny you should ask that! The Gutenberg developers learned during the last three years that every new feature they add needs code to switch it off or opt-out.

If you or your customers want to change widgets in the next few weeks, wait until the next Gutenberg update. You add this line of code to your theme’s function.php

remove_theme_support( 'widgets-block-editor' );Code language: JavaScript (javascript)

Note: Due to a bug, the legacy widget section won’t be available in the Customizer after adding the opt-out code. Marcio Duarte filed this GitHub issue.

Getting Familiar with the New Screen.

For those interested in testing the Block-based Widget Screen, welcome to my tour.

My test environment: Local Site with WP trunk (5.6-alpha-48937), Gutenberg 8.9, Twenty-Twenty theme.

After you installed Gutenberg 8.9, go to Appearance > Widgets in your WP-Admin menu. You see this new screen with your theme’s registered Widget Areas – now called Block Areas.

WordPress new block-based Widget Screen introduced in Gutenberg 8.9

In the content section, you see all your widgets already set. In the sidebar you see the Block Areas screen with the list of your widget areas.

“Block Areas (also known as “Widget Areas”) are global parts in your site’s layout that can accept blocks. These vary by theme, but are typically parts like your Sidebar or Footer.”

At first, I was a little lost in the new screen. All these empty title boxes didn’t mean anything to me. As soon as I clicked on a title, I could identify which widget type I had selected and then it all became oddly familiar.

When you click in the section, you see the outline of the block, the widget title, and the form fields to adjust the setting. As the block-editor for posts, the interface feels kind of busy.

Recent Post Widget

Instead of empty titles, adding widget name as the default title would have helped to avoid the feeling of disorientation on an empty screen with empty title boxes at the beginning. This needs some helpful guidance for first time users.

Using Regular Blocks in the Widget section.

My first task was to add a list of quick links to the footer. Doing it with conventional blocks should work. I wanted to add a heading block and a list block with links.

Video: Adding a Quick LInks section to the Footer with Heading and List blocks.

It feels there would be enough real estate on the screen to add the left sidebar with the available blocks/widgets. The + button seems to be a residue from the pre-5.5 Block UI and will be updated in due time. The preview in the widget screen is bare-bones. It doesn’t show how the widget area would look on the front end.

Testing Third-Party Legacy Widgets: bbPress and Jetpack

For this first iteration, these first impressions might not be all that important. Those of us who use the Gutenberg plugins are expecting new features to be a little rough around the edges, especially concerning the UX experience.

Jorge wrote: “Yes even if the UX may be improved in the future, testing if the screen is reliable, if it works with third-party widgets, does not crash, etc. is very useful.”

For now, the team needs testing on backwards compatibility and third-party widgets. So let’s see if I can get myself some of those. We are expecting a “Call for Testing” from the Core team in a few days and I will update this post with the links at the time.

bbPress Widgets

First I installed bbPress, the WordPress forums package, to get to the bbPress widgets. I had to create a forum and a topic to fill those widgets with content.

For comparison, here is a screenshot of the old widget screen.

Old Widget Screen on WP-Admin

My expectation was that I would see the array of bbPress widgets somehow in the inserter. Not so, though. The solution for now is to use a block called “Legacy Widget.”. It’s a block wrapper rendering the old-style widget code. When added to the block area, it shows a drop-down box with a list of all registered widgets.

Note: The “Legacy Widget” doesn’t come up in the search of the Inserter if you use “Widget” as keyword. Start the search with “lega”.

Use the Legacy Widget block to place 3rd Party widgets from plugins into the block areas.

As mentioned, the widget screen doesn’t have a preview screen, so you need to open a second tab on your browser with your website to see how the widget looks on the front end of your site.

The settings for the widgets appear within the block, similar to the old widget behavior.

The bbPress Recent Topics Widget Jetpack Widgets

After installation, we need to enable the widgets in the Jetpack Settings > Writing and switch the toggles into the ‘on’ position.

Settings section to turn on additional widgets by Jetpack

Again, let’s take a quick look at the old widget screen again, where we can see some of the widgets available.

Example of old Widget screen

We are adding another “Legacy Widget” block to the block area, and open the dropdown menu for the list of all the third-party widgets available. The list has now become quite long and unwieldy. We will use our Twitter timeline and our Flickr account.

Legacy Widget DropDown box with a list of 3rd Party Widgets

Adding the two Jetpack Widgets worked easily through the Legacy Widget for now.

Video: Adding Twitter and Flicker Feed widgets to the footer areas via Legacy Widget block

According to Mark Uraine, the next version of this process is already in the works and will be much better, “All those third-party widgets would show as blocks under the Widget category in the Inserter.” The legacy widget functionality would still exist but it will be hidden from the content creator. They would just see all the blocks in the widget section, as they do now in the block editor when editing posts or pages. You can follow along on GitHub Issue #24870

Here is the latest design prototype for the future block-based widget screen as visible and discussed on GitHub.

Animated GIF demonstrating the vision for the block-based widget screen Block-Based Widget Screen and the Customizer

Being curious, I also switched over to the Customizer as that’s what many people used to manage their widgets today. As you can see in below screenshot, the screen real estate for the block-based widget handling is much smaller, then the one via WP-Admin. It basically shows a mobile version of the widget screen.

Screenshot of the “Widget Blocks” section in the WordPress Customizer

My personal preference is to use the WP admin widget screen for menus and widgets. I found the Customizer a bit too confined and claustrophobic to get comfortable. At this point it’s not sure what will happen with the Customizer when the block-editor is moving to full-site editing. And that’s definitely a conversation for another time.

Unordered List of Issues

Meanwhile, here is the list of issues, I found while spending the better part of yesterday morning testing. One way or another, these issues will make it to the GitHub repository. The list it by far not complete. I am sure the upcoming call for testing has a few more use cases, too.

  • Soften the interface switch for first-time users.
  • Use widget name as “Title” placeholder or other form of identifying the widget type.
  • Legacy Widget block doesn’t work in Customizer (Error message about not enough permissions).
  • After you delete them from the Block Areas, Core Widgets disappear and are not visible in the inserter. You only see the block-editor version of the widget blocks, but they are not working in the Widget Screen. (Example Recent Posts ⇾ Latest Posts, Sidebar controls don’t work).
  • Needs a similar preview screen as the block-editor for post, or somehow be able to handle theme styles in the widget screen.
  • When changing the title of bbPress widgets, the title of the widget following disappeared (needs further testing).
  • Customizer “Widget Blocks” is empty when first loading and takes a bit until the widget areas and blocks appear. Could use a “Loading… ” spinner since it’s empty at first.
  • Drag & Drop is missing. (#25243)
  • Widgets don’t move from one block area to another. (#25243)
  • Block Navigator (List of Blocks) only shows the first block area. Footer #2 is missing
This Month’s Focus

Anne McCarthy posted What’s next in Gutenberg? (September), outlining this month’s focus work on the Gutenberg plugins. For the block-based widget screen she lists the following links.

In her post, Anne also included links to getting started as a Core contributor. There is a plenty of work to be done and the team appreciates all contributors.

First Conclusion

After using the block-editor for a couple of years to create posts and pages, using it on the widget screen feels like time travel into the past. The block-based widget screen is in its early stages and needs a lot more people testing it to get the kinks out. The workflow could use a bit more innovation and design. Functionality definitely needs testing for backwards compatibility and for any conflict with existing plugins. I am looking forward to the next iterations to come. The Legacy Widget compatibility with 3rd party plugins widgets performed well. I have yet to use the block-based widget screen with an existing site.

Linus’s law: “Given enough eyeballs, all bugs are shallow.”

Watch for the “Call for Testing.” You can also bookmark the “Keeping up with Gutenberg: Index” from the reference section of the Core Handbook.

On this GitHub project board, you’ll find all the discussions about a new design flow and other widget screen related discussions. Chime in!

Share your experiences in the comments, so we can get more information on how this new widget screen works on existing sites and with your set of plugins.

Widget Screen in Open Floor at Meeting September 9, 2020

During open-floor section of the #core-editor meeting on Slack, I raised my hand. I referred to a new issue, @paaljoachim: The answer: This theme developers can target the block in the block area with class names. Example: .my-widget-area .wp-block-latest-posts – 

On another issue, in a comment I tried to explore what I know now and what will change for widgets. “I am utterly confused on what the future widget handling entails in respect to  widget registration, functions” and if there is a goal of feature parity. 

“The APIs you raise are probably something to look at and see whether support is possible, but we shouldn’t be expecting 1-1 parity”

  • The widgets themselves should work as close as possible with the new editor. The registration and other widget related functions should also be unchanged.
  • There will be incompatibilities in hooking into the widget editor itself as the new screen uses a completely different architecture
  • If there is anything that cannot be implemented then that will break backward compatibility. If it is possible to support things it should be attempted to be supported
  • It’s a different paradigm since it will just wrap the whole list of blocks. Widgets don’t map to blocks.
  • Core Widgets vs. Core blocks, if a core widget like recent posts has a block equivalent, the core widget doesn’t appear in the inserter for the Widget screen. “Authors have the option to hide widgets if block equivalents are provided”. 

All “clear evidence that we should be cautious with opt-in opt-out in Core” wrote Riad.

Block Patterns for Block Areas

My takeaway from the meeting was that, things are still in flux as to the end vision of widgets. Ultimately, a theme developer’s work will get much easier, as they don’t have to create widgets at all. They can now create block patterns to fit into the newly declared block areas. The only time it’s important to consider widgets would be plugins, creating widgets that need to be accommodated and the team is working to provide the legacy widget functionality.

Justin Tadlock explores this idea on block patterns instead of widgets in his post: “Addressing the Theme Design Problem With Gutenberg’s New Block-Based Widgets System” with Widget Block Patterns.

The WordPress Block Patterns Resource List

WordPress.org blog: People of WordPress: Yordan Soares

Thu, 09/30/2021 - 13:14

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.

To coincide with International Translation Day and the final day of the 2021 WordPress Translation celebration, we feature the story of a WordPresser who has made a major impact in the polyglots team.

Beyond software, meeting the WordPress community

For Yordan Soares from South America, finding WordPress also meant discovering friends, community, and opportunities. He had not expected to find a whole global movement behind the web development software.

Yordan, who is from Venezuela, South America, said: “The first time I used WordPress, I had no idea what was going on behind the software or beyond it. I knew there was someone making it all work, but I couldn’t even remotely imagine all the people who were making WordPress not just a tool for developing websites, but a whole movement that comes together to share, build, and help make the world better.”

Turning your hobby into your job

Initially, Yordan earned his income from computer technical support and installing networks for small and medium-sized businesses. Back in 2005, web development and code-writing was just a hobby. When he discovered the concept of CSS and how it could make everything dynamic. This opened up a whole new career pathway for him.

In 2010, an introduction to WordPress through a friend opened up a future he had not imagined. He stopped using any other content management system (CMS) and wanted to explore how much he could do with the platform.

Three years later in 2013, he was able to take his WordPress journey further by starting a small advertising agency with some of his friends. During this time, they crafted commercials for local radio and TV stations. Through WordPress, they found it easy to build more than 15 websites for businesses in a market that previously had not valued the importance of having an online presence.

He said: “We were working for almost four years until at the end of 2017 the economic crisis in Venezuela became too acute, and we decided to close the agency when we stopped making profits. Taking stock of that period, I think we changed the way merchants saw the Internet business in the city.”

Working full time as a freelancer

One year on in 2018, Yordan began to freelance full-time as a web developer. His first clients were primarily agencies and friends who had emigrated to other countries. Later, he expanded into freelance marketplaces.

At that time, getting started as a freelancer was quite a challenging task in Venezuela. The first hindrance was getting a fair level of recompense. Additionally, the deteriorating conditions in the country with constant blackouts and internet connection failures complicated matters.

At the time, Yordan was living in Guarenas, where the situation was relatively better. He managed to get a reasonably uninterrupted electricity supply with adequate internet speed, which was just good enough to complete his projects.

Meeting the WordPress community

“Surely if I hadn’t met the community, I would have continued to work on my own, like a lone wolf, doing the ordinary work of solving problems for occasional customers and paying my bills,” he said.

Living in Guarenas, Yordan began to experience stability in his career and made new friends and contacts. He began looking for co-working spaces or technology communities nearby, and that’s when he met the WordPress community in Caracas.

He quickly signed up for the first face-to-face event. As soon as the event concluded, he went to talk to the co-organizer and offered his help. He was inspired to help with designing promotional pieces, managing social networks, and organizing events.

Through such events, he met and connected with several people living in nearby cities.

A few months later, with other WordPress users in the area, the idea emerged to start a new Guarenas-Guatire meetup group. The idea became a reality by December 2019, when they applied to the WordPress community team.

Once the final approvals came in, the team started scheduling the activities. The WordPress Guarenas-Guatire Meetup was officially recognized!

During the first quarter of 2020, just before the pandemic, Yordan and colleagues organized five face-to-face events. With the worldwide lockdown, in-person community engagements came to a halt. However, the Guarenas-Guatire community was eager to continue meeting.

To keep the community active and motivated, and with the support of sponsors, they started organizing online events under a format called “WordPress a la medianoche” (WordPress at midnight).

The format of these events was inspired by Alexis Arnal, who suggested meeting at midnight to make the most of the internet speed that would usually improve somewhat after that time!

At the time of writing, Yordan and the team have organized 16 WordPress a la medianoche events with an attendance of up to 50 people per online gathering. An impressive audience which enabled a comparatively small meetup to keep communications flowing at a difficult and unprecedented time.

One positive of such events, is an opportunity to invite people from other countries and run sessions in partnership with others. An example was a special translation event with Javier Esteban, a member of the translation team from Spain. The meetup also invited contributors from Mexico, Costa Rica, Peru, and Colombia who were happy to participate.

Strengthened by the community Yordan (pictured bottom left) speaking at the WordPress Translation Day 2020 events

Yordan believes that he would have continued to work on his own had he not met the WordPress community.

He said: “Fortunately, this was not the case and I have been able to live a lot of transforming experiences that have shown me the meaning of the words ‘community’ and ‘volunteerism’.”

Yordan felt empowered by the community and it led him to volunteer for many other roles and activities, including Locale Manager for Spanish Venezuela, a moderator for WordPress.tv, and as a support contributor in the forums helping people with technical issues. He has also developed free plugins for the official WordPress directory and spoken at community events including WordCamp Spain 2020.

All this has a boomerang effect, Yordan explains. These experiences helped him grow personally and professionally, as it’s always rewarding to know that you’ve helped improve the WordPress ecosystem.

He also likes being able to directly help people when they need it and feels it is a two-way learning process.

“At first, when I told my family and friends about the community and the work I was doing, they would ask me ‘what do you get in return?’ Perhaps they expected me to tell them a specific amount of money, but the answer is more complex,” he said.

“It’s rewarding to know that you’ve helped improve the WordPress ecosystem, the tool you use to work and put food on the table.”

During his journey, Yordan has met many wonderful people with common interests and values, and the best part is that many of these people are now his friends, business partners, or customers.

At the same time, he has learned new skills and gained experience, which have given him a significant confidence boost in facing difficult situations that may come in life.

As part of the WordPress Translation Day 2021 celebrations, Yordan was nominated for his contribution to the work of the Polyglots Team translating WordPress. The full nominations list and stories will be published in October and November on the WordPress Translation Day website. Check out the final events for International Translation Day.

Contributors

Thanks to Abha Thakor (@webcommsat), Larissa Murillo (@lmurillom), Maedah Batool (@maedahbatool), Chloé Bringmann (@cbringmann), and Nalini (@nalininonstopnewsuk) for work on this story. Thank you to Yordan Soares (@yordansoares) for sharing his Contributor Story, and to Josepha Haden (@chanthaboune) and Topher DeRosia (@topher1kenobe) for their support of the series. The WordPress Guarenas-Guatire logo on this page was designed by Bragniel Jimenez

This People of WordPress feature is inspired by an article originally published on HeroPress.com, a community initiative created by Topher DeRosia. The initiative highlights people in the WordPress community who have overcome barriers and whose stories would otherwise go unheard. Meet more WordPressers in our People of WordPress series.

#ContributorStory #HeroPress

WPTavern: Preview WordPress Block Pattern and Theme Combinations via New Site

Thu, 09/30/2021 - 00:44
Viewing patterns from the WP Block Patterns homepage.

Andrew Starr, the owner of UXL Themes, has cobbled together a new project around block patterns. His new site, aptly named WP Block Patterns, allows users to preview any WordPress.org-hosted block themes and patterns together.

The project does not allow visitors to download anything or ask them to sign up. It is a basic demo system, one that WordPress.org should consider at some point.

Visitors can choose any block pattern. Then, they can select any theme to see what they look like together. It is a quick way to test patterns and themes without actually adding them to your WordPress installation.

For example, a user can view the Team Social Cards pattern — one that I had a hand in creating — along with Anders Norén’s Tove theme.

Or, the Image and a Quote on a Background pattern with Anariel Design’s Naledi theme.

From Gutenberg Hub’s landing page templates to EditorsKit’s ShareABlock collection, the block system has allowed developers to experiment with unique sites for end-users. Because everything is built upon a standard, I am guessing we will see even more of these creative projects in the future. WP Block Patterns is another step in that journey.

This was not always the plan for the WP Block Patterns site. Starr set out to blog about patterns after their feature release in WordPress 5.5. After only publishing a single post, the project fell to the wayside. Fortunately, inspiration struck.

“I have a site that I use as my reference point when providing support for my themes,” he said. “This site has a blend of varying content and code that allows me to quickly switch/preview any of my themes, without the need to actually change the active theme in the admin, or maintain a different site for every theme.”

In the process of making improvements to his theme-switching functionality, the domain came up for renewal. He had planned to let it expire but decided to see if he could come up with something to do with the site.

“I got the inspiration to use the theme switcher in conjunction with content from block patterns,” said Starr. “If I hadn’t been working on my script at the same time as I coincidently received the domain expiration message, I probably wouldn’t have had this idea.”

Currently, he is manually installing the themes on the site but may have to automate it in the future as more block themes are released. However, he is pulling patterns and categories directly from the WordPress.org API, which is periodically updated.

The site only showcases 100% block themes. Technically, it should work with any that supports editor styles. Starr said it had never crossed his mind to showcase non-block themes.

“I have been keeping my eye on the releases of FSE themes, checking out every block theme that I come across, and it just sort of seems that block themes are the future, and classic themes feel like a step backwards now after investing so much time working with block themes,” he said. “The site would work just fine with classic themes, but there are so many available I’m not sure how to make it manageable or select which themes to feature (and which ones to leave out). I guess that’s also something I’ll have to think about as the number of block themes increases.”

Thus far, Starr has released two block themes, Hansen and Pria, through his UXL Themes brand. Users can preview both via the site. However, he is already working on his next project.

“As a proof of concept, I am working on a classic theme that will have the functionality to also be a block-based theme when FSE is available in core,” he said. “The idea is that the user will not notice any front-end differences when the theme ‘switches’ from classic to block-based, but the user will gain the new FSE admin tools, with the user’s classic customizer modifications switched over intact to the new Site Editor. I have found that there are compromises that need to be made when getting classic and FSE to work together seamlessly in a single theme, so I am not sure whether this will be released generally.”

He also teased a project related to FSE that is neither a theme nor a plugin. However, he was not ready to share any details just yet.

WPTavern: WordCamp US 2021 Kicks Off Online in 48 Hours

Wed, 09/29/2021 - 20:56

WordCamp US, WordPress’ largest flagship event in the Western Hemisphere, is set to kick off on Friday, October 1, at 11:45 AM EDT. The single-day event will include sessions, workshops, networking events, virtual sponsor booths, and musical interludes. Get ready to be inspired by new ideas and learn about the latest and greatest capabilities in the exciting frontier of blocks.

In preparation for the event, attendees can view the schedule, star sessions they want to catch, and email, link, or print them. The event features two simultaneous tracks, one focused more on development (Columbia) and another for less-technical topics (Yukon).

Unlike many previous years, WordCamp US will not include Matt Mullenweg’s annual State of the Word address. This year the event will be capped off with a presentation from WordPress’ executive director, Josepha Haden Chomphosy, titled “Grow Your Story,” where she will discuss “trends seeded in 2020” and future growth opportunities for the community. Haden Chomphosy said there will be a State of the Word later in the year, possibly “at a hybrid in-person/live broadcast format (in December),” but the details are still being worked out.

WordCamp US 2021 has its own custom, outdoorsy wapuu designed by Alyssa Hogan. The mascot is holding a map and sporting a WordPress cap, backpack, and camping gear to go along with the event’s National Parks website theme designed by Mel Choyce-Dwan.

image credit: WordCamp US

The traditional Job Board has made a return this year but is limited to the event’s upper level sponsors. In future years, if the virtual aspect of the event is preserved alongside the in-person activities, it would be good to see this board expanded to include all sponsors and even some community-submitted listings.

More than 2,000 people have already signed up to attend WordCamp US online. Registration is free and still open if you haven’t yet gotten your ticket.

Pages