Hallway Hangout recording: Let’s chat about what’s next in Gutenberg (August 2024)

Covered topics

The following topics were demoed:

Recordings

Below, you can find the recording of the first half of the session:

Due to technical reasons, the second half of the session couldn’t be recorded. Fortunately, the latter demos were prerecorded and can be found below:

Zoomed-out mode

Author: @scruffian

Grid Layout

Author: @andrewserong

Background Image 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. supports

Author: @andrewserong

Thanks to everyone for joining and participating! Special props to @mikachan, @grantmkin, @jffng, @madhudollu, @santosguillamot, @ajlende, @ntsekouras, @scruffian, and @andrewserong for presenting, and to @richtabor for jumping in to facilitate while I was going through technical issues.


#gutenberg, #hallway-hangout #outreach

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

Hallway Hangout: Exploring Grid Layouts

More features to build responsive grid layouts are about to become available in the WordPress 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. editor. The user experience work is out of the experimental stage and will come to WordPress in 6.6. as a new Group block variation. Its flexibility and visual resizing options help users to assemble enticing layouts for their visitors.

The options include 

  • automatic or manual set columns allowing for resizing of grid cells and 
  • set column and row spans individually. 
  • drag and drop modification in the canvas.  

Join us for a Hallway Hangout on Jun 26 at 11:00 am UTC to discuss the new features with developers, site builders and extenders. This session will cover a demo of the features and tools coming to WordPress 6.6 as well as what is in the works for 6.7. The Zoom link will be shared on the day of the event in the #outreach channel.

Props for review to @isabel_brison and @juanmaguitar

#grid-layout, #hallway-hangout, #outreach

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

During and after the Hallway Hangout on using the Site editor for client projects the question on how to handle 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. workflows for 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 development surfaced. You are invited to join Core contributorsCore Contributors Core contributors are those who have worked on a release of WordPress, by creating the functions or finding and patching bugs. These contributions are done through Trac. https://core.trac.wordpress.org. and theme builders at Automattic, discussing and sharing a workflow that combines open-source WordPress tools: Create Block 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 and WordPress Playground. Playground allows them to connect their work to 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/ repository for managing their themes’ version control. 

In this session, theme developers will demonstrate the design, development, and preview approach for Automattic’s process. You will learn how to make all the connections work seamlessly from Playground to GitHub and back again, and how to work with the features of the Create Block Theme plugin.  An extensive time for Q & A allows for plenty of questions answered. 

The event will take place on June 19 at 11:00 UTC. The Zoom link will be posted into the #outreach channel on the day of the meeting. There will be a recording provided for those who can’t make it. 

Props to @greenshady for review.

#block-themes, #hallway-hangout, #outreach

Summary of Hallway Hangout on what’s next in Gutenberg

This is a summary of a Hallway Hangout that was first announced on Make Core. The aim was to have a shared space where we could chat about what’s being worked on to provide broader awareness to more WordPress contributors and get feedback. The hope is that by coming together early before the next 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. period to talk about different features, we can, as a community, flush out concerns sooner, help more folks get involved, and find ways to work better together. Thank you to the 18 folks who joined and to @saxonafletcher and @richtabor for demoing. 

Video Recording:

Demos:

The first hour or so covered demos of features with a few questions mixed throughout. What follows is a high level description of the demo topic with links to 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/ issues to dive into more and questions asked and answered related to the topic. To make it easier to follow, I also tried my best to split each demo into each section so folks can pick and choose to engage as they’d like. This doesn’t include the full footage but it includes the relevant bits for demoing.

Theme Style Presets

Rich quickly went through at a high level theme style variations, using Twenty Twenty-Four theme as a use case. He then went through abstracting color and typography styles (more than just fonts and includes things like letter spacing) as their own presets. This work was initially merged in a recent PR and works with all existing themes today that support style variations. Going forward, there are some technical details to iron out along with potentially evolving the experience to better support themes with a large set of variations. For a greater view of this general area, dive into the Colors and typeset presets from theme style variations overview issue

Section Styles

