fix: correct subtitle order for WP 6.6 (#2341)

Automattic · Jul 9, 2024 · e75fa8e · e75fa8e
1 parent 492fce5
commit e75fa8e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 18 deletions.
diff --git a/newspack-theme/js/src/post-subtitle/index.js b/newspack-theme/js/src/post-subtitle/index.js
@@ -19,11 +19,11 @@ import { appendSubtitleToTitleDOMElement, connectWithSelect } from './utils';
  *
  * https://developer.wordpress.org/block-editor/developers/slotfills/plugin-document-setting-panel/
  */
-const NewspackSubtitlePanel = ( { subtitle, mode } ) => {
-	// Update the DOM when subtitle value changes or editor mode is switched
+const NewspackSubtitlePanel = ( { subtitle } ) => {
+	// Update the DOM when subtitle value changes.
 	useEffect( () => {
-		appendSubtitleToTitleDOMElement( subtitle, mode === 'text' );
-	}, [ subtitle, mode ] );
+		appendSubtitleToTitleDOMElement( subtitle );
+	}, [ subtitle ] );
 
 	return (
 		<PluginDocumentSettingPanel

diff --git a/newspack-theme/js/src/post-subtitle/utils.js b/newspack-theme/js/src/post-subtitle/utils.js
@@ -11,29 +11,21 @@ export const META_FIELD_NAME = 'newspack_post_subtitle';
  *
  * @param {string} subtitle Subtitle text
  */
-export const appendSubtitleToTitleDOMElement = ( subtitle, isInCodeEditor ) => {
-	let titleEl = document.querySelector( '.editor-post-title__block' ); // Legacy selector
-	if ( ! titleEl ) {
-		titleEl = document.querySelector( '.edit-post-visual-editor__post-title-wrapper' );
-	}
+export const appendSubtitleToTitleDOMElement = subtitle => {
+	const titleEl = document.querySelector( '.edit-post-visual-editor__post-title-wrapper' );
 
 	if ( titleEl && typeof subtitle === 'string' ) {
 		let subtitleEl = document.getElementById( SUBTITLE_ID );
+		const titleParent = titleEl.parentNode;
 		if ( ! subtitleEl ) {
 			subtitleEl = document.createElement( 'div' );
 			subtitleEl.id = SUBTITLE_ID;
-			// special style for the code (raw text) editor
-			if ( isInCodeEditor ) {
-				subtitleEl.style.paddingLeft = '14px';
-				subtitleEl.style.marginBottom = '4px';
-			}
-			titleEl.appendChild( subtitleEl );
+			titleParent.insertBefore( subtitleEl, titleEl.nextSibling );
 		}
 		subtitleEl.innerHTML = subtitle;
 	}
 };
 
 export const connectWithSelect = withSelect( select => ( {
 	subtitle: select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ META_FIELD_NAME ],
-	mode: select( 'core/edit-post' ).getEditorMode(),
 } ) );
diff --git a/newspack-theme/sass/style-editor-overrides.scss b/newspack-theme/sass/style-editor-overrides.scss
@@ -135,11 +135,13 @@ body.newspack-single-column-template {
 body.post-type-post {
 	.editor-post-title__block,
 	.edit-post-visual-editor__post-title-wrapper,
-	.editor-styles-wrapper h1.wp-block-post-title {
+	.editor-styles-wrapper h1.wp-block-post-title,
+	#newspack-post-subtitle-element {
 		max-width: 1200px;
 	}
 
-	.edit-post-visual-editor__post-title-wrapper {
+	.edit-post-visual-editor__post-title-wrapper,
+	#newspack-post-subtitle-element {
 		margin-left: auto;
 		margin-right: auto;
 	}