How to Add a Double Border to SVG Shapes

Let’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be generated at runtime — so you have to solve it with CSS or within the SVG syntax.

Your first question might be: Is there anything like stroke-style: double in SVG? Well, the answer is not yet and it’s not that easy. But I’ll attempt it anyway to see what methods I can uncover. I’ll explore the possibilities of three different basic shapes: circle, rectangle, and polygon. Pointing the ones that can keep a transparent color in the middle of the two lines.

Spoiler alert: all the results have their downsides, at least with CSS and SVG, but let me walk you through my intents.

The simple solutions

These don’t work with all shapes, but they are the easiest of the solutions.

outline and box-shadow

The CSS properties outline and box-shadow only apply to the bounding box of the shape or SVG, and so both are great solutions only for squares and rectangles. They also allow flexible colors using custom properties.

It only takes two lines of CSS with outline, plus it keeps the background color visible through the shape.

  • 🙁 Solution only for one shape.
  • ✅ Simple code
  • ✅ Borders are smooth
  • ✅ Transparent background

box-shadow only needs one line of CSS, but we have to make sure that each shape has its own SVG as we can’t apply box-shadow directly to the shapes. Another thing to consider is that we have to apply the color of the background in the declaration.

  • 🙁 Solution only for one shape
  • ✅ Simple code
  • ✅ Borders are smooth
  • 🙁 No transparent background

SVG gradients

SVG radial gradients only work on circles ☺️. We can directly apply the gradient on the stroke, but it’s better to use variables as we have to declare the colors many times in the code.

  • 🙁 Solution only for one shape
  • ✅ Simple code
  • 🙁 Borders are smooth
  • 🙁 No transparent background

Solutions for all shapes

These will work with all shapes, but the code could become bloated or complex.

filter: drop-shadow()

Finally, one solution for all shapes! We must have each shape in its own <svg> since the filter won’t apply directly to the shapes. We are using one declaration in CSS and have flexible colors using variables. The downside? The borders don’t look very smooth.

  • ✅ One solution for all shapes
  • ✅ Simple code
  • 🙁 Borders look pixelated
  • 🙁 No transparent background

SVG filters

This is a very flexible solution. We can create a filter and add it to the shapes through SVG’s filter attribute. The complicated part here is the filter itself. We’ll need three paintings, one for the outside border, one for the background flood, and the last one to paint the shape on the front. The result looks better than using drop-shadow, but the borders are still pixelated.

  • ✅ One solution for all shapes
  • 🙁 Complex code
  • 🙁 Borders look pixelated
  • 🙁 No transparent background

Reusing shapes

There are a couple of possible options here.

Option 1: Transforms

This solution requires transforms. We place one figure over the other, where the main figure has a fill color and a stroke color, and the other figure has no fill, a red stroke, and is scaled and repositioned to the center. We defined our shapes on the <defs>. The trick is to translate half of the viewBox to the negative space so that, when we scale them, we can do it from the center of the figure.

  • ✅ One solution for all shapes
  • 🙁 Duplicated code
  • ✅ Borders are smooth
  • ✅ Transparent background
Option 2: <use>

I found a clever solution in the www-svg mailing list by Doug Schepers that uses SVG <use>. Again, it requires defining the shapes once and referring to them twice using <use>. This time the main shape has a bigger stroke. The second shape has half the stroke of the main shape, no fill, and a stroke matching the background color.

  • ✅ One solution for all shapes
  • 🙁 Duplicated code
  • ✅ Borders are smooth
  • 🙁 No transparent background

Here are the full results!

Just so you have them all in one place. Let me know it you can think of other possible solutions!

SolutionAll shapesSimple codeSmooth bordersTransparent background
outline🙁
box-shadow🙁🙁
SVG gradients🙁🙁🙁
filter: drop-shadow()🙁🙁
SVG filters🙁🙁🙁
Reusing shapes:
Tranforms
🙁
Reusing shapes:
<use>
🙁🙁


The post How to Add a Double Border to SVG Shapes appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

#312: What is CodePen?

This isn’t actually a podcast actually talking about what CodePen is. Well, it kinda is. But actually it’s Stephen and Chris talking about and planning for what they would say if they only had five minutes (or so) to explain what CodePen is. So we need to hash out what the most important things are, what to lede with, and how to cover all the most vital things with clarity in such a short amount of time. We’ll have to get around to actually trying to shoot a video like this soon!

Timestamps

  • 00:49 How might we explain CodePen on YouTube
  • 06:48 Who’s the audience for our video?
  • 09:10 Sponsor: Jetpack Boost
  • 11:44 What do we need people to know what CodePen is?
  • 14:04 It’s an online editor for what?
  • 17:34 Social is a huge part of CodePen
  • 24:27 What’s our success metric?

Sponsor: Jetpack Boost

Jetpack Boost is a brand spankin’ new plugin from the Jetpack / Automattic gang. Jetpack has some very powerful performance features it offers, like giving you a global CDN for your images and core-WordPress-specific CSS and JavaScript. That particular feature is still a part of the Jetpack core plugin, but many performance-specific features are moving their way over to Jetpack Boost. Like Lazy Image loading (a huge performance win) is now in Jetpack Boost and you can turn it on with the flip of a switch. The most amazing, and brand new, feature of Jetpack Boost is that it does Critical CSS handling for you, which is also a big performance win and very difficult to do by hand.

The post #312: What is CodePen? appeared first on CodePen Blog.

#2 – Anne McCarthy on How Full Site Editing Will Impact WordPress

About this episode.

So the podcast today features Anne McCarthy. Anne is Developer Relations Wrangler for Automattic. Her work is focussed on the WordPress.org space, and she is leading the Full Site Editing Outreach Program.

Full Site Editing is an endeavour to make it easier to manage how your WordPress website works. It’s hoped that tasks which once required a fairly technical understanding of the WordPress code, will become available to all. Creating headers and footers, deciding what information to pull from the database and where it should be displayed. These will become part of the Block Editor interface. Complexity replaced by simplicity; or at least that’s the goal.

This, as you might imagine, is not an easy task. Now that WordPress is pushing beyond 40% of the web, there’s a lot to consider, and that’s what Anne is doing. She’s part of the team trying to work out how this might look, how it should work and when it will be ready.

We start off with an introduction from Anne and how she became involved with WordPress and the Full Site Editing initiative in particular.

Then the discussion moves to an explanation of what Full Site Editing hopes to achieve. Which areas of a website are intended to be made available with Full Site Editing?

We then get into the specific details of what constraints the project faces; and there are many points to consider. Backwards compatibility, accessibility and how commercial and free plugins feed into the project roadmap.

Towards the end of the podcast we get into the process of how Full Site Editing is moving forwards, who is making the decisions and how the WordPress community can get involved in shaping WordPress’ future through endeavours like Anne’s Outreach Program.

It’s a very timely episode. Many of the areas discussed will be landing in WordPress soon.

If any of the points raised here resonate with you, be sure to leave a comment below.

Useful links.

Full Site Editing is moving fast. Since the recording of this episode, there’s been some movement. To get the latest information and learn more, see the following links:

Full Site Editing Outreach Program

Full Site Editing for WordPress Overview

Full Site Editing Go/No Go | April 14, 2021

Full Site Editing Go/No Go: Next steps

Transcript
Nathan Wrigley

Welcome to the second edition of the Jukebox podcast from WP Tavern. My name is Nathan Wrigley. Our aim here is to create a podcast and transcript for people who are interested in WordPress and the WordPress community. We’re going to create one episode each month, for the time being, but that might change in the future.

We’d love to hear your feedback about the podcast. Perhaps there’s a subject that you’d like us to feature, a person who you think would make a great guest or anything else that comes to mind. We’re very open to suggestions so long as it’s to do with WordPress and the wider WordPress community. You can do that by going to WP Tavern dot com forward slash contact forward slash jukebox. And there you’ll find a contact form for you to complete. Once again, WP Tavern dot com forward slash contact forward slash jukebox, and thanks in advance if you reach out.

Okay, so the podcast today features Anne McCarthy. Anne is a developer relations wrangler for Automattic. She focuses on the wordpress.org space and is leading the full site editing outreach program. Full site editing is an endeavor to make it easier to manage how your WordPress website works. It’s hoped that tasks, which once required a fairly technical understanding of the WordPress code will become available to all. Creating headers and footers, deciding what information to pull from the database and where it should be displayed.

These will become part of the block editor interface. Complexity replaced by simplicity, or at least that’s the goal. This, as you might imagine, is not an easy task. Now that WordPress is pushing beyond 40% of the web, there’s a lot to consider, and that’s what Anne is doing. She’s part of the team, trying to work out how this might look, how it should work and when it will be ready.

We start off with an introduction from Anne and how she became involved with WordPress and the full site editing initiative in particular. Then the discussion moves to an explanation of what full site editing hopes to achieve, which areas of a website are intended to be made available with full site editing.

We then get into the specific details of what constraints the project faces, and there are many points to consider. Backwards compatibility, accessibility, and how commercial and free plugins feed into the project roadmap. Towards the end of the podcast, we get into the process of how full site editing is moving forwards, who is making the decisions and how the WordPress community can get involved in shaping WordPress’s future through endeavors like Anne’s outreach program.

It’s a very timely episode. Many of the areas discussed will be landing in WordPress soon. If any of the points raised here resonate with you, be sure to head over and find the post at wptavern dot com forward slash podcast, and leave a comment there. And so without further delay, I bring you Anne McCarthy.

I am here with Anne McCarthy, Anne welcome to the podcast.

Anne McCarthy

Thank you so much for having me.

Nathan Wrigley

You’re very, very welcome. Now it’s a regular question, I often ask them at the beginning of such podcasts, but I think it’s important that we lay the foundations of who you are and how you’ve come to be on the podcast.

