Created
March 3, 2023 20:36
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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") | |
} | |
} | |
); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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