Fix some layout issues with FSE

postcss.config.js

@@ -1,35 +1,22 @@
-const colorPaletteGenerator = require('./bin/colorPaletteGenerator');
-
 module.exports = {
-    plugins: [
-        [
-            '@luehrsenheinrich/postcss-wp-global-styles',
-            {
-                themeJson: './theme/theme.json',
-                colorPaletteGenerator,
-            }
-        ],
-        [
-            'postcss-import',
-        ],
-        [
-            'postcss-preset-env',
-            {
-                stage: 1,
-                features: {
-                    'custom-media-queries': {
-                        preserve: false,
-                        importFrom: './theme/src/css/vars/_media-queries.css',
-                    },
-                    'custom-properties': {
-                        preserve: true,
-                        importFrom: './theme/src/css/vars.css',
-                    },
-                },
-            }
-        ],
-        [
-            'cssnano'
-        ]
-    ]
-}
+	plugins: [
+		['postcss-import'],
+		[
+			'postcss-preset-env',
+			{
+				stage: 1,
+				features: {
+					'custom-media-queries': {
+						preserve: false,
+						importFrom: './theme/src/css/vars/_media-queries.css',
+					},
+					'custom-properties': {
+						preserve: true,
+						importFrom: './theme/src/css/vars.css',
+					},
+				},
+			},
+		],
+		['cssnano'],
+	],
+};

theme/admin/src/js/script.js

@@ -1 +1,2 @@
-import './modules/test';
+// eslint-disable-next-line no-console
+console.log('The admin scripts is still emtpy.');

theme/inc/FSE/FSE.php

@@ -18,11 +18,6 @@ class FSE extends Component {
 	 * {@inheritdoc}
 	 */
 	protected function add_actions() {
-		/** Remove global styles */
-		if ( ! is_admin() ) {
-			add_action( 'init', array( $this, 'remove_global_styles' ) );
-		}
-
 		add_action( 'init', array( $this, 'remove_theme_support' ), 9 );
 	}
 
@@ -33,9 +28,7 @@ protected function add_filters() {
 		/** Filter the block type metadata */
 		add_filter( 'block_type_metadata', array( $this, 'filter_block_type_metadata' ) );
 		add_filter( 'block_type_metadata_settings', array( $this, 'filter_block_type_metadata_settings' ), 10, 2 );
-
-		/** Remove unwanted output from the editor. */
-		remove_filter( 'render_block', 'wp_render_layout_support_flag' );
+		add_filter( 'styles_inline_size_limit', '__return_zero' );
 	}
 
 	/**
@@ -58,16 +51,6 @@ public function remove_theme_support() {
 		remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
 	}
 
-	/**
-	 * Remove global styles as we handle them ourselves.
-	 *
-	 * @return void
-	 */
-	public function remove_global_styles() {
-		remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
-		remove_action( 'wp_footer', 'wp_enqueue_global_styles' );
-	}
-
 	/**
 	 * Filter block type metadata to remove unwanted output from the editor.
 	 *

theme/inc/Lazysizes/Lazysizes.php

@@ -220,7 +220,7 @@ public function rewrite_image_block( $block_content, $block, $instance ) {
 		/**
 		 * Create a new image element.
 		 */
-		$new_image_html = wp_get_attachment_image( $block['attrs']['id'], $block['attrs']['sizeSlug'] ?? 'full' );
+		$new_image_html = wp_get_attachment_image( $block['attrs']['id'] ?? null, $block['attrs']['sizeSlug'] ?? 'full' );
 
 		/**
 		 * If there is no image, we cannot do anything.

theme/inc/Scripts/Scripts.php

@@ -20,6 +20,7 @@ class Scripts extends Component {
 	 */
 	protected function add_actions() {
 		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
+		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) );
 	}
 
 	/**
@@ -45,4 +46,11 @@ public function enqueue_scripts() {
 			wp_enqueue_script( 'comment-reply' );
 		}
 	}
+
+	/**
+	 * Enqueue admin scripts.
+	 */
+	public function enqueue_admin_scripts() {
+		wp_enqueue_script( 'lhpbpt-admin-script', get_template_directory_uri() . '/admin/dist/js/script.min.js', array(), lh_theme()->get_theme_version(), true );
+	}
 }

theme/inc/Styles/Styles.php

