From 27b2a435b4fe32e1859e241816496d7d5f90cc57 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 13 Oct 2022 16:45:35 +1100
Subject: [PATCH] Add in server-rendered output

---
 lib/block-supports/layout.php       | 61 +++++++++++++++++++++++++++++
 lib/compat/wordpress-6.1/blocks.php |  6 +++
 2 files changed, 67 insertions(+)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 15a7a131f8a9b0..492f1b761df19a 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -25,6 +25,65 @@ function gutenberg_register_layout_support( $block_type ) {
 	}
 }
 
+/**
+ * Generates the CSS for position support from the layout object.
+ *
+ * @param string               $selector CSS selector.
+ * @param array                $layout   Layout object. The one that is passed has already checked
+ *                                       the existence of default block layout.
+ * @return string CSS styles on success. Else, empty string.
+ */
+function gutenberg_get_layout_position_style( $selector, $layout ) {
+	$position_styles = array();
+
+	$position_type = _wp_array_get( $layout, array( 'position', 'type' ), '' );
+	$position_side = _wp_array_get( $layout, array( 'position', 'side' ), '' );
+
+	$offset_value  = '0';
+
+	if (
+		in_array( $position_type, array( 'fixed', 'sticky' ), true ) &&
+		in_array( $position_side, array( 'top', 'right', 'bottom', 'left'), true )
+	) {
+		/*
+		 * For fixed or sticky top positions,
+		 * ensure the value includes an offset for the logged in admin bar.
+		 */
+		if (
+			'top' === $position_side &&
+			'fixed' === $position_type ||
+			'sticky' === $position_type
+		) {
+			$offset_value = 'var(--wp-admin--admin-bar--height, 0px)';
+		}
+
+		$position_styles[] =
+			array(
+				'selector'     => "$selector",
+				'declarations' => array(
+					'position'     => $position_type,
+					$position_side => $offset_value,
+					'z-index'      => '250', // TODO: This hard-coded value should live somewhere else.
+				),
+			);
+	}
+
+	if ( ! empty( $position_styles ) ) {
+		/*
+		 * Add to the style engine store to enqueue and render layout styles.
+		 */
+		return gutenberg_style_engine_get_stylesheet_from_css_rules(
+			$position_styles,
+			array(
+				'context'  => 'block-supports',
+				'prettify' => false,
+			)
+		);
+	}
+
+	return '';
+}
+
 /**
  * Generates the CSS corresponding to the provided layout.
  *
@@ -406,6 +465,8 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 			$block_spacing
 		);
 
+		$style .= gutenberg_get_layout_position_style( ".$block_classname.$container_class", $used_layout );
+
 		// Only add container class and enqueue block support styles if unique styles were generated.
 		if ( ! empty( $style ) ) {
 			$class_names[] = $container_class;
diff --git a/lib/compat/wordpress-6.1/blocks.php b/lib/compat/wordpress-6.1/blocks.php
index b22fb1fe18aee8..59e2aaa1ba9f18 100644
--- a/lib/compat/wordpress-6.1/blocks.php
+++ b/lib/compat/wordpress-6.1/blocks.php
@@ -20,6 +20,12 @@ function gutenberg_safe_style_attrs_6_1( $attrs ) {
 	$attrs[] = 'margin-block-end';
 	$attrs[] = 'margin-inline-start';
 	$attrs[] = 'margin-inline-end';
+	$attrs[] = 'position';
+	$attrs[] = 'top';
+	$attrs[] = 'right';
+	$attrs[] = 'bottom';
+	$attrs[] = 'left';
+	$attrs[] = 'z-index';
 
 	return $attrs;
 }