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

justintadlock

// ---------------------------------------------------------------------------------
// Be sure to install:
// npm install @wordpress/scripts glob path webpack-remove-empty-scripts --save-dev
// ---------------------------------------------------------------------------------

// WordPress webpack config.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

// Plugins.
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );

justintadlock

/* Set default to really high number for all posts. */
.wp-block-post-template-is-layout-grid .wp-block-post {
	order: 999;
}

/* Set first post to "2" order. */
.wp-block-post-template-is-layout-grid .wp-block-post:first-of-type {
	order: 2;
}

justintadlock

<?php

// CSS adjustments may be necessary for the caption, depending on your theme.
add_action( 'init', function() {
	register_block_style( 'core/gallery', [
		'name' => 'classic',
		'label' => __( 'Classic', 'theme-textdomain' ),
		'inline_style' => '.wp-block-gallery.is-style-classic.has-nested-images {
			align-items: flex-start;
		}

justintadlock

<?php

// Converts piped "preset" colors from global styles to their var() equivalents.
// Borrowed from `wp_render_elements_support_styles()`
function jt_format_color_preset( $color ) {
	
	if ( strpos( $color, 'var:preset|color|' ) !== false ) {
		$index = strrpos( $color, '|' ) + 1;
		$name  = substr( $color, $index );
		$color = "var(--wp--preset--color--$name)";