Would you mind giving us a little bit of backstory about how it is that you came to be on this podcast today? What’s your relationship with WordPress and perhaps tell us what the role is that you have currently?

Anne McCarthy

Great question. It’s hard to succinctly sum up who I am, but I’ll give it a try. I first got started with WordPress in 2011 as a freshmen in college, and I was using blogger for many years before that to get out all my feelings on the internet as a millennial does.

And eventually, it turned into three years working at the university and their ITS department, which led me eventually to finding out about Automattic. In 2014, I joined them as a happiness engineer and very recently, almost exactly a year ago, switched into a developer relations wrangler role focused on the wordpress dot org community. And currently part of why I’m here today is cause I’m spearheading the full site outreach program. So I’m here to talk about that and talk about full site editing and all the fun stuff that’s happening. Cause I know it’s a lot to keep up with.

Nathan Wrigley

Yeah, there is a lot to keep up with, but it is a really interesting episode.

There’s an awful lot to say when we’re recording this, in the month of April 2021, this episode will probably air shortly after we record it, and there’s an awful lot that has been going on, but there’s an awful lot to happen during the course of the rest of this year. And we know that there’s a lot of change coming.

First of all, just rewinding the clock. Would you just like to try and sum up what the ultimate ambition of the full site editing project is? I know that there may be things about that roadmap which change things you wish had been included that probably won’t get included, but just sum it up. What is the full intention of the project?

Anne McCarthy

That’s a great question. I would simply say it’s to empower users more and bring WordPress to the future. There’s a reason these projects are taking so long. It really is about planting seeds for decades to come. And it’s something that Matt, the co-founder I really admire in him as he thinks about those decades.

And so this is a part of that push into using blocks as a paradigm into empowering users, more and bringing WordPress to the future.

Nathan Wrigley

Okay. So it’s all about creating websites with blocks. What kind of areas is it getting into? What is it going to empower us to do? What things in the future will we be able to do inside the block editor?

Anne McCarthy

Yeah, so everything you can edit any part of a global style on your site. So if you want to have every font color, be one thing, you can quickly change it. Even by block, you’ll be able to change things by block, which is really exciting to have a global point of view of your site, and to be able to actually customize it to your liking unlocks things.

There was recently a test that we did around, the 404 page. Normally that’s something that a theme author decides. And you’re locked into it, and if you want to change it, you have to go digging through the code. With full site editing, you can actually go straight ahead and customize it to your liking, make it real fun, make it really clever and make it really serious.

Like you can do whatever you want with that. So a lot of template editing that normally you wouldn’t have access to. So even editing, like if you land on your blog page, you can actually adjust how that looks, what shows up, what doesn’t, in a really powerful way. I try and talk about the tangible aspects of it, but there’s also a lot underneath the hood.

So there’s a lot of design tools for theme authors as well. That there’ll be able to hook into that ideally will make it much easier to create themes and to focus more on the aesthetics and the experience rather than on coding up the basics. So there’s a lot that I think across the board, whether you’re a user or a theme developer or a plugin author, there’s a lot to be excited about in the future.

Nathan Wrigley

One of the things that keeps coming on my radar is the comparison between what we’ll call page builders, these plugins, or perhaps it’s a theme we’ve seen lots of commercial and free products available in the WordPress community, which enables you to achieve many of the goals that the full site editing hopes to achieve. So templates for this templates for that. Headers, footers, you can have global color palettes and all of the things, and it can be done within their interface. I guess the thing about those products is they are created by a team of developers and they are released presumably when they’re mature and they’re ready to go and the company believe that it’s now suitable and people will purchase it or use it and deploy it. Now you’ve got a very different set of constraints that you have to work within. And I think highlighting what those constraints are, would be really useful to give people some context as to why it isn’t where some of these other solutions might be, because you’ve got many, many things to be thinking about in the background. So if we just get into that, maybe one thing at a time, do you want to just rattle off a list of things that you’ve got to be concerned about that perhaps we didn’t know you needed to be concerned about.

Anne McCarthy

Yeah. I’ll start with the most obvious ones, which is we’re building things so that other people can build upon it, including page builders. So I think that’s something that often gets overlooked. Like some of our audience members are these page builders. So it’s an interesting dynamic there because it really is about that foundational level. Anyway, 40%, the internet, just the diversity of ways that people use WordPress, whether it’s multi-site or what have you, there’s a lot to consider.

Then you add in internationalization, which is part of like future phase four. Accessibility is a huge issue. Something that really needs to be thought about including backwards compatibility, and that’s another. A lot of page builders could easily say, hey, update to this version after this, x Y and Z will no longer be supported. Doing that with 40% of the internet is huge.

Just recently actually, I did some outreach because in 5.2, which is many releases ago, some smaller APIs were deprecated. We’re finally removing them from the Gutenberg plugin. And there were still three plugin authors who were using these APIs, and I reached out to them, let them know and made sure they were aware that this was coming, but that’s something that a page builder is not building the same APIs that are going to be used across the internet in the same way.

So there’s a lot of just scale that I think has to be thought of, which is partly why things get pulled from releases until they’re ready. But it’s also why sometimes we have to include things in releases in order to get feedback in order to, hear from people what needs to be improved and what we haven’t thought of, because inherently you can’t talk to 40% of the internet at once.

You just can’t. So part of that is that dance of, hey, this is coming up, hey, this is what’s new. And seeing how 40% response. What did we miss and how can we do better next time? And the way I think of it as it’s this nice chance with every single release of thanks for making me better. Thanks for making the web better.

And when the feedback comes in, that’s what it is. Whereas I think page builders and site builders have a unique position where they might have a very large user base, but it’s not going to be 40% of the internet. You know, there’s just a huge difference there.

Nathan Wrigley

So some of the constraints that you mentioned there were the audience size, 40% of the internet, you’ve got to be mindful of the fact that they are going to expect things to break as little as possible.

You’ve got accessibility and so on. And there were probably two or three other things that you mentioned there as well. In real terms, how does this constrain the development? How do these factors slow you down? Do they have a material impact in the amount of time it takes you to do things because you have to ask for more consultation or you have to receive feedback from various people before you can get the green light to push that and move onto the next thing.

Anne McCarthy

What you described is very, very accurate. I’ll give a specific example. So the widgets editor, which is bringing blocks to the widgets editor. Originally, it was slated for 5.5. I’m pretty sure. And it’s gotten pulled from 5.5 from 5.6. Wasn’t even considered for 5.7 and is now hopefully going to be slated for 5.8.

And a big part of this was originally, it was just going to be a separate editor, separate from the customizer and with feedback, it became very clear, customizer is a key interaction that we need to prioritize. How do we bring blocks to the customizer, which is a whole unique experience to think about.

And this is where the 40% of the internet comes into play, right? Because we understand that you’re releasing new things, that’ll cascade to new people. But what about the person who’s had a site for five years? What benefits can we bring to them? Not just brand new users who are going to be using WordPress for the first time, because the majority of the users are people who have been using WordPress and who have trusted the community and the people building WordPress, with their site, with their, who knows what is their story, their business.

So there’s a level of thought that has to go into play with that, and I think part of it is why Gutenberg, the plugin does bi-weekly releases. And I think there’s about 300,000 active installs, which is a much smaller compared to the 40% of the internet. And it allows us to test things out, have experiments, go do outreach, like the outreach program I’m running, get the feedback that we need, reach out to specific plugin authors. And in the case of the widgets editor, it became clear with each release, it just wasn’t ready. It wasn’t in the place that it needed to be. It wasn’t as stable as it needed to be. It wasn’t refined, it wasn’t intuitive enough.

And in many ways, one of the things that slowed us down was wanting to have it in the customizer, which I think is a huge win. It’s a main interaction that people are used to. It’s something that people trust. So how can we go where people trust and extend that and provide an experience that they can also in the future trust and have actually unlock more things because when you’re able to use blocks in the customizer, you’re now able to add way more stuff than you would be able to and do way more things than you’d be able to when it was just the customizer, which is pretty exciting. So it’s both like trying to get user trust, but then also providing value at the same time and going to areas that people feel familiar with and slowly incrementally having stepping stones towards this eventual idea of full site editing, where everything is through a block paradigm, and you’re able to extend your site, however you want.

Nathan Wrigley

Do you ever get feedback from people who use these tools? That sort of question I’m trying to frame is something along the lines of. How do you cope with people who wish that it were already something that their current tool can do? Take the example of a commercial page builder. There’s several, you could pick the names of, and they’ve got this tool and they’re quite happy with it. And it does all of the things that they would wish to achieve. And then they come over and they look at the project that you’re involved with, the full site editing, and they see a real difference. They see that this tool over here, which I’m familiar with that works. I’m very happy with it and it works and it does all these things that you are, you’re still trying to put together. How do you bridge the gap between what their expectations are and what you’re trying to build? Do you have conversations with people? In fact, you even download some of these commercial products and check them out and see what it is that people get excited about, about them.

Anne McCarthy

I definitely check them out. I actually love, love, love hearing about new plugins because I do, I actually test full siting every single day. I have been, it’s been a challenge of mine like last couple of weeks, but I do also love when people flag things and say, hey, this new page builder or this new plugin provides a really interesting experience.

One of the recent ones, I actually went back and checked out was the Iceberg plugin that simplifies the Gutenberg editor. And I recently checked that out again cause I was actually talking to someone in a completely different, it was a developer relations, a Slack community, and I have an alert word set up, anytime someone says, WordPress, I love doing that’s my favorite little hack, life hack for everyone just joined a bunch of communities and then set up alert words. Yeah. He was just like, oh, man, this editor sucks. I don’t know what to do with it. I immediately reached out to him and said, hey, no pressure. If you’re game to talk about this, I’d love to hear your concerns are what features are missing or what has you blocked? And I ended up sharing the Iceberg plugin with him and then went back through and tried it out again. And I bring this up because I think something to be said is that, the hope is that WordPress can provide common tools so that people, for example, aren’t locked into one single page builder.

