Skip to content

Instantly share code, notes, and snippets.

@mrwweb
Created March 3, 2023 20:36
Show Gist options
  • Save mrwweb/b896ff5f64d4676f68e51e8704c87fa8 to your computer and use it in GitHub Desktop.
Save mrwweb/b896ff5f64d4676f68e51e8704c87fa8 to your computer and use it in GitHub Desktop.
View Source Hello World Block Variation - A little rough around the edges. Tested successfully in the 2023 theme.
.wp-block-variation-hello-world {
display: flex;
background: #6fbcac;
padding: 0 !important;
}
.wp-block-variation-hello-world .wp-block-group__inner-container {
display: flex;
gap: 1em;
}
.wp-block-variation-hello-world h3 {
align-self: center;
flex: 1 1 50%;
}
.wp-block-variation-hello-world .wp-block-image {
display: block;
flex: 0 0 50%;
margin-block: 0;
}
.wp-block-variation-hello-world .wp-block-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
wp.domReady( function() {
wp.blocks.registerBlockVariation(
'core/group',
{
name: 'viewsource/block-variation-hello-world',
title: 'Block Variation Hello World',
icon: "admin-comments",
category: "text",
description: "a block variation",
attributes: {
className: 'wp-block-variation-hello-world',
backgroundColor: 'secondary',
},
innerBlocks: [
[ 'core/image', {
templateLock: 'all',
lock: {
move: "true",
remove: "true"
}
} ],
[ 'core/heading', {
level: 3,
templateLock: 'all',
lock: {
move: "true",
remove: "true"
}
} ]
],
isActive: (blockAttributes, variationAttributes) => {
// this does not appear to work and I don't know why
return blockAttributes.className.includes("wp-block-variation-hello-world")
}
}
);
});
<?php
/**
* Plugin Name: A Block Variations Demo
* Description: A response to https://viewsource.fm/s1/5
* Author: Mark Root-Wiley
* Version: 0.1.0
*/
namespace MRW\BlockVariation;
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\front_end_assets' );
function front_end_assets() {
wp_enqueue_style(
'vs-block-variation',
plugin_dir_url( __FILE__ ) . 'vs-block-variation.css',
array( 'wp-block-library' ),
filemtime( plugin_dir_path( __FILE__ ) . 'vs-block-variation.css' ),
);
}
add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\block_editor_assets' );
function block_editor_assets() {
wp_enqueue_style(
'vs-block-variation',
plugin_dir_url( __FILE__ ) . 'vs-block-variation.css',
array(),
filemtime( plugin_dir_path( __FILE__ ) . 'vs-block-variation.css' )
);
wp_enqueue_script(
'vs-block-variation',
plugin_dir_url( __FILE__ ) . 'vs-block-variation.js',
array( 'wp-blocks', 'wp-dom-ready' ),
filemtime( plugin_dir_path( __FILE__ ) . 'vs-block-variation.js' )
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment