Merge pull request #293 from 10up/fix/scaffold-issues

Fix asset related issues in scaffold

Author: fabiankaegy

mu-plugins/10up-plugin/src/Assets.php

@@ -68,7 +68,7 @@ public function admin_scripts() {
 	public function admin_styles() {
 		wp_enqueue_style(
 			'tenup_plugin_admin',
-			TENUP_PLUGIN_URL . 'dist/css/admin-style.css',
+			TENUP_PLUGIN_URL . 'dist/css/admin.css',
 			[],
 			$this->get_asset_info( 'admin', 'version' ),
 		);

themes/10up-block-theme/assets/css/blocks/core/image.css

@@ -0,0 +1,6 @@
+.wp-block-image {
+
+	& img[src$=".svg"] {
+		height: auto;
+	}
+}

themes/10up-block-theme/assets/css/editor-canvas-style-overrides.css

@@ -0,0 +1,33 @@
+/*
+ * This file is used to override the styling of the block editor canvas.
+ * It is enqueued in the editor iframe only.
+ */
+
+/*
+ * Override the styling of the post title in the post editor
+ * to make it look as though it's part of the editor frame instead
+ * of the post content.
+ */
+.edit-post-visual-editor__post-title-wrapper {
+	align-items: center;
+	background-color: #fff; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+	border-bottom: 1px solid #e0e0e0;
+	display: flex;
+	justify-content: flex-start;
+	margin-bottom: 0;
+	margin-top: 0 !important;
+	max-width: none;
+	min-height: 48px;
+	overflow: hidden;
+	width: 100%;
+
+	& .editor-post-title__input {
+		color: #000; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 16px;
+		height: auto;
+		line-height: 1.2;
+		padding: 2px 0;
+		width: 100%;
+	}
+}

themes/10up-block-theme/assets/css/editor-frame-style-overrides.css

@@ -0,0 +1,19 @@
+/*
+ * This file is used to override the styling of the block editor frame.
+ * It is enqueued in the editor outside of the editor canvas iframe.
+ */
+
+
+/*
+ * Small editor blocks like the footer social nav are hard to click
+ * Setting a min-height so that elements can be selected to edit
+ * Prior to this scrollbars overlapped small elements
+*/
+
+.is-root-container {
+	min-height: 90dvh;
+}
+
+.block-editor-iframe__container {
+	min-height: 70px;
+}

themes/10up-block-theme/assets/css/editor-style-overrides.css

@@ -28,7 +28,8 @@
 		"useScriptModules": true,
 		"loadBlockSpecificStyles": true,
 		"entry": {
-			"editor-style-overrides": "./assets/css/editor-style-overrides.css",
+			"editor-frame-style-overrides": "./assets/css/editor-frame-style-overrides.css",
+			"editor-canvas-style-overrides": "./assets/css/editor-canvas-style-overrides.css",
 			"frontend": "./assets/js/frontend.js",
 			"block-extensions": "./assets/js/block-extensions.js"
 		},

themes/10up-block-theme/package.json

@@ -40,20 +40,27 @@ public function register() {
 			dist_path: TENUP_BLOCK_THEME_DIST_PATH,
 			fallback_version: TENUP_BLOCK_THEME_VERSION
 		);
-		add_action( 'init', [ $this, 'scripts' ] );
 		add_action( 'init', [ $this, 'register_all_icons' ], 10 );
-		add_action( 'wp_enqueue_scripts', [ $this, 'styles' ] );
-		add_action( 'enqueue_block_editor_assets', [ $this, 'editor_style_overrides' ] );
+		add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_frontend_assets' ] );
+		add_action( 'enqueue_block_editor_assets', [ $this, 'enqueue_block_editor_assets' ] );
+		add_action( 'enqueue_block_assets', [ $this, 'enqueue_block_editor_iframe_assets' ] );
 	}
 
 	/**
-	 * Enqueue scripts for front-end.
+	 * Enqueue assets for the front-end.
 	 *
 	 * @return void
 	 */
-	public function scripts() {
+	public function enqueue_frontend_assets() {
+		wp_enqueue_style(
+			'tenup-theme-styles',
+			TENUP_BLOCK_THEME_TEMPLATE_URL . '/dist/css/frontend.css',
+			[],
+			$this->get_asset_info( 'frontend', 'version' )
+		);
+
 		wp_enqueue_script(
-			'frontend',
+			'tenup-theme-frontend',
 			TENUP_BLOCK_THEME_TEMPLATE_URL . '/dist/js/frontend.js',
 			$this->get_asset_info( 'frontend', 'dependencies' ),
 			$this->get_asset_info( 'frontend', 'version' ),
@@ -64,28 +71,16 @@ public function scripts() {
 	}
 
 	/**
-	 * Enqueue styles for front-end.
+	 * Enqueue assets for the block editor.
 	 *
-	 * @return void
-	 */
-	public function styles() {
-		wp_enqueue_style(
-			'tenup-theme-styles',
-			TENUP_BLOCK_THEME_TEMPLATE_URL . '/dist/css/frontend.css',
-			[],
-			$this->get_asset_info( 'frontend', 'version' )
-		);
-	}
-
-	/**
-	 * Enqueue styles for editor only.
+	 * These assets are enqueued in the editor outside of the editor canvas iframe.
 	 *
 	 * @return void
 	 */
-	public function editor_style_overrides() {
+	public function enqueue_block_editor_assets() {
 		wp_enqueue_style(
-			'tenup-theme-editor-style-overrides',
-			TENUP_BLOCK_THEME_TEMPLATE_URL . '/dist/css/editor-style-overrides.css',
+			'tenup-theme-editor-frame-style-overrides',
+			TENUP_BLOCK_THEME_TEMPLATE_URL . '/dist/css/editor-frame-style-overrides.css',
 			[],
 			TENUP_BLOCK_THEME_VERSION
 		);
@@ -99,6 +94,27 @@ public function editor_style_overrides() {
 		);
 	}
 
+	/**
+	 * Enqueue styles inside the editor canvas iFrame only.
+	 *
+	 * @return void
+	 */
+	public function enqueue_block_editor_iframe_assets() {
+
+		// The `enqueue_block_assets` action is triggered both on the front-end and in the editor iframe.
+		// We only want to enqueue these styles inside the editor iframe.
+		if ( ! is_admin() ) {
+			return;
+		}
+
+		wp_enqueue_style(
+			'tenup-theme-editor-canvas-style-overrides',
+			TENUP_BLOCK_THEME_TEMPLATE_URL . '/dist/css/editor-canvas-style-overrides.css',
+			[],
+			TENUP_BLOCK_THEME_VERSION
+		);
+	}
+
 	/**
 	 * register all icons located in the dist/svg folder
 	 *