Rich recapped the 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. style variations mechanism and how you can register variations via 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. for multiple blocks at a time, including a demo of how this functionality would work in the editor to allow for “section styles”. This isn’t inventing anything new but modifying existing functionality of block styles. The biggest new functionality is that you can assign a variation to multiple blocks and to child blocks at one time. For Rich’s demo, switching between variations changed the styling for Group, Column, and Columns blocks. Overall, this work for 6.6 is being tracked here with the biggest PR still underway to extend block style variations as a mechanism to support this.

Q: For light/dark in the block styles demo, how are these configured differently than a block style or block variation?

Reusing block style variation and applying it to all child/nested blocks too. With all of those combinations, can still granularly change things. It’s make theme.json more portable across themes. 

Q: Are there any naming conventions needed for consistency of colors?

Any theme can decide what these variations look like so it doesn’t matter what the color slugs are that a theme uses. In previous themes, base and contrast were primary color slugs used but any other color combinations you can’t guarantee. This allows the theme to define what combinations of colors work well and the theme styles that variation rather than guessing and match up different slugs. 

We briefly touched on the many related issues there are around color naming as a broader topic: #29568 & #53996 & 39372.

Q: Is the theme.json you are showing available to look at somewhere?

Yes. Here’s the relevant, new bits from Rich’s demo:

{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"title": "Section Styles",
"styles": {
"blocks": {
"variations": {
"colorway-1": {
"supportedBlockTypes": [
"core/group",
"core/columns"
],
"color": {
"background": "var(--wp--preset--color--theme-2)",
"text": "var(--wp--preset--color--theme-3)"
},
"blocks": {
"core/separator": {
"color": {
"text": "var(--wp--preset--color--theme-3)"
}
},
"core/heading": {
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--theme-3)"
}
}
}
}
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--theme-3)"
}
},
"button": {
"color": {
"background": "var(--wp--preset--color--theme-3)",
"text": "var(--wp--preset--color--theme-1)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--theme-4)",
"text": "var(--wp--preset--color--theme-1)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--theme-3)"
}
}
}
},
"colorway-2": {
"supportedBlockTypes": [
"core/group",
"core/columns"
],
"color": {
"background": "var(--wp--preset--color--theme-4)",
"text": "var(--wp--preset--color--theme-2)"
},
"blocks": {
"core/separator": {
"color": {
"text": "var(--wp--preset--color--theme-2)"
}
},
"core/heading": {
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--theme-1)"
}
}
}
}
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--theme-2)"
}
},
"caption": {
"color": {
"text": "var(--wp--preset--color--theme-2)"
}
},
"button": {
"color": {
"background": "var(--wp--preset--color--theme-1)",
"text": "var(--wp--preset--color--theme-4)"
},
":hover": {
"color": {
"background": "#FFFFFFE3",
"text": "var(--wp--preset--color--theme-4)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--theme-1)"
}
}
}
},
"colorway-3": {
"supportedBlockTypes": [
"core/group",
"core/columns"
],
"color": {
"background": "var(--wp--preset--color--theme-5)",
"text": "var(--wp--preset--color--theme-2)"
},
"blocks": {
"core/separator": {
"color": {
"text": "var(--wp--preset--color--theme-1)"
}
},
"core/heading": {
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--theme-1)"
}
}
}
}
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--theme-2)"
}
},
"caption": {
"color": {
"text": "var(--wp--preset--color--theme-2)"
}
},
"button": {
"color": {
"background": "var(--wp--preset--color--theme-3)",
"text": "var(--wp--preset--color--theme-1)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--theme-4)",
"text": "var(--wp--preset--color--theme-1)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--theme-1)"
}
}
}
}
}
}
}
}

Q: Are these essentially class-based? i.e. will these style variations still work with CSSCSS Cascading Style Sheets. files (and JSON at the same time)?

Yes, class based like other block style variations.

Zoomed out view

Rich demoed the work being done around zoomed out editing which emphasizes patterns rather than editing blocks, allowing you to quickly build with patterns (reorder, delete, apply section styles, shuffle). There are some UXUX User experience considerations to figure out, including ensuring the mode is invoked at the right time and drag & drop works well. The work done here could also apply in the future to the experience of adding a new page or even onboarding into WordPress. It’s unclear right now whether it’s something that will be a toggle to use as you want or a view that’s offered in targeted moments (ie global styles or inserting patterns). 

