Categories
Gutenberg

Add New Custom Style to the Gutenberg’s Image Block

I wanted to do a little style changes on the Gutenberg’s image block. By default a tiny caption is located below the image and it looks absolutely plain. I might need an image with more appealing look for certain purpose of website in the future. It would be better to use existing block and add extra style option, instead of creating a new one which would be waste of time.

Common way to accomplish it is to add a couple lines of CSS code into Customizer. However it against user friendliness principle of Gutenberg. Users should not add any code as it might not easy for beginners.

Gutenberg API has provided an easy way for developers to do this. It allows me to add new custom style option, which only requires a single click for user to activate. ThemeShaper has complete documentation for this at this link.

I made a simple plugin which only contains three files: index.php, block.js, and style.css.

index.php

<?php
/**
 * Plugin Name: Global Style for Image Block
 * Plugin URI: https://kharis.risbl.co
 * Description: A simple plugin to add new global styles for image block only.
 * Version: 1.0
 * Author: Kharis Sulistiyono
 */

/**
 * Enqueue Block Styles Javascript
 */
function risbl_gbs_image_enqueue_javascript() {
	wp_enqueue_script( 'block-styles-image-script',
		plugins_url( 'block.js', __FILE__ ),
		array( 'wp-blocks')
	);
}
add_action( 'enqueue_block_editor_assets', 'risbl_gbs_image_enqueue_javascript' );

/**
 * Enqueue Block Styles Stylesheet
 */
function risbl_gbs_image_enqueue_stylesheet() {
	wp_enqueue_style( 'block-styles-image-stylesheet',
		plugins_url( 'style.css', __FILE__ )
	);
}
add_action( 'enqueue_block_assets', 'risbl_gbs_image_enqueue_stylesheet' );

block.js

/**
 * Add new custom style option.
 */

wp.blocks.registerBlockStyle( 'core/image', {
	name: 'caption-overlay',
	label: 'Caption Overlay'
} );

style.css

/**
 * Styling the image and caption 
 * when .is-style-caption-overlay presents.
 */

.is-style-caption-overlay figure,
.wp-block-image.is-style-caption-overlay {
  position: relative;
}

.is-style-caption-overlay figure:after,
.wp-block-image.is-style-caption-overlay:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0) 77%, rgba(2,0,36,0.7) 100%);
}

.is-style-caption-overlay figcaption,
.wp-block-image.is-style-caption-overlay figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 2.7rem !important;
  color: #fff !important;
  font-weight: 300;
  letter-spacing: 3.7px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 5;
  display: block;
  width: 100%;
  height: 70px;
  line-height: 70px;
  padding-left: 15px;
  padding-right: 15px;
}

.is-style-caption-overlay figure.aligncenter figcaption,
.wp-block-image.is-style-caption-overlay.aligncenter figcaption {
  text-align: center;
}

.is-style-caption-overlay figure.alignright figcaption,
.wp-block-image.is-style-caption-overlay.aligncenter figcaption {
  text-align: right;
}

After I installed and activated the plugin, new style option “Caption Overlay” appears on the sidebar; under “Styles”.

When default style enabled, the image appears like this.

Ketapang Kencana

When new custom style — “Custom Overlay” — enabled, I got this result.

Ketapang Kencana

Tegal, January 01, 2020

Leave a Reply

Your email address will not be published. Required fields are marked *