Add Custom CSS support to the Group block

lib/block-supports/custom-css.php

@@ -0,0 +1,72 @@
+<?php
+/**
+ * Align block support flag.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the custom css block attribute for block types that support it.
+ *
+ * @param WP_Block_Type $block_type Block Type.
+ */
+function gutenberg_register_custom_css_support( $block_type ) {
+	$has_custom_css_support = false;
+	if ( property_exists( $block_type, 'supports' ) ) {
+		$has_custom_css_support = gutenberg_experimental_get( $block_type->supports, array( 'customCSS' ), false );
+	}
+	if ( $has_custom_css_support ) {
+		if ( ! $block_type->attributes ) {
+			$block_type->attributes = array();
+		}
+
+		if ( ! array_key_exists( 'css', $block_type->attributes ) ) {
+			$block_type->attributes['css'] = array(
+				'type' => 'string',
+			);
+		}
+	}
+}
+
+/**
+ * Add generated CSS class and the stylesheet.
+ *
+ * @param array         $attributes       Comprehensive list of attributes to be applied.
+ * @param array         $block_attributes Block attributes.
+ * @param WP_Block_Type $block_type       Block Type.
+ *
+ * @return array Block custom CSS classes.
+ */
+function gutenberg_apply_custom_css_support( $attributes, $block_attributes, $block_type ) {
+	$has_custom_css_support = false;
+	if ( property_exists( $block_type, 'supports' ) ) {
+		$has_custom_css_support = gutenberg_experimental_get( $block_type->supports, array( 'customCSS' ), false );
+    }
+	if ( $has_custom_css_support && isset( $block_attributes['css'] ) && ! empty(  $block_attributes[ 'css' ] ) ) {
+        $generated_class_name = uniqid( 'wp-block-css-' );
+        wp_add_inline_style( 
+            'wp-block-custom-css', 
+            str_replace( ':self', '.' . $generated_class_name, $block_attributes[ 'css' ] )
+        );
+        $attributes['css_classes'][] = $generated_class_name;
+	}
+
+	return $attributes;
+}
+
+/**
+ * This style is used to enqueue the dynamic block custom CSS styles.
+ */
+function gutenberg_register_custom_css_style() {
+    wp_register_style('wp-block-custom-css', false);
+}
+
+add_action( 'init', 'gutenberg_register_custom_css_style' );
+
+/**
+ * Enqueue an empty style to the footer.
+ */
+function gutenberg_enqueue_custom_css_style() {
+    wp_enqueue_style( 'wp-block-custom-css' );
+}
+add_action( 'get_footer', 'gutenberg_enqueue_custom_css_style' );

lib/block-supports/index.php

@@ -18,6 +18,7 @@ function gutenberg_register_block_supports() {
 		gutenberg_register_colors_support( $block_type );
 		gutenberg_register_typography_support( $block_type );
 		gutenberg_register_custom_classname_support( $block_type );
+		gutenberg_register_custom_css_support( $block_type );
 	}
 }
 
