Hide plugin buttons in header on mobile layouts (#49329)

Automattic · Jan 27, 2021 · f684547 · f684547
1 parent 6e72a6f
commit f684547
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/common/hide-plugin-buttons-mobile.js b/apps/editing-toolkit/editing-toolkit-plugin/common/hide-plugin-buttons-mobile.js
@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+
+import './hide-plugin-buttons-mobile.scss';
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/common/hide-plugin-buttons-mobile.scss b/apps/editing-toolkit/editing-toolkit-plugin/common/hide-plugin-buttons-mobile.scss
@@ -0,0 +1,9 @@
+@import '~@wordpress/base-styles/mixins';
+@import '~@wordpress/base-styles/variables';
+@import '~@wordpress/base-styles/breakpoints';
+
+.interface-pinned-items > button:not( :first-child ) {
+	@media ( max-width: $break-medium ) {
+		display: none;
+	}
+}
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/common/index.php b/apps/editing-toolkit/editing-toolkit-plugin/common/index.php
@@ -177,3 +177,24 @@ function get_iso_639_locale( $language ) {
 
 	return $language;
 }
+
+/**
+ * Hides plugin buttons that appear in the header on mobile devices
+ * (because there's not enough room).
+ *
+ * Can be disabled with the `a8c_fse_enqueue_hide_plugin_buttons_mobile_style` filter.
+ */
+function enqueue_hide_plugin_buttons_mobile_style() {
+	if ( apply_filters( 'a8c_fse_enqueue_hide_plugin_buttons_mobile_style', true ) ) {
+		$style_file = is_rtl()
+			? 'hide-plugin-buttons-mobile.rtl.css'
+			: 'hide-plugin-buttons-mobile.css';
+		wp_enqueue_style(
+			'a8c-fse-hide-plugin-buttons-mobile',
+			plugins_url( 'dist/' . $style_file, __FILE__ ),
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'dist/' . $style_file )
+		);
+	}
+}
+add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_hide_plugin_buttons_mobile_style' );
diff --git a/apps/editing-toolkit/package.json b/apps/editing-toolkit/package.json
@@ -22,7 +22,7 @@
 		"posts-list-block": "calypso-build --env source='posts-list-block'",
 		"dev:posts-list-block": "yarn run posts-list-block",
 		"build:posts-list-block": "NODE_ENV=production yarn run posts-list-block",
-		"common": "calypso-build --env source='common','common/data-stores'",
+		"common": "calypso-build --env source='common','common/data-stores','common/hide-plugin-buttons-mobile'",
 		"dev:common": "yarn run common",
 		"build:common": "NODE_ENV=production yarn run common",
 		"editor-gutenboarding-launch": "calypso-build --env source='editor-gutenboarding-launch'",