Gutenberg uses blocks to manage the different types of content. render_block() function takes a single parsed block object and returns the rendered HTML for that block.

Html is predefined in the blocks and in the time when the block is necessary to be modified, we can use the filter.

// CUSTOMIZE CORE/GROUP BLOCK AND ADD CONTAINER CLASS
function app_render_block( string $block_content, array $block){
    if ( $block['blockName'] === 'core/group' && !is_admin() ) {
		$groupCustomStyle = $block['attrs']['style'];
		$hasBgClass = get_background_class($groupCustomStyle);
		$hasCustomStyle = get_group_select_style($groupCustomStyle);
		//Preserving the default styling class of group block attributes
		$groupBlockClasses = '';
		if( $block['attrs']['textColor'] ) {
			$groupBlockClasses .=  ' has-'.$block['attrs']['textColor'].'-color';
		}

		if( $block['attrs']['gradient'] ) {
			$groupBlockClasses .= ' has-'.$block['attrs']['gradient'].'-gradient-background has-background';
		}

		if( $block['attrs']['backgroundColor'] ) {
			$groupBlockClasses .= ' has-'.$block['attrs']['backgroundColor'].'-background-color has-background';
		}

		if( $block['attrs']['className'] ) {
			$groupBlockClasses .= ' '.$block['attrs']['className'];
		}
		
			$html = '<div class="group wp-block-group' . $groupBlockClasses . $hasBgClass. ' " '.$hasCustomStyle.'>' . "\n";
			$html .= '<div class="container">';

			if ( isset( $block['innerBlocks'] ) ) {
				foreach ($block['innerBlocks'] as $inner_block) {
					$html .= render_block($inner_block);
				}
			}
			$html .= '</div>';
			$html .= '</div>';
       return $html;
    }

	/*
	 * By default heading is not wrapped by any container class.
	 * CUSTOMIZE CORE/HEADING BLOCK AND ADD CONTAINER CLASS HEADING
	 * 
	 */
	if ($block['blockName'] === 'core/heading') {
			$html = '<div class="heading">';
			$html .= $block_content;
			$html .= '</div>';
		return $html;
	  }

	/*
	 * By default paragraph is not wrapped by any container class.
	 * CUSTOMIZE CORE/PARAGRAPH BLOCK AND ADD CONTAINER CLASS PARAGRAPH
	 * 
	 */
	if ($block['blockName'] === 'core/paragraph') {
			$html = '<div class="paragraph">';
			$html .= $block_content;
			$html .= '</div>';
		return $html;
	  }


    return $block_content;
}
add_filter('render_block', 'app_render_block', 10, 2);

/* 
 * Return custom style for text and background
 */
function get_group_select_style($groupStyle){

	if(!$groupStyle) return '';
	$color = $groupStyle['color'];
	$bgColor = $color['background'];
	$groupCustomStyle = [];

	$style = "";
	if( isset($color['text'] ) ) {
		$groupCustomStyle['color'] = $color['text'];
	}

	if( isset( $color['background'] ) ) {
		$groupCustomStyle['background-color'] = $color['background'];
	}

	if(isset($groupCustomStyle) && !empty($groupCustomStyle)) {
		array_walk($groupCustomStyle, function(&$value, $key) {
			$value = "{$key}:{$value}";
		});
		$style = 'style="'.implode(';', $groupCustomStyle).'"';
	}

	return $style;
}
/* 
 * Return class for text and background
 */
function get_background_class($groupStyle) {
	if(!$groupStyle) return ;
	$color = $groupStyle['color'];
	$bgClass = [];
	if($color['text'])  array_push($bgClass, ' has-text-color');
	if($color['background'])  array_push($bgClass, ' has-background') ;
	if(!empty($bgClass)) return implode(' ',$bgClass);

	return ;
}

Views: 194