Like you can move around, and I get the rush to say man, I want to use the core system, but right now I’m relying on this page builder, and we’re frustrated with that too. There is a sense of urgency and Matias and Josepha touched on that in a WP Briefing podcast very recently that there’s this urgency of getting features out to people now, because we know that it will benefit them.

And I think that as a really exciting position to be in. I know where we’re coming… It’s going to come, I promise, hang in in there. Which I think is a neat space rather than this impatience or hesitancy, which I also think happens, but I do seek out feedback like that, and I do enjoy talking to people whenever they explicitly have a bad experience. And one of the best questions that I ask is, what features about this page builder do you really like, what would you want to see in the core experience. And then from there, I can be honest with them and say, oh yeah, we’re working on that. That’s going to be like, here are a couple of Github issues that you might be interested in that this is the design. This is whatever it is. But then on the flip side, There is also going to be a role that plugins have to play into the future. Same with the Gutenberg editor right now, and the core editor right now with Iceberg, for example, like where it simplifies the editor.

I imagine in the future with full site editing, there will be both plugins that really open up the options in the settings, and I also can imagine there’ll be plugins that really simplify things and make it really easy for certain users to use it and people can pick and choose and customize as they’d like, same to what we see with plugins now, anyway. And the biggest thing I often say to people whenever they talk about page builders, I’m like, that’s fine, if you’re not ready to switch, that’s totally fine. But at the end of the day, when you’re starting with new client or you’re starting a new site, or you’re redoing your site at some point, you’re going to have to learn something new, and it’s better to learn the sure thing. Doesn’t mean you only have to learn this your thing. I can imagine a world where people have these like hybrid experiences for some time, but the hope is that we can provide common tools so that people are not locked into one single page builder. Ideally the page builder is actually build alongside full site editing and the editor tools that we have. And then from there, people can customize to their liking either having more options show up or having less, and I do love hearing, what do you want? What’s missing? Cause it helps sharpen our thinking, and oftentimes I hear about things that I would never think of. That’s the beauty of having 40% of the internet is it’s like, whoa, I never thought about that. You’re right. That is a really interesting use case.

Like someone recently a good example with the custom 404 test, as part of the outreach program, we had people build fun, custom 404 pages and someone reached out and said, well right now, it’d be really awesome to have different templates depending upon how the person landed on the 404, having some level of customization of what you present.

So maybe you have four different 404 templates and it cycles through them. They were like, is this possible? I would want to put a feature request in. And it was pretty easy for me to say, you know what? That probably will be done by a plugin. So, that’s a great idea. That’s a really interesting use case, and I do think that’s something that’s desired, but this is also where plugins will still play a role. And being able to tell people that, so that expectations are in line as much as possible, I think is really important. There are going to be aspects that will not be covered by the site editor and that’s good.

Nathan Wrigley

Commercial page builders if you like, the process which I often see is they’ll release a statement out into their email list or what have you, and they’ll describe the features that they have been working on that have now been released and so on. And so in many cases you don’t really know what is happening unless you probably take great interest in their team and what have you. So I’m curious to know what is the actual process that is going on in the background that iterates your project, the full site editing project. How did the little leaps forward get made? Who is involved? How can people get involved? How can they find out what it is that you’re working on currently? And ways in which they can help you. And there’s a lot in that question, so probably the first thing I’ll just rewind a little bit and say, could we just concentrate on how the full site editing, the team that’s behind that, how does it actually work? What is it that you do? How do you communicate with each other? How do you ensure that things are being built that people want to have in.

Anne McCarthy

Yeah, that’s a great question. To start, I would say Matias is kind of, I think Josepha described him as the spark behind Gutenberg, and I really love that title, so I’m going to use it, reuse it. He is the project architect. So imagining multiple steps ahead, thinking about where we need to go, thinking about truly the infrastructure of what’s being built, APIs, is design tools, all that sort of stuff. And really thinking about based on many, many, many years of experience in the WordPress community, what do we know for sure that people need? And then from there, a lot of it is just this back and forth with the community, releasing stuff, doing calls for testing. The outreach program is a big part of that. So getting feedback from the outreach program, but one of the things that I recently came up that I am working on doing a better job of communicating is the outreach program is bringing in feedback, but that feedback and the high level, top feedback items are likely going to be different than what are the top issues to solve for full site editing if that makes sense. So there’s the feedback there’s actually using the tool, and then there are, these are the things that have to be solved and sometimes there’s overlap where sometimes some of the feedback becomes a top issue. But not all the time. And that’s partly because the MVPs is a work in progress.

And as those things get clear, for example, I think after April is gonna be a jam packed month, but once there’s that decision point that go no go date, there will be a time where the full site editing outreach program can start switching into a more narrowed experience of testing. And I’m really excited for that, where it’s okay, here’s the MVP. Here’s what we’re thinking for 5.8 which are two separate goals, by the way, there’s like building MVP, and then there’s, what’s going to go in 5.8 and I think that’s important to keep in mind as well. And yeah, one of the biggest ways that we get feedback and figure out what needs to be done next, especially now that we’re in a more refinement period is through the outreach program is through people filing feature requests and just doing as much testing as possible. Ideally this is also where a theme authors start exploring what it’s like to build block-based themes and give feedback on that experience. So, yeah, there’s a lot of ways that the feature development goes on. I will say a lot of the work happens in Github and then every, probably I think, a two month cadence, there’s some high-level posts about full site editing, whether it’s about a specific release or just like a check-in post, or if it’s about FSE and themes. There have been various posts over the last six months and I expect to see a lot more in the coming months leading up to 5.8 so that people are aware and they don’t have to pay attention to the day to day with Github. Another really good post to keep an eye out on is the what’s next post. And that’s posted each month and kind of defines, this is what the team is working on next.

And a lot of that does come down to, what issues of have come up in testing, what issues does Matias think are high priority to solve? What else is remaining in the MVP that’s been discovered previously? And one thing that I think is really easy to miss with full site editing, and it almost feels weird to just say. This monolithic full site editing when actually it’s this really diverse set of projects, and each is further along than others.

So there’s this very interesting battle that goes on in my mind, whenever I talk about full site editing, cause what I really want to do is talk about a specific piece of full site editing, but that also can get too granular in a way that can be really confusing. But it’s something I like to mention where if you try out the experience and one part seems really good and one part you’re like what’s happening here, that’s on purpose. Because at the end of the day, I don’t expect the entire experience to go into 5.8. I expect certain things to fit in and for there to be a drip campaign, probably through even the 6.0 release, who knows, but definitely through the 5.9.

Nathan Wrigley

Let’s say somebody is listening to this and they’ve got no experience contributing to any software project, and they’re interested, they like the idea of full site editing and they’ve got a few things they’d like to get off their chest and they want to be of some help. What are the most effective things that can help to push the project forward right now? That could be an answer as to which website to go to, and get involved in, or it could be, well, actually, no, we need help about this specific thing right now over the next month or two, you can take that in any way you like.

Anne McCarthy

I mean the simplest answer that I would love to see is people joining the Core Editor meeting. If you can. If you can’t reading the notes and starting there, which you can see them posted on make.wordpress.org backslash core, there’s actually a tag for the Core Editor meeting. But I would start there, and I say that partially because we’re in a pandemic. Most places in the world, you can’t meet up in person. So getting connected with the people behind this work before you step into Github, before you step into anything else, I think is really important. There are humans doing this work. There are humans who are listening, who are caring, who are staying up late, thinking about problems. So join the meetings if you can, if you can’t asynchronous contributions are very welcome. So if you can comment on the post with a question and have it answered, but I want to start there with the human element, especially right now. So my answer, you’re listening to this many years in the future, hopefully we’re beyond this, but for now I really want to connect people with other people. And then from there, start as simple as just testing, get a test site up, try things out. There’s another make site, which is where we communicate in the project, make.wordpress.org backslash test. That’s where I post a lot of the stuff around this outreach program. So if you just want dip your toes in, that’s a great place to start. It walks you through, there’s instructions on how to set up everything, what to use what to pay attention to, how to actually go through the call for testing. It’s very purposely constrained right now, so that it makes it easy for people to jump in. But if you’re more advanced, I would just say, start scrolling th through Github. Look at different labels. There’s a really good label that I check regularly, the overview label. So if you want to get a sense of the top issues, or I guess the summarized issues, the overview label is my jam. I love going through that and seeing what’s new and also just seeing the status of things. It’s a really great way to dig into the project, but not too deeply. And if you’re someone who’s been around WordPress for awhile I would say starting to, try to create a block plugin or build a block based theme.

We’re going to need to see the community in the future, really adopt these things and starting early while things are almost refined, I think is super helpful because it helps us define them in a place that there’s early enough for things to shift. Getting that feedback is pretty key so that we are creating tools that you can actually use, because the whole point is this is all being built, so other people can use it. Other people can’t use it, and we don’t know that. That’s a problem and it’s hugely helpful and valuable to do that.

Nathan Wrigley

You highlight the fact that you obviously need help with the things that you just described. All those technical areas. If I was to be listening to this and I am a more casual user of WordPress, I use it to create blog posts and I’m good at writing, but I’m not really into the code, and that side of things is of no interest to me, are there avenues that would still be open to me to assist with this?

Anne McCarthy

Yeah, I would actually say the testing should be pretty basic enough that you can dig into it. I’m saying this as the person who writes the test, I purposely try to make them very contained, so anyone can jump in and if they want to spend five minutes, ten minutes, that’s great. You don’t need to spend hours on this. Some people do, some people really like to go deep with it, but the whole point is that it’s something that anyone can jump into.

