wpseek.com
A WordPress-centric search engine for devs and theme authors



wp_get_layout_style › WordPress Function

Since5.9.0
Deprecatedn/a
wp_get_layout_style ( $selector, $layout, $has_block_gap_support = false )
Access:
  • private
Parameters: (3)
  • (string) $selector CSS selector.
    Required: Yes
  • (array) $layout Layout object. The one that is passed has already checked the existance of default block layout.
    Required: Yes
  • (bool) $has_block_gap_support Whether the theme has support for the block gap.
    Required: No
    Default: false
Returns:
  • (string) CSS style.
Defined at:
Codex:

Generates the CSS corresponding to the provided layout.



Source

function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false ) {
	$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';

	$style = '';
	if ( 'default' === $layout_type ) {
		$content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : null;
		$wide_size    = isset( $layout['wideSize'] ) ? $layout['wideSize'] : null;

		$all_max_width_value  = $content_size ? $content_size : $wide_size;
		$wide_max_width_value = $wide_size ? $wide_size : $content_size;

		// Make sure there is a single CSS rule, and all tags are stripped for security.
		// TODO: Use `safecss_filter_attr` instead - once https://core.trac.wordpress.org/ticket/46197 is patched.
		$all_max_width_value  = wp_strip_all_tags( explode( ';', $all_max_width_value )[0] );
		$wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] );

		$style = '';
		if ( $content_size || $wide_size ) {
			$style  = "$selector > * {";
			$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
			$style .= 'margin-left: auto !important;';
			$style .= 'margin-right: auto !important;';
			$style .= '}';

			$style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
			$style .= "$selector .alignfull { max-width: none; }";
		}

		$style .= "$selector .alignleft { float: left; margin-right: 2em; }";
		$style .= "$selector .alignright { float: right; margin-left: 2em; }";
		if ( $has_block_gap_support ) {
			$style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
			$style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
		}
	} elseif ( 'flex' === $layout_type ) {
		$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';

		$justify_content_options = array(
			'left'   => 'flex-start',
			'right'  => 'flex-end',
			'center' => 'center',
		);

		if ( 'horizontal' === $layout_orientation ) {
			$justify_content_options += array( 'space-between' => 'space-between' );
		}

		$flex_wrap_options = array( 'wrap', 'nowrap' );
		$flex_wrap         = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ?
			$layout['flexWrap'] :
			'wrap';

		$style  = "$selector {";
		$style .= 'display: flex;';
		if ( $has_block_gap_support ) {
			$style .= 'gap: var( --wp--style--block-gap, 0.5em );';
		} else {
			$style .= 'gap: 0.5em;';
		}
		$style .= "flex-wrap: $flex_wrap;";
		$style .= 'align-items: center;';
		if ( 'horizontal' === $layout_orientation ) {
			$style .= 'align-items: center;';
			/**
			 * Add this style only if is not empty for backwards compatibility,
			 * since we intend to convert blocks that had flex layout implemented
			 * by custom css.
			 */
			if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
				$style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
				if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
					// --layout-justification-setting allows children to inherit the value regardless or row or column direction.
					$style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
					$style .= '--layout-direction: row;';
					$style .= "--layout-wrap: $flex_wrap;";
					$style .= "--layout-justify: {$justify_content_options[ $layout['justifyContent'] ]};";
					$style .= '--layout-align: center;';
				}
			}
		} else {
			$style .= 'flex-direction: column;';
			if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
				$style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
				if ( ! empty( $layout['setCascadingProperties'] ) && $layout['setCascadingProperties'] ) {
					// --layout-justification-setting allows children to inherit the value regardless or row or column direction.
					$style .= "--layout-justification-setting: {$justify_content_options[ $layout['justifyContent'] ]};";
					$style .= '--layout-direction: column;';
					$style .= '--layout-justify: initial;';
					$style .= "--layout-align: {$justify_content_options[ $layout['justifyContent'] ]};";
				}
			}
		}
		$style .= '}';

		$style .= "$selector > * { margin: 0; }";
	}

	return $style;
}