Q: By zooming out for the pattern view – does that mean that patterns aren’t still useful for smaller groups of blocks (i.e. wanting to add a CTA pattern to a column)?

These patterns are still useful! This new option is simply offering a different context and allowing you to engage with patterns in a different way. This is also something to figure out how to do to provide a level to add patterns to a specific section. 

Q: I’m missing the purpose of the shuffle button. What if it was a button the showed all relevant patterns to replace the current one with?

It’s an exploration to see if it’s viable and it might not be where we end up. Of note, shuffling just goes to the next pattern rather than a random pattern. We talked at this point about different ways of interacting with patterns, including replacing patterns in the Inspector or selecting patterns from a modal (query loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block) or shuffling. 

Advancing data views

Saxon demoed the latest work around Data Views including a new list view layout type for posts, new default views for templates, and the efforts done to merge patterns & template parts. He discussed being able to set custom views and how useful that will be especially in an enterprise context when lots of folks are working across content. He also shared a figma prototype showing what it might look like with products, rather than posts/pages, to show a custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. experience. 

As part of this broader work, the Details and Inspector are being unified to simplify both where to find information and the steps to get to editing (without the Details panel, you can go straight into the editing experience). We discussed extensibility, namely around the APIs currently being private but how the work is being tackled with extensibility at its coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. For folks who want to explore today, they can bundle the data view styles in their plugin. In looking ahead, we also talked about responsiveness improvements and how consumers of these components can decide how to define the experience, including any default views or custom views. 

Q: That preview of the “product custom fields” as a screen you see before the editor – how does that design relate to the modal for legacy metaboxes that is also happening?

Ideally any data values associated with a post type should be actionable within data views, including generating fields for data. Currently, the data views work is looking at ways to quick edit and bulk edit when selecting multiple items. In some cases, this might be done by editing in the Inspector. There needs to be a broader discussion to define what’s shown in each view vs in the inspector instead of at the bottom. In some cases, there are benefits for things that require more space, like products, to having a more detail style view as a middle step, to allow for editing rather than having something on the bottom or side where you’re trying to edit something in a smaller space. 

As part of this answer, we also talked about the upcoming developer hours on alternatives to custom metaboxes. 

Q: Are we able to control where our custom post type appears in the 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. order?

Not yet! Need to figure out more technical details, including around routing

Overrides in synced patterns

Saxon went through what synced patterns are along with how overrides function, allowing you to edit a part of a synced pattern while keeping the rest in sync, and showcased a synced pattern with overrides and contentOnly editing enabled. This work is being tracked for 6.6 after being punted from 6.5. As part of this overall feature, we also discussed advancing contentOnly editing to create a simpler editing experience by surfacing more top level sections rather than needing to work about the block hierarchy and providing easy access to edit specific aspects in the inspector. 

Q: Would like to hear thoughts on pattern overrides/content locking working with blocks that use repeatable inner blocks (lists, buttons, etc)? 

This touches on a common limitation of these kinds of tools and is captured in a related GitHub issue. We talked about how, in the future, you can add overrides for all inner blocks as a way to work around this but, for now, this limitation remains. For example, you could make a grid block overrideable with all children within it inheriting the same.

Block connections

Saxon demoed block connections with an example post type called “Events” with a custom template with a handful of blocks connected to custom fields (location, venue). Right now, this connection has to be made in code including for what’s planned for 6.6 but there’s a larger vision that includes how this could be edited in the interface in the future. For 6.6 though, the ability to edit the custom fieldCustom Field Custom Field, also referred to as post meta, is a feature in WordPress. It allows users to add additional information when writing a post, eg contributors’ names, auth. WordPress stores this information as metadata. Users can display this meta data by using template tags in their WordPress themes. visually is planned. Saxon demoed this by editing the custom field directly in an individual event post and showing how it was updated in the posts lists automatically. Saxon also showed how the data will all remain in sync if you have the custom field displayed in multiple places. As a final demo, Saxon showed a Query Loop block querying through the events post type and how he can simply copy/paste the blocks with custom fields into the Query Loop to reuse the functionality there. 