And even if a call for testing is passed, it’s still great to go back through previous calls for testing and I actually have videos as part of the calls for testing so that you can see me walk through it. So if you get stuck, if you’re reading my instructions and you’re like, what is this person saying?

You can watch the video and watch me go through it. And even just watching that and giving feedback and saying, hey, this is really weird, or, I really like when my page builder does this , do you all have plans for that? And another thing that’s actually coming up that I plan to do that anyone can participate in is another big call for questions. So there was a lull in testing. I was waiting for a new Gutenberg release and a couple of months ago, I did just, anyone could ask anything about full siding and I would find the answer for it. And we ended up getting, I think it was 46, 47 questions, which was fantastic. And I grouped them into different chunks, answered them, all, publish them, pass them on to the documentation team, the marketing team, but that allowed people where if they don’t have time to test, but they’re nervous about it, or they’re curious about it or they’re excited for it, or they’re impatient, whatever their emotional state is. Ask any question and I’ll answer it. And I plan to do those, another round of that definitely in the future. Probably at the end of April, and if that’s of interest paying attention to the, make.wordpress.org backslash test as the best place to pay attention or in Slack there’s in wordpress.org Slack, there’s a FSE hyphen outreach hyphen experiment that you can join, and you can just sit back and listen to me update you as I go, but that’s also a great way is asking questions, sharing concerns. That is actually hugely helpful. It sets the foundation for documentation. It helps the people building it know what the points of confusion are likely to be. So yeah, if you just want to ask a question by all means that’s a very easy pathway to jump into.

Nathan Wrigley

Thank you. I’ll be sure to take those links off you before we finally hang up the call today and we’ll make sure they make it into the show notes. Do you feel that you have. Enough people giving you feedback to justify the decisions that you made. I mean obviously in any software development, the answer I guess, is going to be, well, it would be great to have more. Do you feel that there is enough people assisting you at the moment so that you can be confident in the direction that you’re going? We’re doing this, we’ve got some feedback, but curious whether or not, if we have more feedback, we’d go in a different direction or not.

Anne McCarthy

That’s a great question. I am always someone who wants more people involved. I don’t think I’ll ever be happy with the numbers. Right now we have between 10 to 15 people with each test. And one of the things I actually recently consulted some of our design team with an Automattic, and I asked, I said, with usability testing what kind of numbers do you look for when you all did this with 5.0 what did you look for how many people? And a lot of times I got feedback saying, Oh my gosh. Anne, five to 10 people, it was great. You can calm down. It’s fine. I’m like, no, no, no. I need like 50, you know, it is this weird sense of no, no, I want more and more and more. And I can tell you, I don’t think we can ever get too much feedback, especially if it’s relevant and its… I mean, obviously there’s like irrelevant feedback where it’s make WordPress like Facebook. I mean, whatever, it could be something outrageous. That’s not terribly helpful, you know? But imagine if we just got completely inundated with feedback in the outreach program, that would be amazing. My goal, my personal goal that I’ve been trying to say outwardly in hopes it encourages people is I would love to have 20 to 25, really dedicated, diverse testers, each release and not each release each call for testing. That’s my ideal. And the reason I mentioned engaged testers is because I want people who are along for the journey a little bit,ideally. Obviously I think it’s great if people jump in and out, I think there’s something to be said for really new perspectives and I love when people comment saying, hey, this is my first time using full site editing and here are my thoughts. That’s excellent. But the idea of quality over quantity, I think is really key, for this phase of testing. I think when things actually get merged into core and certain aspects get merged into core, that’s when things can open up and be a bit more, having 2000 people give feedback, but yeah, I don’t think there’s ever enough testing and honestly, I do worry about that.

And it’s something, one of the things I’ve been very intentional about is reaching out to the accessibility team to try and get people to help give feedback so that we’re thinking about accessibility needs and reaching out to folks in the polyglot space so that we have translations of these posts so that people can participate. I only speak English and I had been in countries where all of a sudden, you see something in English and it’s like this it’s like such a relief to have a menu in English. Like, Oh yes, this is so nice. And I want that outreach to happen because I think sometimes the software development I’ve seen this like arrogance of, oh well, we’ll just be doing the work and if they’re curious, they can come to us. And I actually think this is one of those situations where we need to go to them. And that’s what the outreach program is all about is meeting people where they are doing the outreach. Bringing people along with us and learning from them as we go. Part education, part feedback loop, and part, hey, here’s a really easy way to get involved and walk you through what’s coming.

I would love to see more engagement from folks who are non-English speaking. We’ve had Italian, Spanish and Japanese translations very consistently. I’m so grateful for the people who’ve done that. I think it’s just, oh, I’m so bad at languages that it just amazes me. I also think everything looks better in a different language. So it’s neat to see my own words translated, which is a kind of a wild experience that I never thought would happen, but I’d love to see more engagement. In those polyglot and local spaces, because the last thing you want is for all of a sudden it to land and only a specific audience benefits or sees this or understands it or knows what’s coming, right. There’s a big responsibility for 40% of the internet. And I’ll never forget the day that Matt at a State of the Word said that non-English downloads passed English downloads. And so when you think about that 40% I think a lot of us English speaking, Western world think of a certain type of person, but really it’s much more expansive than that.

So I’ve been really hammering the polyglot space as much as I can, as much as volunteer time people can give to translate those posts and to try and get feedback. But it’s something that I’d love to see more of.

Nathan Wrigley

I’m curious actually, if you’ve got a really nice concrete example of an instance where somebody’s feedback turned into something actual. It was realized off the back of a piece of feedback, which you passed on to the team, and somebody reached out said, I would like this. And you were able to provide this, Hearing those stories. Ah, it is possible.

Anne McCarthy

Yeah, I can think of a really specific example that I was actually thinking about this morning when I was making coffee. A blind developer, I got connected with her through actually posting in a different Slack community. So, you would not believe how many Slack communities I’m a part of and how much I try to drop links and engage people in different spaces. And I got connected because someone said, hey, I have a friend she’s blind, she’s a WordPress developer, and she cannot use full site editing. And I was like, whoa, tell me everything.

How can I get in touch, and got in touch, her name’s Taylor. And she very kindly jumped on for about 30 minutes. We recorded the session so that I could pass along the feedback. She just walked me through the experience of both using of using two different screenreader tools. And. It was fascinating. It was awesome.

We found so many bugs. It was one of those things where I think the biggest, the most jarring one that I keep thinking about that I actually want to see if we can get some development in on ASAP, is that the save button, and the saving process for full site editing right now is pretty non-intuitive, it’s a little bit clunky and it’s something that’s come up with sighted folks as well. What is the saving process, how does it work? But for people who rely on screen readers, it’s really impossible to save. Like you basically have to search for the phrase save in order to find the save button because there isn’t an aria label. And so that’s a big one that came up and on top of that in just the session, I worked with her another piece of feedback that came up with the columns block.

So if you have columns and you’re imagining, let’s say two columns and you are using a screen reader, it doesn’t tell you which column is which. So all of you here just announces column, column it doesn’t say like column one or column two or right column or left column. There’s no identifier for how to navigate.

And so that’s actually, there’s a PR right now that’s underway. I actually just filed it for the accessibility team last week to see if someone could review and someone already stepped in to offer some thoughts to fix that, to actually announce, I think they’re going with like column one and column two and column three rather than right and left due to internationalization. And that’s going to be a huge improvement because right now Taylor was just like, columns block is so confusing. This is almost useless. Another one is the spacer block. I’d love to hear. If you use a screen reader, I’d love to hear your experiences with the spacer block, because that’s a really confusing block for people I’m relying on screen readers.

And I opened up an issue for that, and we’ve had some discussion back and forth about improvements that need to be made there as well. So those are some of the, and I can tell you, there’s probably about. I think six issues I opened just from that 30 minute conversation. Some are like a work in progress, but this was very recent and something I keep thinking about, especially as we start to refine things and decision points come up because we don’t want to release something that has such blatant problems with it.

Nathan Wrigley

It marks a very big change for WordPress this last couple of years have been really extraordinarily different, the experience that we’re all going through, but in particular, around full site editing How do you calm people’s fears that things in the future are going to be going in the direction that they wish it to go in. So, as an example, let’s imagine that we’re a theme developer. We may be getting concerned that themes are going to become a thing of the past that the livelihood that we’ve created for ourselves is going to disappear before our eyes. People concerned that the way that they’re working with at the moment, the way that they’ve taught their clients to work, this is how WordPress works, and this is how you can manage your website for yourself, and so on. What do you say to people? What is the golden light on the hill? The thing that you draw attention to, to say, look, all of this will be worth it. How do you keep people focused on the positives and not worrying about all the different things that are going on left right and center?

Anne McCarthy

Yeah. The biggest thing I say is there’s a reason that the last milestone is gradual adoption. And one of the things that I also love to talk about is the fact that full site editing is a bunch of sub projects actually gives us the flexibility to ship reliable items rather than shipping it all at once.

Yes, they’re interdependent. Yes. And some cases they rely on each other and there needs to be probably a certain order or approach to releasing things. But by having so many different tools that provide value. It actually gives us the ability to step back and say, okay, what’s ready. And that should be a big relief to people.

It’s not like there’s going to be this on-off switch full savings here is taking over your site. Good luck. That’s not going to happen. Gradual adoption is the game plan. It is the final step. And I imagine right now, a gradual adoption as a milestone is not fleshed out. But I imagine, especially you have to 5.8, that will become a much more fleshed out milestone in the same way you see other milestones, I think, Josepha has talked a lot about this, and I really love the way she basically says we want to fulfill the WordPress promise. We want to keep that trust and we want to release things in the best state possible while at the same time, recognizing that there’s this urgency to offer tools that people are just lacking right now, at some point, we need to get those out in front of people and to provide value and making that determination is super tricky. But the good news is like I was saying earlier, we have that flexibility built into the fact that these are all sub projects and that many of them can be shipped independently.

