Automattic\WooCommerce\EmailEditor\Engine\Renderer\ContentRenderer\Layout

Flex_Layout_Renderer::render_inner_blocks_in_layout │ public │ WC 1.0

Render inner blocks in flex layout.

Method of the class: Flex_Layout_Renderer{}

No Hooks.

Returns

String.

Usage

$Flex_Layout_Renderer = new Flex_Layout_Renderer();
$Flex_Layout_Renderer->render_inner_blocks_in_layout( $parsed_block, $rendering_context ): string;

$parsed_block(array) (required)

Parsed block.

$rendering_context(Rendering_Context) (required)

Rendering context.

Flex_Layout_Renderer::render_inner_blocks_in_layout() Flex Layout Renderer::render inner blocks in layout code ^{WC 10.5.0}

public function render_inner_blocks_in_layout( array $parsed_block, Rendering_Context $rendering_context ): string {
	$theme_styles    = $rendering_context->get_theme_styles();
	$flex_gap        = $theme_styles['spacing']['blockGap'] ?? '0px';
	$flex_gap_number = Styles_Helper::parse_value( $flex_gap );

	$margin_top = $parsed_block['email_attrs']['margin-top'] ?? '0px';
	$justify    = $parsed_block['attrs']['layout']['justifyContent'] ?? 'left';
	$styles     = wp_style_engine_get_styles( $parsed_block['attrs']['style'] ?? array() )['css'] ?? '';
	$styles    .= 'margin-top: ' . $margin_top . ';';
	$styles    .= 'text-align: ' . $justify;

	// MS Outlook doesn't support style attribute in divs so we conditionally wrap the buttons in a table and repeat styles.
	$output_html = sprintf(
		'<!--[if mso | IE]><table align="%2$s" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%%"><tr><td style="%1$s" ><![endif]-->
      <div style="%1$s"><table class="layout-flex-wrapper" style="display:inline-block"><tbody><tr>',
		esc_attr( $styles ),
		esc_attr( $justify )
	);

	$inner_blocks = $this->compute_widths_for_flex_layout( $parsed_block, $flex_gap_number );

	foreach ( $inner_blocks as $key => $block ) {
		$styles = array();
		if ( $block['email_attrs']['layout_width'] ?? null ) {
			$styles['width'] = $block['email_attrs']['layout_width'];
		}
		if ( $key > 0 ) {
			$styles['padding-left'] = $flex_gap;
		}
		$output_html .= '<td class="layout-flex-item" style="' . esc_attr( \WP_Style_Engine::compile_css( $styles, '' ) ) . '">' . render_block( $block ) . '</td>';
	}
	$output_html .= '</tr></table></div>
    <!--[if mso | IE]></td></tr></table><![endif]-->';

	return $output_html;
}