With WordPress 5.8 launching on July 20th, it seems like a great time to round up some resources to help theme authors prepare for the future. By now, you’ve probably heard about block themes and the upcoming future of full site editing. Perhaps you have even begun to explore creating a block theme or adapting your current theme to some of the new features, like template editing mode. Whether you’re just starting out or already deep in the block theme world, the following resources should help you be aware of what’s to come and how to get involved in shaping the future. If you’re looking for a quick snapshot, it’s recommended to review the following for 5.8: 

• Review the Make Themes summary of theme features in 5.8.
• Read the Dev Notes on introducing theme.json and layout and content width for more specifics about block theme updates. 
• Check out an updated scope of remaining site editing projects to get a sense of what’s to come beyond 5.8. 

Curate your information

Since block themes are currently evolving along with the features to support them, it’s helpful to start by figuring out what will help you stay up to date with the latest happenings, as that makes sense for you. Here are a few options:

• Check out a summary of ways to keep up with full site editing to choose your own adventure.  
• Read the Gutenberg + Themes Roundups to get the latest & greatest information for anything cutting edge.
• Join the monthly Block theme meeting to discuss block themes, ask questions, give feedback, etc. 

Dive into resources

Outside of knowing the latest, it helps to know what the best practices are to follow. The following should give you great places to start: 

• Block Theme Documentation is currently outlined with a Learn WordPress course planned and a discussion underway about future documentation.
• Carolina Nymark created fullsiteediting.com that walks you through how to set up a block theme. 
• Review the current posts on this very site focused on all things block theme building. 

Learn from and with others

Since this is an area that folks across the WordPress community are diving into, there are some fantastic ways to keep in touch with what others are experimenting with, how they are solving problems, how they are getting started, and more. Especially during a time where we can’t meet up and look over someone’s shoulder at a WordCamp, hopefully these resources help bridge that divide even a tiny bit. 

• Check out the Theme Experiments Repo to see what others are building/doing to get started. You can even quickly create a blank theme to get started using resources within that repo. 
• Review previous demos/walk throughs: Marcus has some great block theme videos to check out that show him learning as he goes & Helen has a 3-hour long video of her doing the same. 
• There was a recent hallway hangout around the concept of Universal themes that might be of interest to view, especially if you’re a theme shop. Here’s a write up about the concept as well.
• If you’re keen to help explore and give feedback on theme.json, there’s a call for testing with the FSE Outreach Program that you can follow along with a recording of a great hallway hangout about theme.json and the test itself. 

---

While these are the resources we found most useful, we’d love to hear from you too. What resources have been helpful for you to explore block themes and the various pathways leading up to full site editing? Share in the comments so we can all learn together. 

In the last post we shared the idea of a “universal” theme. This post looks at how we can use classic WordPress tools (in this case the Customizer) to customize a block theme, while saving these changes in Global Styles – making a universal theme!

Global Styles Everywhere

Block themes use a theme.json file to define many aspects of the theme, e.g. color palettes and typography. Gutenberg provides a tool to edit these settings (called Global Styles). When a user changes these values in the Global Styles UI, the changes are not saved back into the theme.json file but instead are saved to a Custom Post Type (CPT) in WordPress. Because this CPT can be modified using WordPress APIs, this gives us the power to make changes to Global Styles without relying on the interface in Gutenberg.

This simple idea is the basis for the color and typography customization options we have added to our universal theme Blockbase. The rest is just implementation details…

Implementation details!

When the Customizer loads, we create two new sections:

1. Colors
2. Fonts

$wp_customize->add_section(
	'customize-global-styles-colors',
	array(
		'capability'  => 'edit_theme_options',
		'description' => sprintf( __( 'Color Customization for %1$s', 'blockbase' ), $theme->name ),
		'title'       => __( 'Colors', 'blockbase' ),
	)
);

$wp_customize->add_section(
	'customize-global-styles-fonts',
	array(
		'capability'  => 'edit_theme_options',
		'description' => sprintf( __( 'Font Customization for %1$s', 'blockbase' ), $theme->name ),
		'title'       => __( 'Fonts', 'blockbase' ),
	)
);

In each of these sections we create new settings and controls – each setting and control relates to a color/font option in Global Styles. We read the content of the theme.json file and use this to populate the settings in the Customizer. There is a helpful function in Gutenberg which merges together the theme.json settings with any user settings:

WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();