@@ -35,9 +35,6 @@ protected function add_actions() {
 		add_action( 'after_setup_theme', array( $this, 'action_add_editor_styles' ) );
 		add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
 
-		/** Remove global styles */
-		add_action( 'init', array( $this, 'remove_global_styles' ) );
-
 		/** Remove WP Emoji */
 		add_action( 'init', array( $this, 'remove_wp_emoji' ) );
 	}
@@ -293,16 +290,6 @@ public function enqueue_block_editor_assets() {
 		wp_enqueue_style( 'lhpbpt-editor-vars', get_theme_file_uri( '/dist/css/vars.min.css' ), array(), lh_theme()->get_theme_version() );
 	}
 
-	/**
-	 * Remove global styles as we handle them ourselves.
-	 *
-	 * @return void
-	 */
-	public function remove_global_styles() {
-		remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
-		remove_action( 'wp_footer', 'wp_enqueue_global_styles' );
-	}
-
 	/**
 	 * Remove WP Emojis.
 	 *

theme/index.php

@@ -30,7 +30,7 @@
 					<div class="entry-header inner-container">
 						<h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
 					</div>
-					<div class="entry-content wide-content">
+					<div class="entry-content wp-site-blocks">
 						<?php the_content(); ?>
 					</div>
 				</article>

theme/src/css/base.css

@@ -1,5 +1,4 @@
 @import "normalize.css";
-@import "./src-base/_global-styles.css";
 @import "./src-base/_reset.css";
 @import "./src-base/_a11y.css";
 @import "./src-base/_inner-container.css";

theme/src/css/blocks.css

@@ -1,8 +1,5 @@
 @import "./src-blocks/core/columns.css";
 @import "./src-blocks/core/cover.css";
 @import "./src-blocks/core/gallery.css";
-@import "./src-blocks/core/group.css";
 @import "./src-blocks/core/spacer.css";
 @import "./src-blocks/core/embed.css";
-
-/* Test 1 */

theme/src/css/editor-styles.css

@@ -1,9 +1,3 @@
 @import "./base.css";
 @import "./blocks.css";
-@import "./src-editor-styles/_widths.css";
 @import "./src-editor-styles/_z-index.css";
-
-/* Editor Styles for blocks */
-@import "./src-blocks/core/columns-editor.css";
-
-/* Test 2 */

theme/src/css/src-base/_alignment.css

@@ -33,7 +33,6 @@
 	max-width: none;
 	margin-left: calc(var(--grid-gutter-width) * -1);
 	margin-right: calc(var(--grid-gutter-width) * -1);
-	padding: 0;
 }
 
 @media (--sm-query) {

theme/src/css/src-base/_inner-container.css

@@ -4,7 +4,6 @@
 
 .entry-content,
 .inner-container,
-.wp-block-column,
 [class*="wp-block"] > [class*="__inner-container"],
 [class*="wp-block"] > [class*="__content"] {
 	margin: 0 auto;
@@ -13,21 +12,13 @@
 	& > * {
 
 		/* The default margin */
-		margin: 0 auto;
-
-		/* The default padding */
-		padding-left: 0;
+		margin-left: auto;
+		margin-right: auto;
 
 		/**
 		 * By default, content within the container is constraint
 		 * to the content width.
 		 */
 		max-width: var(--content-width);
-
-		& + * {
-
-			/* The stack */
-			margin-top: var(--grid-gutter-height);
-		}
 	}
 }

theme/theme.json

@@ -2,6 +2,18 @@
   "$schema": "https://schemas.wp.org/trunk/theme.json",
   "version": 2,
   "settings": {
+    "spacing": {
+      "blockGap": true,
+      "margin": true,
+      "padding": true,
+      "units": [
+        "em",
+        "rem",
+        "vh",
+        "vw",
+        "%"
+      ]
+    },
     "typography": {
       "dropCap": false,
       "customFontSize": false,
@@ -44,6 +56,7 @@
       "defaultGradients": false,
       "custom": false,
       "customGradient": false,
+      "defaultDuotone": false,
       "palette": [
         {
           "name": "Primary 300",
@@ -147,5 +160,10 @@
         }
       ]
     }
+  },
+  "styles": {
+    "spacing": {
+      "blockGap": "var(--grid-gutter-height)"
+    }
   }
 }