And for theme authors, Themes are going to be so important in a full siding world. And one of the things I am so excited about is that there’s going to be a ton of what they’re calling. I .. the idea of these hybrid universal themes that can work with for example, template editing.

So going and being able to edit like your single page template, your homepage template, or your 404 template. You could have a theme, that’s a classic theme or traditional theme, whatever you want to call it. And you could use template editing. You could update your theme to hook into the tools have been made to allow for template editing.

Same thing goes for global styles. You could just use one part of the full site editing machine, so to speak and all the projects and slowly integrate, more and more, as you want to, like theme authors will have a lot of control of what they opt into and what they opt out of. And for us building it, it’s on us to make it so desirable to opt in.

Right, and that’s where the gradual adoption, so many pathways are going to be created. And I’m actually really excited to see people move from this framework of anxiety to looking out across the space and going, hmm, what can I use? What is it that I hear from people all the time that I can integrate into this and moving into an exciting creative space rather than thinking, hh, I got to get caught up, I’m behind. This is so bad. Like that kind of feeling, which I hear from a lot of people was like, I don’t have time to get up to speed. And the ideal is that we’re actually providing tools that save you time and add value. And that makes me really excited. I fully understand the fear. I fully understand the fear.

I don’t say that lightly. As someone who is thinking about like how it’s going to land in 40% of the internet and who every single day is talking to people who are giving feedback about, what’s not quite there, I don’t spend a lot of time talking to people who are just like, oh, I’m so excited about this.

People don’t go out of their way to tell you that you often hear from the people who are upset or something’s missing or promises broken or whatever it is. And it’s something I think about a lot. And I understand why there is panic there, especially with livelihood in the situation that we’re in.

And I have a lot of empathy for that. And I think in the future, and one of the things that I think you’ll hear from leadership and you’ve, everyone’s priority heard this from leadership. It’s just that we are purposely moving slowly and things get pooled for a reason. And it is to fulfill that promise and to think about backwards compatibility, but at the same time, balancing that with wanting to provide value for users and empowering users, especially in a day and age, when a lot of tech companies are actually taking away a lot of the power, whether it’s in the form of privacy or what have you.

I think open source and the way WordPress is working is actually trying to resist that and really focus on giving everything we can to the user, to build the site that they want and to have the experience that they want. And also to free them up, to focus on what the site actually gives them, whether it’s a business or platform.

I think that’s the part that makes me… that hopefully makes other people excited. And that makes me really excited.

Nathan Wrigley

Speaking to that. You’ve done an incredible job answering all of my questions and you’ve obviously got to wear the Automattic hat during a discussion like this. I’m curious if we cast away the Automattic hat just for a moment and we ask you personally, what in the next six months to a year, what’s the one single thing, the thing that you are most excited about, the thing that you most want to see happen, the thing that gets you personally switched on about the project.

Anne McCarthy

It’s a great question. I would have to say block patterns, because we’re talking about all these tools and features and things coming along, but ultimately as a user, it’s like, what can I do, and what can I do quickly? And block patterns will really be the glue that ties together all these projects. You can insert a block pattern, manipulate it as you want to. And when you’re manipulating it, you probably won’t be thinking about the fact that you might be using global styles or that the block pattern is relying on block styles or whatever it is.

But the power of that. And the promise of that, I think is just such a high impact, such a high impact feature that will really be like a cherry on top. And we’ll bring together a lot of the things that we’re talking about in a way that will be really tangible. And especially in this world of, you know, we’re not able to gather in person we’re not able to have those moments.

I think having something that is easy to understand almost the point of being, so intuitive that it’s like, why didn’t we do this years ago? That’s what I want the feeling to be. And that’s when I had someone in design, tell me this one time. And it always stuck with me as like the best ideas are the ones where you’re like, well, no, duh, like, yeah, of course.

And that’s what block patterns I think you’re going to feel like, and I think it’s really gonna fulfill a lot of these things and bring a lot of these things that we’re talking about together in a way that will be really fun to play with. And also people will be able to submit to the block pattern directory, ideally in the future, similar to the block plugin directory.

So personally, I’m most excited to see the marriage between block patterns and full site editing along with these hybrid themes.

Nathan Wrigley

I know there will be no metric to judge this, but it would be fascinating in a couple of years time. Were we able to measure it, to see just how much of humanity’s time has been saved by something like block patterns, the fact that you don’t have to do things over and over again. Yeah. I completely understand why you’ve selected that one. We have gone through so many questions. If somebody at the end of this, has been listening to this and thinks I would like to help, but I want to contact Anne directly before I go to these Slack channels and Github repos and so on. How might somebody get in touch with you should they wish to?

Anne McCarthy

I would say go to my website. I am a weird millennial without social media. I jump on and off of Instagram. That’s my one holdout. I love photography too much, but yeah, my website is nomad.blog and I have a contact page and I truly welcome to hear from anyone seriously. All I ask, and this is on my website as well. I like to do pen pal. Kind of writing back and forth. I think we don’t rely, I think email, I’ve read too many books about this, but I think email has ruined our ability to relax and unwind, and I refuse to opt into this always responding world. So as long as you’re patient with me, and if I get a bunch of emails, as long as you’re patient with me responding, I promise I will respond genuinely with a lot of thought. I do not like to do short, low quality responses. So if you’re willing to engage there, that would be awesome to hear from you. I’m also an annezazu in WordPress dot org Slack, if you end up joining there as well.

Nathan Wrigley

Well, thank you very much. I appreciate all of the hard work that you and everybody connected in the project is doing. It’s making great inroads into our editing experience in WordPress. Greatly appreciated. Thanks for coming on the podcast.

Anne McCarthy

Of course. Thank you so much for having me.

A Complete Guide To Incremental Static Regeneration (ISR) With Next.js

A year ago, Next.js 9.3 released support for Static Site Generation (SSG) making it the first hybrid framework. I’d been a happy Next.js user for about a few years at this point, but this release made Next.js my new default solution. After working with Next.js extensively, I joined Vercel to help companies like Tripadvisor and Washington Post as they adopt and scale Next.js.

In this article, I’d like to explore a new evolution of the Jamstack: Incremental Static Regeneration (ISR). Below you’ll find a guide to ISR — including use cases, demos and tradeoffs.

The Problem with Static-Site Generation

The idea behind the Jamstack is appealing: pre-rendered static pages which can be pushed to a CDN and globally available in seconds. Static content is fast, resilient to downtime, and immediately indexed by crawlers. But there are some issues.

If you’ve adopted the Jamstack architecture while building a large-scale static site, you might be stuck waiting hours for your site to build. If you double the number of pages, the build time also doubles. Let’s consider Target.com. Is it possible to statically generate millions of products with every deployment?

Even if every page was statically generated in an unrealistic 1ms, it would still take hours to rebuild the entire site. For large web applications, choosing complete static-site generation is a non-starter. Large-scale teams need a more flexible, personalized, hybrid solution.

Content Management Systems (CMS)

For many teams, their site’s content is decoupled from the code. Using a Headless CMS allows content editors to publish changes without involving a developer. However, with traditional static sites, this process can be slow.

Consider an e-commerce store with 100,000 products. Product prices change frequently. When a content editor changes the price of headphones from $100 to $75 as part of a promotion, their CMS uses a webhook to rebuild the entire site. It’s not feasible to wait hours for the new price to be reflected.

Long builds with unnecessary computation might also incur additional expenses. Ideally, your application is intelligent enough to understand which products changed and incrementally update those pages without needing a full rebuild.

Incremental Static Regeneration (ISR)

Next.js allows you to create or update static pages after you’ve built your site. Incremental Static Regeneration (ISR) enables developers and content editors to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.

Static pages can be generated at runtime (on-demand) instead of at build-time with ISR. Using analytics, A/B testing, or other metrics, you are equipped with the flexibility to make your own tradeoff on build times.

Consider the e-commerce store from before with 100,000 products. At a realistic 50ms to statically generate each product page, this would take almost 2 hours without ISR. With ISR, we can choose from:

  • Faster Builds
    Generate the most popular 1,000 products at build-time. Requests made to other products will be a cache miss and statically generate on-demand: 1-minute builds.
  • Higher Cache Hit Rate
    Generate 10,000 products at build-time, ensuring more products are cached ahead of a user’s request: 8-minute builds.

Let’s walk through an example of ISR for an e-commerce product page.

Getting Started

Fetching Data

If you’ve never used Next.js before, I’d recommend reading Getting Started With Next.js to understand the basics. ISR uses the same Next.js API to generate static pages: getStaticProps. By specifying revalidate: 60, we inform Next.js to use ISR for this page.

  1. Next.js can define a revalidation time per page. Let’s set it at 60 seconds.
  2. The initial request to the product page will show the cached page with the original price.
  3. The data for the product is updated in the CMS.
  4. Any requests to the page after the initial request and before 60 seconds are cached and instantaneous.
  5. After the 60-second window, the next request will still show the cached (stale) page. Next.js triggers a regeneration of the page in the background.
  6. Once the page has been successfully generated, Next.js will invalidate the cache and show the updated product page. If the background regeneration fails, the old page remains unaltered.
// pages/products/[id].js

export async function getStaticProps({ params }) {
  return {
    props: {
      product: await getProductFromDatabase(params.id)
    },
    revalidate: 60
  }
}

Generating Paths

Next.js defines which products to generate at build-time and which on-demand. Let’s only generate the most popular 1,000 products at build-time by providing getStaticPaths with a list of the top 1,000 product IDs.