We read in an array of color palettes from the theme.json file and display these inside the “Colors” section:

• 

• 

Previews

One of the powers of Global Styles is that it relies on CSS variables. This makes it very easy for us to update the Customizer preview when the controls are changed. Some simple javascript injects new values for these CSS variables into the page, meaning that the preview updates instantly.

First we bind a listener to the control:

// For each of the palette items add a listener
userColorPalette.forEach( ( paletteItem ) => {
	const settingName = userColorSectionKey + paletteItem.slug;
	wp.customize( settingName, ( value ) => {
		value.bind( ( newValue ) => {
			paletteItem.color = newValue;
			blockBaseUpdateColorsPreview( userColorPalette );
		} );
	} );
} );

This updates the global variable userColorPalette, which we then use to create our CSS variables:

function blockBaseUpdateColorsPreview( palette ) {
	// build the CSS variables to inject
	let innerHTML = ':root,body{';
	palette.forEach( ( paletteItem ) => {
		innerHTML += `--wp--preset--color--${ paletteItem.slug }:${ paletteItem.color };`;
	} );
	innerHTML += ';}';

	// inject them into the body
	const styleElement = document.getElementById(
		'global-styles-colors-customizations-inline-css'
	);
	styleElement.innerHTML = innerHTML;
}

Saving

Customizer settings are usually saved in a site option or a theme mod. Since we are building a universal theme, we need to save these changes into Global Styles so that they are reflected in the Site Editor. The easiest way we found to achieve this was to hook into the customize_save_after action, read the settings from the controls, and then update the Global Styles CPT with the new settings. This code is used to get and read the CPT:

WP_Theme_JSON_Resolver_Gutenberg::get_user_custom_post_type_id();
get_post( $user_custom_post_type_id );
json_decode( $user_theme_json_post->post_content );

Once you have the CPT in JSON form it’s simply a case of adding the new settings to it, and saving them back into the CPT:

$user_theme_json_post_content->settings->color->palette = $this->user_color_palette;

wp_update_post( json_encode( $user_theme_json_post_content ) );

Color Palettes

Color palettes are simply combination of color settings. When a user selects a palette we simply change all of the associated colors at once. This can be done with the Javascript API:

wp.customize.control( userColorSectionKey ).setting.set( color );

How can I use this?

The code above is just pseudo code, to explain the concepts. For a fully working example see Blockbase freely available in our free themes repository. This code has a GPL license and can therefore be copied and distributed freely.

However, if you are interested in building a universal theme I would encourage you to use Blockbase as a parent theme. This will mean you get all future improvements to your theme for free!

Ephitah

The Customizer gets a bad rap, and it’s true that it is clunky when compared to the direct manipulation that is possible with Gutenberg. Nevertheless, building these kinds of tools to update Global Styles without the framework of the Customizer would have been much more involved. There is some satisfaction in being able to take advantage of all the hard work that has gone into the Customizer in its final years!

In this bonus TLS long read, the writer Joyce Carol Oates explores the quintessential American minimalism of Walker Evans.

www.the-tls.co.uk/articles/walker-evans-svetlana-alpers-review-joyce-carol-oates

If you would like to listen to more audio articles from The TLS, you can do so on The TLS website or the News Over Audio app.

A special subscription offer for TLS podcast listeners: www.the-tls.co.uk/buy/pod

---

Hosted on Acast. See acast.com/privacy for more information.

💾

Birgit Pauli-Haack and Grzegorz Ziolkowski discuss Developing Block Plugins, Gutenberg 11 and Upcoming WordPress 5.8. Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |🎙️ Pod Bean | CastBox | Podchaser | RSS Feed  Show Notes Building Blocks Plugins A Primer on Gutenberg Block Plugins for the WordPress Block Directory by […]

💾

💾

💾

This week, Thea Lenarduzzi and Lucy Dallas are joined by Adam Watt, Professor of French and Comparative Literature at the University of Exeter, to mark 150 years since the birth of Marcel Proust, whose legacy seems stronger than ever; Sarah Lonsdale, the author of 'Rebel Women Between the Wars', re-considers ‘Diary of a Provincial Lady’, a funny novel about interwar life in deepest Devon whose darker tones tend to be overlooked; plus, Mary Beard on new developments at the Colosseum.

A special subscription offer for TLS podcast listeners: www.the-tls.co.uk/buy/pod

