justintadlock

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"},"border":{"style":"solid","width":"2px"}},"borderColor":"black"} -->
<div class="wp-block-group has-border-color has-black-border-color" style="border-style:solid;border-width:2px"><!-- wp:image {"align":"center","id":10590,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="http://localhost/wp-content/uploads/2022/03/image-2-1024x605.png" alt="" class="wp-image-10590"/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}}} -->
<div class="wp-block-group" style="padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:heading -->
<h2>Veggie Pizza</h2>
<!-- /wp:heading -->

justintadlock

<!-- wp:group {"align":"wide","style":{"color":{"background":"#384a5c"},"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}},"textColor":"white"} -->
<div class="wp-block-group alignwide has-white-color has-text-color has-background" style="background-color:#384a5c;padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:media-text {"mediaId":6222,"mediaLink":"http://localhost/book-review/ff-book-cover/","mediaType":"image","mediaWidth":35} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile" style="grid-template-columns:35% auto"><figure class="wp-block-media-text__media"><img src="http://localhost/wp-content/uploads/2021/06/ff-book-cover.jpg" alt="" class="wp-image-6222 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"blockGap":{"top":"2rem","left":"2rem"}}}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2>Lightning Bugs</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A guy. A

justintadlock

<!-- wp:group {"align":"wide","style":{"color":{"background":"#384a5c"},"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}},"textColor":"white"} -->
<div class="wp-block-group alignwide has-white-color has-text-color has-background" style="background-color:#384a5c;padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:media-text {"mediaId":6222,"mediaLink":"http://localhost/?attachment_id=6222","mediaType":"image","mediaWidth":40,"imageFill":false,"backgroundColor":"neutral-100"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile has-neutral-100-background-color has-background" style="grid-template-columns:40% auto"><figure class="wp-block-media-text__media"><img src="http://localhost/wp-content/uploads/2021/06/ff-book-cover.jpg" alt="" class="wp-image-6222 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"blockGap":{"top":"2rem","left":"2rem"}}}} -->
<div class="wp-block-group"><!-- wp:

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)";

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

/* 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

// ---------------------------------------------------------------------------------
// 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

<!-- 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

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

/*
 * 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;