Merge pull request #4041 from Codeinwp/feat/visual_cue_editor_title

feat: show visual cue for disabled title inside editor
Codeinwp · Sep 15, 2023 · 1243a00 · 1243a00
2 parents 126e23f + 7991f0a
commit 1243a00
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 12 deletions.
diff --git a/assets/apps/metabox/src/components/MetaFieldsManager.js b/assets/apps/metabox/src/components/MetaFieldsManager.js
@@ -66,6 +66,7 @@ class MetaFieldsManager extends Component {
 		this.updateValues = this.updateValues.bind(this);
 		this.resetAll = this.resetAll.bind(this);
 		this.updateBlockWidth = this.updateBlockWidth.bind(this);
+		this.updateTitleVisibility = this.updateTitleVisibility.bind(this);
 	}
 
 	componentDidUpdate() {
@@ -91,6 +92,7 @@ class MetaFieldsManager extends Component {
 		}
 
 		this.updateBlockWidth();
+		this.updateTitleVisibility();
 	}
 
 	updateValues(id, value) {
@@ -124,12 +126,41 @@ class MetaFieldsManager extends Component {
 		});
 	}
 
+	addCSSToHead(css, styleID = 'neve-meta-editor-style') {
+		const head = document.head;
+		const hasStyle = document.getElementById(styleID);
+		if (hasStyle) {
+			hasStyle.innerHTML = css;
+			return false;
+		}
+		const style = document.createElement('style');
+		style.setAttribute('id', styleID);
+		style.innerHTML = css;
+		head.appendChild(style);
+	}
+
+	updateTitleVisibility() {
+		const title = this.props.metaValue('neve_meta_disable_title');
+		let titleOpacity = 1;
+		if ('on' === title) {
+			// make title less visible
+			titleOpacity = 0.5;
+		}
+
+		const css = 'h1.editor-post-title { opacity: ' + titleOpacity + '; }';
+
+		this.addCSSToHead(css, 'neve-meta-title-visibility-style');
+	}
 	updateBlockWidth() {
 		const isCustomContentWidth = this.props.metaValue(
 			'neve_meta_enable_content_width'
 		);
 		let containerType = this.props.metaValue('neve_meta_container');
-		if ('default' === containerType || '' === containerType) {
+		if (
+			'default' === containerType ||
+			'' === containerType ||
+			undefined === containerType
+		) {
 			containerType =
 				metaSidebar.actions.neve_meta_content_width.container;
 		}
@@ -152,21 +183,12 @@ class MetaFieldsManager extends Component {
 				) + 'px';
 		}
 
-		if (
-			document.contains(document.getElementById('neve-meta-editor-style'))
-		) {
-			document.getElementById('neve-meta-editor-style').remove();
-		}
 		const css =
 			'.wp-block:not([data-align="full"]) { max-width: ' +
 			('on' === isCustomContentWidth ? blocKWidth : blockWidthDefault) +
 			'; }';
 
-		const head = document.head;
-		const style = document.createElement('style');
-		style.setAttribute('id', 'neve-meta-editor-style');
-		style.innerHTML = css;
-		head.appendChild(style);
+		this.addCSSToHead(css);
 	}
 
 	renderPageLayoutGroup() {

diff --git a/e2e-tests/specs/editor/page.spec.ts b/e2e-tests/specs/editor/page.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Page Neve Options / Title Visibility', () => {
+	test('Starter Sites Plugin install from Dashboard Notice', async ({
+		page,
+	}) => {
+		await page.goto('wp-admin/post-new.php?post_type=page');
+
+		await page.getByRole('textbox', { name: 'Add title' }).click();
+		await page
+			.getByRole('textbox', { name: 'Add title' })
+			.fill('Test Title Visibility');
+		await page.getByRole('button', { name: 'Neve Options' }).click();
+		const titleLocator = page.locator('h1.editor-post-title');
+		await expect(titleLocator).toHaveCSS('opacity', '1');
+		await page.getByLabel('Disable Title').check();
+		await expect(titleLocator).toHaveCSS('opacity', '0.5');
+	});
+});
diff --git a/inc/views/pluggable/metabox_settings.php b/inc/views/pluggable/metabox_settings.php
@@ -207,6 +207,11 @@ public function editor_content_width() {
 			$editor_width_normal = ( empty( $meta_value ) ? 100 : $meta_value ) . '%';
 		}
 
+		$editor_title_opacity = 1;
+		$tile_disabled        = $this->get_title_disabled();
+		if ( $tile_disabled === 'on' ) {
+			$editor_title_opacity = 0.5;
+		}
 
 		$style = sprintf(
 			'
@@ -224,8 +229,10 @@ public function editor_content_width() {
 			.wp-block[data-align="full"] {
 			    max-width: none;
 			}
+			h1.editor-post-title { opacity: %s; }
 			',
-			$editor_width_normal
+			$editor_width_normal,
+			$editor_title_opacity
 		);
 
 		$style = $this->add_button_shadow_styles( $style );
@@ -235,6 +242,19 @@ public function editor_content_width() {
 
 	}
 
+	/**
+	 * Get the disabled title status.
+	 *
+	 * @return false|mixed Status of the title.
+	 */
+	public function get_title_disabled() {
+		$post_id = $this->get_post_id();
+		if ( $post_id === false ) {
+			return false;
+		}
+		return get_post_meta( $post_id, self::DISABLE_TITLE, true );
+	}
+
 	/**
 	 * Get content width, if any.
 	 *