From 1d7cdbeab7707c823eda0067fc18fb5f7e06220a Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Sun, 9 Feb 2020 19:39:54 +0000
Subject: [PATCH] Editor: Fix incorrect usage of ID attributes on custom
 fields.

Repeated containers used for custom fields have duplicate ID attributes. Duplicate IDs are incorrect HTML, and will also cause unexpected results when trying to manipulate using JS. Duplicate IDs are changed to matching classes; CSS & JS updated to match.

Props jankimoradiya, audrasjb, donmhico, afercia.
Fixes #46964.


git-svn-id: https://develop.svn.wordpress.org/trunk@47222 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/_enqueues/admin/postbox.js   |  2 +-
 src/wp-admin/css/dashboard.css      |  6 +--
 src/wp-admin/css/edit.css           | 58 ++++++++++++++---------------
 src/wp-admin/css/ie.css             | 12 +++---
 src/wp-admin/css/media.css          |  4 +-
 src/wp-admin/edit-form-advanced.php |  4 +-
 src/wp-admin/edit-form-comment.php  |  4 +-
 src/wp-admin/edit-link-form.php     |  4 +-
 src/wp-admin/includes/dashboard.php |  2 +-
 src/wp-admin/includes/post.php      |  4 +-
 10 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/js/_enqueues/admin/postbox.js b/src/js/_enqueues/admin/postbox.js
index ff144777f9..919ac92659 100644
--- a/src/js/_enqueues/admin/postbox.js
+++ b/src/js/_enqueues/admin/postbox.js
@@ -421,7 +421,7 @@
 					break;
 				case 0:
 				case 180:
-					if ( $('#poststuff').length ) {
+					if ( $( '.poststuff' ).length ) {
 						this._pb_edit(1);
 					} else {
 						if ( !check.length || !check.is(':checked') )
diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index eac01008e8..02cbf11db7 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -6,7 +6,7 @@
 	width: 49.5%;
 }
 
-#wpbody-content #dashboard-widgets.columns-2 #postbox-container-2,
+#wpbody-content #dashboard-widgets.columns-2 .postbox-container-2,
 #wpbody-content #dashboard-widgets.columns-2 #postbox-container-3,
 #wpbody-content #dashboard-widgets.columns-2 #postbox-container-4 {
 	float: right;
@@ -42,7 +42,7 @@
 	width: 49.5%;
 }
 
-.ie8 #wpbody-content #dashboard-widgets #postbox-container-2,
+.ie8 #wpbody-content #dashboard-widgets .postbox-container-2,
 .ie8 #wpbody-content #dashboard-widgets #postbox-container-3,
 .ie8 #wpbody-content #dashboard-widgets #postbox-container-4 {
 	float: right;
@@ -1112,7 +1112,7 @@ a.rsswidget {
 		width: 49.5%;
 	}
 
-	#wpbody-content #dashboard-widgets #postbox-container-2,
+	#wpbody-content #dashboard-widgets .postbox-container-2,
 	#wpbody-content #dashboard-widgets #postbox-container-3,
 	#wpbody-content #dashboard-widgets #postbox-container-4 {
 		float: right;
diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index 656b953058..9ce2f72a5f 100644
--- a/src/wp-admin/css/edit.css
+++ b/src/wp-admin/css/edit.css
@@ -1,17 +1,17 @@
-#poststuff {
+.poststuff {
 	padding-top: 10px;
 	min-width: 763px;
 }
 
-#poststuff #post-body {
+.poststuff #post-body {
 	padding: 0;
 }
 
-#poststuff .postbox-container {
+.poststuff .postbox-container {
 	width: 100%;
 }
 
-#poststuff #post-body.columns-2 {
+.poststuff #post-body.columns-2 {
 	margin-right: 300px;
 }
 
@@ -51,7 +51,7 @@
 	margin: 0;
 }
 
-#poststuff #titlewrap {
+.poststuff #titlewrap {
 	border: 0;
 	padding: 0;
 }
@@ -414,7 +414,7 @@ form#tags-filter {
 	padding-top: 20px;
 }
 
-#poststuff #post-body.columns-2 #side-sortables {
+.poststuff #post-body.columns-2 #side-sortables {
 	width: 280px;
 }
 
@@ -596,34 +596,34 @@ form#tags-filter {
 	text-indent: 0;
 }
 
-#poststuff h3.hndle, /* Back-compat for pre-4.4 */
-#poststuff .stuffbox > h3, /* Back-compat for pre-4.4 */
-#poststuff h2 {
+.poststuff h3.hndle, /* Back-compat for pre-4.4 */
+.poststuff .stuffbox > h3, /* Back-compat for pre-4.4 */
+.poststuff h2 {
 	font-size: 14px;
 	padding: 8px 12px;
 	margin: 0;
 	line-height: 1.4;
 }
 
-#poststuff .stuffbox h2 {
+.poststuff .stuffbox h2 {
 	padding: 8px 10px;
 }
 