We need to configure how Next.js will “fallback” when requesting any of the other products after the initial build. There are two options to choose from: blocking and true.

  • fallback: blocking (preferred)
    When a request is made to a page that hasn’t been generated, Next.js will server-render the page on the first request. Future requests will serve the static file from the cache.
  • fallback: true
    When a request is made to a page that hasn’t been generated, Next.js will immediately serve a static page with a loading state on the first request. When the data is finished loading, the page will re-render with the new data and be cached. Future requests will serve the static file from the cache.
// pages/products/[id].js

export async function getStaticPaths() {
  const products = await getTop1000Products()
  const paths = products.map((product) => ({
    params: { id: product.id }
  }))

  return { paths, fallback: ‘blocking’ }
}

Tradeoffs

Next.js focuses first and foremost on the end-user. The "best solution" is relative and varies by industry, audience, and the nature of the application. By allowing developers to shift between solutions without leaving the bounds of the framework, Next.js lets you pick the right tool for the project.

Server-Side Rendering

ISR isn’t always the right solution. For example, the Facebook news feed cannot show stale content. In this instance, you’d want to use SSR and potentially your own cache-control headers with surrogate keys to invalidate content. Since Next.js is a hybrid framework, you’re able to make that tradeoff yourself and stay within the framework.

// You can cache SSR pages at the edge using Next.js
// inside both getServerSideProps and API Routes
res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate');

SSR and edge caching are similar to ISR (especially if using stale-while-revalidate caching headers) with the main difference being the first request. With ISR, the first request can be guaranteed static if pre-rendered. Even if your database does down, or there’s an issue communicating with an API, your users will still see the properly served static page. However, SSR will allow you to customize your page based on the incoming request.

Note: Using SSR without caching can lead to poor performance. Every millisecond matters when blocking the user from seeing your site, and this can have a dramatic effect on your TTFB (Time to First Byte).

Static-Site Generation

ISR doesn’t always make sense for small websites. If your revalidation period is larger than the time it takes to rebuild your entire site, you might as well use traditional static-site generation.

Client-Side Rendering

If you use React without Next.js, you’re using client-side rendering. Your application serves a loading state, followed by requesting data inside JavaScript on the client-side (e.g. useEffect). While this does increase your options for hosting (as there’s no server necessary), there are tradeoffs.

The lack of pre-rendered content from the initial HTML leads to slower and less dynamic Search Engine Optimization (SEO). It’s also not possible to use CSR with JavaScript disabled.

ISR Fallback Options

If your data can be fetched quickly, consider using fallback: blocking. Then, you don’t need to consider the loading state and your page will always show the same result (regardless of whether it’s cached or not). If your data fetching is slow, fallback: true allows you to immediately show a loading state to the user.

ISR: Not Just Caching!

While I’ve explained ISR through the context of a cache, it’s designed to persist your generated pages between deployments. This means that you’re able to roll back instantly and not lose your previously generated pages.

Each deployment can be keyed by an ID, which Next.js uses to persist statically generated pages. When you roll back, you can update the key to point to the previous deployment, allowing for atomic deployments. This means that you can visit your previous immutable deployments and they’ll work as intended.

  • Here’s an example of reverting code with ISR:
  • You push code and get a deployment ID 123.
  • Your page contains a typo “Smshng Magazine”.
  • You update the page in the CMS. No re-deploy needed.
  • Once your page shows “Smashing Magazine”, it’s persisted in storage.
  • You push some bad code and deploy ID 345.
  • You roll back to deployment ID 123.
  • You still see “Smashing Magazine”.

Reverts and persisting static pages are out of scope of Next.js and dependent on your hosting provider. Note that ISR differs from server-rendering with Cache-Control headers because, by design, caches expire. They are not shared across regions and will be purged when reverting.

Examples of Incremental Static Regeneration

Incremental Static Regeneration works well for e-commerce, marketing pages, blog posts, ad-backed media, and more.

  • E-commerce Demo
    Next.js Commerce is an all-in-one starter kit for high-performance e-commerce sites.
  • GitHub Reactions Demo
    React to the original GitHub issue and watch ISR update the statically generated landing page.
  • Static Tweets Demo
    This project deploys in 30 seconds, but can statically generate 500M tweets on-demand using ISR.

Learn Next.js Today

Developers and large teams are choosing Next.js for its hybrid approach and ability to incrementally generate pages on-demand. With ISR, you get the benefits of static with the flexibility of server-rendering. ISR works out of the box using next start.

Next.js has been designed for gradual adoption. With Next.js, you can continue using your existing code and add as much (or as little) React as you need. By starting small and incrementally adding more pages, you can prevent derailing feature work by avoiding a complete rewrite. Learn more about Next.js — and happy coding, everyone!

Further Reading

I want to make TextBox into array and adjust it with buttons.

Private Sub Plus_Btn_Click(sender As Object, e As EventArgs) Handles A_Plus_Btn.Click, C_Txb.Click
    Dim Txb As TextBox
    If x < MAX Then
        x += 1
    Else
        x = 5
    End If

    For i As Integer = 1 To x
        For j As Integer = 1 To x
            Txb = New TextBox
            Txb.Size = New Drawing.Size(100, 20)
            Txb.Location = New Point(10 + 100 * i, 10 + 25 * j)
            Txb.Name = "Txb" & i & "," & j

            AddHandler Txb.TextChanged, AddressOf TextBox_TextChanged
            boxes(i) = Txb
            Me.Controls.Add(Txb)
        Next
    Next
End Sub

Private Sub TextBox_TextChanged(sender As Object, e As EventArgs)
Dim box As TextBox = DirectCast(sender, TextBox)
Me.Text = box.Name & ": " & box.Text
End Sub

Private Sub Minus_Btn_Click(sender As Object, e As EventArgs) Handles A_Minus_Btn.Click, C_Txb.Click
    Dim Txb As TextBox
    If x > MIN Then
        x -= 1
    Else
        x = MIN
    End If

    For i As Integer = 1 To x
        For j As Integer = 1 To x
            Txb = New TextBox
            Txb.Size = New Drawing.Size(100, 20)
            Txb.Location = New Point(10 + 100 * i, 10 + 25 * j)
            Txb.Name = "Txb" & i & "," & j

            AddHandler Txb.TextChanged, AddressOf TextBox_TextChanged
            boxes(i) = Txb
            Me.Controls.Add(Txb)
        Next
    Next
End Sub

I want to make TextBox into array and increase/decrease with buttons.

ex) dim x=1 [+] [-]
x = 1:
[]

x = 2:
[][]
[][]

x = 3:
[][][]
[][][]
[][][]
...

But it's made with the code I wrote above, but it doesn't remove.
And it's not array system, it's hard to manage.

Magnetic 3D Grid Interaction with Content Preview

Today I’d like to share another thumbnail to full view animation with you. This time we have an initial grid with thumbnails that move with the mouse in 3D and have a magnetic effect including a little tooltip on hover. Once clicked, all items animate out, giving way to a content preview with more details.

The grid interaction looks as follows:

Here’s how the grid to content animation looks like:

I really hope you find this useful! Thanks for visiting!

The post Magnetic 3D Grid Interaction with Content Preview appeared first on Codrops.

How to Add a Custom Product Builder in WooCommerce (Easy)

Do you want to add a custom product builder in WooCommerce?

A custom product builder allows customers to design products and customize them to their own requirements. This interactive way of customizing product orders can boost sales conversions in your WooCommerce store.

In this article, we will show you how to easily add a custom product builder in WooCommerce without hiring any developers or writing any code.

How to add a custom product builder in WooCommerce

Why Add a Custom Product Builder in WooCommerce?

Adding a custom product builder in WooCommerce allows your customers to customize the products before placing an order.

For instance, you can add print-on-demand products and allow customers to add their logos, images, and text to the products.

A custom product designer for WooCommerce can be used to sell your own products that customers can customize before shipping.

Alternatively, you also start a dropshipping business and let a third-party vendor take care of customization and shipping.

That being said, let’s take a look at how to add a custom product builder to your WooCommerce store.

Adding Custom Product Builder to a WooCommmerce Store

For this tutorial, we will be using Zakeke. It is a product customizer tool for WooCommerce and offers a seamless product builder experience for your users. The product designer is really easy to use for customers as well as store owners.

First, you need to visit the Zakeke website and sign up for an account. You can click the ‘Start free trial’ button to get started.

Zakeke

Zakeke works with the most popular eCommerce platforms, including WooCommerce.

To connect your store to Zakeke, switch back to your WordPress website admin area.

Next, you need to install and activate the free Zakeke plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

The free plugin acts as a connecter between your website and the Zakeke product builder.

Upon activation, you will be asked to connect your WooCommerce store to your Zakeke account. Simply click on the ‘Connect’ button to continue.

Connect Zakeke

You will be then asked to allow Zakeke access to perform actions on your WooCommerce store.

Go ahead and click on the ‘Approve’ button to move forward.

Connect Zakeke to WooCommerce

This will bring you to the Zakeke dashboard.

You can now head to the ‘Customizable Products’ option from the menu on your left.

Go to customizable products

You are now ready to add products that customers can customize.

Adding Your First Customizable Product

Once you are in Customizable Products, go ahead and click the ‘Add’ button.

Add your custom product

You can then choose a product from your own store, create a product from scratch, or select a print-on-demand service.

For the sake of this tutorial, we will choose to add products from our own demo store.

Choose where to get your product from

Next, Zakeke will load products from your store.

You need to choose the product that you want to configure.

Choose a product from your store

After that, Zakeke will choose your product image from your store.

If you want to use a different image, then you can upload it. You can also upload a back side of the product image or add variations.

Change custom product image

Once you are satisfied with the product images, click on the ‘Set print area’ button.

This will bring up a popup where you need to set a ruler by simply drawing a line with your mouse and providing a measurement.

Make a line with the ruler

Next, you need to select a shape for the print area and simply draw it on the product image.

For this tutorial, we will use the rectangular shape.

Create a rectangular area on your product

Once you are done, click the ‘Save’ button to continue.

Next, you need to click the ‘I don’t offer variations, go to preview’ button.

Go to product preview

You will now see your product details.

Don’t forget to click the ‘Save’ button to store your changes.

View preview and save custom product

Zakeke will now show a preview of the custom product builder.

You can test to see if everything is working properly and make changes if needed. There is also an option to place a test order.

Test the custom product builder

When you are happy with the changes, simply click the ‘Publish’ button at the top.

Setting the Print Methods

The next step is to set print methods. This is where you can choose how you want the design files to be formatted for printing.

From your Zakeke account dashboard, go to ‘Printing methods’ in the left column and then click the ‘Add’ button.

Add a printing method

From here, you can choose what printing features you want to allow your customers to use.

You can also choose the file types, resolution, and format. If you allow users to add a text box to the product, then you have options to control the text style, font, format, color, size, and more.

Edit printing method details

At the bottom, you can choose existing products to which this method would apply.

Don’t forget to click on the ‘Save’ button to store your changes.

Select products to apply printing methods

Using the Custom Product Builder in WooCommerce

Zakeke will take care of adding the product customization option to all the products that you have added using the product configurator.

You can simply visit the product in your store, and you will see the option to Customize the product.

Customize your product

This will open up the product designer interface with a preview of the product image design tools on the right.

Users can add text or upload images from their devices or social media accounts.

Add image to product in the builder

They can also adjust the image or text within the print area by simply dragging the corners. There are also options to choose different fonts, colors, and styles.

Once finished, users can download a copy of their design as PDF, save it, or simply add it to the cart.

After that, customers can check out as they would normally would with a preview of their customized product in the cart.

View cart with custom product

Bonus Tip: Selling More Customizable Products in WooCommerce

Customizable products and a sleek product designer can help you make more sales. However, customers may not know that they can customize and design their products.

This is where OptinMonster comes in.

It is the best conversion optimization software on the market that allows you to easily convert WooCommerce visitors into paying customers.

OptinMonster comes with lightbox popups, slide-in popups, notification bars, countdown timers, and more. All these tools can help you display the right message to your customers at the right time.

Upsell popup preview

With its powerful display rules, you can target customers and show them personalized campaigns.

For instance, you can offer free shipping to customers in a particular area, show a slide-in popup for customizable products, or give a limited-time coupon to recover abandoned cart sales.

OptinMonster countdown timer

We hope this article helped you learn how to easily add a custom product builder in WooCommerce. You may also want to see our guide on how to track conversions in WooCommerce to grow your business and our comparison of the best WooCommerce hosting providers.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a Custom Product Builder in WooCommerce (Easy) first appeared on WPBeginner.

Why Content Is Such A Fundamental Part Of The Web Design Process

When embarking on a new website project, designers tend to focus on the aesthetics and functionality of their work. This means that content writing is a task often pushed onto the client to fulfil. The unfortunate consequence of this decision is that the website’s content ultimately comes in too late, in the wrong format, and of poor quality.

21 years ago, usability consultant Jakob Nielsen said this about content written by laypeople:

“The biggest problem is that most people are (and always have been) bad content creators. That's why we have professional writers, graphic designers, filmmakers, speakers, musicians, and other types of media professionals. When an average person tries to create content, they typically don't have much to say and what they do say is often said badly.”

Jakob Nielsen, 2000

When it comes to writing content, I’m sorry to say that clients are often just not very good. My clients are amazing in many ways, but writing persuasive and informative content that prompts the reader to action, is generally not one of their talents.

As a web designer myself, I have been guilty of encouraging my clients to produce their own content. In one project I used Google Drive to manage the process. Unfortunately, the client required a lot of coaching on how to use the document editor and when they finally produced the content much of it lacked focus. I had to tell them it was unworkable. They went back to the drawing board and the project took months longer than it otherwise could have.

I sometimes feel like I’ve spent half my career waiting around for clients to write content. The other half has been spent trying to make sure whatever they produce doesn’t ruin the design.

Content production within the website design process can be tricky to manage. In this article I share my key learnings from years of experience, as well as offer some tips to enhance your own procedures.

The Difference Between Design And Content

In its most essential form, content is the material that users consume. Content can take the shape of words, pictures, video and audio. It is the tangible material that people cognitively consume, where design is the presentation of that content, influencing how people feel in the moment. They are symbiotic, yet distinct in their own right.

A common misconception among clients, and even designers themselves, is that design and content are one and the same. As such, it becomes incredibly difficult to know where the work of the designer ends. Most web designers will acknowledge that it is not their job to create video content, but at the same time, they may stray into the production of written content. This is not a problem if the designer has the expertise and resources to deliver on this fundamental aspect of the project, but most often they do not, and nor does their client. The reality is that design and content are completely separate.

It is imperative, therefore, that content be given its place alongside visual design during the web development process.

Why We Should Start With Content

There is a well-known maxim born out of the building industry in the 1800s which states that form follows function. Coined by architect Louis Sullivan, his full quote expresses this idea eloquently:

“Whether it be the sweeping eagle in his flight, or the open apple-blossom, the toiling work-horse, the blithe swan, the branching oak, the winding stream at its base, the drifting clouds, over all the coursing sun, form ever follows function, and this is the law.”

Architects know that if a building does not meet real world needs, it would be impractical, regardless of how nice it appeared. This law can be applied directly to the way we build websites today. The relatively modern role of the UX designer was intended to act as the glue between form and function, bridging the gap between what something looks like and how it is interacted with. But the truth is that few projects carry the budget for a dedicated UX designer, and as such this responsibility often falls to the web designer who may be more concerned with aesthetics.

The client, who comes to us for guidance, is mostly interested in what a website can do for them. Therefore, their role is to bring their business objectives and specialist knowledge, not to write pages of content.

Can you see the problem? A cavernous gap has emerged, one that allows the production of content to fall through. We need to bring content production into our website design process, and that means creating a space for it at the start.

Naturally, this extension to our project will incur a greater cost. This often means the need for professional content production is met with resistance. Let’s have a look at some strategies for dealing with this.

What To Do If Your Client Cannot Afford Copywriting

Not only does content production often represent an unwelcome deviation for a designer, but clients also see it as an unnecessary cost. We must challenge this mindset, and that begins by covering the positives. Professional website copy will:

  • Consolidate and solidify the overall brand message.
  • Save a lot of time for you and the client.
  • Make the design (and the design process) more effective.
  • Result in a better end user experience.

The bottom line? Professionally written content will drive a higher return on the overall investment.

The reason that clients often claim they “cannot afford” copywriting is because they don’t understand what it can do for them. They don’t appreciate the potential for a return, and therefore they are hesitant to make the investment. Simple economics commands that if you can make the offer compelling, the person will want it. Use those bullet points above to instil the vitality of good content, not just on the web, but in business comms more generally.

I recently worked with a company whose services proved a challenge to understand at first, but with the help of a copywriter we developed a sitemap that reflected both the end-user’s needs and covered what was on offer succinctly. This freed me up to work on the visual design system and more technical integrations. Without this investment in content production, the end result would have been much poorer for it.

Now let’s take a look at some strategies for plugging content writing into the website creation process.

Strategies For Stitching Design And Content Together

If you want to create a great website that fulfils the business objectives of your client and doesn’t give you the headache of sourcing content along the way, you will need to give copywriting its due attention. After years of struggling with this, what follows are some core ideas I’ve used to improve the process.

1. Run A Content Workshop With Your Client

Spending a couple of hours focusing on content enables you to work out what is important to the project. It also internalizes a team-wide sense of how vital content is. Here are some ways you might run such a session:

  • Discuss the overarching goals by asking good, open-ended questions such as “what might a visitor want from the homepage? Who would find this piece of content useful? How might the visitor proceed after having read this page?”
  • Intentionally steer the discussion away from how things might look, instead focusing on messaging, and how we expect the visitor to feel.
  • Consider front-loading the session with a definition of content and showing some good/bad examples. Ask the team for their live feedback to gauge and guide their understanding.

This session is as much symbolic as it is tangible in use. Whilst some solid ideas will come out of the meeting, it’s real purpose is to get the client on board with the idea that design and content are separate deliverables. Taking this a step further, you might choose to run this workshop as an individual product for which the client pays a fixed fee, before you even begin talking about website design.

2. Partner With A Copywriter Ahead Of Time

By bringing a copywriter into your process you can effectively merge their service with yours. A common approach many web developers take when preparing a quote for a client is to itemize each service. For example, they might split front-end and back-end development into separate deliverables. This is a problem, because it creates an opportunity for the client to ask unhelpful questions. Querying an investment is, of course, wise, but in this case it can force you to justify individual services that are required to deliver the whole.

One of the best ways to integrate content writing into your delivery process is to simply begin behaving like it is a non-negotiable step. The next time you prepare an estimate, include copywriting as a standard part of the process like any other. Here is an example statement you can drop into your proposals to help with this:

Note: A strong content strategy is fundamental to making your website redesign a success. As part of this proposal we will develop content for your new website that will resonate with your visitors and prompt action from them. We will conduct an interview with you to understand your audience and objectives, and integrate this into our content writing process.

If this is met with questions, or if your client wishes to drop this part to save costs, refer back to the benefits I outlined earlier.

3. Use Real Content As Quickly As Possible

To this day I sometimes find myself designing layouts using Lorem Ipsum placeholder copy. I slap myself on the wrist every time. In an ideal world, design would not begin until you have, at least, some of the content. It’s difficult to bring a piece of design to life unless its purpose is rooted in a real world use case, and placeholder text simply doesn’t achieve that.

