Summary, Dev Chat, July 10, 2024

Start of the meeting in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/., facilitated by @joemcgill. 🔗 Agenda post.

Announcements

  • WordPress 6.6 RC3 was released on July 9. We are in a hard string freeze. Note that the dev-feedback and dev-reviewed workflow is required prior to committing to the 6.6 branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". (handbook reference).

Forthcoming Releases

Next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.: 6.6

We are currently in the WordPress 6.6 release cycle. WordPress 6.6 is scheduled for Tuesday, July 16. There will be a dry run of the release on Monday, July 15 which starts a 24-hour code freeze of the 6.6 branch.

We’re getting very close to the end of the road for this release cycle, which is exciting! 🎉

Discussion

As we’re at the end of the 6.6 release cycle, we prioritized items for this release.

@marybaum raised a discussion around the coordination of the release post and suggested putting together a shared space where folx can collaborate on sections of the post with shared assets, possibly starting in Figma and then moving to a P2P2 A free theme for WordPress, known for front-end posting, used by WordPress for development updates and project management. See our main development blog and other workgroup blogs. post. This is a new process starting with the 6.6 release, based on our new combination of microsite and About page, but also begins a precedent for 6.7 and beyond.

@marybaum confirmed there are now three main deliverables coming out of that one pool of copy and assets: microsite, About page, and the release post.

@colorful-tones and @ryelle provided links to relevant tickets and issues: this ticket is the main tracking issue, there’s also this one specifically for the about page, and this one for the page on w.org.

@marybaum is going to reach out to others on the 6.6 release squad to help coordinate the above efforts.

@joemcgill highlighted the planning post and call for volunteers for 6.7. @peterwilsoncc also mentioned on the agenda post that the #6-7-release-leads room has already been spun up so folks can start prepping for the next cycle.

@hellofromtonya noted that all of the tech leads for 6.7 are in APAC. @hellofromtonya and @joemcgill suggested checking with them if attempting to move the Dev Chat and release party times would be helpful during this release. @joemcgill said they will reach out to some release squad members for input and possibly put this on a future dev chat agenda. @audrasjb mentioned we also should take into account MC/systems availability during the release cycle for release parties in APAC.

Following the above discussion, @peterwilsoncc mentioned that the main release party’s timing will need to remain unchanged for practical reasons (more contributors available to test) but it would be good to do a few of the betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. releases in APAC. He also doesn’t think any of the tech leads have the level of MC access required to release packages so that would probably need to be organised.

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

Props to @joemcgill for proofreading.

#6-6, #core, #dev-chat, #summary

Recap Hallway Hangout: Section styles and other block style variation updates

On July 8th, 2024, contributors attended the Hallway Hangout: Section styles and other block style variation updates.

Attendees chatted about cool new features and handy tips for styling sections in WordPress 6.6. They also swapped stories and ideas on how to handle theme styles with section styles. The group shared their experiences and brainstormed ways to make pattern management and theme building in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ better. They stressed the need for smoother workflows, more user-friendly options, and greater efficiency, touching on challenges like tweaking blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. styles and setting default ones. They also tossed around some possible solutions, like breaking down partial files, registering block style variations, and using a JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file to nail down styles for default block variations.

Default Style selection

There was also a discussion about the need to be able to set a block style as the default for the content creator, so every time a particular block is added to the canvas the block style is applied automatically. This will help with curation efforts, and streamline’s content creation workflows. 

Interface overload for users

One challenge immediately clear to attendees was that the interface becomes heavily overloaded for users. How do you avoid having all the section styles on every group block? 

Currently, the block style variations that power the section styles are limited by the same constraints in theme.json. So they can only be assigned to a block type. Ideas discussed: 

  • Section / Block Style variations need more granular control to identify context. For instance, a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or an archive style would still show up in the editor for general group styles, or other container style blocks. They are not needed except in certain situations.  
  • There could be style variations that are hidden from the interface.
  • Use of a filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. similar to `blockEditor.useSetting.before` that allows you to conditionally display block supports based on context.

Discovery issue when using style variations to style patterns 

Another feature requestfeature request A feature request should generally begin the process in the ideas forum, on a mailing list, as a plugin, or brought to the attention of the core team, such as through scope meetings held for each major release. Unsolicited tickets of this variety are typically, therefore, discouraged. was to combine style variations with patterns. Instead of having a blue and a red pattern, create a section style but how would that surface for the user? And instead of editing the original patterns, change the style at a click of a button. 

One solution for this is to have only a few style variations that are aligned with the color palette of the site, so the buttons say blue, black, white, and gray. And then the user knows that they can apply a different color setting to the pattern and it would change predictably. The code example for such a system is on GitHub

This leaves the question of how a user would see the style variations when they add patterns, as there are no style variations preview.  

Watch the video for a more detailed discussion. Below you can also find a transcript of the recording.

Resources to learn more

Props to @greenshady for reviewing the post.

Transcript (via AI)

Computer, you are alright, so I’ll do the introductions again, just briefly. We are here to a hallway hang out on six and section styling and other block style variations. And, yeah, this is going to be, I’m handed over to Justin to kind of kick us off with some remarks and some , ideas, and questions. So in the chat, you can have your , just tell us where you’re from and , if you want to add the questions in the chat. But I think we have a small enough group that you just can unmute and ask your questions, that will be great. We also have here Aaron Robertshaw and Nick Diego and all the phenomenal block theme developers, so take it away. Justin,

All right. So hi everyone. Like usual, let’s try to make this a discussion where everyone can, you know, chime in with your questions, your issues you’ve already ran into. But the first thing I want to know, who has not tried out style, very section styles, or, like some updates to lot style variations in WordPress, 6.6 betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.. Or we’re at the release candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta)., yeah? Or is there anyone who hasn’t, yeah? So we’re all on the same okay? We have one person saying, I do all right, all right. So I think the best thing to do is maybe just do a really brief walkthrough of what we’re talking about. Just okay, we have a couple people who haven’t now, I think that’s the best thing to do. And all right, we do. I do have a blog post. We also have a developer hours where we covered some of this. If we can link those in the chat, someone and Okay, so section styles. This is what we’re saying. This is the new feature, kind of in WordPress, 6.62 style, like an entire section of content. In reality, it’s not much of a new feature as it is an extension of the existing block style variations system. So if you just look at my screen, you see I have, like, this big green, greenish background, green, blue, teal, whatever color that is. And you’ll notice, like, there’s it’s got white colors. And if I just scroll down my page, there’s a whole different color, you know, with a different green and, you know, different and if I keep scrolling, there’s a whole nother section. That’s kind of why it would like text. And if you also notice, like in some of these sections, like my button, colors change depending on what section you’re looking at, and anything nested within the section styles can be you can customize the style of those things too. So what we’re really talking about and with section styles is we’re just talking about the ability to style things in an entire section and the things that are nested within it, whether that’s elements or blocks, and they appear in the UIUI User interface, just like any other block style variation. So if we quickly look, I can switch to style two, style three, which is not a whole lot different in this thing, but style four is very different. So and if you kind of watch closer, you’ll see like the colors of the buttons and other things may change depending on the style. So we’re we were very much styling nested things and oh, I have zooms in my way on my screen. I’m trying to click. There we go. And these can also be created within your styles folder, your theme. I’ve actually organized these into like style slash block. And this is, for example, section one, and that works just like a theme JSON. There’s a few extra things. You can set multiple block types, and you can set both the title and a slug the slogan. Block types are very new. And then you have your your normal styles property, which you can add css. You can add colors, spacing elements, and you can go down, scrolled a little fast. You can like, specifically target, like a block. How can this case, post title? You cannot add. Settings, which is a question that came up this morning, but you can add styles. So there several other ways that are outlined in the article on how we can, you know, work with the this new system. Like you can still register VHP via php. You can even past, like a themes JSON, like object and PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. So where we, uh, I feel like that’s just like the really quick, uh, overview of what we’re talking about. Like I said, I want to make sure this is very much a discussion now, of like, What problems have you had? Or what it what have you, especially if you’ve been using this so far,

I have a question to just prompt discussion. Okay, as you’ve been building these, it looks like you’ve, you’ve kind of kept to color for the most part. Are there any kind of heuristics that you when you’re building section styles that you’d like to follow? You know, is it, you know, there’s certain types of styles that you like applying and using in Section styles? Yeah.

Um, so I actually have several examples. The ones I show were primarily color. I think that’s the most the best use case, because color I’m trying to that that tends to be the best use case. Let me look at some other examples where I have run into trouble. So this is, like a grid layout. It’s got pricing cards. This actually has, if you don’t know, this is one section style on the outside. This is one section style for each of these cards. And then there’s one section style for this, like background like this, like where the price is on the card here. Like there’s an entire other section style. But one of the things I ran into is some some of these, like, I have this border on this. I don’t like the border in all situations. So then I start thinking, Should I add, you know, so should my section style to automatically output a border, I don’t know, because it works in some situations. It doesn’t in others. In this case, I kind of cheated a little bit and just added I have a custom CSSCSS Cascading Style Sheets. class has global border that I can, you know, remove. I don’t, I haven’t figured that out. But yes, color is the primary thing I’m using them for. I think that works well across depending on how they’re used. But yeah, so there are situations where I don’t want that border. That’s just a problem I’ve run into and trying to solve that means having to go back from using, you know, a section style, to either using a custom class or actually using, you know, the border controls. My goal is to not ever have to touch these design tools at all. I don’t, I don’t think this. I know. I think it’s okay for users to touch that, but as a theme, we’re talking theme development here. I, I would, I would try to avoid using inline styles at all. There are some situations where you need to, like, I think padding, spacing, things like that are mostly okay, because those are not going to change. Like, for example, I have this screen card here, and I want to, I’m actually looking at the wrong I don’t click on the wrong thing. And so if I change this entire card style, like, my spacing is not going to change, right? I don’t need it to change, because this is one layout. So I think it’s okay to like style this card and like, if you wanted to come in and add, you know, whatever spacing on certain sections. And I think your fonts are usually okay. There may be situations where you want to style fonts for specific section styles, and I’ve done that as well. I think I have an example if we look so I use section styles also for things like my, I have a new mouse I’m using, so I’m I can scroll really fast, sorry. Like this is a section style, this little post byline here, or you might call it post metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress., or Dateline or something in your theme. So. The thing is that I don’t really care so much about colors. I care more about fonts. And there are situations where I will style, you know, nested, nested blocks for that. So this is using my meta style. I’d use that for comment like in the comment as well, for like the Comment author, but not in this particular theme. I don’t have it, but, and one I have where I have styled the like the specific author block. I think the use there’s just so many, there are so many use cases to cover. You can literally do anything you want to. And that’s kind of a double edged sword. What, what should you do and what you should not do? I would start with this new feature, starting with colors, just seeing what you can do, like with a background color and a foreground color or text color, and seeing how that affects, you know, other elements. So if we go back and look at section one for my theme, at least. So I started here. I started with, you know, custom background, custom color text. I also have some spacing that I can probably remove now. But then I thought, Oh, my captions in my main theme JSON are styled differently. Oh, I need to, like, I just use current color. And I’ve done that a lot, but there are situations you need to make sure to test everything, like, test your captions, test your citations, headings, of course, test your links and what their color should be. And then you’ll want to test blocks so it can get complicated very fast, just with colors alone. And so that’s when I say, start there, and then, like, make adjustments based on what your specific project needs. Alright. Would we have anything going on the chat or we have questions? Oh, what Justin said? Let’s see from Brian.

Well, I have a question. So when you go back and to one of the other ones, I see kind of six or seven or eight different styles in there. Are there really all different styles? Do you? Did you just kind of put them all in the style variations, and they’ll they’re all for all blocks or, or they’re all three container blocks, or, okay, also for others, yes,

so that’s a good question. In this situation. What you see on the group here? These are almost all what I would consider section styles. They are on container type blocks, like I have a I have them on a few I know some people probably wouldn’t recommend putting them on the query block, but generally on Container blocks, like, you know, group column, you know, columns, maybe media and text for Section styles and so all of these are for those sorts of block, container type blocks. And I’ve been trying to cut back. It would be nice for the theme I’m building. I’ve also been building previous to this feature. So I’m also, you see a lot of these. There’s probably some situations where I can get rid of some of these, and I have gotten rid of some. Like, I have one just for selling, like, the archive page header, like, so if you click on Justin Tadlock, you know, this is a style, but theoretically, I could probably just make that like, you know, this style too, which is very similar, you know, this got the same gray, you know, that’s one thing I could do. But I could also leave them separately. If I wanted to style them separately. That’s a project level decision. But I also think to really take advantage of this for like, from a UXUX User experience user perspective, it would probably help to cut back as much as you can on like these options, I feel like this, like, what is this? 12345, 10 options, that’s quite a bit, that’s a little bit of a choice overload.

Yeah, yeah.

I think Carolina has a similar question. So there’s, how do you avoid having all the section styles on every pro block?

And, yeah,

yeah, that’s my like, I wish I could have, I don’t know how to avoid that be I wish I could, like, remove this archive header, remove the site footer and site header, because they’re not needed, except for in very specific situations. And the reason I have those. Are because there’s no other mechanism and coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to style these, these, like these, pretty common sections and themes through theme JSON, other than, you know, maybe like some custom properties or stuff like block style variations are the best way to style those, those sections that are kind of one offs, like archive, header, site footer, site header. There’s a very much one off things. They don’t really need to be style variations, but there’s no I haven’t found a more ideal way of styling them without custom CSS and so on.

I just had an idea, yeah, because you know how with like patterns, you can do like inserter false or inserter hidden, so you can have a pattern that’s like part of the theme, but not represented in the UI. One of the things that I’ve done a ton with block styles is basically create the class. And this is not, this is not with section styles. This is just being CSS. Basically have, like, hidden, quote, unquote block styles that are only handled by the the style by the the class. Maybe it’s a terrible idea, but it’d be interesting if you could do a block or section style, or block style variation that was, like, hidden from the UI. So, like, the class could still be added, you could still register and theme by JSON, not theme of JSON, but in a JSON file, but it was just hidden from the UI. That’d be kind of interesting.

Yeah, I love it. We need a ticketticket Created for both bug reports and feature development on the bug tracker. right now. So, yeah, I mean, I have use cases for that sort of thing. And I mean, we’re seeing those use cases that work, and, you know, in real time here, like the archive header and like my site footer, like, say, site footer on this theme is like, got this grayish, you know? And I want that. I also want users to be able to style that, like, just change it to you if they want. So I don’t know I would like this for that. So let’s, let’s make a note of that for we need a ticket on maybe hidden blocks. Or, you know, it doesn’t necessarily need to be hidden block style variations. At least, needs to be some way to style things custom through theme, like a theme JSON, or, you know, that similar mechanism for whether that’s hidden or or just some other like, you know, property Within theme JSON or something. Yeah, great idea. Nick, I Yes, all right, looking at the chat a little bit, but yeah, use the hidden classes. Works already, and that does, yeah, you can use hidden classes. And I do a little bit of that, trying to think like I will add, one thing I do is, like custom properties, you know, under in theme J sign, you can add, like, I even have things handling, like custom elements, because, you know, core doesn’t, you know, I can’t style inline code, you know, through theme JSON, so I can do that. And that creates a, you know, custom class. And I could show you the custom class really quickly, so base elements, so scroll up and look for my code section. So in that creates, like these custom classes. I mean custom properties, I mean, and you could do that with class custom classes as well, so that, you know, all of these are generating the, you know, custom properties that are used in mycs style sheet. That’s kind of like a one way to get around some of those limitations. And I could very well do that with like, the archive header and site header and so on. And I have, and I’ve done those that way, until I moved them over to like, the like we have the section styles now. So I’ve moved like archive, archive header, site footer and site header over to this newer system, if that makes sense to everyone. All right,

