Skip to content

Instantly share code, notes, and snippets.

View ryanwelcher's full-sized avatar
:octocat:
Working from home

Ryan Welcher ryanwelcher

:octocat:
Working from home
View GitHub Profile
@ryanwelcher
ryanwelcher / theme.json
Created February 8, 2022 17:30
When adding theme.json to an existing Classic Theme, these settings will stop the default color and typography controls from being enabled.
{
"$schema": "http://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"layout": {
"contentSize": "750px"
},
"color": {
"background": false,
"custom": false,
@ryanwelcher
ryanwelcher / query-loop-locked.html
Created February 8, 2022 16:43
A Block Theme Template Part that provides a Query Loop block with locked Post Title and Feature Image blocks.
<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
<!-- wp:post-template -->
<!-- wp:post-title {"isLink":true,"lock":{"remove":true}} /-->
<!-- wp:post-featured-image {"isLink":true,"align":"wide","lock":{"remove":true}} /-->
<!-- wp:post-date /-->
<!-- wp:post-excerpt /-->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- /wp:post-template -->
@ryanwelcher
ryanwelcher / locked-query-loop-pattern.php
Last active February 8, 2022 16:15
A block pattern containing a Query Loop with locked Post Title and Featured Image blocks
register_block_pattern(
'locking-examples/locked-query-loop',
array(
'title' => esc_html__( 'Query Loop with locked Post Title and Featured Image blocks', 'locking-examples' ),
'categories' => array( 'query' ),
'content' => '<!-- wp:query {"queryId":26,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title {"isLink":true,"lock":{"remove":true}} /-->
<!-- wp:post-featured-image {"isLink":true,"align":"wide","lock":{"remove":true}} /-->
@ryanwelcher
ryanwelcher / wp-5-9-theme-json-all.json
Last active November 18, 2021 20:14
WordPress 5.9 Theme.json all properties and block level overrides.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 1,
"settings": {
"spacing": {
"blockGap": true
},
"border": {
"radius": true,
"color": true,
@ryanwelcher
ryanwelcher / wp-5-9-theme-json-color.json
Last active November 18, 2021 20:14
WordPress 5.9 Theme.json color support and block level overrides.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 1,
"settings": {
"color": {
"background": true,
"coreGradients": true,
"corePalette": true,
"text": true,
"palette": [
@ryanwelcher
ryanwelcher / wp-5-9-theme-json-typography.json
Created November 16, 2021 19:41
WordPress 5.9 Theme.json typography support and block level overrides.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 1,
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
"slug": "system-fonts",
"name": "System fonts"
@ryanwelcher
ryanwelcher / wp-5-9-theme-json-blockGap.json
Created November 16, 2021 18:46
WordPress 5.9 Theme.json blockGap support and block level overrides.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 1,
"settings": {
"spacing": {
"blockGap": true
},
"blocks": {
"core/buttons": {
"spacing": {
@ryanwelcher
ryanwelcher / wp-5-9-theme-json-borders.json
Last active November 16, 2021 18:36
WordPress 5.9 Theme.json border support and block level overrides.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 1,
"settings": {
"border": {
"radius": true,
"color": true,
"style": true,
"width": true
},
const { useState } = wp.element;
const { ServerSideRender } = wp.components;
const { BlockControls, InnerBlocks } = wp.blockEditor;
import LivePreviewButton from '../../components/live-preview-button';
const EditComponent = ( props ) => {
const [ preview, setPreview ] = useState( false );
const { attributes, clientId, name } = props;
return (
const { Component } = wp.element;
const { ServerSideRender } = wp.components;
const { BlockControls, InnerBlocks } = wp.blockEditor;
import LivePreviewButton from '../../components/live-preview-button';
class EditComponent extends Component {
constructor(props) {
super(props);