Skip to content

Instantly share code, notes, and snippets.

View justintadlock's full-sized avatar

Justin Tadlock justintadlock

View GitHub Profile
@justintadlock
justintadlock / auto-heading-ids.php
Created August 8, 2024 20:32
Auto-generate IDs for Heading blocks in WordPress
<?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
justintadlock / functions.php
Created June 23, 2024 13:43
Reverse stack Columns block style
<?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
justintadlock / cover-max-height.php
Last active February 21, 2024 17:39
Cover Block with a max-height block style
<?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
justintadlock / indent-paragraph-block.php
Created February 4, 2024 23:46
Paragraph indent block style
<?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
justintadlock / plugin.php
Last active August 19, 2024 07:38
Virtual page templates with block support
<?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
justintadlock / navigation.css
Last active January 11, 2024 14:52
Font Awesome icon for WordPress menu item.
/*
* 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
justintadlock / jt-get-theme-colors.js
Created January 10, 2024 16:04
Gets the theme color palette from within a component in the editor (view the console for the palette).
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
justintadlock / pattern-query-grid-cover-stack.html
Created December 21, 2023 14:09
Query Loop pattern with stretched Stack block nested in Cover
<!-- 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
justintadlock / webpack.config.js
Created July 19, 2023 21:23
Theme webpack config with multiple stylesheets
// ---------------------------------------------------------------------------------
// 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
justintadlock / ordered-3-col-grid.css
Last active July 5, 2023 18:37
Ordering first post to second position in three-column Query Loop grid
/* 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;
}