Q: Do these fields have to be registered somewhere or are they automatically detected/available by adding it via the code editor?

Yes, they need to be registered and be “non-protected”. Here’s part 1 and part 2 of a developer blogblog (versus network, site) post on connecting custom fields for more information.  

Q: What field types (text, select, relationship) is this expected to support when introduced? For custom fields and block binding. 

For 6.5, the following are supported: 

  • Paragraph: content.
  • Heading: content.
  • Image: URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, alt, and title.
  • Button: text, URL, linkTarget, rel.

Grid layout

Saxon showed the work in progress layout improvements for the Grid layout option. There are two modes in Grid: auto (set minimum column width and can’t manually set items) and manual (set number of columns, set number of rows, and manually set items). Once a grid is placed in manual mode, you can reposition them and create new items. Saxon discussed the explorations around being able to “pin to grid” as a way to say that a grid item should never move and how with manual mode this idea of pinning would go away leaving everything to be seen as pinned to the grid manually. This makes manual mode more complex and, for something more structured, that’s where auto mode would be used. A big part of the entire feature is figuring out the best default experience for folks. If you want to follow this work, there’s now a 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/. channel for discussions: #feature-grid

Q: Any thoughts on how some of these more unique grid layouts will work on mobile?

There are lots of various discussions around how best to do this and we need to be smart initially around how to stack items, like stack on mobile for columns.

Q: Can we overlap items?

Not yet. There’s a limit in place to prevent that. You can create overlapping items but for v1 we will limit how you can do that. The end goal is you can in the future.

Additional questions

Q: Summarizing a question asked live –  where do I get new information about what’s coming up, especially outside of the technical resources? What do I have to follow? 

We talked about how all levels of communication are needed from longer tutorials to quick reels to user friendly resources to deeply technical walkthroughs. This is a “forever problem” that cuts across how information is found on the 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/ website to release resources to the entire experience of using WordPress. We talked about how the media corps work might help with this too. 

Q: How do we feel about the fact that the Fonts 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. exist while also encouraging theme builders to ship fonts so that variations (typography) are available in global styles? Themes are sometimes shipping 50 fonts. How much do we ship? Should a theme ship with no font? A lot of these themes are huge! This is a more philosophical question. 

We talked about how we could potentially reconcile these so declaring a font family in theme.json could potentially bring it into the site editor but that, in general, fonts should still provide presets for users. Ideally, it can all be connected to the font library to keep fonts in one place but we shouldn’t make users go hunting for fonts and themes should be opinionated in how they want folks to use it. 

Q: I’d love to hear if anyone has a fix for this issue I’m dealing with regarding caching and style variations.  tldr the style variations cache doesn’t clear, so you have to switch back and forth between variations to clear it while working on a new theme.

Please chime in on the issue if you think you can help! None of us on the call had a good answer for it as it mainly requires a workaround rather than a fix that can be shipped as it’s a known limitation. 

#gutenberg, #hallway-hangout, #outreach, #site-editor

Hallway Hangout: Let’s chat about WordPress Playground

With WordPress Playground gradually becoming a larger part of our day-to-day lives as developers, it’s time to chat about what the project should look like going forward. There is a proposal for a v2 of the Blueprints schema, and we could use your feedback on current and future use of Playground.

So let’s have a casual conversation on what would benefit you as developers.

How to join

If you’re interested in joining us, the Hallway Hangout will be on Monday, March 4, 2024 at 04:00 pm (16:00) UTC. A Zoom link will be shared in the #outreach Slack channel before the session starts. 

Everyone is welcome to join, regardless of whether it’s just to listen or actively participate. This session will be recorded and recapped here on the Make CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blogblog (versus network, site).

As usual, Hallway Hangouts are conversational events where you, the WordPress community, can provide your feedback directly to contributors to WordPress. This feedback is invaluable in steering the direction of the overall project.

Agenda

On the whole, the biggest thing we want to accomplish with this event is to bring more awareness to the WordPress Playground project, which lets you experience WordPress directly from the browser (no complicated setup necessary). Give it a try →

