justintadlock

<?php

// You need to add an `is-faqs` class to the wrapping Accordion block to trigger the
// below markup changes.

add_filter('render_block_core/accordion', function ($content) {
	$processor = new \WP_HTML_Tag_Processor($content);

	if (! $processor->next_tag([ 'class_name' => 'is-faqs' ])) {
		return $processor->get_updated_html();

justintadlock

<!-- wp:accordion -->
<div role="group" class="wp-block-accordion"><!-- wp:accordion-item -->
<div class="wp-block-accordion-item"><!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading"><button class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">How do I reset my account password?</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
<!-- /wp:accordion-heading -->

<!-- wp:accordion-panel -->
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
<p>Go to the login page and click “Forgot Password.” Enter your registered email address and follow the link sent to your inbox to create a new password.</p>
<!-- /wp:paragraph --></div>

justintadlock

<?php

add_filter('render_block_core/heading', function($content) {

	$processor = new \WP_HTML_Tag_Processor($content);

	// Find the block heading element and check if it has an ID.
	if (
		$processor->next_tag(['class_name' => 'wp-block-heading'])
		&& is_null($processor->get_attribute('id'))

justintadlock

<?php

// Reverses stack. Reverses the order of the columns on "mobile" using the
// default WordPress breakpoint.
//
// Note: this is not an ideal method of handling this for screen readers. The
// columns are still in their original order in the DOM. But I don't have any
// other solutions at the moment. One alternative for at least one use case is
// to use the Media & Text block, but that case is only for a two-colum image
// and text section.

justintadlock

<?php

// Add to your theme's `functions.php` file.
//
// This block style has limited use cases to where you know 
// what's going to be shown inside the Cover block. Often,
// setting a `max-height` is not a good idea when you have 
// nested variable content.
//
// CSS `min-height` always overrules `max-height`, so this will

justintadlock

<?php

add_action( 'init', function() {
	register_block_style('core/paragraph', [
		'name' => 'indent',
		'label' => __('Indent', 'themeslug'),
		'inline_style' => 'p.is-style-indent {
			text-indent: 3rem;
		}'
	]);

justintadlock

<?php

// This filter specifically checks whether a theme has a `changelog` template. 
// If not, it looks for a fallback template in the plugin.
add_filter( 'template_include', function( $template ) {

	// I'm just testing a query string here for demonstration/testing
	// purposes, but you'll want to add a check for your registered query
	// var with WordPress. For now, you can test with `?changelog=anything`.
	if ( ! isset( $_GET['changelog'] ) ) {

justintadlock

/*
 * I'm specifically targeting a URL here, but I'd recommend using a custom
 * CSS class for the Navigation Link block instead.
 */
.wp-block-navigation-link a[href*="/my-account"]::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;

justintadlock

import { registerPlugin } from '@wordpress/plugins';
import { useSetting } from '@wordpress/block-editor';

// Just creating a simple component so that we can use hooks.
registerPlugin( 'jt-log-theme-colors', {
	render: () => {
		// Use `useSettings()` in WP 6.5.
		const palette = useSetting( 'color.palette.theme' );

		// View the console to see colors.

justintadlock

<!-- wp:query {"queryId":0,"query":{"perPage":"7","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]},"align":"full","className":"pattern-post-grid-cover","layout":{"type":"constrained"}} -->
<div class="wp-block-query alignfull pattern-post-grid-cover"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|plus-3","left":"var:preset|spacing|plus-3","top":"var(\u002d\u002dtheme-spacing\u002d\u002dplus-3)","bottom":"var(\u002d\u002dtheme-spacing\u002d\u002dplus-3)"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--theme-spacing--plus-3);padding-right:var(--wp--preset--spacing--plus-3);padding-bottom:var(--theme-spacing--plus-3);padding-left:var(--wp--preset--spacing--plus-3)"><!-- wp:post-template {"align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|minus-3"}},"className":"is-style-no-gap is-style-flex-grow is-style-fe