Merge pull request #425 from Automattic/button-add-fancy-styles

Button 2: Add block variation for 'fancy' class for the image block

button-2/assets/js/block-variations.js

@@ -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'
+} );
+
+
+

button-2/assets/js/main.js

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

button-2/blocks.css

@@ -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;

button-2/editor-blocks.css

@@ -171,6 +171,84 @@ Description: Gutenberg Block Editor Styles
 	font-size: 3.75em;
 }
 
+/* Images - Fancy styles */
+
+.wp-block-image.is-style-fancy,
+.wp-block-image.fancy {
+	position: relative;
+	line-height: 1;
+}
+
+.wp-block-image.is-style-fancy .alignright,
+.wp-block-image.fancy .alignright,
+.wp-block-image.is-style-fancy .alignleft,
+.wp-block-image.fancy .alignleft,
+.wp-block-image.is-style-fancy .aligncenter,
+.wp-block-image.fancy .aligncenter {
+	margin: 0;
+}
+
+.wp-block-image.is-style-fancy img,
+.wp-block-image.fancy img {
+	display: inline-block;
+	max-width: 99.9%;
+}
+
+.wp-block-image.is-style-fancy:before,
+.wp-block-image.fancy:before,
+.wp-block-image.is-style-fancy:after,
+.wp-block-image.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,
+.wp-block-image.fancy:after {
+	right: -1px;
+	left: auto;
+	-webkit-transform: rotate(90deg);
+		-ms-transform: rotate(90deg);
+			transform: rotate(90deg);
+}
+
+.wp-block-image.is-style-fancy .components-resizable-box__container:before,
+.wp-block-image.fancy .components-resizable-box__container:before,
+.wp-block-image.is-style-fancy .components-resizable-box__container:after,
+.wp-block-image.fancy .components-resizable-box__container: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 .components-resizable-box__container:after,
+.wp-block-image.fancy .components-resizable-box__container: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) {

button-2/functions.php

@@ -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' );