so Aaron also mentioned that there is has been some discussion on defining a scope property in the theme JSON parcels that might allow filtering the context of the section styles, and I think that will be a really good, standardized way. But Erin, would you have by any chance the GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ discussion for that?

I would need to go digging for that one. Yeah. I. Can,

I think it was just hoping that you maybe have it just in front of you so

but what I can share there was the the general thinking was that to bring it in line with, like our templates and patterns, etc, that we could just sort of indicate more generally the context that a variation might actually apply. So it’s not a complete, powerful filtering mechanism, but it would be the next step or the next iteration, to build upon this feature,

to dovetail on that briefly, we do have the filter I’m putting in the chat. We do have the filter used for other things that allows you to, like, conditionally display block supports based on context. Like, you could have a button block that only shows specific color palette went inside of a group, or something like that. That’d be kind of cool. Like, if you had, like, if you knew that a group was inside of a cover block, that group would only have a certain set of blue section styles or whatever, using the context of based on where that block was, just as some prior art sharing that of a filter, but that’d be cool.

Yeah? Brian Gardner, what do you have?

Oh, that’s a loaded question,

yeah. Why did you raise your hand

so that I can personally ask Aaron to make sure that slashing thing can get pushed into RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). three. No, my encouragement, based on the way, more hours than I probably should have spent working on this, and several conversations with people who are even present on this call, is that Inception can happen very quickly with this, and that the at least, for me, from a product perspective, I’m trying to, like, narrow the scope at the beginning and just use it for one sort of application. Because you could just open this up and, like, you know, have a section style for this and the color stuff, like, all of a sudden it gets really confusing fast. And so for those who are exploring, I would just say to temper, like, the scope of your initial use of it until two things, one, you understand it better, but also more things get developed, and there’s more sort of support beyond just the 6.6 release, because there’s more coming from what I understand in terms of, you know, creating possible GUIs for like, editing the content of These styles through the dashboard, versus like code. So, yeah,

it’s a good point. Yes, so before Carolina, there’s also Tammy had the suggestion, so just bring them up to parity with patterns. I think Could you elaborate on that a bit

that was relating to when Nick was saying about the ability to hide and stuff. I was way, way ago, so I think Carolina’s probably in this time frame, rather than in the back show. Yeah,

sorry, I didn’t get to all right? Karina, so

this is a more of a wish list item. I would like to be able to quickly change my patterns, instead of having one red and one blue pattern, whether they’re synced or not, actually going to have to be synced the very day. And I would just click the button instead of going into having to edit the original pattern, for example, to change the colors in two or three locations. So it’s not only about checking whether this style is on a group, it’s inside a cover block. I want my whole section to be complete in a pattern, bottom part, but patterns first.

Yeah, Brian, you said you could speak to that.

Yeah. So thankfully, the Fourth of July holiday has afforded me some days to play with this. So I have updated my powder theme to essentially powder has always shipped with two different versions of patterns, white on black, black on white. So it’s made it very easy to work within a design system, to just wrap every pattern in a group. And my goal, even though I still may not do this, my goal, was to half the number of patterns and just basically apply section one, two or three to the pattern, and it would control it top to bottom. I don’t love the I love the simplicity of shipping half the code. But what I don’t like is that users don’t see that inside of like the pattern explorer, so there’s no way to show like every pattern I’ve got created, headers, footers, call to actions could essentially be four different flavors, right? White, black, gray and purple. I can insert a pattern and in one button, just as the video I showed, just change the whole pattern into the way I wanted to. But the users don’t see that when they go to add the pattern into the thing. So there’s a little bit of an education that says, add the pattern and then change the color, as opposed to seeing four different colors of each version in the pattern. Explore. Or and the only way to do that is to ship four times the amount of code, which isn’t ideal, but it also, from the marketing perspective, might be more appealing. So you kind of have that, that wrestling. But I’ve, you know, wrap everything in a in a group, and I’ve limited all of my section styles to just the group block. Like, my intent is to just say, this is basically a pattern Color Changer. Like, I don’t you know what I mean. So, yeah,

yeah, I’ve seen some of Brian’s use cases too. So, yeah, yeah, I don’t like the idea of shipping patterns that are basically the same code with just like one little aspect change, and then it does cramp the UI a little bit. I think, yeah, we do need some workflows in core, like with around how like themers are using this feature. And we’ll get more feedback, I’m sure. So definitely open tickets, you know, Gutenberg tickets around, like, your ideas and stuff, so we can, you know, talk them through, and then I have other people come through. I think that’s this an implementation problem, but we can, but the more like Gutenberg itself and core can, like, take care of, help us out there to be with the great Carolina you’re back up.

This is more about the reflection on you source, not being able to see the style the preview. So when you when you’re in the editor, you have your style buttons. You hover over the button, the preview is not good enough. And I believe there’s a suggestion to even remove the preview, which I’m against, because this is also one of my my pet peeves. However, you say that in English, pet peeves text in the button is not enough, right? I can’t fit my description for the style name on my button, and I can’t name them, style one, style two, style three, because it’s not enough context. It doesn’t tell anyone what style one is, unless you really you add it and then you have to go in and do it or whatever, because the preview doesn’t work, and if you add it again, you have to do these extra steps. So I would really like to see that part improve.

Yeah, plus one, yeah. Yeah. So it’s actually my comments basically mirror what Carolina just mentioned. I think that the I’m interested in how users, once things like powder go out in the world, in the world, and other examples, whether like, even in the in the upcoming 2025, theme that might include this functionality, like how users reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. to it, because it’s not that many themes use style variations, block style variations, like 2024, is a handful. Like, there’s like the asterisk for headings, and, you know, there’s like a list style. But like this concept of like, changing entire sections, changing the color of them from a user perspective, is very new. And so, like, the default is like, Okay, you go to the color, you change your background color, you change it, you know, you click through all the things and you update it that way. So I think this is a very new thing, not only from a theme development perspective, from a user perspective, and without improvements to the preview or the presentation of block styles. I’m curious how users are going to receive this and actually use it, and maybe things like powder, a great example. I think I like what Brian did with his naming convention, because the names are tied to the names of the colors in the color palette. So at least there’s a little bit of a mental model there where you can kind of tie, oh, oh, this is primary. Maybe that relates to color. Okay, you know. Okay, click primer. But I don’t like UI where it’s like, choose your own adventure. You just kind of are clicking things to figure out what they do. In the little experience that I have, like users are very reticent to click on something that they don’t know what’s going to change and so, and because these are such impactful changes, where you know, changing the visual esthetic of the entire section, new users might without having more context around what the button does, might be reticent to actually end up using the feature. So I think that there’s in future iterations and improvements to how block styles are visually displayed, I think would definitely go a long way in making the feature more user friendly. Yeah. So,

alright, yeah, agreed. Tammy,

yeah. For me, I think it, I don’t know if storybooks the answer or style, but storybook as but for me, it’s about stopping seeing it as a side panel that has things in, and start seeing it as theme design system. And because the problem of scaling of our interface, I go back to this problem is solved outside of WordPress in design systems. So if you want to see a different component and difference, it works in design systems. So it’s not a problem that hasn’t been solved outside our space, and it’s a language that has already been solved. So it’s about, probably, it definitely is about our interface changes, and it’s definitely about having a changing of the each component, and then talking like that, the theme component, and people knowing that they can change that each time. That is also part of that. I think, rather than seeing it at this side, I cheerfully would like both the preview and the block styles. I don’t think either those work for me. User Testing. I’ve seen so many people just I don’t think the previous solves it. I don’t think the buttons solve it. That whole thing be working. I honestly think it is more browse the styles as they are, pick them in a more like book format and design system, because that’s what has worked into time and more it. But I’m open to any hair brain schemes we want to have in between that. So yeah, but I do think it’s that like being able to see the thing and see it changing, and see that it’s got different changes. Could even just be that point one. See that it’s got like, four styles. You know, those little things like, this thing has four style changes. Boom. This thing has three style changes. Little, little things like that. We can start trying and see what people adapt to, I think, is really curious, but we start thinking more in the systems, and start being invested, like, the theme just ships with a couple of things, because that’s what we’re building, which I think is super fun.

Yeah, awesome. Do you want you want to go ahead and share Brian or,

yeah, if you all don’t mind, this is just more a demonstration of this, just in, like, the real world, because I know that, you know, Justin, you shared your kind of interpretation of it. And I think we’re all going to have different interpretations and executions. And I think sometimes seeing this in action actually, like, oh, okay, you know, because we could talk about it, we could read articles that show you how to do it. But I think until you connect those dots and see this in the real world, that’s why I wanted to share. So I’m just gonna that’s cool. So this is my theme, and using, I’m leveraging the tailwind color system inside of my theme. And so there’s 22 different variations, each one like that mirror up with the tailwind color. So I kind of am working within colors and shades, but in terms of the patterns themselves. So this sort of section is all wrapped in one group, and that group, as I click over here, has the base style. You can see it’s just basically the black on white. Now I have let me just do this really quick, but you can see, inside of every single variation. There’s there’s white, black, and then sort of three different shades of purple, and then what’s called a neutral. And so there’s corresponding, as Nick mentioned, I’ve created four different styles, one called base, which is what we see. And if you click contrast, then it just automatically knows how to change everything. And I’m using a lot of current color here. And then if you click on primary, then it becomes purple, and then neutral, and so on. Now to go a little more further, using kind of the button aspect of this, this is kind of similar where, if you click that, then the text changes to whites. But then you go here you can’t leave the button purple. So in this one, I change it to white, so you can start to see, hey, this is, you know, and then neutral is just like the lighter gray, so it’s very much like basin. So all my JSON files are very, very basic. Let me just, I’ll do this just for the sake of demons or not demonstrating, but, so I’ll drop this link after I’m done here. I don’t want to take up too much time, but this is basically the four different JSON files that are inside of powder. This is this has not shipped yet, so I’m waiting on 6.6 but the slugs are named 1234, so that the kind of aim towards a little bit of interoperability. But the UI part of it is for the user, right? Contrast, primary and neutral. So this is kind of just how I’ve chosen to at least explore it as it relates to the work that I’m doing.

Definitely, and I want to touch on it, because we talked about it a bit here as like naming. There is a ticket. There are two, as I mentioned earlier, there were two different like you seen in my demo. I had style one, style two, style three, and so I would not actually name those that way and like something that’s going to be in front of users. It would be something like what Brian has, base, contrast, primary, secondary, whatever your system is, but under the hood, the slug. So far, we’ve mostly agreed, I think, on like using section one, section two, section three. That way the this user can use, say, 2025 and then switch to your theme in those no matter what the title is, the slug is the same. And you know, they’ll be able to switch themes. Maybe we’ll straighten up some of the issues from the past with slugs and going forward, at least with, you know, these section of styles. But, yeah, don’t. Do not follow my example. Style one, style two, style three. I think that’s a horrible way to name things. That’s just for example. All right, anyone, like any issues folks running into so far, I have some I can share, but I want to hear from everyone else. Aaron,

this wasn’t so much an issue, but more perhaps a way of thinking. When you approach crafting your CSS, you’re not going to throw the kitchen sinkKitchen Sink When using the WYSIWYG (What You See Is What You Get) editor in WordPress, you can expand the capabilities to allow more options. This expanded area is called the "Kitchen Sink." at a single class or start nesting it deeply and then try and reuse that over and over, or nesting those classes within other classes, because you get conflicts naturally. These variations and section styles are just a set of CSS classes and styles. So the same things you would try to avoid when handcrafting CSS, avoid those same pitfalls when you’re thinking about these and when you’re crafting these section styles, if you think of them from the perspective as that they can be nested within each other or themself, then that’ll start to jog or see the thoughts about what styles might conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. and which ones you do need to consider, like links and buttons were mentioned before headings as well as another good example. So I just wanted to throw that out there, because I think that was sort of when I was crafting all of these test cases while implementing it that really helped, sort of just get things happening faster, and it became a lot smoother after that. So

I definitely agree keep those things in mind as you’re building them. Uh, Nick, yeah, I just had

this is kind of an open question. So because section styles are kind of a unique case of just block style variations, because they show up in the same UI, we run into the long standing issue of not being able to combine block style variations because they’re just CSS classes, right? And so I think that it poses an interesting situation where, if you are a theme developer, and you’ve already created style block, style variations for blocks, let’s say a group block. I think Brian, you had one that was shadow or something, and it adds, like, a unique style variation to the group block, and then you start implementing section styles, you start to get section styles feel like a very different thing than block style variations, even though they are kind of the same thing. So, and again, this is just something to I’ve had to think about, how do we handle that? You know, in future, WordPress releases an answer for it, but it is something that is interesting to think about. On that note. Real quick, I can jump in and I my daily pitch to get group blocks to support shadows. The only reason why I have that as a block style, so you have it as a block style, which means in the CSS, there’s a is style, dash, Shadow, or whatever the class is. Now, when it becomes an option, and I’ve already done this as well, when it becomes an actual option, when a block supports that, in other words, when group supports shadow, I will pull the UI part of that so users no longer. Get confused. I really don’t want to have like, a mixture of like, some like styles that do this one thing and then, like my four other ones. I really want to just protect that space just for those four, at least with the group block, and so I can pull that but if you leave the CSS class anybody who’s used it to date, and you could still actually use that class as well through, you know, additional CSS. So my hope is to, like, remove things, but also leave support for them, so anybody using them already to date, don’t all of a sudden, like, have that style gone and so. But I think these conversations where we talk about these things, and we do things like get on calls and pitch for group block shadows and have a bunch of people shake their heads and say, Yes, we should do that. Like, is helpful, because then those who are making those decisions or contributing that code realize that it’s an important thing for us to to ship so that we can, as users and distributors of, you know, products that are built on WordPress can get excited about and then make it a better user experience. So I like these calls, and I just Just one quick thing there. I just think that, like, yeah, we removed the shadow because you it will be in core eventually. But like, if you have, like, a really complicated block style that does stuff that theme dot JSON or JSON files just don’t support, like, you need custom CSS. You have a custom style, but you want to use that in conjunction with style variation. Block, style block, sorry, Section styles, you really can’t. And I think that there’s a good reason why you can’t, but I don’t know it, just it makes it the, at least the UI portion of it feel strange to me. So just something to think about in future iterations.

Yeah, I think to building, I mean, basically what Nick was saying, just said a little bit differently, is that we don’t have a way to create custom utility classes. We have, I mean, lot style variations I don’t really consider as like these smaller utility things that you can mix and match. We do have some utility things like, you know, custom, you know, font presets, spacing presets and so on. But we can’t add custom things, like, before shadow is there that we could not say. We could do something like Brian has done, like, you know, is style shadow, but we had to use the block style variation system to do that. I don’t think that’s to me that’s not always been the best use case, because there’s little one off things. You always end up wanting to mix them with other little one off things. And whereas I see like block style variations is more like you’re styling an entire component, um, instead of like a simple utility. So there’s like, two different use cases that people have used the things for, and they kind of compete. They don’t go well together, um, so, yeah, I’ve been anti like mixing, being able to choose multiple block style, block styles at once, just because it’s it’s going to able to break other use case, it would break some use cases, and it’d be great for for some so we were just kind of missing some system in court there. I feel like I don’t know what that might look like, concerns of UI and so on, but we do need, maybe we need, a new ticket that explores that. All right. Come on, folks of who tested any other things you’ve run into, tips, tricks or issues. All right, I can go back and share like something I think I touched on what Aaron was sharing.

