General: Add styles for extender usage of do_accordion_section().

Follow up to [59224]. Add CSS to cover usage of the do_accordion_section() function when used in extender contexts outside of the existing WordPress core usage.

Reviewed-by joemcgill, jorbin.
Merges [59772] to 6.7 brnch.

Props mboynes, jorbin, joemcgill, joedolson.
Fixes #62907.

Built from https://develop.svn.wordpress.org/branches/6.7@59779


git-svn-id: http://core.svn.wordpress.org/branches/6.7@59121 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -2434,6 +2434,12 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
 .nav-menus-php .metabox-holder h3 {
 	padding: 0;
 }
+
+.accordion-container h3.accordion-section-title {
+	padding: 0 !important;
+}
+
+.accordion-section-title button.accordion-trigger,
 .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger {
 	background: inherit;
 	color: #1d2327;
@@ -2447,27 +2453,38 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
 	line-height: 1.5;
 	cursor: pointer;
 }
+
+.accordion-section-title button.accordion-trigger:focus,
 .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus {
 	box-shadow: 0 0 0 2px #2271b1;
 	outline: 2px solid transparent;
 }
+
+.accordion-section-title span.dashicons.dashicons-arrow-down,
 .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down {
 	position: absolute;
 	left: 10px;
 	right: auto;
 	color: #787c82;
 	border-radius: 50px;
+	top: 50%;
+	transform: translateY(-50%);
 }
+
+.accordion-section-title:hover span.dashicons.dashicons-arrow-down,
 .nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down {
 	color: #1d2327;
 }
+
+.accordion-section-title span.dashicons.dashicons-arrow-down::before,
 .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before {
 	position: relative;
 	right: -1px;
 }
 
+.accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down,
 .nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down {
-	transform: rotate(-180deg);
+	transform: rotate(-180deg) translate(0, 50%);
 }
 
 #templateside ul li a {
@@ -3649,7 +3666,6 @@ img {
 
 .accordion-section-title {
 	margin: 0;
-	padding: 12px 15px 15px;
 	position: relative;
 	border-right: 1px solid #dcdcde;
 	border-left: 1px solid #dcdcde;

wp-admin/css/common.css

@@ -2433,6 +2433,12 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
 .nav-menus-php .metabox-holder h3 {
 	padding: 0;
 }
+
+.accordion-container h3.accordion-section-title {
+	padding: 0 !important;
+}
+
+.accordion-section-title button.accordion-trigger,
 .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger {
 	background: inherit;
 	color: #1d2327;
@@ -2446,27 +2452,38 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
 	line-height: 1.5;
 	cursor: pointer;
 }
+
+.accordion-section-title button.accordion-trigger:focus,
 .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus {
 	box-shadow: 0 0 0 2px #2271b1;
 	outline: 2px solid transparent;
 }
+
+.accordion-section-title span.dashicons.dashicons-arrow-down,
 .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down {
 	position: absolute;
 	right: 10px;
 	left: auto;
 	color: #787c82;
 	border-radius: 50px;
+	top: 50%;
+	transform: translateY(-50%);
 }
+
+.accordion-section-title:hover span.dashicons.dashicons-arrow-down,
 .nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down {
 	color: #1d2327;
 }
+
+.accordion-section-title span.dashicons.dashicons-arrow-down::before,
 .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before {
 	position: relative;
 	left: -1px;
 }
 
+.accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down,
 .nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down {
-	transform: rotate(180deg);
+	transform: rotate(180deg) translate(0, 50%);
 }
 
 #templateside ul li a {
@@ -3648,7 +3665,6 @@ img {
 
 .accordion-section-title {
 	margin: 0;
-	padding: 12px 15px 15px;
 	position: relative;
 	border-left: 1px solid #dcdcde;
 	border-right: 1px solid #dcdcde;

wp-admin/css/customize-controls-rtl.css

@@ -432,6 +432,7 @@ body.trashing #publish-settings {
 	border-left: none;
 	border-bottom: none;
 	cursor: default;
+	padding: 10px 14px 11px 10px;
 }
 
 #customize-controls .customize-info.open .accordion-section-title:after,
@@ -1728,7 +1729,7 @@ p.customize-section-description {
 	border-right: none;
 	border-left: none;
 	margin: 0 0 15px;
-	padding-left: 100px; /* Space for the button */
+	padding: 12px 15px 15px 100px; /* Space for the button */
 }
 
 #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */

wp-admin/css/customize-controls.css

@@ -431,6 +431,7 @@ body.trashing #publish-settings {
 	border-right: none;
 	border-bottom: none;
 	cursor: default;
+	padding: 10px 10px 11px 14px;
 }
 
 #customize-controls .customize-info.open .accordion-section-title:after,
@@ -1727,7 +1728,7 @@ p.customize-section-description {
 	border-left: none;
 	border-right: none;
 	margin: 0 0 15px;
-	padding-right: 100px; /* Space for the button */
+	padding: 12px 100px 15px 15px; /* Space for the button */
 }
 
 #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.7.2-RC1-59778';
+$wp_version = '6.7.2-RC1-59779';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.