@@ -37,16 +38,26 @@ function gutenberg_apply_block_supports( $block_content, $block ) {
 
 	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
 	// If no render_callback, assume styles have been previously handled.
-	if ( ! $block_type || ! $block_type->render_callback ) {
+	// Custom CSS is also a server-side hook even for static blocks.
+	$has_custom_css_support = false;
+	if ( property_exists( $block_type, 'supports' ) ) {
+		$has_custom_css_support = gutenberg_experimental_get( $block_type->supports, array( 'customCSS' ), false );
+	}
+
+	if ( 
+		! ( $block_type && $block_type->render_callback ) &&
+		! $has_custom_css_support
+	) {
 		return $block_content;
 	}
-
+	
 	$attributes = array();
 	$attributes = gutenberg_apply_generated_classname_support( $attributes, $block['attrs'], $block_type );
 	$attributes = gutenberg_apply_colors_support( $attributes, $block['attrs'], $block_type );
 	$attributes = gutenberg_apply_typography_support( $attributes, $block['attrs'], $block_type );
 	$attributes = gutenberg_apply_alignment_support( $attributes, $block['attrs'], $block_type );
 	$attributes = gutenberg_apply_custom_classname_support( $attributes, $block['attrs'], $block_type );
+	$attributes = gutenberg_apply_custom_css_support( $attributes, $block['attrs'], $block_type );
 
 	if ( ! count( $attributes ) ) {
 		return $block_content;

lib/load.php

@@ -121,3 +121,4 @@ function gutenberg_is_experiment_enabled( $name ) {
 require dirname( __FILE__ ) . '/block-supports/typography.php';
 require dirname( __FILE__ ) . '/block-supports/custom-classname.php';
 require dirname( __FILE__ ) . '/block-supports/generated-classname.php';
+require dirname( __FILE__ ) . '/block-supports/custom-css.php';

packages/block-editor/src/hooks/custom-css.js

@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { has, replace } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { TextareaControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InspectorAdvancedControls from '../components/inspector-advanced-controls';
+
+/**
+ * Filters registered block settings, extending attributes to include `css`.
+ *
+ * @param  {Object} settings Original block settings
+ * @return {Object}          Filtered block settings
+ */
+export function addAttribute( settings ) {
+	// allow blocks to specify their own attribute definition with default values if needed.
+	if ( has( settings.attributes, [ 'css', 'type' ] ) ) {
+		return settings;
+	}
+	if ( hasBlockSupport( settings, 'customCSS' ) ) {
+		// Gracefully handle if settings.attributes is undefined.
+		settings.attributes = {
+			...settings.attributes,
+			css: {
+				type: 'string',
+			},
+		};
+	}
+
+	return settings;
+}
+
+/**
+ * Override the default edit UI to include new toolbar controls for block
+ * alignment, if block defines support.
+ *
+ * @param  {Function} BlockEdit Original component
+ * @return {Function}           Wrapped component
+ */
+export const withToolbarControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { name: blockName, attributes, clientId } = props;
+		const hasSupport = hasBlockSupport( blockName, 'customCSS', false );
+
+		const updateCustomCSS = ( css ) => {
+			props.setAttributes( { css } );
+		};
+
+		useEffect( () => {
+			if ( ! hasSupport && ! attributes.css ) {
+				return;
+			}
+			const node = document.createElement( 'style' );
+			node.innerHTML = replace(
+				attributes.css,
+				/:self/g,
+				`[data-block="${ clientId }"]`
+			);
+			document.body.appendChild( node );
+
+			return () => document.body.removeChild( node );
+		}, [ hasSupport, attributes.css ] );
+
+		return [
+			hasSupport && (
+				<InspectorAdvancedControls key="css-controls">
+					<TextareaControl
+						label={ __( 'Custom CSS' ) }
+						help={ __(
+							'Use :self selector to refer to the current block'
+						) }
+						value={ attributes.css || '' }
+						onChange={ updateCustomCSS }
+					/>
+				</InspectorAdvancedControls>
+			),
+			<BlockEdit key="edit" { ...props } />,
+		];
+	},
+	'withToolbarControls'
+);
+
+addFilter( 'blocks.registerBlockType', 'core/css/addAttribute', addAttribute );
+addFilter(
+	'editor.BlockEdit',
+	'core/editor/css/with-toolbar-controls',
+	withToolbarControls
+);

packages/block-editor/src/hooks/index.js

@@ -4,6 +4,7 @@
 import { AlignmentHookSettingsProvider } from './align';
 import './anchor';
 import './custom-class-name';
+import './custom-css';
 import './generated-class-name';
 import './style';
 import './color';

packages/block-library/src/group/block.json

@@ -19,6 +19,7 @@
 			"gradients": true,
 			"linkColor": true
 		},
-		"__experimentalPadding": true
+		"__experimentalPadding": true,
+		"customCSS": true
 	}
 }