Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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: bprocks
* Description: Add styles to WP core/image block
*/
add_action( 'enqueue_block_assets', 'philly_phader_scripts' );
function philly_phader_scripts() {
wp_enqueue_style( 'phader-style', plugins_url( 'wclancpa-2019-philly-phader.css', __FILE__ ), [], time() );
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
You can’t perform that action at this time.