I would want to ask Jessica, you have done a lot of explorations of the section styles and and you also are one of them. You have all your questions in the outreach channel. Did you get all your questions answered there? Or, because that’s very helpful to kind of put them asynchronous in the outreach channel. But I just want to make sure now that we have all the theme developers here. Did you get your questions answered satisfactorily?

Oh, what’s the point that? So yes, I get, got them answered, but like to the point of where I have to make a decision for the product, which is not to include them in a next update, and instead wait, because it will, it would be a bit troublesome for the backwards compatibility. So. So internally, we decided not to really push this forward yet, so probably maybe for in like half a year, or maybe a year, that would make sense. It’s but it has more to do with like this, bumping up the minimum requirement to 6.6 so you cannot ship any more updates to to your customers that are not, not specifically just for the 6.6 updates. So yeah, so that’s where I also like cut off the testing at this point, because, mean, there’s no much, not a good use case right now for an existing product with a user base pushing this forward at the spot.

And the reason is because all the section signs on a theme version, a theme JSON version three, that only comes with WordPress 6.6 and lower versions WordPress 6.5 and so on. They are not having those theme versions three in there, so you can’t use those things. Yeah,

can I just clarify something there? So the section styles themselves, the extensions of block style variations don’t rely on the version three of the theme, dot JSON schema, you can still use them without that. So effectively, you should be able to use the section styles with Gutenberg or 6.6 so will Gutenberg supports two prior versions of WordPress, so that should sort of be the minimum requirement that you’d need to leverage this feature.

Yeah, but then, in IDEA world, you wouldn’t need a Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party at that point, and you cannot force your customers to update to 6.6 ideally they should, but there are lots of use cases where it’s not possible or not wanted for whatever reason, and that’s where we are kind of stuck in, because if you put the theme to require 6.6 as minimum, it’s like you cannot ship any further updates. That’s the major problem at this point. Yep,

I’m reading. Brian cords has a question, and I’m not entirely sure. I’m trying to make sure I understand this. Is there support to add a block style JSON file that would define the styles for default variation of a block. The idea being, I could skip the using theme JSON for individual block styles completely. I mean, you don’t have to have you use theme JSON for block styles. You can just register them via php. I don’t know if that answers like you can just register them and via PHP, and if you need to add custom CSS elsewhere, you can do that. I’m sure you I’m sure Brian already knows that. So I feel like I’m missing something in the question

real quick. And I think I’m getting the question, Brian, let me just drop this and see if this is what you’re talking about. So in the spirit of having sections that needed to be white inside, like on a pricing table that had a black background, I needed to be able to set something to white, which is effectively the default, right? I actually created a style called base that is basically the white background with the black text, so that I could use that inside of other places. Because if I didn’t, what would happen is it would just inherit the outer one and, like, it would just be like a transparent, like, like group, like, if you think of like a card inside of a pricing table. And so you need, I needed a way to set that white. So I created a style called base, which means, technically, I don’t need the styles that are inside of that to be in theme JSON, because there’s no i No need for that. I don’t That was the question that you were asking. At least, at least, that’s maybe how I interpreted it. But,

yeah, I can clarify the question too, if that’s helpful. Um, I think that’s a perfect example. The cover block is another example where the default of the cover block is a little opinionated. It comes with changing your text color or something like that. So it would be amazing if I could just make if I could just style my cover block, my button, my out these things as those, like kind of partial JSON files, and not even go into theme JSON, because theme JSON is so big and unwieldy. But now I have this nice folder where I can have little separate files for all of my default, you know, basically the default block style variation, like a button, is another example where it’s a little opinionated. It would be great to style that, but not have to do it in theme JSON. I could use it in these partials. So I know that’s a bit outside of the scope of, like, the concept of the block style variations, but I’m just wondering, can you. Override default styles, or set a variation to be default using just the folder structure, not registering it in PHP,

not a current Not at the moment, yeah,

this kind of gets back to like, the question of like, could you have a structure? Again, I think that people have examples of this, like coded examples of this, where you basically take the theme dot json file and you can, like, break the whole thing out so you can have individual files for all the different blocks and, you know, styles and settings or whatever. So basically you take your, like, destructuring theme dome JSON into separate files, and then there’s, like, a compiler that compiles it into a full theme dome JSON file. I’ve seen a few examples of that. I’m not, I don’t have the mount hand, but I do think that would be a really cool way, because I feel like, at least for me, when I was doing like, per block style sheets, back when we couldn’t do as much in thing. But Jason, it’s very handy because you have all your different blocks broken out. Like, from like, a developer perspective, it’s very nice to have everything broken out. You’re not dealing with one massive file. But file. So I don’t know that’d be cool to see in the future.

In the short term, you can filter the theme dot JSON data. And so effectively, we take those partial files and we copy it into the relevant sections of the overall theme dot JSON file. So by the time it gets to the style generation, there are no partials anymore. So you could do the same thing that we’re doing with the other partials, but instead of them being inserted under the variations key, you’re inserting it under the block type, and you’d go from there. So it wouldn’t take much to jump to that?

Would there be a potential? Because if you register a block style variation, there is an is default argument when you registered in PHP? Is there eventually an idea that there would be a parity between the two different methods before I, like, make some janky work around, like Nick’s describing, which we have actually done with the partials and stuff, and you kind of regret, you regret going too far from court with that stuff.

Honestly, this is the first that I’m considering that default variation or style. So I think what we need there is a GitHub issue. We can thrash it out, and we’ll all settle on the best path forward from there. So I can’t answer that one straight away, sorry. Okay,

I’m over here. Just wanting to play around with that idea now, yeah, just break everything down and to partial files and get rid of my 2500 or whatever line, theme, JSON, this at least 2000

All right, coming up, we have five more minutes. So I think we have one last question that we could answer collectively, if anybody wants to raise their hands and we’ll have a comment

about things I

I’ll reflect a little bit on the lengthy theme, Jason. It’s a slight kind of side quest, but one of the things I’ve noticed is each release my theme, Jason is getting shorter, and I love that, because we’re getting more things, either in the UI or we’re getting more things that I don’t have to do lengthy custom things in the theme Jason. So I guess my point here is, if you find yourself creating giant theme Jason’s and maybe think about how the features that you’re using in there could be more compact, or could be a function or something like that. That’s one thing that I’m reflecting about on, like, how much customer stuff Am I putting in there? How could it be made into issues? So I think there’s also something in there of, like, what are we putting in there? But I personally try and not use CSS. I try and only put it in there, which is a whole me problem, I guess so much. Just

a reflection on that. I

guess I have a quick question for Aaron, since you’re here. So what is next? Is there anything on the roadmap for that you can speak to for 6.7 with regards to Section styles and kind of the this area of work.

Um, I probably can’t make specific promises on what will be in 6.7 but I can certainly speak to what the next steps are. So at the moment, in global styles, you’ll see in the UI, you’re only able to configure the variations top level style. So what’s applied to the block that you’ve assigned the section style, block style variation to? We need to find a way to allow configuration of those inner elements and those inner blocks. And it sort of is a nod to the no code. Editing of or creation of themes, or just provides quicker, easier ways to make those tweaks. So the catch there is, we could continue this drill down paradigm that we’ve got in that global styles, but once you start going to block types, to variations, to inner blocks or elements, and it keeps going down further and further. Now you get lost and you don’t know where you are, so we’ve got to solve that UX issue before we can go too far. There other things that were going to be explored were the composability of these section styles. So it’s already come up in this discussion whether we can mix and match, but obviously there’s a big can of worms there, like the order that you would apply these variations would completely change the results if there were overlapping or conflicting styles. So how do you flag that, avoid that, manage that? So there’s a lot to come out of that. So I think the first step is sort of consolidation of what we’ve got learn the lessons from 6.6 and that might inform the highest impact areas that we can enhance. But I would like to see some of those gaps closed in the UI, at least, so that you can get the job done there and we can improve it and move forward from there. I know there were some enhancements that were shelved during the process of getting to the point we’re at now. For the UI, whether we parse out color only variations and move those into the Color panel and typography only section, Styles would be moved under the typography panel, those sorts of things, and we can then provide different previews or cards that might reflect that better. So you’ll know the styles cards in the site editor that have sort of the color palette to it, or the typography these sorts of things. So we might be able to leverage those UI elements to just provide better visual cues as to what you’re actually looking at. So to your point earlier about randomly clicking and trying and that pick your own adventure, I think was the term you used. So to sort of avoid a little bit of that you can see a number of cards or pills on the UI, and you know that you’re looking for the blue one and it looks blue, or you’re looking for a serif font, well it’s reflected. So I think those sorts of improvements would really make a big difference. But there’s always more power, more flexibility that we can add, refine it. Yes, and then there’s a proposal about updating how we handle the global styles post type, and that unlocks a whole new world of possibilities there too. So with so much possibility, it’s a little hard to say what to watch out for next, because there’s a lot that could happen so exciting times there for sure.

Yeah, bigger. Thank you trying to tell with and you’re on mute. I’m

on mute. Yeah. Thank you so much, but you could go and close out the session as well. I just wanted to say thank you so much for being here and contributing to it, and it was a great discussion. And, yeah, what is the next thing that you want to discuss on a hallway hangout? Yeah, some people say, Okay, this is a good thing to do. So what would be your next topic? That’s all my question. You don’t have to answer. Now think about it, and we’ll talk about it in the outreach channel on the Ripper slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. Well, thanks everyone, and thank also Brian Gardner for sharing his Justin. Aaron Nick and everybody else Carolina. Have a wonderful evening, afternoon, morning and good night, Aaron, you’ll see you later. Bye, bye, bye.

Transcribed by https://otter.ai

#block-themes, #hallway-hangout, #summary

Performance Chat Summary: 9 July 2024

Meeting agenda here and the full chat log is available beginning here on Slack.

Announcements

  • Welcome to our new members of #core-performance
  • The next Performance Lab release will take place on Mon Jul 15, see https://github.com/WordPress/performance/milestones
  • WordPress 6.6 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 3 happening today, ahead of the main release scheduled for Tue Jul 16

Priority Items

  • WordPress performance TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets
    • Current release (WP 6.6)
    • Future release
  • Performance Lab pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party (and other performance plugins)
    • Auto-Sizes for Lazy-Loaded Images
    • Embed Optimizer
    • Image Prioritizer
    • Image Placeholders
    • Modern Image Formats
    • Optimization Detective
    • Performant Translations
    • Speculative Loading
  • Active priority projects

WordPress Performance Trac Tickets

Performance Lab Plugin (and other Performance Plugins)

  • @westonruter For Embed Optimizer, this PR will be ready for review this morning. I just need to add the description to detail the changes: https://github.com/WordPress/performance/pull/1302
    • This includes fundamental enhancements to Optimization Detective to make it much more powerful to be able to make optimizations to a document (e.g. what Embed Optimizer requires)
  • @westonruter I think the plugin with the most need is Modern Image Formats as there are a couple bugs needing to be fixed: https://github.com/WordPress/performance/milestone/59
  • @mukesh27 the updated sizes feature from auto-sizes is ready for this release, some final PRs ready for review:
    • PR #1335 – Plugin rename
    • PR #1329 – Merge feature branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". to trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.
  • @joemcgill there’s also a proposed name change for the Auto-Sizes plugin

Active Priority Projects

Improving the calculation of image size attributes

  • Discussed above

Improved template loading

  • @joemcgill The template loading work is mainly wrapped up in 6.6. There are a few minor follow-up issues that I think we’ll continue to track but I’ll work on summarizing next steps and closing up those GH issues.
    • The two things that are on my mind in the short term are:
      • Supporting the Plugin Check project as the Plugin Review team are working to get it integrated into their systems.
      • Improving our performance metrics for both CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and GB.

Plugin Check

  • @joemcgill For Plugin Check, I’d like to get more eyes on this conversation., which may end up being a requirement for them to do the integration

Open Floor

  • @mukesh27 Do we have any open issue for Improving our performance metrics for both Core and GB 
  • @joemcgill raised that @swissspidy mentioned one last week that included both misc improvements and shared performance tooling and asked about whether we should separate these issues https://github.com/WordPress/performance/issues/1093
    • I do think it would serve us well to put some focus on this early in the 6.7 cycle so we can more easily pinpoint which commits have server timing performance implications. That’s been a big challenge the past 2 releases. (In the GB repo specifically)
  • @pbearne I am thinking of suggesting that WP has an infrastructure release where we update/re-organize the PHPUnit tests etc. as without core committers actively making the changes it will never get done. The performance testing could be part of this
    • @joemcgill I would suggest proposing the infrastructure changes you have in mind and whether those become a release focus or not, could be secondary.

Our next chat will be held on Tuesday, July 16, 2024 at 15:00 UTC in the #core-performance channel in Slack.

#core-performance, #performance, #performance-chat, #summary

Developer Blog editorial meeting summary 4 July 2024

Summary of the WordPress Developer Blogblog (versus network, site) meeting, which took place in the  #core-dev-blog channel on the Make WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. Start of the meeting in Slack.

Attendees: @welcher @milana_cap, @magdalenapaciorek, @bcworkz (async) and @bph (as facilitator).

Last meeting notes: Developer Blog editorial meeting summary, 6 June 2024

Updates on the site

Thank you to @webcommsat who submitted the Amplification request to marketing celebrating 1000 subscribers of the Dev Blog

We now have a GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ team set up for Developer Blog Contributors. Every writer and reviewer will be part of it. That way, contributors can label issues, move them forward on the Project board and check off items from a Checklist, like the publishing checklist. We roll this out gradually, one contributor at a time. 

The design team is also working on creating Figma templates for featured images for the blog, which will help standardize and simplify the process of creating featured images.  

Newly published post since the last meeting: 

Since the last meeting, we published four articles.

Huge Thank you to the writer and reviewers! 

Project Status

The project board for Developer Blog content is on GitHub.

In review

In Progress:

Post on the To-do-list, assigned to writers.

Topics, approved, in need of a writer

If you are interested in taking on a topic from this list or know someone who would be a good person to write about them, comment on the Issue or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @bph in slack either in the #core-dev-blog channel or in a DM.

New Topics approved

All topic and ideas were approved.

The proposal to introduce video content was also discussed in more depth.

The production process is slightly different from the blog post process, as outlined in the proposal. That is also to make sure that an author doesn’t go through the production of a video and then have it not approved. The danger can be minimized by a multistep approval process of scrip and storyboard before production begins. A new creator could be asked to record a short section for review before going into full production, with opportunity to provide further feedback.

We won’t be able to provide video editing services, but other teams have some great guidelines and tips for creating videos, we can share with future video bloggers.

The proposal also outlines the need for branded assets for thumbnails, lower thirds and outro. We certainly collaborate with the design team, once there is bandwidth available.

The next step is that Ryan will submit an overview of all directives of the Interactivity APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. and provide an example of the first video. It will also be the test drive of the suggested process from which we can iterate afterward.

To summarize: Video content is approved in principle, the details need to be ironed out. Thank you to Ryan for the great work on the proposal and volunteering to be the first video blogger.

Next meeting: August 1, 2024, at 13:00 UTC in the #core-dev-blog channel

Props to @welcher for review of the post.

#meeting, #meta, #summary

Summary, Dev Chat, July 3, 2024

Start of the meeting in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/., facilitated by @mikachan. 🔗 Agenda post.

Announcements

  • WordPress 6.6 RC2 was released yesterday, on July 2. We are still in a hard string freeze. Note that the dev-feedback and dev-reviewed workflow is required prior to committing to the 6.6 branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". (handbook reference).
  • Gutenberg 18.7 was released earlier today.

A big thank you to everyone who is working on these releases!

Forthcoming Releases

Next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.: 6.6

We are currently in the WordPress 6.6 release cycle. See the Roadmap Post for more information about what is planned for this release. The 6.6 RC3 is scheduled for Tuesday, July 9.

Next maintenance release

No maintenance releases are currently being planned. @mikachan noted that based on the latest messages in the #6-5-release-leads channel, all seems good!

Next GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ release: 18.8

No discussion was had about the next Gutenberg release during this meeting.

Discussion

Nobody proposed any discussion topics for this week, so @mikachan addressed some follow-up tasks from our last meeting.

  • Can we extend the hard string freeze date to RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 3 for major releases?
    • @audrasjb did not have any further updates from last week.
    • @marybaum suggested that maybe RC 2 would be a possible milestone for string freeze
    • @mikachan asked if we need to update any handbook docs and suggested being more specific about this in the Release Candidate section, and note which release candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). triggers the hard string freeze.
  • Do we have further information on who can help progress a PR in the WordPress Importer repo?
    • @mikachan shared an update from @joemcgill that he’s reached out to some folks familiar with the WP Importer pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to clarify next steps for maintaining that plugin and is awaiting some feedback. We hope to have an update by next week.

Open Floor

Imdad suggested that we update the documentation about the Future Release milestone in TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress., but wasn’t around to clarify what would be helpful.

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

Props to @mikachan for proofreading.

#6-6, #6-6-release-leads, #core, #dev-chat, #summary

Performance Chat Summary: 2 July 2024

Meeting agenda here and the full chat log is available beginning here on Slack.

Announcements

  • Welcome to our new members of #core-performance
  • WordPress 6.6 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 2 happening today

Priority Items

  • WordPress performance TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets
    • Current release (WP 6.6)
    • Future release
  • Performance Lab pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party (and other performance plugins)
    • Auto-Sizes for Lazy-Loaded Images
    • Embed Optimizer
    • Image Prioritizer
    • Image Placeholders
    • Modern Image Formats
    • Optimization Detective
    • Performant Translations
    • Speculative Loading
  • Active priority projects

WordPress Performance Trac Tickets

  • @spacedmonkey flagging this Slack thread This cache is using networknetwork (versus site, blog) wide cache, when the cache should be site wide. @joemcgill was working on this
  • @adamsilverstein will be running some performance metrics against RC2 when it is out (I missed testing RC1 because I was away)

Performance Lab Plugin (and other Performance Plugins)

Active Priority Projects

Improving the calculation of image size attributes

Improved template loading

  • @thekt12 I was addressing feedback from Joe and also implementing unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. for https://github.com/WordPress/gutenberg/pull/62794/files ( had some issues with unit test, will connect with Joe to help here)

Open Floor

  • @adamsilverstein wanted to call attention to this post – https://make.wordpress.org/hosting/2024/06/19/the-image-revolution-avif-and-webp/ from @javiercasares and the hosting team about how hosts can enable AVIF / modern image support for their customers – and why they should consider doing it!
    • Only something like 30% of sites are on hosts that currently support AVIF so this is great to see
  • @pbearne We have a question on autoload and the setting APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. “Is there a way to set an option to not autoload if I am using Settings API?” I created a ticketticket Created for both bug reports and feature development on the bug tracker. for this #61522 – Is this something we should look at?
  • @pbearne And a second opinion on adding a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. option load to wp-adminadmin (and super admin)
    https://github.com/WordPress/wordpress-develop/commit/75d83b656609ad6092146fb7183b58beb859feae Is this the right action? Should we have one for Front-end?

Our next chat will be held on Tuesday, July 9, 2024 at 15:00 UTC in the #core-performance channel in Slack.

#core-performance, #performance, #performance-chat, #summary

Recap Hallway Hangout: Exploring Grid Layouts

The conversation revolved around challenges in creating grid layouts in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/, Attendees discussed ongoing experimentation with the grid system in web development, including recent changes to the manual mode including a recent experimental feature that changes manual mode to allow positioning grid items. They also addressed the challenges of using grid layouts with images of different aspect ratios, suggesting the use of a gallery blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to crop images to fit. Isabel Brison demonstrated the new feature coming to WordPress 6.6 and then shared what she has been working on since then. Behind the experimental flag, new features are implemented. 

Recording of Hallway Hangout. Transcript at the end of the post.

Covered topics

Coming to WordPress 6.6 (see also Dev Notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. Grid layout type)

  • Differences between auto and manual grid layouts in the Post Template, with auto resizing and manual having a fixed number of columns.
  • Ability to resize children of a grid, allowing for more flexibility in layout design.
  • Resize grid cells by pulling on handles, making it easier to visually change the look of the grid. The feature uses container queries to resize items inside the grid based on the size of the actual grid, rather than the viewport.

Working on for WordPress 6.7 

Most of the enhancements are still experimental, so you would need to enable the Grid Interactivity feature via the Gutenberg > Experiments screen. (or use this Playground instance to start testing)

  • New grid system in WordPress with manual positioning.
  • manually position items inside a grid.
  • define number of columns and rows in the grid in Auto mode, with items auto-placing in spaces
  • block movers in manual mode of grid, allowing for overlap and partial overlaps.
  • Grid layouts, auto and manual modes, and image resizing.
  • how manual grid mode has been updated to allow for more flexibility in defining grid layouts.
  • Add more responsiveness to manual grid mode, with minimum column width field for resizing and reflowing.
  • grid behavior with images, including resizing and rearranging.
  • Using a gallery block to display images with different aspect ratios, suggesting it can crop images to fit

Q & A

  • Demo: how to make an image partially overlap with text in a grid layout, but notes that there is no control over row height in the block editor.
  • Suggested: defining column width in fractions, rather than pixels 
  • Suggested: adding controls for aligning and justifying elements in the Grid Layouts

Shared resources: 

Announcements

About Grid Layouts

If you have further discussion or questions in context of this Hallway Hangout, you can leave a comment here or start chatting in the #outreach channel on SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

Props to @isabel_brison and @luminuu for review

Transcript (AI generated)

This component. So this is the hardware hangout on exploring grid layout. And Isabel Bryson is gonna demo what’s come what’s possible in WordPress 6.6 and we also when are going to discuss what’s coming in 6.7 so take it away. Isabel,

yes. Okay, so I’m going to share my screen, and what am I? Can you see my screen? Okay, yes, actually, not. Okay. So,

sukat, there

are many things that I can show you. I can’t actually, when big it said that I was going to show you all the cool layouts that you can do. I can’t actually show you all the cool layouts, because there’s so many things, so many different things that you can do in terms of layout with these basic tools that, oh, I was afraid of I say that I’m not a designer, so I’m doing my best here, but I’ll show you the tools that are available, and I can show you what they do. And then you can go and like, make all the cool layouts that you can think of with them. Okay, so first, what’s shipping in 6.6 I’m I think I’m just gonna pop that over there. Okay, what’s shipping in 6.6 is a grid block which was experimental in the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party for quite a while, I’m going to say a few months, maybe even longer than that, but we’ve all we’ve enhanced it. So for 6.6 the gridlock has a bit more functionality than it did up until recently, in the plugin. And I’m not going to say we’re shipping a grid layout, because that the actual layout had already shipped. So the layout has been in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. The layout block support has been in core since 6.2 or 6.3 I think, and it’s just been available as something that you could add to any custom block that you might build. And there was one, there was one block using it so far, which is the post template block. So post template has a sort of list variant and the grid variant, and that grid variant was created with the grid layout, but now we have a grid block, which is, it’s basically just a variation of the group block, and it creates a grid layout. So you can, you can add it. So when you gonna just go here, you can, you can type a group and and you’ll see the grid as one of the featured layouts, featured variations of the group. Or you can just directly type grid from the inserter, and it’ll appear. And I’m just going to show you the ones I’ve already got ready here. So the grid that was in the plugin until recently, only had, really only two options, which was auto. The Auto option will create a grid with as many columns as will fit in in the container given a minimum column width. And that’s the sort of default. The default What should I say? It’s 9pm words are failing me. So the default state of the grid is this auto layout, and it will resize automatically. So when, when your grid container becomes smaller, you’ll have as many columns as will fit in there, given that the minimum width is, in this case, it’s 15 REM. But it could be anything. It could be in pixels. It could be an M or REM, okay. And then you have the other option, which is manual, which are is slightly different, because you for the manual grid, you’ll define a number of columns, and the grid will always have that number of columns no matter what size it is. So you can CCC, this is the manual grid. So in comparison with the auto grid, which resizes and the blocks reflow. The manual grid will will always have the same number of columns. And in addition to that, so this is these, these sort of two manual, auto variations were the ones that were initially shipped in the block layout support. And the the new, the new, new thing that we did for 6.6 is the ability to resize the children of the grid. So before you could only have you can only have a grid with items, basically with items only with having the span of one column and one row. So each. Item would just fit neatly into one grid cell, and anything else that you wanted to do on top of that, you’d have to basically write your custom CSSCSS Cascading Style Sheets., which is possible, but it’s a bit of a pain. And that’s not what the block editors of app you want to be able to do stuff with the UIUI User interface. And so we came up with, not, well, we, I said, basically, I and one of my colleagues, Rob Anderson, we too, worked on this for few months, up to 6.6 so that’s the particular we that. I mean when I say we, in this case, and we created this thing, this sort of these resize handles, where you can actually change the size of the block by pulling on the handles, and it will become bigger or smaller as you resize it with the handles. So that’s sort of a handy way of like being able to visually change the whole sort of look of the grid and play around and move things around stuff. Yeah, so that’s, I guess, the so to make, to make that workable. I don’t know if you can see because it doesn’t have very high contrast, but hopefully you can see that there are little grid lines visible. So in addition to the handles, the handles are more visible because they have this sort of bright blue color, but there are these sort of thinner grayish grid lines that are running through the whole grid. And those are, those are that they show you what the tracks of the grid are and how many cells the item that you have is taking up. Yeah, so pretty much. I mean, this is what’s going to ship in, 6.6 I’d add that this is kind of a detail when you have them. So the auto grid that reflows when you resize the screen, it’s sort of, there’s a little bit of responsive behavior built into it, so that the items that span multiple columns and rows will also resize as you resize the grid. Because if that didn’t happen, you’d end up with a very, very messy layout. So that’s we just built that in to sort of so that it would work a bit more efficiently. And that is, if you’re curious about that sort of thing, we built that behavior using Container queries. And so the items inside a grid will resize depending not on the size of the viewport, but on the size of the actual grid. So if you stick this grid into, say, a roadblock that has other things in it, and suddenly it becomes really small, then the items will reflow inside the grid. Yeah. So this, I’m pretty much this is what’s shipping in, 6.6 does anyone have any questions at this point? I

Are you big? You’re muted so

we don’t have any questions mute in the chat, but if you have any question, just be free and unmute yourself and just so you don’t have to type it, it’s probably easier. This is a highway hand, so it’s not as strictly structured as a developer. So you’re welcome to,

yeah, yeah. I mean, please, if there’s anything that you don’t know, what you’re wondering, if it’s possible to do this or that, please, please ask. Because I’ve let I’ve been working on this thing for so long that I can no longer see the things which might be obvious to other people. It’s like, oh, that’s not intuitive. Or like, how do you do this? Or can you do that? I’m like, you know, I’ll probably forget to say stuff. So please ask all the questions that you might have.

Yeah, I have a question. So container query are relatively new for browsers, right? Are they now supported by every browser? Yeah,

they’ve got decent support. Let me see actually, do we have, can I use contain the query? So there we go, can I use container queries? Okay, it doesn’t look too bad. It’s 90, almost 92% of browsers. So the thing is, yeah. And the thing is this, the thinking behind using Container queries in this particular instance is that, are they? If a browser doesn’t support them, they’ll just not work. And then any items that have, you know, multiple column span will sort of throw off the the layout of the grid a bit. Because what happens so when you have a grid, what. Where a certain number of columns is defined. And when you have this sort of auto reflowing grid, say, you know, you say minimum column width is 15 REM, and then the window starts going down, and the grid becomes smaller. Then, then, say, becomes smaller than 30 REM. So it can’t, it really can’t fit two columns in anymore, so it’d go down to one column. But if an item inside that grid has a spat is spanning more than one column, then the grid goes, Ah, I can’t go down to one column because I have a multi column item in here. And so it does this weird, dodgy thing where it keeps the first column with the width that you that you stipulated. So it’ll be like a 15 REM column, and then it’ll create like an a second auto column. But that column will not have 15 REM because that no longer fits, and so it’ll just be like a very narrow second column. And so this means that layouts can look extremely weird. And that was the reason why we thought, let’s do a container query, because you never know where, where the grid’s going to be. And so this can happen, like, if you’re using a grid inside another container, then media queries won’t really do the job there. And so container query was the best way to solve the problem. And I guess for the small percentage of browsers that don’t support it, I mean, the worst that can happen is the layout will look slightly off. You won’t lose any content. All the blocks will still be displayed. It’s just there. Some might be bigger than others. You know, it might not be of a uniform size sort of thing.

Excellent. Any other question.

Nope. Keep on going.

