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

Flex_Layout_Renderer::render_wrapping_layout │ private │ WC 1.0

Render the inner blocks so they wrap when they don't fit on one line.

Used for auto-width button rows (e.g. a footer navigation menu) whose combined width exceeds the available width. A table row can't reflow in email, so each item is emitted as an inline-block <div>: clients that honor it (Gmail desktop, Apple Mail, most webmail) flow the items and wrap them onto multiple lines instead of stretching the email past its content width. MS Outlook (Word engine) ignores inline-block and can't wrap a row either, so an Outlook-only <br> before each item after the first forces it to stack the buttons vertically — no overflow, at the cost of a vertical list rather than a grid. Fixes NL-737.

Метод класса: Flex_Layout_Renderer{}

Хуков нет.

Возвращает

string.

Использование

// private - только в коде основоного (родительского) класса
$result = $this->render_wrapping_layout( $inner_blocks, $styles, $justify, $flex_gap, $rendering_context ): string;

$inner_blocks(массив) (обязательный)

Inner blocks (at least one is auto-width in this path).

$styles(строка) (обязательный)

Wrapper styles (already includes margin-top and text-align).

$justify(строка) (обязательный)

Resolved horizontal alignment (left/center/right).

$flex_gap(строка) (обязательный)

Gap between items (e.g. "16px").

$rendering_context(Rendering_Context) (обязательный)

Rendering context.

Код Flex_Layout_Renderer::render_wrapping_layout() Flex Layout Renderer::render wrapping layout ^{WC 11.1.1}

private function render_wrapping_layout( array $inner_blocks, string $styles, string $justify, string $flex_gap, Rendering_Context $rendering_context ): string {
	// Outlook ignores style on divs, so repeat the wrapper styles on a conditional table cell.
	$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 class="layout-flex-wrapper" style="%1$s">',
		esc_attr( $styles ),
		esc_attr( $justify )
	);

	// The gap padding must sit on the side away from the aligned (flush) edge, otherwise wrapped
	// lines carry an edge pad and misalign against each other. When items align to the end side
	// of the line flow (e.g. right in LTR), pad the start side of every item after the first;
	// otherwise (start-aligned or centered) pad the end side of every item before the last.
	$align_to_flow_end = $justify === $rendering_context->get_end_side();
	$last_key          = count( $inner_blocks ) - 1;

	foreach ( $inner_blocks as $key => $block ) {
		$item_styles = array(
			'display'        => 'inline-block',
			'vertical-align' => 'top',
			// Vertical gap so items that wrap onto a new line (and Outlook's stacked buttons) don't touch.
			'padding-bottom' => $flex_gap,
		);
		if ( $block['email_attrs']['layout_width'] ?? null ) {
			$item_styles['width'] = $block['email_attrs']['layout_width'];
		}
		if ( $align_to_flow_end && $key > 0 ) {
			$item_styles[ 'padding-' . $rendering_context->get_start_side() ] = $flex_gap;
		} elseif ( ! $align_to_flow_end && $key < $last_key ) {
			$item_styles[ 'padding-' . $rendering_context->get_end_side() ] = $flex_gap;
		}
		if ( $key > 0 ) {
			// Force a line break before every item after the first in Outlook, which can't wrap an inline row.
			$output_html .= '<!--[if mso | IE]><br><![endif]-->';
		}
		$output_html .= '<div class="layout-flex-item" style="' . esc_attr( \WP_Style_Engine::compile_css( $item_styles, '' ) ) . '">' . render_block( $block ) . '</div>';
	}
	$output_html .= '</div>
    <!--[if mso | IE]></td></tr></table><![endif]-->';

	return $output_html;
}