With this goal in mind, @zieladam, the architect of Playground, and I would like to discuss:

  • The Playground Blueprints system and how it works
  • What existing features you find the most useful in your own work
  • What current features feel limiting
  • The missing features you’d like to see going forward

We hope that you all can join us and help shape the future of WordPress Playground.

Post reviewed by @zieladam.

#hallway-hangout, #outreach, #playground

Summary of Hallway Hangout on overlapping problems in the Site Editor

This is a summary of a Hallway Hangout that was first announced on Make Core. The aim was to have a shared space where we could talk synchronously about overlapping problems facing the site editing experience.

Video Recording:

Notes:

Notes are somewhat provided by some AI tooling but, unfortunately, wasn’t quite on point enough for me to use entirely. If anything is off or missing, please let me know.

The hallway hangout focused on discussing issues and problems users experience with the Site Editor, including changing something across an entire site or just for one 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., pervasive inconsistencies in user interfaces, understanding inherited values and options, and determining what can and cannot be edited. This came out of a public blog post on the topic.

We discussed the need to improve documentation and educate users to help address these overlapping problems. We chatted about the what’s underneath the desire to not ship any new features and that some of these areas of problems require new features to be fixed. We discussed how some 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/ features are released in stages across various releases ultimately paving the way for greater work to be done, like Block HooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. released in 6.4 and expanded upon for 6.5. Another example that was mentioned was content-only locking, which was added into a release without a UIUI User interface as it was a foundational part of a larger roadmap (overriding content in patterns needed this work for example). Part of what needs to be done here to is to better communicating how new features connect to and build upon each other. In many cases, polishing these experiences and reducing confusion has been a major focus of many of the last releases.

We discussed how it feels like we’re caught in between right now and there are different UI experiences floating around between the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., site editor, and then page builders building on top. In a perfect world, the page builders use what’s being built in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and the experience of using blocks feels more natural, whether just in the block editor or in the site editor (instead of those feeling like different experiences). It’s also tricky to come up with solutions that don’t just surface the complexity without providing clarity too. It’s both the most rewarding and most difficult to cover the wide range of use cases WordPress seeks to cover.

We chatted about using the experimental flag in 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 to allow incremental exploration before features are merged to core for some features. Tensions exist between accumulating features quickly in Gutenberg vs bottleneck of merging to core releases. Folks want to see more efforts made to document feature decisions and UI changes at the same level as core tickets, with complete descriptions. Getting feedback into UI decisions as much as possible will help with this too as we should make changes based on feedback and design direction combined. It would be great if more hosts ran the Gutenberg plugin directly and gave feedback to help with this. At this point, the #outreach channel was plugged as was the new outreach group 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/ to 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.” folks who have opted in to provide feedback.

We discussed differentiating user capabilities for blocks and experiences based on user roles and the context of what they are trying to do on a site. More work needs to be done to explore and improve user capabilities. It was suggested that having more Core team members build real sites could help surface important issues and help prioritize work. Right now, we do see this happening with the Create Block Theme allowing folks to build block themes directly with the Site Editor and surface gaps. The same is true of each time a default theme is made and the gaps that are surfaced and fixed as a result. As much as possible, building real sites or working with folks who do has always been and remains critical.

Feedback from folks in the agency space centered around how agencies can’t ensure brand standards due to inability to lock down with GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. when content can change in the editor. It’s important to find ways to reassure clients that brand standards can still be ensured with new workflows. The same problem exists on the broader 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/ site so there are big opportunities for learnings and feedback. In some cases, folks tried the Site Editor last year and need to be invited back in with the latest & greatest to try once more with additional plugins to fill the gaps for now. In other cases, folks are successfully using it. Opened this developer blog idea after the fact to have agencies start sharing how they’ve successfully used the Site Editor process wise.

A new “overlapping problem” that @annezazu will add to the post is around the swirling experience of gradual adoption, extension, and curating of the editing experience. How do we make it as seamless as possible and have it make sense to folks? Expect the post to be updated with more thoughts there.