Okay, so, um, I want to also show you the stuff that I’m really excited about right now, which is what I’ve been building in the past few days, which is what is hopefully going to ship with, 6.7 now, I say hopefully, because you never know this is WordPress, and this thing that we’re Building is highly experimental. So the first part of it is, and I think the biggest piece here, which is what we in. I think, I mean, when we started working on this sort of multi span thing, we thought it would be really neat to get this into 6.6 but then it became obvious that we wouldn’t have time to make it stable. It’s pretty complex thing to build, so now we hopefully targeting it, targeting it at 6.7 and that is the ability to position items inside the grid. So I can show you what I mean here. So this is what I’m showing you now. Is in Gutenberg trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision., but it’s behind an experiment flag, so you can go, where are we? Okay, so you, you know you’re in here. You’ve got the Gutenberg plugin. You open up this experiments page, and you select, you check this box which says grid interactivity, and you save it, and then you go back to your editor, and you can see all the new stuff that was merged yesterday in the pull request. And it’s going to so the RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). for 18.7 was just today, so this is going to be behind that experiment flag in 18.7 for anyone who wants to try. So what we have here is a grid. Yep, this is a grid, and it’s set to manual. You’ll notice that beside the column control, now there’s a row control in here, so you can define the number of columns and rows that you want. And these grid items are not positioned as they usually are on other grids. So in the grids that we saw previously, all the grid items are sort of side by side. And if you if I make this one smaller, then something else will flow in and take its place. It’s there’s never an empty space in this grid. The items all sort of follow on another, so they’re being auto placed inside the grid. And now what we have is the ability to place items manually in certain parts of the grid. So you could grab one of these and move it somewhere else, or you can use these. We change the block movers a bit when you’re inside this manual mode of grid. And so you can actually use the block movers to move up, move left, move down. You can move things on top of other things, which can be really confusing. If the blocks are precisely the same size, it’s this is one of the things that I’m hoping that we’ll get plenty of testing and feedback on. And folks. Will, you know, give us their opinions on if it works well, because we do want to provide the ability for blocks to overlap other blocks, right? Because you could, you could maybe have a really big block, and then maybe you want this block to fit on top of, oh, wait, that went under. This shoe is handy when you’re doing this sort of thing, because you can move things in markup order. Wait, where are we? Where’s the other block? Okay, see, this is one of those things that is basically the reason why this is an experiment. Okay, so where did you go. So we haven’t got the interaction 100% right here. I reckon this could still use some work. Okay, so say this, this picture takes up four cells, and I can drag this picture, maybe put it on top of that one. And so you can have an overlap, and you can have sort of partial overlaps, because maybe this picture could be a bit bigger, too, and then it were what happened there was supposed to overlap. The other one. Never mind smoking a bit buggy. Okay, still an experiment. This is what happens when you have experiments. They’re usually not very stable, but it’s super exciting, because this can allow you to do almost anything. You can create all sorts of like, really cool layouts with this. So this, I beg you please go and test this and write issues if you come across bugs and tell me how we can improve it. Because this really needs, I think this really needs some real world use. And and folks going, Oh, hey, this doesn’t work. Or maybe it should do this instead. Or maybe we could add this functionality, and it would help a lot. You know, that sort of feedback is really useful. And so auto So, yeah, so what? What’s happening here, basically, is we, we hijacked that manual mode where you previously you would only define the number of columns, and we make it work in a way that you can now place all the grid cells wherever you like. The auto mode is still the same as it was. I think this is this grid is in auto mode. Yeah, that’s in auto mode. So auto mode still works the same. It’s still resizable. Uh, manual mode is not resizable. But there is a pull request in progress at this very moment that I would also ask you to check out and test if you’re feeling adventurous, and that is a pull request that will add, it’s a bit more responsiveness to this, to this, so I can show you that. Ah, yeah, this is the one that has the recycling I’ve got, like branches in different tabs, trying not to get confused with which is which. Okay, so in this pull request, this is in progress so highly, highly unstable, I’m hoping that maybe it can be merged behind the experimental flag in the next few days to see if more folks might be able to test it. So this is so still our manual grid with our items positioned wherever we like, but now you’ll see that in addition to the columns and rows, we also have a minimum Column Width field, and that allows us to define a minimum column width, which, in addition to the number of columns, means that our grid will always have maximum number of columns, whatever we define. But minimum column width means that when the columns become less than that width, they will resize and reflow, and so you’ll end up with basically a one column grid. And the other thing is, we’re experimenting with this so that folks can still have a way of defining a grid with fixed number of columns, like the manual mode that is currently in core and about to ship in 6.6 where you can only define the number of columns. You can’t position the elements. We have kind of moved that into auto mode, and so there’s an in auto you now can define number of columns, and you can define minimum column width, and if you define both, you get maximum number of columns that you defined, and the minimum width means that they’ll break and reflow. Or you can just wipe the minimum column width and you’ll just have the number of columns, and that means that they won’t reflow, which is the current manual mode, or you can just define minimum column width, and you can not define any columns. And then, okay, what happened? There? Zero columns? Uh huh. This might be a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority., as I said, highly unstable. Let me make a note of that before I forget, columns should be resettable to the intent is that you can have, you know, just minimum column. It’s defined, and it will give you as many columns as fit on the on the window or in the container. Yeah. So that is still in progress, and that’s like the latest highly experimental thing. Other things that are coming. Is there a question? I see a hand, hi? Yes,

I have a quick question. Hi. I had noticed that all of the images you’re using are landscape images. Are they also all, all of them the same pixel resolution as well, pixel dimensions.

Ah, that’s a good question. They probably are, because at some point I just saved a bunch of pictures from my phone into my computer to use test images. But did were you wondering what this might look like with a different, reshaped image or vertical

right either in the middle, either introducing both landscape and portrait into the same grid? Yes.

So what happens there is, let’s say I replace one of these image. Replace, okay, replace. I do have There we go. That’s a vertical image. Yes. And so what happens is, this is sort of default grid behavior. The grid rows are going to assume whatever the size of the biggest element in them is. And so if you have one vertical image and a bunch of horizontal ones in in the same grid row, then the horizontal ones might look a bit odd, but what you can do is you can make that one take up two rows. Okay. Now these rows look huge. What is going on here? I think this might look better if that were, yeah, so you can kind of play with it. So if you wanted this to look really wanted the images to sort of line up really well, you’d probably be better off using a gallery block, because the images inside the gallery block can be sort of cropped to fit, and they always look all right. And the gallery block isn’t using grid yet, but that’s something that I hope will be able to change in a little while. So there’s actually, there’s, there’s an experimental PR that I haven’t worked on for a while. I had it up here on playground. That’s what a gallery block would look like if it were using grid. And I hope that this link still works. Okay, yeah, and so this would be a grid where each image actually occupies multiple columns and rows, so that we can sort of distribute them around in a way that doesn’t look too even. So they’re all sort of different sizes, and it looks pretty organic. And these images are a mix of vertical and horizontal. Say, for instance, this image here originally was horizontal, but the thing that the gallery does to the images inside it is you have, I think it might so that’s the gallery block, right? I can never find my way around when it’s just like, so there’s a setting crop images to fit. Yes, it was right here in front of you. So if you don’t crop images to fit in the gallery, they’ll just however, you know they’ll have whatever aspect ratio they usually have, but you can crop them to fit, and they’ll suddenly look very pretty. So, yeah, so in the case of having different images with different aspect ratios, that is probably what I’d recommend, although you can also try. I mean, I’m using images for the gridlock because I had to have some content for the demo. And this is what, you know, I like cat pictures, and so I’m going to use cat pictures, yeah. But yeah. And as I said, I mean, I’m not really a designer, so I’m sure there are loads more use cases, so more interesting and useful,

yeah? So Hans get asked if if it possible to retry this issue. Well, Hans, good. Which issue was that? Was it that overlapping issue that you so you can try to reproduce it?

Which? Oh, wait, which? Which issue was? Yeah. It, I

don’t know. I’m scared. Could you unmute yourself and try that again?

Yes, this issue you showed some time before, where you write on the issue on, yes, my English skirts are very bad.

Where was it the issue that, uh, well, that’s another one. That’s a known issue, actually. So interestingly enough, when the grid visualizer goes slightly off screen, this second horizontal scroll bar appears. I’m trying to figure out why, why that happens. Haven’t figured it out yet. Okay, so this kind of went off a bit when we added this portrait image, that the issue that I made a note of earlier was not being able to remove the number of columns from here, it just assumes that there’s always one column minimum, that that shouldn’t happen. We should be able to remove the number of columns and it will just act like, like auto mode currently acts, which is, let me see if I have Okay. It seems

as a issue that Burgett has written the chat I think,

oh, okay, so that’s a PR.

Where’s the chat? Yeah,

I just shared the PR link to your manual placement to set manual grid mode and our responsive behavior in both modes.

Oh, thank you. 62777, yeah, that’s actually okay. Yes, I should actually share the link to, where is it? Improvements to grid layout? Yes, this is the tracking issue. So there are a bunch of known bugs and known enhancements, well, things that we want to build. So what we have here in the list of things that we want to build for 6.7 is, apart from the positioning, being able to make both kinds of grid responses increase it fund a little bit on that. Okay, thank you. So, so what we have is, apart from the making responsive, which is this PR in progress that I showed to you, it’s a bit flaky. Never mind. It’ll be better before it’s an experiment, yeah. And what we also want to do is allow dragging blocks from outside the grid, which you currently can’t drag them into a specific position. And that’s that’s very annoying. We need to get that to work and also allow adding a new block to any position. So say you’re in here, you’ve got empty grid cells. You should be able to click on one of these grid cells, and an inserter would appear, and you’d be able to add any block in there and that. I think that’s probably the most important feature, if we think about it, because if you consider that, say, if you had a grid that was sort of like container block for a whole template, you could potentially build a whole template just by sort of clicking and dragging create the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and then create so that would actually be a really cool way of building templates. If it well, if we can get it, we will get it when we get it to work seamlessly, yeah. So that’s one of the things, yep. And then there’s some not quite sure how lists you should behave, because ListView gives you a list of blocks in markup order. Currently, if you drag and drop in the ListView, it changes the markup order. If the block has a position, it won’t change it visually, which is really weird. So we need to fix that, improve the design of the block movers when the grid is in manual mode. Yeah, that’s them. So having these block movers in manual mode, having basically four buttons, which is like, move up, move down, move left, move right. Maybe not great. Maybe it should be a sort of arrangement like you have on the keyboard, where you have left, right, top, bottom, one on top of the other, that sort of thing. By the way, if you’re wondering what this looks like with actual icons, I can show you. I always have button text labels enabled because I get really confused with the icons. They all look the same to me. But yeah, so basically, right now, this is four arrows each pointing in whatever direction. So it doesn’t look great. We probably need to improve that. Text labels going again, and what else do we have on the list?

Improving them? Movers bug causing double scrollbar. Yes, we know about that one. And then there’s a few code improvements to be done that won’t really affect the interaction. If you are yet. I’ll have to add that columns should be resell. I’ll just work on that on the PR. I don’t think it’s worth adding to this list because it’s, it’s sort of part of that PR that I’m working on right now, if you find anything else with with the stuff that’s already merged into trunk. So what’s in the plugin behind that experiment flag? If you find anything else that’s dodgy, or if you have any ideas for other functionality that might be useful here, please, please create an issue or add a comment to this tracking issue, either way, you know, like, just let us know about it

cool. So are there additional questions, or if that was too fast, do you want Isabel to kind of repeat some of that, I think we can ask her. So for that, I saw that you wanted to have one picture overlap the others. Is that also possible with a different block? So if I have a picture, well, I know there’s a group block or a cover block, where I can do particular layering. But is there a sensor to just put a paragraph on top of that image? Or,

yeah, I mean, you could say I have paragraph here, and I could potentially put this on top of an image, okay, yeah, or it could just partially overlap. If I had a big image, the paragraph might be like, if I have an image occupying these four grid cells, then maybe that paragraph, oh, I just resized the paragraph. See, this is not super

intuitive. Yeah, it’s hard to kind of aim for it,

and then I have to try and resize the image. And then, yeah, I guess I could move it down, or I could move it, yeah, right,

yeah. So gives a little bit more positioning, yeah? So I’m not sure what the I’m not sure what advantage would be, but it’s just kind of the idea to be able to do that minimal,

yeah, I mean, you do already have the cover block. I guess I think it might be more. So I did this little experiment with images, and I just had a bunch of PNGs with with the background cut out, and so I was just sort of playing around with them and and I put them inside the grid, so each of these is occupying multiple grid cells, and that’s how you can make them kind of overlap with each other. And I was testing this and seeing what it would look like if that so I could show you here, maybe it’s easier. So the top one is not responsive. The grid cells always stay in the same place in relation to one another. So you can make it go really small. It kind of it’s weird, because the rows don’t really change their height. I think one thing that might be interesting would be to have a control for the row height to like, to be able to to set a specific row height. But then, yeah, I keep working on this, I keep coming up against what I think is sort of the hard limits of not having customizable responsive behavior in the block editor, because you can do so much stuff, and it’s kind of like the bottom this bottom image here, I made that responsive. And so it’s kind of interesting, because it gets to a certain size, and things start piling on top of one another, and that works, but you don’t really have much control over it. And so if you do want that finer grained control, then we really, in the end, we’ll need to have some sort of of functionality whereby you can define, if not break points, define sort of sizes. I don’t know. I’m not quite sure what that might look like, but I think this, this is interesting work to do, because it’s really, you know, this is as far as you can go with grid, pretty much. And you can maybe tweak one or another thing, but you can’t get finer grain control than this.

Yeah, like that has this population on the picture. Yeah.

I have a question. Yes, Jessica, have you thought of implementing the fraction unit? So the FR unit for grid specifically, because now it’s only pixels rem and M,

we will. I don’t think I mean with we have column numbers for the controls. You mean we have column numbers and we have the minimum column width needs to have a number like, that’s in, that’s in sort of an absolute unit, yeah. So it does. So the grid itself, if we look at the rule, what we have here uses, so this is repeating five columns, and it uses a min, max of 011, fraction. And that’s because it’s not resizable, so that if the minimum size is zero, then it’ll always have five columns, whereas the other grid under it has a slightly different rule. This is a bit more I’m not sure if you can see that, try, like, make that bigger. So here, this rule has a repeat, but it’s auto fill. And it has this very, very sort of hacky looking computation in it, which goes, get the, you know, min max will be, sort of Max, 120 pixels, which is, I think, what I added in minimum column width. And then it’s, sort of, it grabs the number of columns that you define as the maximum number of columns, and it uses it to make sure that this never goes over whatever number of columns you defined here as a maximum, which I think here is five, but it can go under that number of columns if because it’s got A minimum width. So, yeah. So, so we do,

let’s say if I wanted a column to have a width of two fractions. So that’s currently not possible without writing x or CSS. No,

but I don’t think, okay. I mean, that would make sense if we had a way to define each column individually, is that what you’re getting at? Because, potentially, yes, yeah, okay, then you basically have to write out the whole rule, really. So if you’re saying, like, if you could customize grid template columns, like you can when you’re writing CSS, and you can just go, you know, one fraction, two fractions, 100 pixels, and you can have three columns with all different sizes. Ah, I yeah, I’m not sure that’s, I don’t think, well, that’s not something that you can sort of translate into UI. I don’t think that would always be down to writing rules at that sort of level of fine grainedness, because otherwise the fractions are sort of relative to each other, so they also behave a bit weirdly. But like so if you wanted, I don’t know, I think basically I don’t know I’d have to, I’d have to have, like, a specific like, this is the CSS I want to write, sort of thing, and try to figure out if, if we could, but I think at one point, it only makes sense to create UI for this up to a certain point. And if you’re what you’re trying to do is, I want this grid that’s very specific, and it has like a 16 REM column, and then the rest is sort of fractions, but they’re not all the same size, like one is one fraction, and the other is two and the other then at that point, I think you really have to write the CSS, because it would be really hard to translate that into controls. That the goal with the controls is that people who can’t write CSS can understand them and can work with like if the controls are basically write the CSS that you want in here, then at that point, maybe it doesn’t make sense. Maybe we should just write the CSS.

No, that’s totally okay. I think this is the this is the hard part of implementing such a feature, because you have to first think of like, as you said, the end users who have no idea how CSS works. And then also, I come with my question from a more advanced view as a developer, maybe from an enterprise project or such. So there’s always this big gap in between those worlds, and I think it’s kind of hard there to, like, decide, okay, what goes what’s possible, and what makes sense, and what should be kind of maybe an extension, or have Some, some possibility to extend existing features and, like, overwrite them with, I don’t know, somewhere in the editor, or even in theme JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., or somewhere else where it’s not accessible by the end user. Yeah,

and that makes a lot of sense, and particularly for Enterprise. Use cases. Now I’m thinking, for instance, with some of these controls, it might be a good idea to have a way to disable them. So if you’re building your enterprise website and you don’t want your users to be messing around with column spans or changing the type of grid, maybe you can hide those controls so only the theme developer has access to them, and not the end user. So that’s one thing. We’ve already done that for a couple of layout controls, and I think we might want to to do that for probably most of them, to give. To give. What website owners and theme creators for enterprise use cases are tools that they can use to basically disable all the foot guns that we have for less advanced users in the editor.

Yeah. Sounds good. You

Well, yeah, I like that. That function name kind of remove foot guns so people can shoot themselves in the foot. Yeah,

yeah. I think it’s, it’s good, like, I think in principle, there should be ways of, sort of gating especially advanced functionality, yeah. I mean having, having ways of building more custom grids, potentially, yeah, and that’s something that could also make sense for an enterprise. Yes, it’s also something to think about.

All right, yeah, so, um, thank you much for sharing. Do I have any other Do you want to show something else?

Uh, no, I’m good. I think I can stop sharing my screen now, if nobody has any more questions,

yeah, I’m scared. Jessica, do you have any more questions?

Maybe one more about another fairly specific developer question. Have you thought of adding possibilities for the justify and align properties that you have with grid so you can align those elements specifically.

Yes, that would actually be a good addition. I’m thinking, I don’t think there’s an issue for it. I’m pretty sure there isn’t, or I would have come across it by now. But yeah, I think that’s that’s definitely something that should be added.

I mean, because we have this controls already with the regular group block, but the row and, yeah, what’s it called stack?

Stack, block, row and stack, yeah, which are variations of Flex Layout? So, yeah, I think the same controls for grid would make sense. And I think we’ll, we’ll have to build them in sooner or later, hopefully sooner.

Excellent. Also, if

anyone is a developer and is interested in working on these things, because basically, up until now, it’s been myself and Rob. We’ve just been doing all

the work. I thought it would be actually, Lauren, I did not expect it’s only two of you working on this. So for that, yes, it’s pretty amazing work.

This is mainly why layout has been so slow to evolve. It’s like there’s not a lot of people working on it. And, I

mean, that’s what you don’t see usually. So I’m in other spheres. And of course, I have my own work to do, so I’m just partially always looking at things and seeing, like, is there progress or is there no progress? So these are information that’s often like falling, falling behind, and you just don’t notice until either someone tells you, or you’ll get to know what the actual situation is.

Yeah, yeah, true. I mean, it’s not super visible, unless you’re in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ all day and seeing who’s working on what at night? No one. No one can do that. It’s a huge project. Yeah,

yeah, but this was really cool, so I’m glad that you kind of showed us what you’re working on and what’s an experiment, so we can start kind of testing it and getting our creative juices going in thinking, Well, I’m since the beginning, I actually wanted to do a Mondrian kind of layout for a website, and never really kind of worked through that. But this actually is there a way to change the size or the color of the gutters.

I mean, you can you can so you can use regular block spacing to change the size, but currently it only works for both. So you that’s actually something that I think is an open issue for it somewhere to have more fine grain control over. So. Being able to change the vertical gutter and the horizontal gutter separately, and not having it all change at once, because right now we only have, like, one block spacing, one value you put it in, and that’s it. Let’s control through the block spacing. What you can do in terms of changing the color is you can give the whole grid a background color, and then you can add whatever blocks inside with different colors, and then it will look as if the gutters have that color. Yeah, so,

all right, Hans GERD had another question in the chat, is it possible to set a hover? It’s not, has nothing to do with the grid, but is there a hover button, a hover control for the button

in theme JSON, to say, remember, be able to set that as an element to the button. Element,

yeah, in the elements, theme JSON, button, yeah, yeah, yeah. It should be, should be possible in hand skirt to set a hover color in through the theme JSON, similar to the link in link, you have it in the UI, but for the button, you don’t, but you could put it in the same JSON for that. Okay, all right. So this, if you’re all okay with it, I’m gonna give you six minutes back of this. Harvey hang I really thank you so much Isabel for taking the time out of your evening in Australia. And to show this off, we have have it recorded. So I will write a little post on the make blogblog (versus network, site) so other people can see it as well. And I hope you have already two testers here for the experimental Gutenberg stuff.

Yes, thank you.

And I will get through that too. So Well, we’ll see you all and the next hallway hangout. Remember, July 9 is about the block extensibility for the site editor and the post editor, they are merged now and tune in. All right. You all have a good evening, good afternoon and see you at the next time. Bye, thanks. See you. Bye.


#grid-layout, #hallway-hangout, #summary

Summary, Dev Chat, June 26, 2024

Start of the meeting in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/., facilitated by @joemcgill. 🔗 Agenda post.

Announcements

  • WordPress 6.6 RC1 was released on June 25. We are now in a hard string freeze. Note that the dev-feedback and dev-reviewed workflow is required prior to committing to the 6.6 branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". (handbook reference).
  • WordPress 6.5.5, a security release, was shipped on June 24.
  • Gutenberg 18.6.1 was released on June 25.

Great work getting all of these milestones done this week :tada:

Forthcoming Releases

Next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.: 6.6

We are currently in the WordPress 6.6 release cycle. The WordPress 6.6 RC2 release is scheduled for next Tuesday, July 2. Please review this post for an update about the Release Candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). Phase.

@meher brought up a discussion from the #6-6-release-leads channel about the string freeze in the release candidate stage. We discussed when the soft string freeze should happen and if it should exist, when the hard string should happen, how these two different freezes are different and if there are any exceptions.

@audrasjb highlighted the glossary items:

Hard freeze:
See String freeze. A hard string freeze or a hard freeze is announced when all the strings of the upcoming release are frozen including the strings of the About page. A hard freeze is the final string freeze before a release.

Soft freeze
See String freeze. A soft string freeze or “soft freeze” is announced when all the strings of an upcoming WordPress release are frozen, except for the strings of the About page.

@desrosj suggested we decide on the course of action for this release (6.6) and then do the research suggested here to adjust the practice going forward.

@audrasjb also found an example of a string change after the hard string freeze here.

@joemcgill summarised the next steps as follows:

  • We’re currently operating in a Hard Freeze for 6.6
  • @audrasjb is going to check with Polyglots to see if we can extend that date to RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 3
  • If we really do need Hard Freeze to start at RC1, we will update our docs for future releases

We’ll aim to have an update and share by next week’s Dev Chat.

Next maintenance release

No maintenance releases are currently being planned. However, we discussed follow-up tickets that were opened following the 6.5.5 release.

@audrasjb noted:

The most annoying post-6.5.5 ticketticket Created for both bug reports and feature development on the bug tracker. was #61488.
It was fixed in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. and is waiting for potential backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. to branch 6.5. Question is: do we need a 6.5.6 for this?

@jorbin noted that we’re waiting to see how #61489 shakes out, and we should allow for a day or two if possible so that 6.5.7 does not need to follow quickly behind.

Next GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ release: 18.7

Gutenberg 18.7 is scheduled for July 3 and will include these issues. This version will NOT be included in the WordPress 6.6 release.

Discussion

The main discussion was around 6.6 this week, so we moved straight onto the Open Floor section.

Open Floor

@grantmkin asked if we could discuss this issue to allow themes to side-load single block plugins, which could help seamlessly open up more creativity and options baked into blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes:

As I’ve been looking into the idea of canonical block plugins, one point of feedback I’ve received from theme designers is a desire to use such blocks in theme templates and patterns. One example shared was the desire for a tabs block to use in a product page template. If you’re releasing the theme for general use (rather than it being specific to an individual site) you’re currently limited to using coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks. And naturally, we’re conservative about adding new blocks to core. So I’m curious about possibilities for making more blocks available for use in themes and patterns.

There were several comments and questions raised, including:

  • Sounds a lot like pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party dependencies for theme. – @afragen
  • So not just starter content for themes, but starter blocks?  Interesting, seems pretty reasonable desire for themes. – @jeffpaul
  • I wonder what a fallback would look like if a block was no longer available in the repo as well? Would it just no longer show, or would there be a way for the external block to fall back to core blocks? – @joemcgill
  • In principle the idea of blocks like this is good because keeps them outside theme. – @karmatosed

@poena highlighted if the plugin that has that block is not installed, the user will be prompted to install it. If they don’t install it, they can keep the block as is, or delete it. So what is the problem we’re trying to solve with side-loading single block plugins?

@poena also noted that themes in the wordpress.org theme directory are not allowed to require plugins. That does not mean that those themes are not allowed to recommend and use block plugins.

@joemcgill encouraged folks to keep the convo going in the GH issue.

@mmaattiiaass also raised a discussion about the WordPress Importer project:

I would like to discuss the current state of WordPress-importer project. I think it’s an important piece for production sites, and it seems to be unattended.
Example: the font assets can not be imported automatically because that functionality wasn’t shipped to the users. There’s a PR adding that functionality that has been sleeping for months without any review despite being flagged as a blockerblocker A bug which is so severe that it blocks a release. for the font library in the WordPress 6.5 release.

@jeffpaul noted that the Import component team is vacant: https://make.wordpress.org/core/components/import/.

@joemcgill offered to do some research to find some answers.

Finally, @azaozz asked for more reviews on #60835:

#360835 is a fix for few bugs introduced in WP 6.5. It’s been ready for about two months now. Yes, there are some different opinions there but the best way to iron out any differences is to have more reviews, right? 

@joemcgill highlighted that as an aside, it seemed like one of the things that has stalled the refactoring efforts is that there was an expectation set that there would be a proposal posted on make/core outlining the plan for more top-level directories like the /fonts directory. Joe offered to follow up with any updates for this.

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

Props to @joemcgill for proofreading.

#6-6, #core, #dev-chat, #summary

Performance Chat Summary: 25 June 2024

Meeting agenda here and the full chat log is available beginning here on Slack.

Announcements

  • Welcome to our new members of #core-performance
  • Early WordPress 6.6 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 2 performance results [GitHub issue]

Priority Items

  • WordPress performance TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets
  • Performance Lab pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party (and other performance plugins)
    • Auto-Sizes for Lazy-Loaded Images
    • Embed Optimizer
    • Fetchpriority
    • Image Placeholders
    • Modern Image Formats
    • Optimization Detective
    • Performant Translations
    • Speculative Loading
  • Active priority projects

WordPress Performance Trac Tickets

  • Last 2 performance tickets for 6.6 #59595 (merged) and #59600 (punted)

Performance Lab Plugin (and other Performance Plugins)

  • @thelovekesh added testing steps on https://github.com/WordPress/performance/pull/1247 which is ongoing PR for adding Web Worker Offloading plugin. As per last discussion on merging it in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision., this PR is ready for that
  • @westonruter hopes to pick up Web Worker Offloading next week
  • @mukesh27 the Extend core’s Autoloaded Options Site Health test if present (in WP 6.6) is merged
    @mukesh27 opened a couple issues related to Modern Images Formats and the implementation of the picture element. Those are up for grabs for anyone wanting to contribute
  • @westonruter Related to that, I found a downside to using the picture element in the first place, in that it is not currently possible to add fetchpriority=high preload links for picture elements since the link tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) doesn’t replicate all of the picture element’s sourcing features: https://github.com/WordPress/performance/issues/1312
    • @joemcgill Does adding fetchpriority directly to the image not work in this case?
    • @westonruter Yes that does, but the problem occurs when there are varying LCP elements for different breakpoints. So Image Prioritizer will need to explicitly avoid adding a preload link when the LCP element is a picture.
    • @joemcgill I would think that picture would make that easier, because each source would have it’s own media attribute
    • @westonruter Otherwise, it adds preload links for the LCP element in each breakpoint. The problem with the picture element is the type not the media.
      • Unless, would a browser skip requesting a preload link for an image when it has a type that is not supported? I didn’t think it did. But I’ll need to check that
  • @westonruter Related to Image Prioritizer, I’ve opened several other issues for enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. ideas on top of Optimization Detective.

Active Priority Projects

Improving the calculation of image size attributes

Optimized Autoloaded Options

  • The dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. has now been psoted https://make.wordpress.org/core/2024/06/18/options-api-disabling-autoload-for-large-options/

Improved template loading

  • @thekt12 I am working on review from @joemcgill here –
    https://github.com/WordPress/gutenberg/pull/62794/files
  • @joemcgill #59600 and #57789 have a lot of overlap and the former is mostly irrelevant at this point. We fixed the biggest problem #59600 with blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. patterns, but still have some things we wanted to progress in 6.7 for the WP_Theme_JSON system. However, the maintenance of that system between the GB repo on the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. repo has made executing and testing changes reliably pretty challenging. I opened this issue to discuss how we can improve this process going forward. I’d be happy for folks here to give feedback.
    • In terms of our tracking issue, I’ll post an update in light of the final 6.6 changes we were able to make and update any remaining tasks we want to pursue.

Open Floor

  • @joemcgill FYI: there’s a new channel, #pluginreview-plugincheck to have discussions related to maintaining the Plugin Check plugin that we helped build.
    • @thekt12 mentioned most PRs show errors
    • @joemcgill I’ve seen that on occasion as well, but not causing any merge checks to fail, and not consistently with the same message. Could be flaky e2e tests. 
  • @mukesh27 As the Performance Lab plugin has added support for WebP, AVIF, and Picture elements, what is the tentative WordPress version we are targeting for merging these features?
    • @joemcgill WP already supports uploading those versions, and gives site owners the ability to convert uploaded files to those formats using a filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output., but there are currently no plans to make either the “default” format that is used for the intermediate sizes that WP creates.
    • @westonruter And merging picture element support will require a lot of testing and there will certainly be many theme and plugin compatibility issues
    • @joemcgill #55443 is probably the best ticketticket Created for both bug reports and feature development on the bug tracker. to revisit for this

Our next chat will be held on Tuesday, July 2, 2024 at 15:00 UTC in the #core-performance channel in Slack.

#core-performance, #performance, #performance-chat, #summary

Recap Hallway Hangout: Theme Building with Playground, Create-block-theme plugin, and GitHub

On Wednesday, June 19, 2024, contributors attended the Hallway Hangout: Theme Building with Playground, Create-block-theme plugin (CBT), and GitHub , to discuss an example of a no-code workflow for theme building, that also integrates with version controlversion control A version control system keeps track of the source code and revisions to the source code. WordPress uses Subversion (SVN) for version control, with Git mirrors for most repositories. on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/

At the beginning of the Hallway Hangout, @beafialho demonstrated how she updates a theme stored in a GitHub repo using WordPress Playground and the Create block theme plugin.

You can watch the video here with a detailed description of the workflow below.

The Workflow

Getting started: connecting to GitHub and install necessary plugins. 

Beatriz started Playground via https://playground.wordress.net  and changed two settings:

  • Storage type to Browser and
  • enabled the Networknetwork (versus site, blog) access.

Then she selected from the Hamburger menu Import from GitHub. This requires a connection to GitHub. Then she pointed Playground to the GitHub URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org of the repository. In the modal on screen, she selected Theme from the dropdown and identified the theme with the directory name. A click on Import button completed this step.

After the theme was successfully imported and activated, Beatriz manually installed the two plugins

and activated them, too.

Note: Utilizing a Playground blueprint would load the playground instance with plugins preinstalled.

Making changes via the Site editor

Now she was ready for making her changes: She went to the Site Editor > Templates. She can easily add padding to the theme headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. by unchecking “Inner blocks use content width” in the layout settings.

Note: This was a very short part of the workflow demonstration, but that’s when the design process of themes takes place.  

Saving the UIUI User interface changes stored in the database and in theme files