Producer: Ben Mitchell

---

Hosted on Acast. See acast.com/privacy for more information.

💾

'O Código do Russo' narra a ascensão e a queda de Sergio Moro. De juiz intocável a ministro rejeitado. De bacharel interiorano a protagonista da mais importante batalha jurídica e política do Brasil em décadas. Entenda, em seis episódios, como o código penal particular do 'Russo' alterou o curso de três eleições presidenciais e mudou para sempre a história da Justiça brasileira. Uma produção Half Deaf.

💾

In this episode, Josepha Haden Chomphosy talks about WordPress – In Person! The WordPress events that provide the dark matter of connection that helps sustain the open source project. Have a question you’d like answered? You can submit them to wpbriefing@wordpress.org, either written or as a voice recording. Credits Editor: Dustin Hartzler Logo: Beatriz Fialho […]

💾

💾

No dia 14 de junho, a jornalista Amanda Rossi publicou uma reportagem no UOL que revela mais um capítulo então desconhecido da nossa história: a internação de presos políticos em manicômios na época da ditadura militar. Em meio a todo caos diário, é importante não perdermos de vista o passado que nos conta muito de como chegamos até aqui, além de nos mostrar um panorama de onde poderemos chegar. Por isso, convidamos a Amanda para contar essa história de apuração estarrecedora em detalhes. Na conversa com Andrea Dip e Thiago Domenici, Amanda fala sobre os bastidores dessa apuração, os personagens, os relatos e o que isso tem a dizer sobre o nosso presente.

Quando você apoia a Pública, sua contribuição se transforma em jornalismo investigativo sério e corajoso, com impactos reais. R$ 10 por mês já fazem uma grande diferença. Nos ajude a revelar as injustiças, abusos de poder e violações de direitos que se agravam em meio à pandemia. Seja nosso Aliado!

E MAIS:

||Natália Viana com o Personagem da Semana


|| No A Boa do Povo: dicas culturais cheias de boas leituras para esses dias frios.

> Dip indica o livro "Por que voltava todo verão?" da editora elefante, um relato forte em primeira pessoa sobre a história de um abuso e seus desdobramentos: https://elefanteeditora.com.br/produto/por-que-voce-voltava-todo-verao/
> Thiago indica o blog Todas as Letras (que acabou essa semana) do nosso parceiro de Rádio Guarda-Chuva, o jornalista Renan Sukevicius do podcast Finitude. No blog, ele trata de temas como diversidade afetiva, sexual e de gênero. O último texto é imperdível. https://todasasletras.blogfolha.uol.com.br
> Amanda indica o livro Geografia da Pele, de Evaristo de Miranda, que conta de forma brilhante a sua passagem pelo continente africano nos anos 70. Mais do que recomendado para quem se interessa por literatura africana ou sobre a região.

=======


CARTINHA PÚBLICA

Não faça como o Sr. Wizard na CPI, conte tudo pra nós no e-mail podcasts@apublica.org , dúvidas, sugestões, elogios, manda lá que nós vamos ler no próximo programa.


======
E não esqueça de seguir o Pauta Pública no seu tocador favorito.


====
PARCERIA RÁDIO GUARDA CHUVA

E num episódio em que falamos sobre a importância da visibilidade sobre assuntos que fazem parte da realidade do país, vamos indicar o episódio 50 - Gente invisível não estraga parede do podcast Rádio Escafandro, nosso parceiro na Rede Guarda Chuva.

Apresentado por Tomás Chiaverini é um episódio em dois atos.
No primeiro ato, um mergulho em histórias de pessoas que desaparecem nas grandes metrópoles. São muitas. Só em São Paulo, a polícia registra, em média, 20 casos de pessoas desaparecidas todos os dias. Felizmente, muitas acabam reencontradas.
E isso se deve, em boa medida, ao trabalho de um homem: Darko Hunter, responsável pela Divisão de Localização Familiar e Desaparecidos da Secretaria Municipal de Direitos Humanos e Cidadania.



==

A abertura do programa foi feita com a locução e edição de Ricardo Terto, lendo ofícios de internação psiquiátrica que foram linkados na reportagem a Amanda no UOL. Você pode acessá-los aqui.

======