Towards the end, we also discussed issues everyday users face with site editing, the need for better onboarding, and a call to join more WordPress meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. events. The “usual suspects” came up particularly around editing the homepage, the pain of the template hierarchy being exposed, missing settings in the Site Editor, etc. We also discussed an unfortunate experience someone had in giving feedback but feeling very dismissed. This is not something any of us want anyone to feel and it’s important we engage constructively. We also discussed how the majority still use classic themes and the importance of respecting both in discussions.

To close, we talked about how these are the toughest problems to solve! They are not easy by design and there’s a lot of appreciation for everyone who is willing to engage in these topics. We’re very much listening and I wouldn’t have been able to write the post to begin with if we weren’t. The biggest next step is to hold an additional hallway hangout in the future around one of these areas with a large design presence to help present solutions, discuss potential drawbacks, and see how we can move forward.

#gutenberg, #hallway-hangout, #outreach, #site-editor

Connect with the GitHub Outreach group to request feedback or further testing. 

During the Hallway Hangout: What’s next to the outreach program, the idea came up to create a GitHub group called “outreach” that can be pinged when a PR, a discussion, or an issue needs some further input from the outreach group. Sometimes developer or designers would like a few more voices to chime in on an issue, a solution or on a new feature. Or they are ready to have more people test a PR or a new feature. Now there is a group of contributors you can 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.” to alert them to your work.

It works from any 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/ Repo in the WordPress organization 

For now, its active contributors are listed, but it’s open to anyone who would like to be alerted when developers on the WordPress project request additional feedback or testing. The only requirement is to have a GitHub account. 

For developers or designers 

Ping @WordPress/outreach

PRs can be work in progress or already merged. For merged ones that are part of a set of PRs for a feature, we might also create a call for testing for a broader reach in collaboration with the #core-test team.

Ideally, a ping should point to a set of testing instructions, maybe additional questions and a time frame in which the feedback would be expected.  

If there are discussion posts on the GitHub’s repo that need to be amplified, a ping certainly is welcome here too. 

Depending on the PR/feature the ping could also be used to request a call for testing that we collaborate on with the Test team, that goes out to more users

For contributors:

If you want to participate in a request for feedback, please contact @bph or @fabian to be added to the group. Or just post in the #outreach channel, that you would like to join.

Props to @fabiankaegy and @greenshady for review

#github, #test

Recap Hallway Hangout: What’s next for the outreach program?

A group of contributors came together to discuss the Proposal: What’s next for the Outreach program.

Participants were @fabiankaegy @ndiego @greenshady, @poena and @bph (facilitator).

We recorded the discussion and it’s available on YouTube.

The meeting discussed ways to improve the WordPress outreach program and user feedback processes.

Key points included:

Renaming the FSC Outreach channel to “Outreach” to broaden its scope beyond experiments.

The channel was renamed #outreach. Big Thank You to the #meta team. Come and join us.

Creating 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 for contributors to provide early feedback on features through calls for testing.

During the discussion the problem came up how to connect developer working on WordPress features with extenders or agency developers. One suggested way is to create a new subteam in the WordPress GitHub organization called “Outreach”. This team is public and allows anyone on GitHub to use the @wordpress/outreach handle to 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.” the people in the listed there and ask them for feedback or testing. Similar groups are already available for “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. Themers” “AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)”.  If you are interested in being part of the group, notice that in the comment and share your GitHub account.

This handle should be used to raise any issues or pull requests where someone is looking for feedback / testing. So if you are working on a feature and are hoping to get so me additional insights from a diverse set of users from different backgrounds, please don’t hesitate to ping this group.

Working with the testing team to organize smaller, more manageable calls for testing.

The two test team reps, @webtechpooja and @ankit-k-gupta will add a discussion to their next meeting of the test team on Feb 27, at 11 UTC. If you are a contributor interested in putting user call for testings together, you might want to join in the meeting.

Encouraging engineers to use the Outreach channel for feedback on new features earlier in development.

Contributors felt that sometimes soliciting input before a feature is fully merged and pushed to a 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., it could use additional feedback from extenders and agencies. As example: Pattern overrides that don’t have a theme component and don’t alleviate the pain point that there is no way for theme developers to bundle synch patterns with overrides with their themes.

