Add new post title toggle in the editor and supporting template tag

dist/app-scripts.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '31d6cfe0d16ae931b73c');
+<?php return array('dependencies' => array(), 'version' => '73ca4f9fc2a58ef804ee');

dist/app-styles.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '58d5c30dad0de1e92608');
+<?php return array('dependencies' => array(), 'version' => 'e8211cadd8fa50d57568');

dist/app-styles.css

@@ -1,5 +1,8 @@
 /**
  * Base Styles.
+ *
+ * Resets, normalization,fonts, etc. are best handled here.
+ * These are the base styles that other styles will build upon.
  */
 /*! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
  */
@@ -13,7 +16,7 @@
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: #e5e7eb; /* 2 */
+  border-color: currentColor; /* 2 */
 }
 ::before,
 ::after {
@@ -29,7 +32,7 @@ html {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
   tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-family: var(--wp--preset--font-family--sans); /* 4 */
 }
 /*
 1. Remove the margin in all browsers.
@@ -486,8 +489,12 @@ select {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+/* @import "base/example"; */
 /**
  * Component Styles.
+ *
+ * Components are things that can be broken up into individual pieces of code.
+ * A good example of this is a button.
  */
 .container {
   width: 100%;
@@ -526,16 +533,26 @@ select {
     max-width: 1536px;
   }
 }
+/* @import "components/example"; */
 /**
  * Block Styles.
+ *
+ * Styles specifically for blocks. These would typically be overrrides for
+ * core blocks, but any other block styling can go here too.
  */
-/* @import "blocks/core/columns"; */
+/* @import "blocks/core/example"; */
 /**
- * Pattern Styles.
+ * Vendor Styles.
+ *
+ * Styles specifically for 3rd parties like Splide, FacetWP, Gravity Forms etc.
  */
-/* @import "patterns/pattern-name"; */
+/* @import "vendor/example"; */
 /**
  * Utility Styles.
+ *
+ * The bulk of Tailwind classes will go here. Any other custom utility
+ * classes should also go here. This should always be the last layer
+ * in this file, as utility classes should always trump other styles.
  */
 .sr-only {
   position: absolute;
@@ -548,6 +565,9 @@ select {
   white-space: nowrap;
   border-width: 0;
 }
+.invisible {
+  visibility: hidden;
+}
 .static {
   position: static;
 }
@@ -560,9 +580,19 @@ select {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.outline {
+  outline-style: solid;
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.transition {
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 [x-cloak] {
 	display: none !important;
 }

dist/editor-scripts.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '31d6cfe0d16ae931b73c');
+<?php return array('dependencies' => array('wp-data'), 'version' => '5db5d7d536d6723e2e8a');

dist/editor-styles.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '58d5c30dad0de1e92608');
+<?php return array('dependencies' => array(), 'version' => '365698ddaf15a63c161f');

dist/editor-styles.css

@@ -1,5 +1,8 @@
 /**
  * Base Styles.
+ *
+ * Resets, normalization,fonts, etc. are best handled here.
+ * These are the base styles that other styles will build upon.
  */
 /*! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
  */
@@ -13,7 +16,7 @@
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: #e5e7eb; /* 2 */
+  border-color: currentColor; /* 2 */
 }
 ::before,
 ::after {
@@ -29,7 +32,7 @@ html {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
   tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-family: var(--wp--preset--font-family--sans); /* 4 */
 }
 /*
 1. Remove the margin in all browsers.
@@ -486,8 +489,12 @@ select {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+/* @import "base/example"; */
 /**
  * Component Styles.
+ *
+ * Components are things that can be broken up into individual pieces of code.
+ * A good example of this is a button.
  */
 .container {
   width: 100%;
@@ -526,16 +533,26 @@ select {
     max-width: 1536px;
   }
 }
+/* @import "components/example"; */
 /**
  * Block Styles.
+ *
+ * Styles specifically for blocks. These would typically be overrrides for
+ * core blocks, but any other block styling can go here too.
  */
-/* @import "blocks/core/columns"; */
+/* @import "blocks/core/example"; */
 /**
- * Pattern Styles.
+ * Vendor Styles.
+ *
+ * Styles specifically for 3rd parties like Splide, FacetWP, Gravity Forms etc.
  */
-/* @import "patterns/pattern-name"; */
+/* @import "vendor/example"; */
 /**
  * Utility Styles.
+ *
+ * The bulk of Tailwind classes will go here. Any other custom utility
+ * classes should also go here. This should always be the last layer
+ * in this file, as utility classes should always trump other styles.
  */
 .sr-only {
   position: absolute;
@@ -548,6 +565,9 @@ select {
   white-space: nowrap;
   border-width: 0;
 }
+.invisible {
+  visibility: hidden;
+}
 .static {
   position: static;
 }
@@ -560,12 +580,114 @@ select {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.outline {
+  outline-style: solid;
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.transition {
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 [x-cloak] {
 	display: none !important;
 }
+/**
+ * Editor Styles.
+ *
+ * Anything more specific to the editor should go here.
+ */
+/**
+ * Page title.
+ * Also includes styling for the page title display toggle.
+ */
+.edit-post-visual-editor__post-title-wrapper {
+	position: relative;
+	max-width: var(--pulsar-content-width);
+	margin-left: auto;
+	margin-right: auto;
+}
+.edit-post-visual-editor__post-title-wrapper.invisible {
+		opacity: 0.5;
+		visibility: visible;
+	}
+.edit-post-visual-editor__post-title-wrapper:hover .editor-post-title__input, .edit-post-visual-editor__post-title-wrapper:focus-within .editor-post-title__input {
+			box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+		}
+.edit-post-visual-editor__post-title-wrapper:hover .editor-post-title__input:focus, .edit-post-visual-editor__post-title-wrapper:focus-within .editor-post-title__input:focus {
+				outline: none;
+			}
+.edit-post-visual-editor__post-title-wrapper:hover .title-visibility, .edit-post-visual-editor__post-title-wrapper:focus-within .title-visibility {
+			opacity: 1;
+		}
+.edit-post-visual-editor__post-title-wrapper .editor-post-title__input {
+		padding: 12px 36px 12px 0;
+		transition: all 0.2s;
+		width: 100% !important;
+	}
+.edit-post-visual-editor__post-title-wrapper .editor-post-title__input.is-selected {
+			box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+		}
+.edit-post-visual-editor__post-title-wrapper .editor-post-title__input.is-selected .title-visibility {
+				opacity: 1;
+				color: var(--wp-admin-theme-color);
+			}
+.edit-post-visual-editor__post-title-wrapper .title-visibility {
+		cursor: pointer;
+		font-size: 18px;
+		width: 36px;
+		height: 100%;
+		text-align: center;
+		color: var(--wp-admin-theme-color);
+		vertical-align: middle;
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		opacity: 0;
+		margin: 0 !important;
+		padding: 0 !important;
+		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+		transition: all 0.2s;
+		background-color: #fff;
+	}
+.edit-post-visual-editor__post-title-wrapper .title-visibility:hover {
+			opacity: 1;
+			color: var(--wp-admin-theme-color);
+		}
+.edit-post-visual-editor__post-title-wrapper .title-visibility:hover::after {
+				opacity: 1;
+				visibility: visible;
+			}
+.edit-post-visual-editor__post-title-wrapper .title-visibility::before {
+			width: 100%;
+			height: 100%;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+		}
+.edit-post-visual-editor__post-title-wrapper .title-visibility::after {
+			content: attr(data-tooltip);
+			white-space: nowrap;
+			border-radius: 2px;
+			pointer-events: none;
+			color: #fff;
+			background: #1e1e1e;
+			opacity: 0;
+			visibility: hidden;
+			width: max-content;
+			line-height: 26px;
+			margin-left: -1px;
+			display: flex;
+			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+			align-items: flex-start;
+			padding: 0 6px;
+			font-size: 12px;
+			transition: all 0.2s;
+		}
 @media (min-width: 1024px) {
   .lg\:hidden {
     display: none;

includes/classes/Setup.php

@@ -25,6 +25,7 @@ public function boot() {
 		add_action( 'init', [ $this, 'image_sizes' ] );
 		add_action( 'widgets_init', [ $this, 'widget_areas' ] );
 		add_action( 'wp_head', [ $this, 'javascript_detected' ], 0 );
+		add_action( 'init', [ $this, 'page_title_meta' ] );
 	}
 
 	/**
@@ -145,4 +146,24 @@ public function javascript_detected() {
 
 		echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
 	}
+
+	/**
+	 * Register post meta used in the theme for showing/hiding the page title.
+	 *
+	 * @return void
+	 */
+	public function page_title_meta() {
+
+		register_post_meta(
+			'',
+			'display_post_title',
+			array(
+				'show_in_rest'  => true,
+				'single'        => true,
+				'default'       => true,
+				'type'          => 'boolean',
+				'auth_callback' => '__return_true',
+			)
+		);
+	}
 }

includes/template-tags/post-title.php

@@ -0,0 +1,13 @@
+<?php
+namespace Pulsar;
+
+/**
+ * Check if the post title for the current page should be shown.
+ *
+ * @return bool
+ */
+function display_post_title() {
+	global $post;
+
+	return get_post_meta( $post->ID, 'display_post_title', true );
+}

parts/content/page.php

@@ -1,9 +1,11 @@
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-	<header class="entry-header">
-		<h1 class="entry-title">
-			<?php the_title(); ?>
-		</h1>
-	</header>
+	<?php if ( Pulsar\display_post_title() ) : ?>
+		<header class="entry-header">
+			<h1 class="entry-title">
+				<?php the_title(); ?>
+			</h1>
+		</header>
+	<?php endif; ?>
 
 	<div class="entry-content">
 		<?php the_content(); ?>

parts/content/single.php

@@ -1,9 +1,11 @@
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-	<header class="entry-header">
-		<h1 class="entry-title">
-			<?php the_title(); ?>
-		</h1>
-	</header>
+	<?php if ( Pulsar\display_post_title() ) : ?>
+		<header class="entry-header">
+			<h1 class="entry-title">
+				<?php the_title(); ?>
+			</h1>
+		</header>
+	<?php endif; ?>
 
 	<div class="entry-content">
 		<?php the_content(); ?>