-#poststuff .inside {
+.poststuff .inside {
 	margin: 6px 0 0 0;
 }
 
-#poststuff .stuffbox .inside {
+.poststuff .stuffbox .inside {
 	margin: 0;
 }
 
-#poststuff .inside #parent_id,
-#poststuff .inside #page_template {
+.poststuff .inside #parent_id,
+.poststuff .inside #page_template {
 	max-width: 100%;
 }
 
-.ie8 #poststuff .inside #parent_id,
-.ie8 #poststuff .inside #page_template {
+.ie8 .poststuff .inside #parent_id,
+.ie8 .poststuff .inside #page_template {
 	width: 250px;
 }
 
@@ -642,7 +642,7 @@ form#tags-filter {
 }
 
 #linksubmitdiv .inside, /* Old Link Manager back-compat. */
-#poststuff #submitdiv .inside {
+.poststuff #submitdiv .inside {
 	margin: 0;
 	padding: 0;
 }
@@ -1091,11 +1091,11 @@ p.description code {
   13.0 - Tags
 ------------------------------------------------------------------------------*/
 
-#poststuff .tagsdiv .ajaxtag {
+.poststuff .tagsdiv .ajaxtag {
 	margin-top: 1em;
 }
 
-#poststuff .tagsdiv .howto {
+.poststuff .tagsdiv .howto {
 	margin: 1em 0 6px 0;
 }
 
@@ -1140,7 +1140,7 @@ p.popular-tags a {
 	margin: 2px 0 12px;
 }
 
-#poststuff .inside .the-tagcloud {
+.poststuff .inside .the-tagcloud {
 	margin: 5px 0 10px;
 	padding: 8px;
 	border: 1px solid #ddd;
@@ -1412,11 +1412,11 @@ table.links-table {
 
 /* one column on the post write/edit screen */
 @media only screen and (max-width: 850px) {
-	#poststuff {
+	.poststuff {
 		min-width: 0;
 	}
 
-	#wpbody-content #poststuff #post-body {
+	#wpbody-content .poststuff #post-body {
 		margin: 0;
 	}
 
@@ -1425,14 +1425,14 @@ table.links-table {
 		width: 100%;
 	}
 
-	#poststuff #postbox-container-1 .empty-container,
-	#poststuff #postbox-container-1 #side-sortables:empty {
+	.poststuff #postbox-container-1 .empty-container,
+	.poststuff #postbox-container-1 #side-sortables:empty {
 		border: 0 none;
 		height: 0;
 		min-height: 0;
 	}
 
-	#poststuff #post-body.columns-2 #side-sortables {
+	.poststuff #post-body.columns-2 #side-sortables {
 		min-height: 0;
 		width: auto;
 	}
@@ -1457,13 +1457,13 @@ table.links-table {
 		padding: 10px 10px;
 	}
 
-	#poststuff .stuffbox .inside {
+	.poststuff .stuffbox .inside {
 		padding: 0 2px 4px 0;
 	}
 
-	#poststuff h3.hndle, /* Back-compat for pre-4.4 */
-	#poststuff .stuffbox > h3, /* Back-compat for pre-4.4 */
-	#poststuff h2 {
+	.poststuff h3.hndle, /* Back-compat for pre-4.4 */
+	.poststuff .stuffbox > h3, /* Back-compat for pre-4.4 */
+	.poststuff h2 {
 		padding: 12px;
 	}
 
diff --git a/src/wp-admin/css/ie.css b/src/wp-admin/css/ie.css
index 00853ab7c8..89a6d38629 100644
--- a/src/wp-admin/css/ie.css
+++ b/src/wp-admin/css/ie.css
@@ -13,7 +13,7 @@
 	width: 49.5%;
 }
 
-#wpbody-content #dashboard-widgets #postbox-container-2,
+#wpbody-content #dashboard-widgets .postbox-container-2,
 #wpbody-content #dashboard-widgets #postbox-container-3,
 #wpbody-content #dashboard-widgets #postbox-container-4 {
 	float: right;
@@ -367,7 +367,7 @@ a.button.button-small {
 #wrap,
 #postdivrich,
 #postdiv,
-#poststuff,
+.poststuff,
 .metabox-holder,
 #titlediv,
 #post-body,
@@ -414,12 +414,12 @@ form#template div {
 	padding: 0 4px;
 }
 
-#poststuff h2 {
+.poststuff h2 {
 	font-size: 1.6em;
 }
 
-#poststuff .inside #parent_id,
-#poststuff .inside #page_template,
+.poststuff .inside #parent_id,
+.poststuff .inside #page_template,
 .inline-edit-row #post_parent,
 .inline-edit-row select[name="page_template"] {
 	width: 250px;
@@ -677,7 +677,7 @@ input[type="password"],
 	padding: 0;
 }
 
-* html #poststuff h2 {
+* html .poststuff h2 {
 	margin-left: 0;
 }
 
diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index b945fa34cd..6906ef6467 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -1033,7 +1033,7 @@ border color while dragging a file over the uploader drop area */
 	display: block;
 }
 
-#poststuff .imgedit-group-top h2 {
+.poststuff .imgedit-group-top h2 {
 	display: inline-block;
 	margin: 0;
 	padding: 0;
@@ -1041,7 +1041,7 @@ border color while dragging a file over the uploader drop area */
 	line-height: 1.4;
 }
 
-#poststuff .imgedit-group-top .button-link {
+.poststuff .imgedit-group-top .button-link {
 	text-decoration: none;
 	color: #23282d;
 }
diff --git a/src/wp-admin/edit-form-advanced.php b/src/wp-admin/edit-form-advanced.php
index 60d920729d..13d4046c03 100644
--- a/src/wp-admin/edit-form-advanced.php
+++ b/src/wp-admin/edit-form-advanced.php
@@ -494,7 +494,7 @@ wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
 do_action( 'edit_form_top', $post );
 ?>
 
-<div id="poststuff">
+<div class="poststuff">
 <div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
 <div id="post-body-content">
 
@@ -671,7 +671,7 @@ do_meta_boxes( $post_type, 'side', $post );
 
 ?>
 </div>
-<div id="postbox-container-2" class="postbox-container">
+<div class="postbox-container-2 postbox-container">
 <?php
 
 do_meta_boxes( null, 'normal', $post );
diff --git a/src/wp-admin/edit-form-comment.php b/src/wp-admin/edit-form-comment.php
index 43b568a0aa..c6b379b7d1 100644
--- a/src/wp-admin/edit-form-comment.php
+++ b/src/wp-admin/edit-form-comment.php
@@ -16,7 +16,7 @@ if ( ! defined( 'ABSPATH' ) ) {
 <div class="wrap">
 <h1><?php _e( 'Edit Comment' ); ?></h1>
 
-<div id="poststuff">
+<div class="poststuff">
 <input type="hidden" name="action" value="editedcomment" />
 <input type="hidden" name="comment_ID" value="<?php echo esc_attr( $comment->comment_ID ); ?>" />
 <input type="hidden" name="comment_post_ID" value="<?php echo esc_attr( $comment->comment_post_ID ); ?>" />
@@ -196,7 +196,7 @@ endif;
 </div><!-- /submitdiv -->
 </div>
 
-<div id="postbox-container-2" class="postbox-container">
+<div class="postbox-container-2 postbox-container">
 <?php
 /** This action is documented in wp-admin/includes/meta-boxes.php */
 do_action( 'add_meta_boxes', 'comment', $comment );
diff --git a/src/wp-admin/edit-link-form.php b/src/wp-admin/edit-link-form.php
index f71684de63..d2733282c0 100644
--- a/src/wp-admin/edit-link-form.php
+++ b/src/wp-admin/edit-link-form.php
@@ -106,7 +106,7 @@ wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
 wp_nonce_field( 'meta-box-order', 'meta-box-order-nonce', false );
 ?>
 
-<div id="poststuff">
+<div class="poststuff">
 
 <div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
 <div id="post-body-content">
@@ -144,7 +144,7 @@ $side_meta_boxes = do_meta_boxes( 'link', 'side', $link );
 
 ?>
 </div>
-<div id="postbox-container-2" class="postbox-container">
+<div class="postbox-container-2 postbox-container">
 <?php
 
 do_meta_boxes( null, 'normal', $link );
diff --git a/src/wp-admin/includes/dashboard.php b/src/wp-admin/includes/dashboard.php
index e64897a8a6..7fbcd893cf 100644
--- a/src/wp-admin/includes/dashboard.php
+++ b/src/wp-admin/includes/dashboard.php
@@ -245,7 +245,7 @@ function wp_dashboard() {
 	<div id="postbox-container-1" class="postbox-container">
 	<?php do_meta_boxes( $screen->id, 'normal', '' ); ?>
 	</div>
-	<div id="postbox-container-2" class="postbox-container">
+	<div class="postbox-container-2 postbox-container">
 	<?php do_meta_boxes( $screen->id, 'side', '' ); ?>
 	</div>
 	<div id="postbox-container-3" class="postbox-container">
diff --git a/src/wp-admin/includes/post.php b/src/wp-admin/includes/post.php
index 1e8b20e668..d9ef63f7b2 100644
--- a/src/wp-admin/includes/post.php
+++ b/src/wp-admin/includes/post.php
@@ -2271,8 +2271,8 @@ function the_block_editor_meta_boxes() {
 	</form>
 	<?php foreach ( $locations as $location ) : ?>
 		<form class="metabox-location-<?php echo esc_attr( $location ); ?>" onsubmit="return false;">
-			<div id="poststuff" class="sidebar-open">
-				<div id="postbox-container-2" class="postbox-container">
+			<div class="poststuff" class="sidebar-open">
+				<div class="postbox-container-2 postbox-container">
 					<?php
 					do_meta_boxes(
 						$current_screen,