The information around new features or enhancements is not always easy accessible. There is a need to have an ongoing exchange between the engineering teams, test team and outreach contributors to determine the right timing for calls for testing.

Creating a wishlist for each upcoming release to gather input on user priorities.

This is referring to a post made before WordPress 6.4 WordPress 6.4: What’s on your wishlist? More research is required. It also overlaps with the Extensibility Issues Triage initiative that meets once a month to look at issues that concern extensibility and could be pushed forward. Next meeting March 14, 2024, at 12:00 UTC in #core-editor channel

The goal is to make the outreach program more accessible and sustainable, improve collaboration across teams, and help guide WordPress development through early and ongoing user and contributor input.

Props for co-writing to @fabiankaegy and for review to @greenshady and @ndiego.

#outreach

Proposal: What’s next for the Outreach program

Following the post Evolving the FSE Outreach Program, there was a transition period of six months after the 6.4 release and the end of Phase 2. Now let’s discuss what could happen after this period. 

This post recommends the next steps. Before that, some clarification of terms might be in order: 

  • Site builder = No code/low code user who builds sites for others
  • Extender: Developers/designers who build plugins and themes or work for agencies or as freelance developers/designers.

Because site builders and Extenders regularly intersect, the channel’s content and discussions will be relevant to both groups of users. 

A good first step could be to rename the channel from #fse-outreach-experiment to #outreach, as it will be about more than FSE, and no longer an experiment. 

Several projects could use 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/. support in the WordPress space for discussion, clarification, and overall ruminating on future features coming to WordPress. A list of discussions, sharing, and information that could be shared in the channel follows. None of them are exclusive, but they made the list because they don’t necessarily fit other channels. 

The ideas also don’t warrant a separate channel, but all ideas come from knowing that non-contributors need to connect with contributors. As noted in comments on the previous post, a clear outcome of the FSE Outreach program was that connecting in this channel facilitated participants’ first contributions and lowered the barrier to connecting with the open-source project. 

  1. The channel is a place for attendees and viewers of regular Developer Hours to connect with presenters. The discussion could cover the event’s topic beyond the live event. The same is true for the Hallway Hangouts. Resources for both events will be shared in the channel.
  1. Once the Test team, or any other team, issues a new call for testing, the feedback would be surfaced here in a conversation about challenges and to help answer questions.
  1. There might be a breaking change in an upcoming release that needs attention from extenders.The channel can provide space for additional discussion on workarounds, etc.
  1. Excerpts from the Dev Chat agenda/summary of the user-facing updates from contributors can be shared, if they are relevant for site builders and extenders.
  1. The channel can subscribe to the What’s New for Developers round-up posts feed, so posts are shared upon publishing.
  1. In collaboration with design and engineering teams, discussion from 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/ and TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. can be raised in the channel to solicit input from those interested in the topics.
  1. The outreach channel is also the place to point people to from other networks (X, Mastodon, or Facebook) when there is a need to discuss issues/topics that are outside the scope of the Support team and require a WordPress space to get a few people in from other teams involved. 
  1. The channel could also be a resource for MeetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. Organizers who have questions or need advice on facilitating local discussions about upcoming features. 

Independent of the list of activities, the #outreach (working title) Slack channel will continue as a central point of contact with the community.

This can only be a group endeavor if we want to broaden the reach and be a welcoming place for people interested in particular focuses of the software. Quite a few people raised their hands to be part of a continuation of the outreach program, be it to participate in discussions or to follow future calls for testing. If you are interested, please let us know in the comments! 

All feedback on this proposal is welcome. Here is a set of questions that could get you started: 

  1. Naming things is hard, so what do you think about the future name “outreach”? Any other ideas for a name? 
  2. What do you think about the eight ideas shared about what a conversation might look like in the channel? 
  3. Do you have any other ideas for community outreach that could have a place here? 

Feedback by February 12th would be appreciated. 

Nick Diego, Justin Tadlock, and I would like to invite contributors to a Hallway Hangout on February 20th, 2024, at 15:00 UTC to discuss this proposal, the comments, and the next steps. 

Props for review and input to @ndiego,@greenshady, @angelasjin, and @cbringmann.

#fse-outreach-experiement