The changes to the Template Part in the Site editor were saved in the site editor, and then Beatriz switched over to the CBT sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. and clicked on Save Changes to Theme. On the next screen, she added a check to the bottom three options as well: 

  • Localize Text – make strings in the resulting theme translatable 
  • Localize Images – adds images uploaded to the media library from templates or template parts to the /assets folder of the theme.
  • Remove Navigation Refs – returns navigation to the default state so it can be reused on other sites. 

A click on Save Changes finished the update process. 

Create Pull Request via Playground

To create a Pull request for the GitHub repository, open the Hamburger menu, and select Export Pull Request to GitHub. Playground filled in all the information automatically. The only thing missing was the commit message, that was added in the comment box.

Beatriz also clicked the checkbox below the commit message to also Save the changes in zip file “just in case”. A clock on Create Pull Request button automatically created a Pull request on the GitHub Repo. From the confirmation screen one can click on the link to open the particular pull request on the GitHub site. There Beatriz double-checked the file changes.

So far, the workflow.

Discussion and shared resources

It was noted that what is missing from the Create BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party a way  for designers to  add patterns created with the Site editor to be saved back to the theme files. 

Here are a few GitHub discussions about this topic: 

There was also a discussion on how more and more block themes grow their custom styles section in the theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., and it becomes a bit unwieldy, and how to handle this better.

There is the PR for users to change presets via UI  Font size presets UI 

Other resources shared: 

You can follow along the discussion with the below AI-generated transcript.

Props to @mikachan and @beafialho for review of the post.

Transcript

AI generated

0:00
All right, all right. So welcome to our hallway hangout talking about theme development using the site editor, using the create theme block, theme plugin and playground, and all comes together in GitHub as the version control so so we know how that’s all going to work. I asked Beatriz, who is a theme developer, Automattic how they are organizing the work, because there are multiple designers and multiple themes and how that goes. And she has provided a little video to demo the process, to want us thoughts. Hi. We also have Sarah, sorry, sorry. We have Pia, who’s a designer also did a lot of designs for wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ and Sarah is also here to tell us more about the Create block or answer question about the Create theme, create block, theme plugin. We need a better name for that. I stumbled with it, but the floor is yours. Bea,

1:25
yeah, Sarah will probably answer the questions that I don’t know how to answer because I’m a designer, not a developer, but yeah, I prepared a demo just to guarantee some fluidity in my explanations. And I’m sharing my screen. Let me know if audio is not good. Okay. Hi everyone. Today, I’m going to do a demo of how I usually update a theme that’s stored in a GitHub repo, and I do that with WordPress playground and the Create block theme plugin. This is the GitHub repo where my theme is located. As you can see here, it’s called foam and and the design adjustment that I want to make is I want to add the side paddings to the header. It currently has some bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. or something was not set up correctly, and I want to add some side paddings. We’re going to go to WordPress playground, and the first thing we’re going to do is select a different storage type. We want to store our changes in the browser so that we don’t lose any changes that we make. And we also want to select Network Access, because that allows us to install plugins. We’re going to go to the upper right corner and select Import from GitHub. We have to connect our GitHub account. And after we’ve done that, we want to copy the link the URL of our GitHub repo, and we click Import. You can select, I am importing a theme, and then you write the name of your theme.

3:35
Click Import again. Okay, that’s done. Now we have our theme installed in the playground website, and now we’re going to go and install our plugins. It’s good to install GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/, because we never know this theme was built on it, and it’s always best to have it as well, and we’re going to install, create block theme.

4:10
Click Install and activate. We’re going to activate Gutenberg as well, and we’re ready to go into the editor now. Okay, so we’re going to make that change, and I’m going to go to my header, which is right here, and it should be very easy to add, or in this case, I think we’ll just click a toggle and remove it out here. All right. Now there’s the padding. That was missing.

5:07
We want to save the changes that we made, all of them with create block theme.

5:21
All right. Now we’re going to go to the hamburger menu again and export pull request to GitHub. Now all of these fields are automatically filled. The only thing that I’m going to add is what I changed add missing side padding to header, and I’m also going to click export the changes as a zip file, just in case, and I’m going to click Create pull request. This is going to automatically create the pull request in your GitHub repo.

6:01
Okay, now we can visit the pull request, and here it is our theme with the changes, we can see the files that have changed since I made this change. It is here, and this is how you can update the theme using WordPress playground and create block theme plugin.

6:39
Okay, stop sharing now.

6:53
Very cool. So am I understanding correctly that what you’ve just shown that’s basically for working on the theme, templates, template parts, patterns, maybe whatever else is there to submit the pull request back in. So it’s purely for the code at the moment, because the most common usage that we that we have, or that I’ve seen mentioned on social media and stuff, isn’t just for covid, for for editing the themes in that way, but it’s also for stuff that’s still in the database, so for managing client sites. And I know that’s a huge, a huge topic and very difficult to answer, but

7:39
let us back up a little bit. The reason Bayer used to create block theme plugin is because of exactly that. Yeah, that the change because she made changes to the template header and because it was through the user interface, it was actually only stored in the database, but with the Create block theme plugin X save feature, she was able to the to save that back into the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. file of the theme, so all the changes that are made through the site editor that are stored in database, if you use that plugin, will be saved into the theme files, and then from there the GitHub repo. The theme was pushed into the GitHub repo. So there are quite a few so create block theme is for saving the changes that are. So if she, if you change some of the color palette which is also in the database, yeah, and you save it through the Create block theme plugin, it will also update the same JSON file, yeah, so it will be a contained theme plugin. Theme, complain theme, or am I explaining that wrong?

9:07
No, that makes sense. I mean, that’s kind of what I’ve been using, what we’ve been using, the Create block, the plugin for anyway, in that we’ll do stuff, we’ll change stuff on a staging server, will the client, will change everything, and then we’ll save it back out to the theme and then, and then deal with it separately in a GitHub process. So I think that, I think, I think that it’s kind of as manual control on our side as an agency, that we only do it at a set point we can say to the client, right, stop working. Now. We have to implement, implement your changes, and create, like a new version. And that’s then the new baseline. So the kind of the addition that is, I mean, I don’t know, is that a new thing? Sarah put the link in, I think that it’s a functionality which is in playground. It’s not in the plugin, whereby you can get stuff to go straight back into GitHub. And that’s kind of a missing bridge, because we’re. WordPress, I think, has focused a lot on SVNSVN Subversion, the popular version control system (VCS) by the Apache project, used by WordPress to manage changes to its codebase., on subversion, until now. So having that ability to get stuff back into GitHub directly as a pull request, whether it’s an automatic theme, whether it’s our own GitHub setup, whatever, I think that’s going to be incredibly useful. The question would be, is that something that is staying in playground, or is that something that’s going to be feeding back into the Create block theme plugin?

10:29
I don’t know for sure, but I would think it’s going to stay in playground, definitely for, you know, a longish time. You know, I’m thinking months, if not years. Certainly no plans to move it to create what clean book, because playground provides that functionality. Yeah, okay.

10:46
I also think that the GitHub functionality and playground is actually more than themes. You could actually get in plugins as well. Yeah. So if you if there’s a mechanism to or a whole site, so you could have a sip file in, or have your site in GitHub, the whole site, and then grab, grab it from the link when playground updated, and then updated back into your GitHub repo. But that’s the whole theme. Yeah. So you could also do your plugins and custom development and custom post types and all that as well.

11:32
So did you see that question that Tammy raised in the chat?

11:35
Yeah? Just reading it. Yeah. So Tammy, right?

11:43
So I probably can answer to

11:45
Yeah, but can you? Can you read it also, so we have it in the recording, please.

11:50
Okay, Tammy is asking how this works for a pattern you might add to a theme or template part, and this would work like in the the example that I showed, I made a modification to an existing pattern. In this case, a template part. If you added a new one, it would work exactly the same. You would see it added after you saved it to your theme. You would see it in the code after you’ve saved it with the Create block theme, does that answer the question? The issue I find, though, is how you unpick

12:31
I’m going to try and speak. So bear with me. Excited. Um, sometimes when you use the Create block theme on the export, it puts everything together. So if you want to use template parts, or you want to use patterns, and we want to have them separated, it you can’t do that. Sarah is nodding. So I’m hoping Sarah gets what I’m saying, and I’m going to pass it to Sarah to explain,

13:04
yes, I think I know what you mean, and I think this is probably leading to hopefully upcoming pattern management and create block theme. So, yeah, currently, when you export a pattern that’s been that you’re using in a theme template, it’s all like, bundled into the template, and isn’t separated into the pattern, like in the patterns, directly within the theme. And yet, that is currently expected, because it’s not functionality that exists yet and is hopefully coming soon. And well, actually, let me post a link as well so you can follow along with the progress. But yeah, I know it’s a it’s often an often requested functionality as well for create block themes. So it’s, it’s certainly a priority, and, yeah, we recognize it as a priority. So

13:52
the moment that happens, I will be incredibly happy and so many people because it really, it allows you to have a lot safer, a lot cleaner code. So yeah, I’m very excited.

14:05
So if I understood that problem correctly, is that if I as a user create new patterns in the site editor, it does not add them to a template. It’s only in the template, but not in the pattern when it’s saved down to the file. Okay, yeah, yeah, yeah, and thank you for the link. Sarah, that’s a great, great issue to follow along on that problem save so I saw in the Create block theme as well a functionality to save and Bayer had to link click on it separately. It wasn’t a default option to to save localized text and localized images. What does exactly do so?

15:00
Yeah, so they, they’re the the options are separate, so you can pick and choose which options you want depending on what you’re doing. The localized text wraps any text strings in a translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. function, so that the WordPress translation functions, so that, so it’s a it’s a requirement for the.org the wordpress.org theme directory, that things are translatable, but obviously for different use cases, you might not want to translate everything, because you just might not need it, or maybe you don’t think you need it, maybe you do need it, but yeah, it’s there so you can turn it off if you don’t need those functions. And then what was the other one? The localized images, images. So that’s for if you’ve uploaded an image that’s part of a template. So say, any an image block, cover block, or you’ve got, like a hero image in a template. When you export anything currently with the base export functionality, it won’t include assets, so things like images and fonts. But if you’re using this create block theme function, it will include the image asset inside the theme assets directory, and it will reference the the image from that directory. So it’s a relative link, like if you’re used to building with things, and you’ll probably know the kind of link, I mean. But normally this doesn’t happen with the base x functionality. We’re WordPress, yeah, that’s the magic. It’s kind of like an automatic relative link. Okay,

16:31
so that’s for instance, if I have a background image that I attached to a group block, or if I have a sideway back background image, it would only land through playground in the media library of that site, but if I wanted in the theme, I need to kind of check that so it kind of come will be saved also in the assets folder of the Theme. Okay. Yeah. Okay, good. Um, any other questions? Yeah.

17:03
I wish there were. I guess sync. I guess sync patterns that have been created by one of the editors, one of the users, wouldn’t be ignored in that process. Or would they also be included?

17:14
They will be ignored at the moment. So sync patterns currently don’t work on theme export. That’s kind of all what’s wrapped up in this, the pattern management, yeah, idea as well. But,

17:27
yeah, they currently that’s as a good thing, as a good thing, as you all want to I mean, well, I say it’s a good thing. I mean, it will be helpful for agency clients like us who want to version the content as well as the as well as the tech behind it, but I think that’s, that’s a more complicated scope, and I don’t think that’s necessarily part of WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. functionality. I think that’s something that we should be solving, not on an individual basis, but I don’t think that’s something that should be part of the block theme, because it would start to get very complicated for users who are kind of, I mean, I say freelancers or individual users who are creating sites and using playground, for example, or using their own logic to define how to do this kind of stuff, because every agency’s case is different. You know, do you version the content? You version the patterns? There’s so many different ways that it could be configured that I think adding that kind of thing into the into a standardized plugin might just mean that we’ll all sync under all of the options, and nobody will understand how to get to where they need to be. Kind of too many features, if you

18:31
know, yeah, complex. It’s getting complex quickly, but I know there is so not in 6.6 but for 6.7 there is an issue on GitHub to actually have sync patterns for themes, so themes can put patterns into the pattern directory that also have block bindings to custom fields and those, if they change. I think that would be probably on the roadmap for create block theme plugin to actually also save those out. Or maybe it would be possible to save out the sync pattern from the users, the think pattern overrides from the users, and then have them into the file repository, as well as patterns. I’m not sure if that’s going to be really that might be straightforward because, yeah, I don’t know. I think that’s one level too complex for me at the moment too, but it’s certainly something to think about, because sink pattern overrides for themes is in the works. Somehow you want it, yeah, so Tammy also wrote that the big one she’s coming back to our shortcodes, which. Outside the scope of this. But it’s, I think takes a poor, poor block to sink, and it’s far simpler, yeah, I think so too. Yeah, I’m not quite sure. And then, so, when you have a custom value in the same JSON, so I’m just reading what dem is saying, one thing I do have, though, is when you went to custom value in a theme JSON, when not to I think many of us create block themes and have an ever growing custom section and theme JSON. What are thoughts on that from those creating themes? Yeah, that’s definitely a question for Bea and Carolina and Sarah. Yeah,

20:59
I’m not sure I understand the question, I

21:03
would try again and explain so to particularly values, to the custom values in theme. Jason, I find that I’m having an ever growing amount of those custom variables in theme. Jason, the simple block themes, 100% No, I don’t need it, but I don’t generally deal with simple themes. And once you go beyond that, you just need more. You maybe want different. Pod scales, line heights, is a good example all these ones, and it feels like with every block scene that people are making, that custom section is getting bigger. I know with the investor, we have more potential with same Jason three, for it to get smaller. But I just, I just wondered if whatever people are feeling, and I’ve looked at some of the recent themes, and also seeing that other people’s theme, Jason’s have that custom section going as well.

22:10
Okay, yeah, I don’t think, like, when I’m creating the theme, I’m not really thinking about if it’s big, like, if it’s growing too much, because, like, Oops, okay, that’s I’m basically, like changing the global styles in the editor, And like evaluating from a visual perspective. And I try not to add any extra CSSCSS Cascading Style Sheets. too much or anything like that. But sometimes I find it’s it’s needed to go there and theme JSON and change the values, like the the the fluid values, for example, those. I changed them a lot, and I haven’t ventured too much on the spacings. I usually deal with the base theme that I’m working and use those, but sometimes it’s a little frustrating because they’re not exactly how I would use them. But that the short answer is, the short answer is, I don’t think too much about that. I’m not sure if that is, yeah, but that’s probably a more designery Question Answer.

23:37
I mean, I can speak from that, because it’s something that we’ve sort of been right through the whole process, right from 2018 right through to now, is trying all the different options, working out the best processes and stuff. And I agree that some projects, we will use custom values in the sheet theme. Jason, for example, if we’ve got a fixed header bar that doesn’t it remains fixed and doesn’t scroll, we might need to dynamically know the height of that thing, or we need to define it by breakpoint, or whatever. Then that’s, can be okay, a use case for custom variables in theme, JSON,

24:12
correct. I’m not talking CSS variables, though. That’s not what I’m talking about here. Custom CSS. What I’m talking about is things that don’t. So actually having line height is a great example. So for finding those variables in there, it’s something Ollie Foss, lots of other theme developers already have. They’re not actually writing, sorry, custom CSS. That’s not what I’m talking about, no,

24:41
no, no, no. But you’re referring to setting the value of typography, line height, for example, to a custom value or no.

