Skip to content

Instantly share code, notes, and snippets.

@pbrocks
Last active November 17, 2021 20:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save pbrocks/48d3dd4245be101868a5b9a294a40c04 to your computer and use it in GitHub Desktop.
Save pbrocks/48d3dd4245be101868a5b9a294a40c04 to your computer and use it in GitHub Desktop.
The core image block in WordPress does not ship with its own style, but you can easily add styles with the Block Style filter, thereby enabling you to target the block with custom CSS or JS. Here I am adding two, but only one will receive any treatment.
wp.blocks.registerBlockStyle( 'core/image', {
name: 'phader',
label: 'Philly Phader'
} );
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.is-style-phader {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:5s;
-moz-animation-duration:5s;
animation-duration:5s;
}
.is-style-phader.one {
-webkit-animation-delay: 5.0s;
-moz-animation-delay: 5.0s;
animation-delay: 5.0s;
}
<?php
/**
* Plugin Name: Philly Phader
* Author: pbrocks
* Description: Add styles to WP core/image block
*/
add_action( 'enqueue_block_assets', 'philly_phader_scripts' );
/**
* [philly_phader_scripts]
*
* Enqueue for block editor and frontend.
*
* @return void
*/
function philly_phader_scripts() {
wp_enqueue_style( 'phader-style', plugins_url( 'wclancpa-2019-philly-phader.css', __FILE__ ), [], time() );
}
add_action( 'enqueue_block_editor_assets', 'philly_phader_editor_scripts' );
/**
* [philly_phader_editor_scripts]
*
* Enqueue for block editor.
*
* @return void
*/
function philly_phader_editor_scripts() {
wp_enqueue_script( 'phader-script', plugins_url( 'wclancpa-2019-imageblockstyle.js', __FILE__ ), [], time(), true );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment