beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Button 2: Add block variation for 'fancy' class for the image block, plus update related CSS.

Browse source
This commit is contained in:
Laurel Fulford 2018-12-11 17:45:25 -08:00
parent 47ebc4cb65
commit 33bbacd1d6
5 changed files with 179 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
button-2/assets/js/block-variations.js Normal file
View file

@ -0,0 +1,23 @@
/**
* File block-variations.js
*
* Adds block variation options for blocks in the new editor.
*
*/
// Image Block - Since this block doesn't have core block variations, add a 'default' so the "fancy" option can be turned off.
wp.blocks.registerBlockStyle( 'core/image', {
isDefault: true,
label: 'Default'
} );
// Image Block - Add a 'fancy' class, to match theme's existing "framed" style.
wp.blocks.registerBlockStyle( 'core/image', {
name: 'fancy', // Class will be turned into '.is-style-fancy'
label: 'Fancy'
} );

2
button-2/assets/js/main.js
View file

@ -5,7 +5,7 @@
( function( $ ) {
function fancyImages() {
var imgs = $( '.entry-content img.fancy' );
var imgs = $( '.entry-content img.fancy, .entry-content .is-style-fancy' );
for ( var i = 0, imgslength = imgs.length; i < imgslength; i++ ) {
if ( '' !== $( imgs[i] ) ) {

81
button-2/blocks.css
View file

@ -36,6 +36,7 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Images */
.wp-block-image .alignleft {
margin-right: 1.5em;
}
@ -54,6 +55,86 @@ p.has-drop-cap:not(:focus)::first-letter {
margin-right: 1.5em;
}
/* Images - Fancy styles */
.wp-block-image.is-style-fancy {
position: relative;
line-height: 1;
}
.wp-block-image.is-style-fancy .alignright,
.wp-block-image.is-style-fancy .alignleft,
.wp-block-image.is-style-fancy .aligncenter {
margin: 0;
}
.wp-block-image.is-style-fancy img {
display: inline-block;
max-width: 99.9%;
}
.wp-block-image.is-style-fancy .shadow {
position: absolute;
z-index: 0;
top: 0;
left: 0;
display: inline-block;
width: 100%;
height: 100%;
box-shadow: inset 0 0 85px 1px rgba(0, 0, 0, .1);
}
.wp-block-image.is-style-fancy:before,
.wp-block-image.is-style-fancy:after {
position: absolute;
z-index: 1;
top: -1px;
left: -1px;
display: block;
width: 45px;
height: 45px;
content: "";
background-image: url(img/corner.svg);
background-repeat: no-repeat;
background-size: 45px;
}
.wp-block-image.is-style-fancy:after {
right: -1px;
left: auto;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.wp-block-image.is-style-fancy > .corners:before,
.wp-block-image.is-style-fancy > .corners:after {
position: absolute;
z-index: 1;
bottom: -1px;
left: -1px;
display: block;
width: 45px;
height: 45px;
content: "";
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
background-image: url(img/corner.svg);
background-repeat: no-repeat;
background-size: 45px;
}
.wp-block-image.is-style-fancy > .corners:after {
right: -1px;
left: auto;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
/* Alignments */
.alignwide {
margin-left: -0.875em;
margin-right: -0.875em;

69
button-2/editor-blocks.css
View file

@ -171,6 +171,75 @@ Description: Gutenberg Block Editor Styles
font-size: 3.75em;
}
/* Images - Fancy styles */
.wp-block-image.is-style-fancy {
position: relative;
line-height: 1;
}
.wp-block-image.is-style-fancy .alignright,
.wp-block-image.is-style-fancy .alignleft,
.wp-block-image.is-style-fancy .aligncenter {
margin: 0;
}
.wp-block-image.is-style-fancy img {
display: inline-block;
max-width: 99.9%;
}
.wp-block-image.is-style-fancy:before,
.wp-block-image.is-style-fancy:after {
position: absolute;
z-index: 1;
top: -1px;
left: -1px;
display: block;
width: 45px;
height: 45px;
content: "";
background-image: url(img/corner.svg);
background-repeat: no-repeat;
background-size: 45px;
}
.wp-block-image.is-style-fancy:after {
right: -1px;
left: auto;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.wp-block-image.is-style-fancy > div:before,
.wp-block-image.is-style-fancy > div:after {
position: absolute;
z-index: 1;
bottom: -1px;
left: -1px;
display: block;
width: 45px;
height: 45px;
content: "";
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
background-image: url(img/corner.svg);
background-repeat: no-repeat;
background-size: 45px;
}
.wp-block-image.is-style-fancy > div:after {
right: -1px;
left: auto;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
/* Quote */
.editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large) {

5
button-2/functions.php
View file

@ -225,9 +225,14 @@ function button_2_fonts_url() {
* Gutenberg Editor Styles
*/
function button_2_editor_styles() {
// Load fonts.
wp_enqueue_style( 'button-2-fonts', button_2_fonts_url() );
// Load block editor styles.
wp_enqueue_style( 'button-2-editor-block-style', get_template_directory_uri() . '/editor-blocks.css' );
// Load option for 'Fancy' image class.
wp_enqueue_script( 'button-2-block-customization', get_template_directory_uri() . '/assets/js/block-variations.js', array( 'wp-blocks' ), '20181211', true );
}
add_action( 'enqueue_block_editor_assets', 'button_2_editor_styles' );