Don’t be tempted, either, to begin writing content as you design. I have tried this, and unfortunately the copy tends to get subsumed by the design process and forgotten about. Only when it’s time to launch does somebody question it, by which point it becomes a headache to put right. You don’t want to be retrofitting a content strategy deep into the design process; use real content as early on in your project as you can.

4. Interrogate The Brand

Our clients mission and values provide a deep well of content that most designers barely dip their feet into. Many insights and content ideas can be found here, but it means stepping back from the website process to interrogate the brand. This can seem quite daunting, but it is often worth doing in order to understand the core motivations of the project. Here are some questions you can ask your client to help form a content strategy:

  • Why do you do what you do?
  • How does your product or service make your customer’s life better?
  • How do your customers describe you?
  • Who are your competitors and how do you differ?
  • Where will this project take you?

The goal here is to get the client thinking about themselves and their customers. Your aim is to translate their responses into useful content and design decisions. When a client is struggling to understand the value of the substance of content, these discussions can lead to a few “lightbulb” moments.

If you’re feeling bold, consider bringing your clients' customers into the conversation as well to add an extra dimension. This might feel a little scary, but you could do it in any of the following ways:

  • Ask for existing feedback that your client may have received from their customers. Look for common questions or complaints.
  • Conduct a survey with their customers, acting either on behalf of the client or as yourself.
  • Organise a series of video interviews with their customers. This could add immense value to the project and level you up to a more vital position in the eyes of the client.
  • Bring a handful of customers into your content workshop with the client to involve them in discussions.

It’s important to remember here that when interrogating the brand, we’re simply looking for answers. How do people experience this company? Promote an objective agenda to reduce in-fighting, and this extra mile will serve you very well.

5. If The Client Is To Write Their Own Content, Make It Easy For Them

In situations when the client has in-house resources to produce copy, your job will be to guide them. Here are some tips for keeping the project on track:

  • Delay jumping into visual design until you have some real content to work with.
  • Give the client a content-delivery deadline.
  • Set up all the documents for the client as Word files or Google Drive documents. Ensure each is reflected by a page within the sitemap, and ideally a wireframe to signify layout. This gives the client a framework to write within.
  • Give them templates and use constraints to help them produce content that will work well. For example, have a field for “page title” and state that it should be no more than 6-8 words. Here is a template that I have used with my clients in the past.
  • If there is no budget to run a content workshop, have a pre-recorded video you can point them to or an article on your blog that explains the point of good content.
  • Make content production the responsibility of one individual. If the whole team input, the project will quickly spiral.

Essentially, in cases where your client does not invest in external copywriting, you should seek to make the process as simple as possible. Left to their own devices, you may receive content in dribs and drabs, and when you finally piece it together you’ll end up with a Frankenstein’s Monster. Making it easy for them by managing the process can help avoid this.

Some Resources To Help Facilitate The Content Process

Whether you are collating the content yourself, working with a copywriter or leaning on your client to provide it, you need tools and a process. A common approach, and one that has worked for me, generally follows these steps:

  • You audit the current website to gain a deeper understanding of content that a) needs to be rewritten, b) needs to be deleted or, c) needs to be produced from scratch.
  • You work with the client and writer to establish a sitemap, the overarching structure of the website content. Gloomaps is a wonderful tool to help with this, but there are more sophisticated tools such as Miro that provide a collaborative space.
  • You mock up content layout using wireframe models of key pages. You can go deep into this or keep it surface-level. There are dedicated apps like UXPin and Mockflow, but I find that Adobe Illustrator works well with the right wireframe UI kit.

The key principle here is to include your client in discussions about content and structure. Too often designers disappear into a shaded room, emerging weeks later with a “finished” product. Whilst some clients appreciate a “done for you” service, most find greater satisfaction by being brought into the process. You’ll do better work when you draw on their knowledge and experiences, too.

In Summary: Take Content Seriously

The uncomfortable fact of the matter is that content is the thing you’re designing. Influential copywriter and marketer Eugene Schwartz said:

“Copy is not written, it is assembled.”

Best web designers know that their job is about composition and user experience. We provide the interface to that which the reader seeks. It’s often easy to forget this when faced with the politics and preferences of most web design projects. We get our heads turned by new trends, fancy CSS animations and the latest frameworks. We get stuck into the problem, which is what makes us designers and developers in the first place.

But there will always be a need to refocus. To align our work with the core aims of the project, and in most cases, that is simply to get a message across in the clearest way possible.

We need better content on the web, and that requires investment. As designers we can fly the flag for professional copywriters, or we can distract ourselves with aesthetics. I’ve done both, and I can tell you with confidence that the former produces better work, more quickly, and with less hassle.

Further Reading on SmashingMag:

WordPress Contributors Propose Blocking FLoC in Core

WordPress contributors are proposing the project take an active position on Google’s Federated Learning of Cohorts (FLoC). This particular mechanism is Google’s alternative to third-party cookies that doesn’t require collecting users’ browsing history. The GitHub repository for FLoC explains how Google will group people together and label them using machine learning:

We plan to explore ways in which a browser can group together people with similar browsing habits, so that ad tech companies can observe the habits of large groups instead of the activity of individuals. Ad targeting could then be partly based on what group the person falls into.

Browsers would need a way to form clusters that are both useful and private: Useful by collecting people with similar enough interests and producing labels suitable for machine learning, and private by forming large clusters that don’t reveal information that’s too personal, when the clusters are created, or when they are used.

WordPress contributors are proposing blocking FLoC in core, citing the Electronic Frontier Foundation’s article titled “Google’s FLoC Is a Terrible Idea.”

“WordPress powers approximately 41% of the web – and this community can help combat racism, sexism, anti-LGBTQ+ discrimination and discrimination against those with mental illness with a few lines of code,” the proposal states.

One of the more controversial aspects of the original proposal was that it was spectacularly miscategorized as a security concern, clouding the issue at hand. It identified FLoC as a security issue for the sake of getting it into core on a more aggressive timeline, which was outlined as follows:

  1. Include the patch the next minor release, rather than waiting for the next major release;
  2. Back-port the patch to previous versions of WordPress.

The proposal was later revised to clarify that treating FLoC like a security concern referenced only the timeline of accelerated development and back-porting.

Although blocking FLoC seemed to have wide support in the comments on the post, the premature suggestion of treating it as a security concern weakened the proposal.

WordPress core committer Ryan McCue said that while he is in agreement with the overall sentiment, rolling it out like a security updatet would abuse users’ trust in automatic updates:

The implicit contract with users for security autoupdates is that they are used in order to protect the user from their site (data or codebase) being compromised imminently. This isn’t the case with FLoC, and may in some cases damage the site’s behaviour.

More concretely: as someone who operates a hosting service where we keep users up-to-date with security patches, this changes our approach substantially. Right now, we can confidently roll out security updates trusting the update has minimal effect outside of purely security changes, but breaching that barrier means that now scrutiny needs to be applied to every security update in order to avoid rolling out potentially breaking changes to our clients.

That erosion of trust would ultimately hurt WP’s users.

The proposal has started an active discussion with more than 100 commenters, including participation from the Chrome DevRel team who added more context on the current status of the experiment.

“It’s also worth noting that because this is an origin trial it means that nothing is set in stone — this is an experiment to gather feedback,” Chrome Developer lead Rowan Merewood said. “The API may change, the opt-out mechanism may change, the eligibility criteria may change. Any code changes relating to an origin trial should also be treated as temporary and experimental.”

Those who were critical of the proposal consider FLoC a personal privacy issue that is not WordPress’ problem to solve. Others believe a proposal to block FLoC is reactionary at this point, since Google has not yet finalized its FLoC experiment.

“Thinking about users… i.e. the readers of a blog, they deserve choice,” Andy Beard commented.

“They can choose which browser they use.
“They can choose settings in the browser.
“They can choose some overall options on a Google privacy site.
“They can install a multitude of plugins.

“Alternatively, if WordPress blocks FLoC by default, that actually removes a choice – the choice of a user to see more relevant advertising.”

Several participants in the discussion were opposed to FLoC but also not supportive of a WordPress core effort to block it.

“While I’m not pro-FLoC (and won’t have my browsers using it) I certainly wouldn’t expect a website to make the choice to opt-out for me, and I can’t see why the majority of WordPress users and people visiting WordPress sites would expect that either,” WordPress lead developer Dion Hulse commented.

“Perhaps more importantly, would WordPress also continue to opt out all future browser protocols too? Once you delve into blocking one, you’ve either got to block them all, or you’re playing favorites.”

Mika Epstein, who also expressed her opinion as anti-FLoC, said she is not in support of backporting a block due to the practicality of such an effort.

“If the decision is made to include this, I would support it as a filterable privacy enhancement only, not security,” Epstein said.

“That said, I do not support backporting with the precedent that we did not backport the GDPR exporting stuff. Having it exist as a plugin (there are three already) is sufficient for those who are on older versions. The undue strain of increased backporting needs to be minimized, not maximized in my opinion.”

Others commented on the harm to independent publishers whose main source of revenue is often advertising.

WordPress lead developer Helen Hou-Sandi requested the proposal be re-written to clarify the differences between disabling FLoC on a site level vs the browser level as a consumer. She also discouraged referring to the matter as a security issue and recommended the proposal’s proponents justify the work required to backport the block. Hou-Sandi recommended opening a trac ticket as a more appropriate avenue of discussion regarding core implementation and inclusion, as contributors have not yet reached a consensus.

The topic will be up for discussion at the next core developers’ chat on Wednesday, April 21, 2021. Representatives from the Chrome team will also be attending to answer any questions about FLoC.