Apresentação: Andrea Dip e Thiago Domenici ||
Produção: Ricardo Terto ||
Pauta e Roteiro: Andrea Dip, Ricardo Terto e Thiago Domenici ||
Roteiro e Locução Personagem da Semana: Natalia Viana ||
Edição e Mixagem Final: Ricardo Terto ||
Artes: Wagner Toneli ||
Redes: Ravi Spreizner e Tainah Ramos ||
Trilha original composta por Pedro Vituri

Saiba que você pode ser aliado da Agência Pública e colaborar com esse trabalho. Saiba mais em apoie.apublica.org ou faça um pix de qualquer valor para contato@apublica.org.
Contamos com seu apoio!

💾

Por ocasião do lançamento de biografia escrita por Júlio Maria, Ney Matogrosso repassa fatos importantes em seus 80 anos de vida e 50 de carreira. Neste episódio especial de aniversário, o 451 MHz também traz um quadro novo com indicações do melhor da literatura LGBTI+.

Seja um Ouvinte Entusiasta e apoie o podcast 451 MHz: https://bit.ly/Assine451

💾

💾

💾

This week, Thea Lenarduzzi and Lucy Dallas are joined by the novelist Margaret Drabble to consider the ‘curiously free-floating reputation’ of Russell Hoban, whose adult novels, including ‘Riddley Walker’, now appear as Penguin Modern Classics; as twin exhibitions mark the centenary of the birth of the English sculptor, painter, writer, designer and illustrator Michael Ayrton, the critic Boyd Tonkin delves into the myth-laden maze of the artist’s thought

‘From Oprah to Medusa: The endlessly various world of Russell Hoban’ by Margaret Drabble: www.the-tls.co.uk

‘Michael Ayrton: A singular obsession’, Fry Art Gallery Too, Saffron Walden, until October 31st

‘Michael Ayrton Centenary: Ideas, images, reflections’, edited by Justine Hopkins

‘Celebrating Michael Ayrton: A centenary exhibition’, the Lightbox, Woking, until August 8th

A special subscription offer for TLS podcast listeners: www.the-tls.co.uk/buy/pod

Producer: Ben Mitchell

---

Hosted on Acast. See acast.com/privacy for more information.

💾

💾

Birgit Pauli-Haack and Grzegorz Ziolkowski discuss Theme.json, Dev Notes for WordPress.5.8, Gutenberg 10.9 and Upcoming BuddyPress Release 9.0 Music: Homer Gaines Editor: Sandy Reed Logo: Mark Uraine Production: Pauli Systems Show Notes / Transcript Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |🎙️ Pod Bean | CastBox | Podchaser | RSS Feed  Show Notes Full Site Editing & Theme.json FSE Program Polished Portfolios Summary FSE Program […]

💾

💾

We’ve been bundling block patterns with all of our themes for quite a while now, but recent improvements to the Template Part and Query Loop blocks has opened up a whole new world for how patterns can be used.

Both blocks can now display a carousel of block patterns in their setup state, allowing users to choose between a menu of pre-designed versions of these blocks. These patterns can be bundled with your theme, so that users have a wide range of pre-designed header, query, and footer options available to choose from in the Site Editor:

The only difference between these and other patterns you’d build is that they include a special blockTypes property to let Gutenberg know which block to associate them with. Here’s a simplified example:

register_block_pattern(
	'theme/pattern-slug',
	array(
		'title'       => _x( 'Pattern Title' 'theme-slug' ),
		'blockTypes'  => array( 'core/template-part/header' ),
		'content'     => '<!-- Your Pattern Markup -->'
	)
);

The markup above specifies that this pattern should be surfaced for a Header template part block. The value there would core/template-part/footer or core/query if you were designing a pattern for those blocks instead. (This property also powers pattern transforms, but that’s a topic for another time).

Once you register a pattern that way, it will show up in the carousel for the specified block. It’s as simple as that!

There are already a few Query Loop patterns bundled with Core today that use this method, and the header patterns shown in the video above are actually from a Gutenberg PR I’m working on as well. I’ve prepared a quick code example using our in-progress Quadrat theme to show how they could be bundled — we definitely plan on including a handful of these sorts of patterns in our block themes moving forward.

https://github.com/Automattic/themes/pull/4104

When combined together, Header, Query Loop, and Footer patterns allow you to mix-and-match pre-designed sections to create your entire website. I’m truly excited to see not only how themes use this feature, but how the Pattern Directory might provide hundreds more options for these blocks. This feels groundbreaking for WordPress, and I can’t wait to see how it turns out.

💾