justintadlock’s gists

justintadlock / functions.php

Last active May 31, 2023 12:12

Classic style for the WordPress Gallery block

	<?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 / jt-format-color-preset.php

Last active September 20, 2022 19:27

Converts piped "preset" colors from global styles to their var() equivalents.

	<?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 / book-review-intro-card.html

Created April 2, 2022 02:02

Book review intro card using WordPress blocks.

	<!-- 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 / book-card.html

Created April 2, 2022 01:01

Book card created with WordPress blocks.

	<!-- 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-recipe-card-pattern.html

Created March 18, 2022 01:50

WordPress block code for creating a recipe card pattern.

	<!-- 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 / pattern-cover-audio-social.html

Created December 29, 2021 23:58

Cover block pattern with audio player and social links.

justintadlock / wood-frame.html

Created December 19, 2021 22:02

Block pattern for a wooden picture frame using Jeff Chandler's picture.

	<!-- wp:cover {"url":"http://localhost/wp-content/uploads/2021/12/Wood066_1K_Color.jpg","id":8923,"isRepeated":true,"dimRatio":30,"overlayColor":"foreground","minHeight":0,"isDark":false,"align":"wide","style":{"spacing":{"padding":{"top":"0.25rem","right":"0.25rem","bottom":"0.25rem","left":"0.25rem"}}}} -->
	<div class="wp-block-cover alignwide is-light is-repeated" style="padding-top:0.25rem;padding-right:0.25rem;padding-bottom:0.25rem;padding-left:0.25rem;background-image:url(http://localhost/wp-content/uploads/2021/12/Wood066_1K_Color.jpg)"><span aria-hidden="true" class="has-foreground-background-color has-background-dim-30 wp-block-cover__gradient-background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"wide","style":{"border":{"width":"2px","style":"solid"}},"borderColor":"foreground"} -->
	<div class="wp-block-group alignwide has-border-color has-foreground-border-color" style="border-style:solid;border-width:2px"><!-- wp:cover {"url":"http://localhost/

justintadlock / block-styles-loop.php

Created June 24, 2021 01:43

https://twitter.com/bgardner/status/1407843151109316609

	<?php

	$block_styles = [
	'core/button' => [
	'fill-white' => __( 'Fill White', 'frost' ),
	'outline-white' => __( 'Outline White', 'frost' )
	]
	];

	foreach ( $block_styles as $block => $styles ) {

justintadlock / tiles-progress-percent-side.php

Last active June 11, 2021 02:15

Moves the "percent" metadata next to the bar for Tiles Progress Bar Block

	<?php

	register_block_style( 'tiles/progress', [
	'name' => 'percent-side',
	'label' => 'Percent Side',
	'inline_style' => '
	.wp-block-tiles-progress.is-style-percent-side {
	line-height: 1;
	}
	.wp-block-tiles-progress.is-style-percent-side .wp-block-tiles-progress__background,

justintadlock / cover-offset-styles.php

Created June 4, 2021 04:06

Offset left and right Cover block styles

	<?php

	add_action( 'init', function() {

	register_block_style( 'core/cover', [
	'name' => 'offset-left',
	'label' => __( 'Offset Left' ),
	'inline_style' =>
	'.wp-block-cover.is-style-offset-left > .wp-block-cover__inner-container {
	background-color: inherit;

	<!-- wp:cover {"url":"https://pd.w.org/2021/12/63161c1f1d83e8218.20535107-2048x1365.jpg","id":8980,"dimRatio":70,"overlayColor":"foreground","minHeight":320,"contentPosition":"center center"} -->
	<div class="wp-block-cover" style="min-height:320px"><span aria-hidden="true" class="has-foreground-background-color has-background-dim-70 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-8980" alt="" src="https://pd.w.org/2021/12/63161c1f1d83e8218.20535107-2048x1365.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"borderColor":"background"} -->
	<div class="wp-block-group has-border-color has-background-border-color"><!-- wp:cover {"dimRatio":20,"minHeight":320,"customGradient":"linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)","contentPosition":"center center","isDark":false,"style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}}} -->
	<div class="wp-block-

Justin Tadlock justintadlock