Skip to content

Instantly share code, notes, and snippets.

@joemaller
joemaller / _query-loop-patterns.md
Last active March 22, 2025 15:13
Behavior of pattern queries with the Query Loop block in the WordPress Block Editor.

Patterns are proving to be exceptionally useful, but there is some confusing, bug-like behavior with the core/query Query Loop block where patterns assigned to newly inserted blocks discard the pattern's query and fallback to the block's defaults. (as of March 2025).

  1. Insert a Query Loop block, click Choose, select pattern.
    Expectation: Use the specified pattern's query.
    Actual: The pattern specified in the query is ignored, query reverts to defaults (postType, perPage, order, etc.)

  2. Configure a Query Loop Block, then click Replace to choose a pattern
    Expectation: Either use the query in the pattern, or offer an option to replace the query?
    Actual: Existing query is preserved.
    This situation is not clear. Existing behavior makes some sense, since we've already configured the query. However there is still a query in the pattern which is being ignored.

@joemaller
joemaller / theme-json-aspect-ratios.md
Created March 21, 2025 18:49
Brief notes on setting custom Aspect Ratios for the WordPress Block Editor

WordPress 6.6 introduced support for custom Aspect Ratios for image blocks. Image Aspect Ratio options can be configured in the WordPress Block Editor by providing a list in the settings.dimensions object.

There's no easy way to remove individual aspect ratios from the list. The only options are to extend the existing list or fully replace it.

So, something like the following will produce a menu with 12 Aspect Ratio choices.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
@joemaller
joemaller / wrap-pagination-render_callback.php
Created March 14, 2025 16:02
Experiment for wrapping and changing the prev/next arrows in the WordPress Pagination Block
<?php
/**
* Experiment to rewrite the render_callbacks of the pagination prev/next blocks to swap the arrow for something else
*/
add_filter('register_block_type_args', __NAMESPACE__ . '\\swap_render_callback', 10, 2);
/**
* Replace the pagination-prev/next render_callback with a function which wraps the native function's return value
@joemaller
joemaller / block-editor-post-data.md
Created December 18, 2024 17:14
Quick explanation of accessing Post data in the WordPress block editor

Kind of a silly breakthrough, but I seem to have finally nailed down how to access Post data inside a custom block with useSelect. I'm not going to bother quoting the official docs, they're extensive but hard to follow. Instead, here's the chunk of code I wanted to document and remember, it exposes the full Post object to the Block Editor:

const post = useSelect(
  (select) => select("core").getEntityRecord("postType", postType, postId),
  [postId]
);

Let's walk through that, outside-in:

@joemaller
joemaller / validate-gf_token.php
Created October 10, 2024 17:09
Function to validate Gravity Forms gf_token save tokens for accessing in-progress forms
<?php
function validateGF_Token($token)
{
global $wpdb;
$gf_drafts_table = $wpdb->prefix . 'gf_draft_submissions';
$table_check = $wpdb->get_var("SHOW TABLES LIKE '{$gf_drafts_table}'");
if ($table_check !== $gf_drafts_table) {
return false;
}
@joemaller
joemaller / core-group-block-variations.md
Last active June 20, 2024 03:06
A solution for determining isActive in Wordpress (Gutenberg) core/group Block Variations.

Creating Block Varitions from core/groups

Recently we had a Block Variation which needed to be switched from core/columns to core/group. Should have been easy enough, but the identity of the variation, its name and icon, would never show up. No matter what, the variation's isActive method was not even being called.

The problem

It turns out that the various layouts available to the core/group Group Block are all Block Variations. Each has it's own isActive function, which simply checks the Block's layout.type attribute and sometimes it's layout.orientation.

The problem is that all of the isActive functions for each of the Block's variations are run in order until one returns true, at which point WordPress stops checking. This is documented in the very last paragraph of the Block Editor Handbook's [V

@joemaller
joemaller / call-exec.js
Created January 26, 2024 23:34
Mock child_process.exec in module in Vitest
import { exec } from "node:child_process";
export function callExec() {
return new Promise((resolve, reject) => {
exec(`ls -la`, (error, stdout, stderr) => {
if (error) {
reject(error);
return;
}
if (stdout) {

News to Posts Migration

  1. Update the iop-theme to >2.28.0
  2. Update iop-data-model to >0.4.0
  3. Delete all existing Posts in wp-admin
  4. Change all News posts' post_type to Posts in phpMyAdmin:
    UPDATE `wp_posts` SET `post_type` = 'post' WHERE `post_type` = 'news';
  5. Update permalink Custom Structure to /news/%postname%/

How to run phpcs on WordPress-Develop files without installing PHP

I've been running all my dev projects via Docker to avoid the pitfalls of installing server software on my computer. This also lets me jump between macheines very easily since everything I need is wrapped up in dockerfiles, docker-compose files or package.json scripts.

WordPress development doesn't work like that. The default development environment expects PHP to be installed and will try to run PHPCS validation checks from a local instance of PHP.

Use Composer's Docker image

The official Composer Docker image is extremely versatile. It can run arbitrary shell commands if the passed argument isn't a Composer keyword.

@joemaller
joemaller / wordpress-blocks-min-scripts.md
Last active September 29, 2023 02:41
How WordPress includes minimized script snippets for blocks in use.

WordPress v6.3.1 inlines styles for used blocks via the wp_head hook. However there is an additional wrinkle. If the SCRIPT_DEBUG constant is set and truthy, then a minimized copy of the styles will be inlined. The minimized copy is pre-generated and included with WordPress.

Code for choosing to use the min variant is in wp-includes/blocks.php:

// Check whether styles should have a ".min" suffix or not.
$suffix = SCRIPT_DEBUG ? '' : '.min';
if ( $is_core_block ) {
    $style_path = ( 'editorStyle' === $field_name ) ? "editor{$suffix}.css" : "style{$suffix}.css";
}