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.
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.blocks.registerBlockStyle( 'core/image', { | |
name: 'phader', | |
label: 'Philly Phader' | |
} ); |
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
/* 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; | |
} |
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: 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