24:50
So you’d write that line height, you’d have a line height scale that you would use, and then you’d be able to use that

24:56
throughout, yeah, those are the presets that you can get in the cage. Sonia and you feel that you have a need to kind of create, aside from the default presets, more and more presets for your sites. That not only is

25:14
where the gap exists where there isn’t a predefined preset already that you can use in theme, Jason, and that’s where the gap is generally telling us where we need to do future presets. Yeah, yeah.

25:31
I mean, I think we’re on the same page. I understand what you mean, yeah. I mean, the experience I have is basically to really take us take a step back and say, Is this Configure? Is this going to be used on more than one site? Is this going to be configurable? Can we change this down the line? Is it something we might need to adjust that scale in the future for the for this project or for this client? And if it mostly, if it’s going to be reusable, like, I’ve got a multi site with, I don’t know, 10 sites that are all using slightly different variations of the same block theme in the site editor. Then these values might be slightly different according to the font, for example. Then that’s something that will be I will put into theme. Jason, if it is a really custom value, then I’m, I’m General. I mean, if we’re talking about CSS or PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher, whatever, that’s something, then I tend to not put it into theme Jason, because I don’t want it to be controlled by a configuration option. Rather, it’s setting a value which can’t be changed, which applies to that theme. Because I see theme Jason as something you would set up once, and then maybe as a project continues or progresses or develops, then maybe go and modify it. Or if it’s on multiple sites, then it’s different on each site. So my case is different to somebody who’s using it on a one off website. It’s different from something like Olli. Well, the Olli theme, for as an example, is going to be on installed on 1000s of websites, and every single website could be slightly different. So that’s the case for using theme JSON without having to touch any code.

27:06
So I tend to not use CSS anymore. I use theme Jason, even if I just do one site. So I think that’s the difference, because I use it as a design system approach. I create a theme as a design system there. Yeah.

27:20
I mean, we’ve got, we’ve we’ve tried, we’ve tried two projects where we said, No, we’re just going to use theme Jason, and nothing else. And we ended up with several 100 lines of custom stuff in theme Jason, which was not real. It’s not doesn’t make sense to us.

27:32
Well, so 3000 lines in CSS,

27:36
it is absolutely and that’s why we’ve got the combination of the two. We use theme Jason up to the limit where it doesn’t make sense anymore, and then anything else we say, Write this kind of stuff in it’s not something we want people to change the configuration of. It has to be done like this, like a CSS reset, for example, to make certain stuff in Firefox happen correctly. That’s not something that’s a configuration option. That’s something that’s like, no, it’s a fix. It’s something that has to always apply. But I do know that that’s quite an advanced use case. So it is not saying we use a theme Jason for the minimum and everything else we did my hand. That’s not the case. We start with theme Jason, and we get to a point where we say that’s not achievable within Jason, then it probably never will, because it’s too specific for our for our use case. So So

28:20
Sarah was so kind enough to share a link to an issue or a pull request, rather to add UI for users to change the funds presets for a site. So that is certainly something that will also then need to be kind of in that process that we are talking about. Need then to be also safe through create block theme and then feed out into the through the theme JSON, probably, but yeah, so if something is fixed, I’m kind of wondering why that wouldn’t be in theme JSON, because if it’s fixed in, in right out of the bat, then you don’t have to do any other customization, and it you can make it that it’s everything,

29:23
yeah. I mean, to me, I prefer to go to the engage in just one places. From the QA perspective, it’s just easier. I think you can have an endless debate about it depends on what implementations you’re doing. Yeah,

29:43
but yeah, I’m more so behind that, like one source of truth. So

29:50
it depends on what project you using, what libraries and what implementation. But it also for me, I kind of did that it. It is in. Up that. But it’s also about maybe we should be surfacing more where we’re using those question values, where we’re having the really long amounts and saying, Hey, these things do need to have more visibility as well, and not just accepting that we’re doing the custom phase,

30:20
probably not theme based, but the immediate thought that comes to mind is custom plots, where, to a certain extent, you can use the configuration in theme JSON to handle that, but some custom blocks are going to come with a very locked down set of code, CSS. I’ll take CSS as an easy example, where it’s not configurable. It’s just it is how it is. And you don’t want to try and offer that as a configuration option for a custom block. But again, that’s, you know, I mean, I know the general pushes towards core and commonality and everything following core as closely as possible. But there are, there is a very valid use case for custom blocks and for custom Absolutely. I call them custom patterns, but you can’t even edit them in the block editor. You know, they’re absolutely locked down for better usability for users that they don’t want to have to go and fight, fight their way through nested blocks and stuff like that. They just want to have a field where they can change the image and done but, but that’s not, again, that’s not that’s one of the things I feel quite strongly about is that’s not something that core should be solving. That’s down to the individual developer to make it work well for the project and for the agency and for the client needs. So when we’re talking about custom plots, that’s not something I don’t think right now. I think the core focus should be on what makes sense for everybody, and not what makes sense for these 10% of people who are intent on doing it themselves, certainly not in the current state. There’s too much to be worked on, yet too much to be improved. Before you start getting to into really outline non specific or very specific use cases that that link that you said shared, Sarah, to the to the editor, what kind I mean I’ve only just very, very quickly flick through it is, what’s the feedback there? Is it? Should we do it? Or how do we do it? What feedback is needed there?

32:08
So I think it’s a yes, we should do it. It was more, I was wondering if it would help, if, if all these custom, potential, custom values had a UI that matched up, so it doesn’t reduce the amount that’s in theme JSON, which I know is the initial complaint, but if there’s somewhere to, like, visually organize them, and maybe, if we got to that for all the presets, then maybe they could be exported as a separate json file as well. Oh, you know, there was the option to export them as a separate file to Maurice. So

32:42
an additional, an additional section, like custom book to call that I know, for example, presets, where these custom names, keys and values get applied, sounds like a really good idea. Yeah, definitely. What

32:53
it helps is it makes the invisible visible. And I think one of the problems I have at the moment is I’m craving a lot of invisibles, something that is meant to be encouraging visibles. And then that means I can benefit from the dream evenness in the most beautiful way when I’m rapidly creating. And one of these things, which will no matter what we’re doing, whatever we create, and dictates and creates variables that we can use in blogs, whatever we use. So we need to also remember that no matter what we are creating there, we do have these variables created that we can call out as well. Yeah.

33:29
But side question on that, when we got when we create in custom colors in the Styles editor, when we save those out with create block theme, are they being added to the palette array and brought into the Yeah, okay, yeah.

33:43
So, Sarah, what’s next for the what’s on the rave map for the gray block theme plugin, in terms of what’s coming into WordPress six and further on?

33:59
Yeah? Well, the most recent changes, we feel that are in a good place, where we’ve just kind of finished a big refactor from moving from the WP adminadmin (and super admin) page into the the editor UI, yeah. So we feel like that’s in a good place. There’s probably more we can do. There always is, but we’ve moved everything that exists currently in the WP admin into the editor, and then next was actually pattern management, which hopefully addresses the first thing we were talking about. But we’re trying to, we’re trying to work as closely as possible with the sync patterns discussion and work that’s going in to both 6.6 and 6.7 let me find another issue as well, a Gutenberg issue for 6.7 but, yeah, I think that the issue, the Create block theme issue that I faced before, about pattern management, I think we’re coming to the idea that we’re going to experiment with pattern management in that plugin and just work alongside whatever’s happening in Gutenberg as well. And yeah, and hopefully just. Like proof of concepts and things out and see, see what lands. But, yeah, we know it’s a big wanted feature to manage patterns in the editor.

35:14
Was that the one that you let her know, who is it? Justin, who’s done a block pattern manager? Somebody. I can’t remember it was now, I’m sure I saw someone on GitHub, just

35:23
very Yeah, Justin was one. There was also a blockmeister kind of thing. JB orders had a plugin that lets you do pattern from but they were all kind of pattern management from the editor. That was that feature wasn’t available in core back then, when the plugins were created, but now it’s available in core. So those plugins are the only thing. What you can’t do in core right now is create new categories, but that has also well couldn’t do before, but now you can so that the whole part is kind of built into core now. And yeah, and now, thank you for sharing the sync pattern iteration for WordPress 6.7 that has the overrides for theme patterns and a few other things that are in there. Expand block support for sync patterns, because right now it’s only available for four blocks the sync pattern overrides that certainly needs to be expanded a bit so it also covers other blocks

36:35
going going back to Sarah’s comments about the UI for presets, one thing that would be very useful would be if we can have a way of changing the font sizes through UI that are predefined so large, instead of 18 pixels, is 19 pixels, and then saving that back out to theme Jason, because at the moment, that’s something that still requires a manual a manual change, which is something I As a very pernickety typo guy, I change the size of my fonts every, every few weeks, because it’s like it needs to be a little bit smaller, a little bit bigger. So if there’s a way of actually implementing that into the process, so that that can be versioned as well through GitHub, in the way that we’ve seen in playground, or even just that there’s an interface to say max for the fluid sizes, just for a little bit of fine tuning, maybe after a launch, or maybe the client has a change, but we don’t have time to go into the code and change stuff that would be very useful, because the way that we manage most of our client sites is they tend to ask for changes, minor changes, two weeks after the project has gone live and we think we’re finished, so we just say, we’ll change it in the we’ll change it in the site editor And or the sales editor. Leave it there for the time being, and we’ll come back to it in another in the next iteration, and then use the plugin to save all those little itty bitty changes back out into the file. Yeah, I was just gonna say, is there already an issue for that? Or shall I put one?

38:01
I think it’s probably the same issue. I think that’s the UI is for for editing those font size presets within the editor, so you don’t go into the code and change them. We’re also starting with font sizes, but we’re probably going to follow up pretty closely with spacing presets as well the spacing size presets and then others. But yeah, definitely those two to begin with.

38:25
Yeah, spacing sizes will be very handy, because that’s something where I have to go and remind myself of the of the preset slugs every time I do it, to go and actually adjust them and try and not use my own spacing unit, a spacing presets actually trying to support ones. So yeah,

38:40
be very handy. Sounds like we all need the same tool? Yeah, that’s yeah.

38:47
Is that something I mean, bear, Sarah, are you? Are you working on? Are you working on things for automatic directly or

38:55
so I’m primarily working on, like tools to support theme builders and anyone else the editor often theme builders. So, yeah, that’s where the that font size is, PR comes in.

39:06
Okay, how about you bear? Do you what are you working actively on the themes? Or,

39:11
yeah, I’m, I’m a designer. My background is a designer, but I recently started to build them in the editor and do all this. And I also released the themes in wordpress.org,

39:24
so that’s kind of these tools that we’ve been talking about now are very much something that you can see as a, let’s say, a theme creator for people, that hundreds or 1000s of people, people are going to be using it. That’s these are use cases for that from that side of the target audience as well, cool, exactly.

39:41
Yeah, so when you were talking about clients, that’s kind of, I understand that, but yeah, probably the process is it’s different, because your clients, they get into the websites and they want to change it themselves for out. Automatic themes. It’s like all these people that are going to use the theme, so yeah, but the tools are these tools are incredible, like the Create Blogblog (versus network, site) theme plugin and playground, they have been so useful for me in the process. Yeah,

40:17
yeah, for us who I mean, I mean, you say that about clients. Our clients our clients tend to be small and medium sized businesses, and honestly, they don’t care. They don’t want to, they don’t want to know. They just want to write their content. They don’t care what I mean, they care about how it looks, but they don’t want to have to go into the site editor. They never, I mean, like 95% of my clients don’t even know there is a site editor. And they don’t care, and they don’t want to know, but they come and say, Can we change the spacing, that font, that title needs to be a little bit bigger, all this kind of stuff. And that’s an iterative process, because they’re never happy with it. They’re happy with it for a month, and then they want to change it again. So yeah, it’s coming from it. It’s coming from the same problem from a slightly different angle. But it’s great to find that there are solutions that are working or being worked on, I should say, and being provided for, for US agencies, and also for normal users, if we can put it that way. Well,

41:05
at the great block theme plugin as well as the playground. They are open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL.. They can be adopted to any other scenario of having themes in in GitHub version control. So I don’t think it’s a big client versus small client, or 15,000 users versus one site using a theme. I think it could also always be version control, and that probably is, and it’s a fantastic workflow. I haven’t seen anybody else yet using that workflow. That’s why we kind of had, yeah, gee. Tammy raised her hand and said, I’m using it, yeah. So yeah, but I think we is there anything on

42:01
that for me, I’ve been using that workflow ever since the plugin came out, because it makes it makes no sense not using that workflow. To me, I’m having been using I’ve only recently been adding the playground to my workflow.

42:15
But to me,

42:18
create bot plugin, and doing that completely makes sense. It just hasn’t made any sense to do it any other way, from small projects to large enterprise, agencies, food, whatever, it doesn’t make any sense, even if you go down to the just starting to have a theme, and whatever you thought from, or whatever you create, whatever base you create from through to using it like dream leader, just to do the least. And that’s what, like the root of the plugin can do. Playground is an addition to it, and I think that depends on whether you have ddev or you have different environments as you kind of get into those different scales. Yeah. So

43:00
there are some things coming out of WordPress, point six, 6.6 that will change a little bit how you create themes or how you do I’m talking about the section styles. Bia. Have you been any testing or experience with that on how that’s going to work and how how you feel about what you feel about that, and how you use it?

43:30
Sorry, could you repeat the question? Because there was something in the audio. Okay,

43:35
so I was thinking that WordPress 6.6 comes with section styles. And have you done any experimentation or explorations about that? And is there anything that you would kind of share with us what your experience was?

43:52
In fact, I haven’t experienced experimented with it, so I can’t share anything useful, not yet.

44:01
All right, anybody else Carolina or Tammy or Sarah? Have you done any experimentation with that? All right, then I think that’s another, yeah, Carolina kind of put into hasn’t had time yet for it, and I can understand that it’s still three weeks out, so I think we have another developer hours or hallway hang out about that. I just so I’m thinking, if there aren’t any other questions, I give everybody kind of 10 minutes back from their time. It was wonderful to have you here and have this discussion. Thank you for Bear. Bear to put this little video together, the demo together so we can all see how it goes from from first step to to then the pull request. And that was very, very helpful. And also for Sarah to have all the answers for the. These wonderful questions from Mark and Tammy and in our show, I want to just before you go, have for you the next hallway hangout is in November. November. Oh, I wish it were November 26 in June, 26 at 11 UTC and it’s about grid layouts and how to use the functionality from 6.6 and what’s coming in 6.7 and then a day before, it’s a developer hour on what theme, what comes what’s important for theme developers for 6.6 so, and that’s on June 25 1500 UTC I’m just going to throw that out so you can note it down or the thing, I think it shared it at the beginning, but maybe I need to share it again. So there is that. That’s the Hangout announcement. And here is the developer hour for next week, so we all have it in our browsers. And with that, I thank everybody, and I see you.

46:15
Quick question, very quick question, the hallway Hangouts, are they going onto meetup.com?

46:20
No, they’re not going on meetup.com. On meetup.com but there will be a summary post on make core blog for the Yeah. So I shared the recording, and I share the links that we had, and also transcript and the separate video from Bayer’s demonstration, so you don’t have to watch a whole hour to just see that demonstration. All right, this, this is it, and thank you all for and see you next week. Bye, thanks

46:49
for your time, guys. Bye. Bye. You.

#hallway-hangout, #outreach, #summary