Hide page title switcher

assets/css/unminified/editor-style-rtl.css

@@ -155,4 +155,10 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 .editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
     background: none;
     border: 2px solid;
+}
+
+/* This targets the title wrapper only when our custom body class is present */
+.inspiro-hide-page-title .editor-visual-editor__post-title-wrapper {
+    opacity: 0.2;
+    transition: opacity 0.3s ease;
 }

assets/css/unminified/editor-style.css

@@ -155,4 +155,10 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 .editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
     background: none;
     border: 2px solid;
+}
+
+/* This targets the title wrapper only when our custom body class is present */
+.inspiro-hide-page-title .editor-visual-editor__post-title-wrapper {
+    opacity: 0.2;
+    transition: opacity 0.3s ease;
 }

assets/css/unminified/style-rtl.css

@@ -1485,7 +1485,7 @@ a:hover .nav-title,
     background: none;
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0) 100%);
     background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#33000000", endColorstr="#00000000", GradientType=0);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#00000000', GradientType=0);
 }
 
 .navbar-toggle {
@@ -2692,6 +2692,10 @@ body:not(.inspiro-front-page) .entry-header {
     padding-top: 0;
 }
 
+body.inspiro-hide-page-title .entry-header {
+    display: none;
+}
+
 body:not(.page-layout-sidebar-right) #primary {
     max-width: calc(var(--container-width) + 20px);
     margin: 0 auto;

assets/css/unminified/style.css

@@ -1485,7 +1485,7 @@ a:hover .nav-title,
     background: none;
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0) 100%);
     background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#33000000", endColorstr="#00000000", GradientType=0);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#00000000', GradientType=0);
 }
 
 .navbar-toggle {
@@ -2692,6 +2692,10 @@ body:not(.inspiro-front-page) .entry-header {
     padding-top: 0;
 }
 
+body.inspiro-hide-page-title .entry-header {
+    display: none;
+}
+
 body:not(.page-layout-sidebar-right) #primary {
     max-width: calc(var(--container-width) + 20px);
     margin: 0 auto;

assets/js/unminified/sidebar-controls.js

@@ -0,0 +1,58 @@
+(function (wp) {
+	var registerPlugin = wp.plugins.registerPlugin;
+	var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
+	var el = wp.element.createElement;
+	var PanelRow = wp.components.PanelRow;
+	var ToggleControl = wp.components.ToggleControl;
+	var useSelect = wp.data.useSelect;
+	var useDispatch = wp.data.useDispatch;
+
+	var InspiroPageSettings = function () {
+		// Fetch the meta value
+		var postMeta = useSelect(function (select) {
+			return select("core/editor").getEditedPostAttribute("meta");
+		});
+
+		var editPost = useDispatch("core/editor").editPost;
+		var isTitleHidden = postMeta
+			? !!postMeta["_inspiro_hide_title"]
+			: false;
+
+		// Apply class to the editor body so CSS can dim the title
+		if (isTitleHidden) {
+			document.body.classList.add("inspiro-hide-page-title");
+		} else {
+			document.body.classList.remove("inspiro-hide-page-title");
+		}
+
+		return el(
+			PluginDocumentSettingPanel,
+			{
+				name: "inspiro-settings-panel",
+				title: "Inspiro Settings",
+			},
+			[
+				el(
+					PanelRow,
+					{},
+					el(ToggleControl, {
+						label: "Hide Page Title",
+						checked: isTitleHidden,
+						onChange: function (value) {
+							editPost({
+								meta: {
+									...postMeta,
+									_inspiro_hide_title: value,
+								},
+							});
+						},
+					}),
+				),
+			],
+		);
+	};
+
+	registerPlugin("inspiro-sidebar-panel", {
+		render: InspiroPageSettings,
+	});
+})(window.wp);

inc/classes/class-inspiro-enqueue-scripts.php

@@ -25,6 +25,9 @@ class Inspiro_Enqueue_Scripts {
 		 * Constructor
 		 */
 		public function __construct() {
+			add_action( 'init', array( $this, 'register_pages_settings_meta' ) );
+			add_filter( 'body_class', array( $this, 'add_hide_title_class' ) );
+
 			add_action( 'wp_head', array( $this, 'javascript_detection' ), 0 );
 			add_action( 'wp_head', array( $this, 'pingback_header' ) );
 			add_action( 'wp_head', array( $this, 'colors_css_wrap' ) );
@@ -34,6 +37,35 @@ public function __construct() {
 			add_action( 'admin_enqueue_scripts', array( $this, 'admin_scripts' ) );
 		}
 
+
+		/**
+		 *  Registers custom meta field for the 'page' post type.
+		 */
+		public function register_pages_settings_meta() {
+			register_post_meta( 'page', '_inspiro_hide_title', array(
+					'type'         => 'boolean',
+					'single'       => true,
+					'show_in_rest' => true,
+					'auth_callback' => function() {
+						return current_user_can( 'edit_posts' );
+					}
+			) );
+		}
+
+		/**
+		 *  Add class to body if hidden title meta is checked
+		 */
+		public function add_hide_title_class( $classes ) {
+
+			if ( is_page() && get_post_meta( get_the_ID(), '_inspiro_hide_title', true ) ) {
+				$classes[] = 'inspiro-hide-page-title';
+			}
+
+			return $classes;
+		}
+
+
+
 		/**
 		 * Enqueue scripts and styles for all admin pages.
 		 */
@@ -100,11 +132,25 @@ public function enqueue_scripts() {
 		 * @since 1.0.0
 		 */
 		public function block_editor_styles() {
+    		global $post;
+
 			// Block styles.
 			wp_enqueue_style( 'inspiro-block-editor-style', inspiro_get_assets_uri( 'editor-style', 'css' ), array(), INSPIRO_THEME_VERSION );
 
 			// Add custom fonts.
 			Inspiro_Fonts_Manager::render_fonts();
+
+			if ( is_admin() && isset( $post ) && get_post_type( $post->ID ) === 'page' ) {
+
+				wp_enqueue_script(
+						'inspiro-sidebar-controls',
+						inspiro_get_assets_uri( 'sidebar-controls', 'js' ),
+						array('wp-plugins', 'wp-editor', 'wp-edit-post', 'wp-blocks', 'wp-dom-ready', 'wp-element', 'wp-components', 'wp-data', 'wp-i18n'),
+						INSPIRO_THEME_VERSION,
+						true
+				);
+
+			}
 		}
 
 		/**

scss/editor-style.scss

@@ -152,4 +152,11 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 .editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
     background: none;
     border: 2px solid;
+}
+
+
+/* This targets the title wrapper only when our custom body class is present */
+.inspiro-hide-page-title .editor-visual-editor__post-title-wrapper {
+    opacity: 0.2;
+    transition: opacity 0.3s ease;
 }