Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-28 15:17:42 +02:00
Code Issues Projects Releases Wiki Activity

Customize: Re-architect and harden panel/section UI logic.

Browse Source 
Removes contents for sections and panels from being logically nested (in the DOM) in order to eliminate many issues related to using `margin-top` hacks. The element containing the link to expand the content element for panels and sections is now a sibling element to its content element: the content is removed from being nested at initialization. The content element is now available in a `contentContainer` property whereas the head element (containing the link to open the construct) is in a `headContainer` property. The existing `container` property is now a jQuery collection that contains both of these elements. Since the head element is no longer in an ancestor element to the `content` element, the `aria-owns` property is now used to maintain the relationship between the `headContainer` and the `contentContainer`. These changes are also accompanied by an improvement to the animation performance for the sliding panes.

Props delawski, celloexpressions.
Fixes #34391.
Fixes #34344.
Fixes #35947.

Built from https://develop.svn.wordpress.org/trunk@38648


git-svn-id: http://core.svn.wordpress.org/trunk@38591 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2016-09-23 22:23:30 +00:00
parent d27606936b
commit 9fe024cd3f
18 changed files with 560 additions and 511 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
wp-admin/css/common-rtl.css
View File

@ -3367,7 +3367,8 @@ img {
display: none; display: none;
} }
.control-section .accordion-section-title { .control-section .accordion-section-title,
.customize-pane-child .accordion-section-title {
border-right: none; border-right: none;
border-left: none; border-left: none;
padding: 10px 14px 11px 10px; padding: 10px 14px 11px 10px;
@ -3375,7 +3376,8 @@ img {
background: #fff; background: #fff;
} }
.control-section .accordion-section-title:after { .control-section .accordion-section-title:after,
.customize-pane-child .accordion-section-title:after {
top: 11px; top: 11px;
} }

2
wp-admin/css/common-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
wp-admin/css/common.css
View File

@ -3367,7 +3367,8 @@ img {
display: none; display: none;
} }
.control-section .accordion-section-title { .control-section .accordion-section-title,
.customize-pane-child .accordion-section-title {
border-left: none; border-left: none;
border-right: none; border-right: none;
padding: 10px 10px 11px 14px; padding: 10px 10px 11px 14px;
@ -3375,7 +3376,8 @@ img {
background: #fff; background: #fff;
} }
.control-section .accordion-section-title:after { .control-section .accordion-section-title:after,
.customize-pane-child .accordion-section-title:after {
top: 11px; top: 11px;
} }

2
wp-admin/css/common.min.css vendored
View File

File diff suppressed because one or more lines are too long

241
wp-admin/css/customize-controls-rtl.css
View File

@ -77,8 +77,8 @@ body {
line-height: 24px; line-height: 24px;
} }
#customize-controls .control-section .customize-section-title h3, #customize-controls .customize-pane-child .customize-section-title h3,
#customize-controls .control-section h3.customize-section-title, #customize-controls .customize-pane-child h3.customize-section-title,
#customize-controls .customize-info .panel-title { #customize-controls .customize-info .panel-title {
font-size: 20px; font-size: 20px;
font-weight: 200; font-weight: 200;
@ -229,6 +229,103 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
#customize-info,
#customize-theme-controls .customize-pane-parent,
#customize-theme-controls .customize-pane-child {
overflow: visible;
width: 100%;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
}
#customize-info,
#customize-theme-controls .customize-pane-parent {
position: relative;
visibility: visible;
height: auto;
max-height: none;
overflow: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
#customize-theme-controls .customize-pane-child {
position: absolute;
top: 0;
right: 0;
visibility: hidden;
height: 0;
max-height: none;
overflow: hidden;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
#customize-theme-controls .customize-pane-child.open,
#customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
#customize-theme-controls .customize-themes-panel.customize-pane-child,
.section-open #customize-theme-controls .customize-pane-parent,
.in-sub-panel #customize-theme-controls .customize-pane-parent,
.section-open #customize-info,
.in-sub-panel #customize-info,
.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
.in-themes-panel #customize-theme-controls .customize-pane-parent,
.in-themes-panel #customize-info {
visibility: hidden;
height: 0;
overflow: hidden;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.section-open #customize-theme-controls .customize-pane-parent.busy,
.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
.section-open #customize-info.busy,
.in-sub-panel #customize-info.busy,
.in-themes-panel #customize-info.busy,
.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-pane-child.open,
#customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-pane-child.busy {
visibility: visible;
height: auto;
overflow: auto;
}
.in-themes-panel #customize-theme-controls .customize-pane-parent,
.in-themes-panel #customize-info {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
#customize-theme-controls .customize-pane-child.accordion-section-content,
#customize-theme-controls .customize-pane-child.accordion-sub-container {
display: block;
overflow-x: hidden;
}
#customize-theme-controls .customize-pane-child.accordion-section-content {
padding: 12px;
}
.customize-section-description-container { .customize-section-description-container {
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -268,39 +365,14 @@ h3.customize-section-title {
color: #555; color: #555;
} }
#customize-theme-controls {
position: relative;
right: 0;
-webkit-transition: .18s right ease-in-out;
transition: .18s right ease-in-out;
}
.ios #customize-theme-controls {
-webkit-transition: right 0s;
transition: right 0s;
}
.section-open #customize-info,
.section-open #customize-theme-controls {
right: -100%;
}
.accordion-sub-container.control-panel-content { .accordion-sub-container.control-panel-content {
display: none; display: none;
position: absolute; position: absolute;
right: 100%;
top: 0; top: 0;
width: 100%; width: 100%;
-webkit-transition: right ease-in-out .18s;
transition: right ease-in-out .18s;
} }
.ios .accordion-sub-container.control-panel-content { .accordion-sub-container.control-panel-content.busy {
-webkit-transition: right 0s;
transition: right 0s;
}
.accordion-sub-container.control-panel-content.animating {
display: block; display: block;
} }
@ -343,20 +415,14 @@ h3.customize-section-title {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
cursor: pointer; cursor: pointer;
-webkit-transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: right .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; transition: color .1s ease-in-out, background .1s ease-in-out;
} }
.customize-section-back { .customize-section-back {
height: 74px; height: 74px;
} }
.ios .customize-panel-back,
.ios .customize-section-back {
-webkit-transition: right 0s;
transition: right 0s;
}
.ios .customize-panel-back { .ios .customize-panel-back {
display: none; display: none;
} }
@ -423,63 +489,6 @@ h3.customize-section-title {
padding-right: 62px; padding-right: 62px;
} }
#customize-info,
#customize-theme-controls > ul > .accordion-section {
position: relative;
right: 0;
-webkit-transition: right ease-in-out .18s;
transition: right ease-in-out .18s;
}
.ios #customize-info,
.ios #customize-theme-controls > ul > .accordion-section {
-webkit-transition: right 0s;
transition: right 0s;
}
.in-sub-panel #customize-info,
.in-sub-panel #customize-theme-controls > ul > .accordion-section {
right: -100%;
width: 100%;
}
.in-sub-panel #customize-theme-controls .accordion-section.current-panel {
width: 100%;
}
#customize-theme-controls .control-section.current-panel {
padding: 0;
}
#customize-theme-controls .control-section > h3.accordion-section-title {
position: relative;
right: 0;
}
#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
right: -354px;
-webkit-transition: right ease-in-out .18s;
transition: right ease-in-out .18s;
}
.ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
-webkit-transition: right 0s;
transition: right 0s;
}
.wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content {
visibility: hidden;
overflow-y: hidden;
}
.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
visibility: visible;
}
.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content {
overflow-y: auto;
}
p.customize-section-description { p.customize-section-description {
font-style: normal; font-style: normal;
margin-top: 22px; margin-top: 22px;
@ -1005,26 +1014,27 @@ p.customize-section-description {
#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */ #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
#customize-theme-controls .control-section-themes > .accordion-section-title { #customize-theme-controls .control-section-themes > .accordion-section-title {
margin: 15px 0; margin: 0 0 15px;
} }
.customize-themes-panel .accordion-section-title { #customize-controls .customize-themes-panel .accordion-section-title {
margin: 15px -8px; margin: 15px -8px;
} }
.control-section-themes .accordion-section-title { #customize-controls .control-section-themes .accordion-section-title,
#customize-controls .customize-themes-panel .accordion-section-title {
padding-left: 100px; /* Space for the button */ padding-left: 100px; /* Space for the button */
} }
.control-section-themes .accordion-section-title span.customize-action, #customize-controls .control-section-themes .accordion-section-title span.customize-action,
#customize-controls .customize-section-title span.customize-action { #customize-controls .customize-section-title span.customize-action {
font-size: 13px; font-size: 13px;
display: block; display: block;
font-weight: 400; font-weight: 400;
} }
.control-section-themes .accordion-section-title .change-theme, #customize-controls .control-section-themes .accordion-section-title .change-theme,
.control-section-themes .accordion-section-title .customize-theme { #customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 50%; top: 50%;
@ -1032,12 +1042,11 @@ p.customize-section-description {
font-weight: 400; font-weight: 400;
} }
.control-section-themes .accordion-section-title:before { #customize-controls .control-section-themes .accordion-section-title:before {
display: none; display: none;
} }
.customize-themes-panel { #customize-controls .customize-themes-panel {
display: none;
padding: 0 8px; padding: 0 8px;
background: #f1f1f1; background: #f1f1f1;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -1045,7 +1054,7 @@ p.customize-section-description {
box-sizing: border-box; box-sizing: border-box;
} }
.customize-themes-panel .accordion-section-title:first-child { #customize-controls .customize-themes-panel .accordion-section-title:first-child {
margin-top: 0; margin-top: 0;
} }
@ -1054,14 +1063,10 @@ p.customize-section-description {
font-weight: 600; font-weight: 600;
} }
.customize-themes-panel > h2 { #customize-controls .customize-themes-panel > h2 {
padding: 15px 8px 0 8px; padding: 15px 8px 0 8px;
} }
.control-section.open .customize-themes-panel {
display: block;
}
#customize-theme-controls .customize-themes-panel .accordion-section-content { #customize-theme-controls .customize-themes-panel .accordion-section-content {
background: transparent; background: transparent;
display: block; display: block;
@ -1107,27 +1112,15 @@ p.customize-section-description {
width: 100%; width: 100%;
} }
#accordion-section-themes .accordion-section-title:after { .control-section-themes .accordion-section-title:after,
.customize-themes-panel .accordion-section-title:after {
display: none; display: none;
} }
#customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
right: 0;
}
.customize-themes-panel.control-panel-content { .customize-themes-panel.control-panel-content {
position: absolute;
right: -100%;
top: 0;
width: 100%;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
.in-themes-panel #customize-info,
.in-themes-panel #customize-theme-controls > ul > .accordion-section {
right: 100%;
}
/* Details View */ /* Details View */
.wp-customizer .theme-overlay { .wp-customizer .theme-overlay {
display: none; display: none;
@ -1161,10 +1154,6 @@ p.customize-section-description {
text-align: left; /* Because there's only one action, match the pattern of media modals and right-align the action. */ text-align: left; /* Because there's only one action, match the pattern of media modals and right-align the action. */
} }
.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
}
.ie8 .wp-customizer .theme-overlay .theme-header, .ie8 .wp-customizer .theme-overlay .theme-header,
.ie8 .wp-customizer .theme-overlay .theme-about, .ie8 .wp-customizer .theme-overlay .theme-about,
.ie8 .wp-customizer .theme-overlay .theme-actions { .ie8 .wp-customizer .theme-overlay .theme-actions {

2
wp-admin/css/customize-controls-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

241
wp-admin/css/customize-controls.css
View File

@ -77,8 +77,8 @@ body {
line-height: 24px; line-height: 24px;
} }
#customize-controls .control-section .customize-section-title h3, #customize-controls .customize-pane-child .customize-section-title h3,
#customize-controls .control-section h3.customize-section-title, #customize-controls .customize-pane-child h3.customize-section-title,
#customize-controls .customize-info .panel-title { #customize-controls .customize-info .panel-title {
font-size: 20px; font-size: 20px;
font-weight: 200; font-weight: 200;
@ -229,6 +229,103 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
#customize-info,
#customize-theme-controls .customize-pane-parent,
#customize-theme-controls .customize-pane-child {
overflow: visible;
width: 100%;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
}
#customize-info,
#customize-theme-controls .customize-pane-parent {
position: relative;
visibility: visible;
height: auto;
max-height: none;
overflow: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
#customize-theme-controls .customize-pane-child {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
height: 0;
max-height: none;
overflow: hidden;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
#customize-theme-controls .customize-pane-child.open,
#customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
#customize-theme-controls .customize-themes-panel.customize-pane-child,
.section-open #customize-theme-controls .customize-pane-parent,
.in-sub-panel #customize-theme-controls .customize-pane-parent,
.section-open #customize-info,
.in-sub-panel #customize-info,
.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
.in-themes-panel #customize-theme-controls .customize-pane-parent,
.in-themes-panel #customize-info {
visibility: hidden;
height: 0;
overflow: hidden;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.section-open #customize-theme-controls .customize-pane-parent.busy,
.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
.section-open #customize-info.busy,
.in-sub-panel #customize-info.busy,
.in-themes-panel #customize-info.busy,
.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-pane-child.open,
#customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-pane-child.busy {
visibility: visible;
height: auto;
overflow: auto;
}
.in-themes-panel #customize-theme-controls .customize-pane-parent,
.in-themes-panel #customize-info {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
#customize-theme-controls .customize-pane-child.accordion-section-content,
#customize-theme-controls .customize-pane-child.accordion-sub-container {
display: block;
overflow-x: hidden;
}
#customize-theme-controls .customize-pane-child.accordion-section-content {
padding: 12px;
}
.customize-section-description-container { .customize-section-description-container {
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -268,39 +365,14 @@ h3.customize-section-title {
color: #555; color: #555;
} }
#customize-theme-controls {
position: relative;
left: 0;
-webkit-transition: .18s left ease-in-out;
transition: .18s left ease-in-out;
}
.ios #customize-theme-controls {
-webkit-transition: left 0s;
transition: left 0s;
}
.section-open #customize-info,
.section-open #customize-theme-controls {
left: -100%;
}
.accordion-sub-container.control-panel-content { .accordion-sub-container.control-panel-content {
display: none; display: none;
position: absolute; position: absolute;
left: 100%;
top: 0; top: 0;
width: 100%; width: 100%;
-webkit-transition: left ease-in-out .18s;
transition: left ease-in-out .18s;
} }
.ios .accordion-sub-container.control-panel-content { .accordion-sub-container.control-panel-content.busy {
-webkit-transition: left 0s;
transition: left 0s;
}
.accordion-sub-container.control-panel-content.animating {
display: block; display: block;
} }
@ -343,20 +415,14 @@ h3.customize-section-title {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
cursor: pointer; cursor: pointer;
-webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; transition: color .1s ease-in-out, background .1s ease-in-out;
} }
.customize-section-back { .customize-section-back {
height: 74px; height: 74px;
} }
.ios .customize-panel-back,
.ios .customize-section-back {
-webkit-transition: left 0s;
transition: left 0s;
}
.ios .customize-panel-back { .ios .customize-panel-back {
display: none; display: none;
} }
@ -423,63 +489,6 @@ h3.customize-section-title {
padding-left: 62px; padding-left: 62px;
} }
#customize-info,
#customize-theme-controls > ul > .accordion-section {
position: relative;
left: 0;
-webkit-transition: left ease-in-out .18s;
transition: left ease-in-out .18s;
}
.ios #customize-info,
.ios #customize-theme-controls > ul > .accordion-section {
-webkit-transition: left 0s;
transition: left 0s;
}
.in-sub-panel #customize-info,
.in-sub-panel #customize-theme-controls > ul > .accordion-section {
left: -100%;
width: 100%;
}
.in-sub-panel #customize-theme-controls .accordion-section.current-panel {
width: 100%;
}
#customize-theme-controls .control-section.current-panel {
padding: 0;
}
#customize-theme-controls .control-section > h3.accordion-section-title {
position: relative;
left: 0;
}
#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
left: -354px;
-webkit-transition: left ease-in-out .18s;
transition: left ease-in-out .18s;
}
.ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
-webkit-transition: left 0s;
transition: left 0s;
}
.wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content {
visibility: hidden;
overflow-y: hidden;
}
.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
visibility: visible;
}
.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content {
overflow-y: auto;
}
p.customize-section-description { p.customize-section-description {
font-style: normal; font-style: normal;
margin-top: 22px; margin-top: 22px;
@ -1005,26 +1014,27 @@ p.customize-section-description {
#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */ #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
#customize-theme-controls .control-section-themes > .accordion-section-title { #customize-theme-controls .control-section-themes > .accordion-section-title {
margin: 15px 0; margin: 0 0 15px;
} }
.customize-themes-panel .accordion-section-title { #customize-controls .customize-themes-panel .accordion-section-title {
margin: 15px -8px; margin: 15px -8px;
} }
.control-section-themes .accordion-section-title { #customize-controls .control-section-themes .accordion-section-title,
#customize-controls .customize-themes-panel .accordion-section-title {
padding-right: 100px; /* Space for the button */ padding-right: 100px; /* Space for the button */
} }
.control-section-themes .accordion-section-title span.customize-action, #customize-controls .control-section-themes .accordion-section-title span.customize-action,
#customize-controls .customize-section-title span.customize-action { #customize-controls .customize-section-title span.customize-action {
font-size: 13px; font-size: 13px;
display: block; display: block;
font-weight: 400; font-weight: 400;
} }
.control-section-themes .accordion-section-title .change-theme, #customize-controls .control-section-themes .accordion-section-title .change-theme,
.control-section-themes .accordion-section-title .customize-theme { #customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 50%; top: 50%;
@ -1032,12 +1042,11 @@ p.customize-section-description {
font-weight: 400; font-weight: 400;
} }
.control-section-themes .accordion-section-title:before { #customize-controls .control-section-themes .accordion-section-title:before {
display: none; display: none;
} }
.customize-themes-panel { #customize-controls .customize-themes-panel {
display: none;
padding: 0 8px; padding: 0 8px;
background: #f1f1f1; background: #f1f1f1;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -1045,7 +1054,7 @@ p.customize-section-description {
box-sizing: border-box; box-sizing: border-box;
} }
.customize-themes-panel .accordion-section-title:first-child { #customize-controls .customize-themes-panel .accordion-section-title:first-child {
margin-top: 0; margin-top: 0;
} }
@ -1054,14 +1063,10 @@ p.customize-section-description {
font-weight: 600; font-weight: 600;
} }
.customize-themes-panel > h2 { #customize-controls .customize-themes-panel > h2 {
padding: 15px 8px 0 8px; padding: 15px 8px 0 8px;
} }
.control-section.open .customize-themes-panel {
display: block;
}
#customize-theme-controls .customize-themes-panel .accordion-section-content { #customize-theme-controls .customize-themes-panel .accordion-section-content {
background: transparent; background: transparent;
display: block; display: block;
@ -1107,27 +1112,15 @@ p.customize-section-description {
width: 100%; width: 100%;
} }
#accordion-section-themes .accordion-section-title:after { .control-section-themes .accordion-section-title:after,
.customize-themes-panel .accordion-section-title:after {
display: none; display: none;
} }
#customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
left: 0;
}
.customize-themes-panel.control-panel-content { .customize-themes-panel.control-panel-content {
position: absolute;
left: -100%;
top: 0;
width: 100%;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
.in-themes-panel #customize-info,
.in-themes-panel #customize-theme-controls > ul > .accordion-section {
left: 100%;
}
/* Details View */ /* Details View */
.wp-customizer .theme-overlay { .wp-customizer .theme-overlay {
display: none; display: none;
@ -1161,10 +1154,6 @@ p.customize-section-description {
text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */ text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
} }
.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
}
.ie8 .wp-customizer .theme-overlay .theme-header, .ie8 .wp-customizer .theme-overlay .theme-header,
.ie8 .wp-customizer .theme-overlay .theme-about, .ie8 .wp-customizer .theme-overlay .theme-about,
.ie8 .wp-customizer .theme-overlay .theme-actions { .ie8 .wp-customizer .theme-overlay .theme-actions {

2
wp-admin/css/customize-controls.min.css vendored
View File

File diff suppressed because one or more lines are too long

8
wp-admin/css/customize-nav-menus-rtl.css
View File

@ -381,15 +381,15 @@
.reordering .menu-item-depth-10 > .menu-item-bar { margin-left: 150px; } .reordering .menu-item-depth-10 > .menu-item-bar { margin-left: 150px; }
.reordering .menu-item-depth-11 > .menu-item-bar { margin-left: 165px; } .reordering .menu-item-depth-11 > .menu-item-bar { margin-left: 165px; }
.control-section-nav_menu .menu .menu-item-edit-active { .control-section-nav_menu.menu .menu-item-edit-active {
margin-right: 0; margin-right: 0;
} }
.control-section-nav_menu .menu .menu-item-edit-active .menu-item-bar { .control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {
margin-left: 0; margin-left: 0;
} }
.control-section-nav_menu .menu .sortable-placeholder { .control-section-nav_menu.menu .sortable-placeholder {
margin-top: 0; margin-top: 0;
margin-bottom: 1px; margin-bottom: 1px;
max-width: -webkit-calc(100% - 2px); max-width: -webkit-calc(100% - 2px);
@ -403,7 +403,7 @@
float: none; float: none;
} }
.control-section-nav_menu .menu ul.menu-item-transport .menu-item-bar { .control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {
margin-top: 0; margin-top: 0;
} }

2
wp-admin/css/customize-nav-menus-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

8
wp-admin/css/customize-nav-menus.css
View File

@ -381,15 +381,15 @@
.reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; } .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
.reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; } .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
.control-section-nav_menu .menu .menu-item-edit-active { .control-section-nav_menu.menu .menu-item-edit-active {
margin-left: 0; margin-left: 0;
} }
.control-section-nav_menu .menu .menu-item-edit-active .menu-item-bar { .control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {
margin-right: 0; margin-right: 0;
} }
.control-section-nav_menu .menu .sortable-placeholder { .control-section-nav_menu.menu .sortable-placeholder {
margin-top: 0; margin-top: 0;
margin-bottom: 1px; margin-bottom: 1px;
max-width: -webkit-calc(100% - 2px); max-width: -webkit-calc(100% - 2px);
@ -403,7 +403,7 @@
float: none; float: none;
} }
.control-section-nav_menu .menu ul.menu-item-transport .menu-item-bar { .control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {
margin-top: 0; margin-top: 0;
} }

2
wp-admin/css/customize-nav-menus.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-admin/customize.php
View File

@ -142,7 +142,7 @@ do_action( 'customize_controls_print_scripts' );
</div> </div>
<div id="customize-theme-controls"> <div id="customize-theme-controls">
<ul><?php // Panels and sections are managed here via JavaScript ?></ul> <ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
</div> </div>
</div> </div>
</div> </div>

500
wp-admin/js/customize-controls.js
View File

@ -1,6 +1,6 @@
/* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */ /* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
(function( exports, $ ){ (function( exports, $ ){
var Container, focus, api = wp.customize; var Container, focus, normalizedTransitionendEventName, api = wp.customize;
/** /**
* A Customizer Setting. * A Customizer Setting.
@ -101,10 +101,8 @@
params = params || {}; params = params || {};
focus = function () { focus = function () {
var focusContainer; var focusContainer;
if ( construct.extended( api.Panel ) && construct.expanded && construct.expanded() ) { if ( ( construct.extended( api.Panel ) || construct.extended( api.Section ) ) && construct.expanded && construct.expanded() ) {
focusContainer = construct.container.find( 'ul.control-panel-content' ); focusContainer = construct.contentContainer;
} else if ( construct.extended( api.Section ) && construct.expanded && construct.expanded() ) {
focusContainer = construct.container.find( 'ul.accordion-section-content' );
} else { } else {
focusContainer = construct.container; focusContainer = construct.container;
} }
@ -187,6 +185,32 @@
return equal; return equal;
}; };
/**
* Return browser supported `transitionend` event name.
*
* @since 4.7.0
*
* @returns {string|null} Normalized `transitionend` event name or null if CSS transitions are not supported.
*/
normalizedTransitionendEventName = (function () {
var el, transitions, prop;
el = document.createElement( 'div' );
transitions = {
'transition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'MozTransition' : 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
};
prop = _.find( _.keys( transitions ), function( prop ) {
return ! _.isUndefined( el.style[ prop ] );
} );
if ( prop ) {
return transitions[ prop ];
} else {
return null;
}
})();
/** /**
* Base class for Panel and Section. * Base class for Panel and Section.
* *
@ -238,6 +262,9 @@
if ( 0 === container.container.length ) { if ( 0 === container.container.length ) {
container.container = $( container.getContainer() ); container.container = $( container.getContainer() );
} }
container.headContainer = container.container;
container.contentContainer = container.getContent();
container.container = container.container.add( container.contentContainer );
container.deferred = { container.deferred = {
embedded: new $.Deferred() embedded: new $.Deferred()
@ -325,7 +352,10 @@
* @param {Object} args.completeCallback * @param {Object} args.completeCallback
*/ */
onChangeActive: function( active, args ) { onChangeActive: function( active, args ) {
var duration, construct = this, expandedOtherPanel; var construct = this,
headContainer = construct.headContainer,
duration, expandedOtherPanel;
if ( args.unchanged ) { if ( args.unchanged ) {
if ( args.completeCallback ) { if ( args.completeCallback ) {
args.completeCallback(); args.completeCallback();
@ -352,31 +382,26 @@
} }
} }
if ( ! $.contains( document, construct.container[0] ) ) { if ( ! $.contains( document, headContainer ) ) {
// jQuery.fn.slideUp is not hiding an element if it is not in the DOM // jQuery.fn.slideUp is not hiding an element if it is not in the DOM
construct.container.toggle( active ); headContainer.toggle( active );
if ( args.completeCallback ) { if ( args.completeCallback ) {
args.completeCallback(); args.completeCallback();
} }
} else if ( active ) { } else if ( active ) {
construct.container.stop( true, true ).slideDown( duration, args.completeCallback ); headContainer.stop( true, true ).slideDown( duration, args.completeCallback );
} else { } else {
if ( construct.expanded() ) { if ( construct.expanded() ) {
construct.collapse({ construct.collapse({
duration: duration, duration: duration,
completeCallback: function() { completeCallback: function() {
construct.container.stop( true, true ).slideUp( duration, args.completeCallback ); headContainer.stop( true, true ).slideUp( duration, args.completeCallback );
} }
}); });
} else { } else {
construct.container.stop( true, true ).slideUp( duration, args.completeCallback ); headContainer.stop( true, true ).slideUp( duration, args.completeCallback );
} }
} }
// Recalculate the margin-top immediately, not waiting for debounced reflow, to prevent momentary (100ms) vertical jiggle.
if ( expandedOtherPanel ) {
expandedOtherPanel._recalculateTopMargin();
}
}, },
/** /**
@ -482,6 +507,66 @@
return this._toggleExpanded( false, params ); return this._toggleExpanded( false, params );
}, },
/**
* Animate container state change if transitions are supported by the browser.
*
* @since 4.7.0
*
* @param {function} completeCallback Function to be called after transition is completed.
* @returns {void}
* @private
*/
_animateChangeExpanded: function( completeCallback ) {
// Return if CSS transitions are not supported.
if ( ! normalizedTransitionendEventName ) {
if ( completeCallback ) {
completeCallback();
}
return;
}
var construct = this,
content = construct.contentContainer,
overlay = content.closest( '.wp-full-overlay' ),
elements, transitionEndCallback;
// Determine set of elements that are affected by the animation.
elements = overlay.add( content );
if ( _.isUndefined( construct.panel ) || '' === construct.panel() ) {
elements = elements.add( '#customize-info, .customize-pane-parent' );
}
// Handle `transitionEnd` event.
transitionEndCallback = function( e ) {
if ( 2 !== e.eventPhase || ! $( e.target ).is( content ) ) {
return;
}
content.off( normalizedTransitionendEventName, transitionEndCallback );
elements.removeClass( 'busy' );
if ( completeCallback ) {
completeCallback();
}
};
content.on( normalizedTransitionendEventName, transitionEndCallback );
elements.addClass( 'busy' );
// Prevent screen flicker when pane has been scrolled before expanding.
_.defer( function() {
var container = content.closest( '.wp-full-overlay-sidebar-content' ),
currentScrollTop = container.scrollTop(),
previousScrollTop = content.data( 'previous-scrollTop' ) || 0,
expanded = construct.expanded();
if ( expanded && 0 < currentScrollTop ) {
content.css( 'top', currentScrollTop + 'px' );
content.data( 'previous-scrollTop', currentScrollTop );
} else if ( ! expanded && 0 < currentScrollTop + previousScrollTop ) {
content.css( 'top', previousScrollTop - currentScrollTop + 'px' );
container.scrollTop( previousScrollTop );
}
} );
},
/** /**
* Bring the container into view and then expand this and bring it into view * Bring the container into view and then expand this and bring it into view
* @param {Object} [params] * @param {Object} [params]
@ -507,6 +592,39 @@
} }
return '<li></li>'; return '<li></li>';
},
/**
* Find content element which is displayed when the section is expanded.
*
* After a construct is initialized, the return value will be available via the `contentContainer` property.
* By default the element will be related it to the parent container with `aria-owns` and detached.
* Custom panels and sections (such as the `NewMenuSection`) that do not have a sliding pane should
* just return the content element without needing to add the `aria-owns` element or detach it from
* the container. Such non-sliding pane custom sections also need to override the `onChangeExpanded`
* method to handle animating the panel/section into and out of view.
*
* @since 4.7.0
*
* @returns {jQuery} Detached content element.
*/
getContent: function() {
var construct = this,
container = construct.container,
content = container.find( '.accordion-section-content, .control-panel-content' ).first(),
contentId = 'sub-' + container.attr( 'id' ),
ownedElements = contentId,
alreadyOwnedElements = container.attr( 'aria-owns' );
if ( alreadyOwnedElements ) {
ownedElements = ownedElements + ' ' + alreadyOwnedElements;
}
container.attr( 'aria-owns', ownedElements );
return content.detach().attr( {
'id': contentId,
'class': 'customize-pane-child ' + content.attr( 'class' ) + ' ' + container.attr( 'class' )
} );
} }
}); });
@ -552,7 +670,7 @@
section.id = id; section.id = id;
section.panel = new api.Value(); section.panel = new api.Value();
section.panel.bind( function ( id ) { section.panel.bind( function ( id ) {
$( section.container ).toggleClass( 'control-subsection', !! id ); $( section.headContainer ).toggleClass( 'control-subsection', !! id );
}); });
section.panel.set( section.params.panel || '' ); section.panel.set( section.params.panel || '' );
api.utils.bubbleChildValueChanges( section, [ 'panel' ] ); api.utils.bubbleChildValueChanges( section, [ 'panel' ] );
@ -569,7 +687,9 @@
* @since 4.1.0 * @since 4.1.0
*/ */
embed: function () { embed: function () {
var section = this, inject; var inject,
section = this,
container = $( '#customize-theme-controls' );
// Watch for changes to the panel state // Watch for changes to the panel state
inject = function ( panelId ) { inject = function ( panelId ) {
@ -579,31 +699,30 @@
api.panel( panelId, function ( panel ) { api.panel( panelId, function ( panel ) {
// The panel has been registered, wait for it to become ready/initialized // The panel has been registered, wait for it to become ready/initialized
panel.deferred.embedded.done( function () { panel.deferred.embedded.done( function () {
parentContainer = panel.container.find( 'ul:first' ); parentContainer = panel.contentContainer;
if ( ! section.container.parent().is( parentContainer ) ) { if ( ! section.headContainer.parent().is( parentContainer ) ) {
parentContainer.append( section.container ); parentContainer.append( section.headContainer );
}
if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
container.append( section.contentContainer );
} }
section.deferred.embedded.resolve(); section.deferred.embedded.resolve();
}); });
} ); } );
} else { } else {
// There is no panel, so embed the section in the root of the customizer // There is no panel, so embed the section in the root of the customizer
parentContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
if ( ! section.container.parent().is( parentContainer ) ) { if ( ! section.headContainer.parent().is( parentContainer ) ) {
parentContainer.append( section.container ); parentContainer.append( section.headContainer );
}
if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
container.append( section.contentContainer );
} }
section.deferred.embedded.resolve(); section.deferred.embedded.resolve();
} }
}; };
section.panel.bind( inject ); section.panel.bind( inject );
inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
section.deferred.embedded.done(function() {
// Fix the top margin after reflow.
api.bind( 'pane-contents-reflowed', _.debounce( function() {
section._recalculateTopMargin();
}, 100 ) );
});
}, },
/** /**
@ -669,50 +788,35 @@
*/ */
onChangeExpanded: function ( expanded, args ) { onChangeExpanded: function ( expanded, args ) {
var section = this, var section = this,
container = section.container.closest( '.wp-full-overlay-sidebar-content' ), container = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ),
content = section.container.find( '.accordion-section-content' ), content = section.contentContainer,
overlay = section.container.closest( '.wp-full-overlay' ), overlay = section.headContainer.closest( '.wp-full-overlay' ),
backBtn = section.container.find( '.customize-section-back' ), backBtn = content.find( '.customize-section-back' ),
sectionTitle = section.container.find( '.accordion-section-title' ).first(), sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
headerActionsHeight = $( '#customize-header-actions' ).height(), expand;
resizeContentHeight, expand, position, scroll;
if ( expanded && ! section.container.hasClass( 'open' ) ) { if ( expanded && ! content.hasClass( 'open' ) ) {
if ( args.unchanged ) { if ( args.unchanged ) {
expand = args.completeCallback; expand = args.completeCallback;
} else { } else {
container.scrollTop( 0 ); expand = $.proxy( function() {
resizeContentHeight = function() { section._animateChangeExpanded( function() {
var matchMedia, offset; sectionTitle.attr( 'tabindex', '-1' );
matchMedia = window.matchMedia || window.msMatchMedia; backBtn.attr( 'tabindex', '0' );
offset = 90; // 45px for customize header actions + 45px for footer actions.
// No footer on small screens. backBtn.focus();
if ( matchMedia && matchMedia( '(max-width: 640px)' ).matches ) { content.css( 'top', '' );
offset = 45; container.scrollTop( 0 );
}
content.css( 'height', ( window.innerHeight - offset ) ); if ( args.completeCallback ) {
}; args.completeCallback();
expand = function() { }
section.container.addClass( 'open' ); } );
content.addClass( 'open' );
overlay.addClass( 'section-open' ); overlay.addClass( 'section-open' );
position = content.offset().top; }, this );
scroll = container.scrollTop();
content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
resizeContentHeight();
sectionTitle.attr( 'tabindex', '-1' );
backBtn.attr( 'tabindex', '0' );
backBtn.focus();
if ( args.completeCallback ) {
args.completeCallback();
}
// Fix the height after browser resize.
$( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
setTimeout( _.bind( section._recalculateTopMargin, section ), 0 );
};
} }
if ( ! args.allowMultiple ) { if ( ! args.allowMultiple ) {
@ -735,42 +839,27 @@
expand(); expand();
} }
} else if ( ! expanded && section.container.hasClass( 'open' ) ) { } else if ( ! expanded && content.hasClass( 'open' ) ) {
section.container.removeClass( 'open' ); section._animateChangeExpanded( function() {
backBtn.attr( 'tabindex', '-1' );
sectionTitle.attr( 'tabindex', '0' );
sectionTitle.focus();
content.css( 'top', '' );
if ( args.completeCallback ) {
args.completeCallback();
}
} );
content.removeClass( 'open' );
overlay.removeClass( 'section-open' ); overlay.removeClass( 'section-open' );
content.css( 'margin-top', '' );
container.scrollTop( 0 );
backBtn.attr( 'tabindex', '-1' );
sectionTitle.attr( 'tabindex', '0' );
sectionTitle.focus();
if ( args.completeCallback ) {
args.completeCallback();
}
$( window ).off( 'resize.customizer-section' );
} else { } else {
if ( args.completeCallback ) { if ( args.completeCallback ) {
args.completeCallback(); args.completeCallback();
} }
} }
},
/**
* Recalculate the top margin.
*
* @since 4.4.0
* @private
*/
_recalculateTopMargin: function() {
var section = this, content, offset, headerActionsHeight;
content = section.container.find( '.accordion-section-content' );
if ( 0 === content.length ) {
return;
}
headerActionsHeight = $( '#customize-header-actions' ).height();
offset = ( content.offset().top - headerActionsHeight );
if ( 0 < offset ) {
content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
}
} }
}); });
@ -948,18 +1037,14 @@
} }
// Note: there is a second argument 'args' passed // Note: there is a second argument 'args' passed
var position, scroll, var panel = this,
panel = this, section = panel.contentContainer,
section = panel.container.closest( '.accordion-section' ),
overlay = section.closest( '.wp-full-overlay' ), overlay = section.closest( '.wp-full-overlay' ),
container = section.closest( '.wp-full-overlay-sidebar-content' ), container = section.closest( '.wp-full-overlay-sidebar-content' ),
siblings = container.find( '.open' ),
customizeBtn = section.find( '.customize-theme' ), customizeBtn = section.find( '.customize-theme' ),
changeBtn = section.find( '.change-theme' ), changeBtn = panel.headContainer.find( '.change-theme' );
content = section.find( '.control-panel-content' );
if ( expanded ) {
if ( expanded && ! section.hasClass( 'current-panel' ) ) {
// Collapse any sibling sections/panels // Collapse any sibling sections/panels
api.section.each( function ( otherSection ) { api.section.each( function ( otherSection ) {
if ( otherSection !== panel ) { if ( otherSection !== panel ) {
@ -970,45 +1055,38 @@
otherPanel.collapse( { duration: 0 } ); otherPanel.collapse( { duration: 0 } );
}); });
content.show( 0, function() { panel._animateChangeExpanded( function() {
position = content.offset().top; changeBtn.attr( 'tabindex', '-1' );
scroll = container.scrollTop(); customizeBtn.attr( 'tabindex', '0' );
content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) );
section.addClass( 'current-panel' );
overlay.addClass( 'in-themes-panel' );
container.scrollTop( 0 );
_.delay( panel.renderScreenshots, 10 ); // Wait for the controls
panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
if ( args.completeCallback ) {
args.completeCallback();
}
} );
customizeBtn.focus();
} else {
siblings.removeClass( 'open' );
section.removeClass( 'current-panel' );
overlay.removeClass( 'in-themes-panel' );
panel.$customizeSidebar.off( 'scroll.customize-themes-section' );
content.delay( 180 ).hide( 0, function() {
content.css( 'margin-top', 'inherit' ); // Reset
if ( args.completeCallback ) {
args.completeCallback();
}
} );
customizeBtn.attr( 'tabindex', '0' );
changeBtn.focus();
container.scrollTop( 0 );
}
},
/** customizeBtn.focus();
* Recalculate the top margin. section.css( 'top', '' );
* container.scrollTop( 0 );
* @since 4.4.0
* @private if ( args.completeCallback ) {
*/ args.completeCallback();
_recalculateTopMargin: function() { }
api.Panel.prototype._recalculateTopMargin.call( this ); } );
overlay.addClass( 'in-themes-panel' );
section.addClass( 'current-panel' );
} else if ( ! expanded && section.hasClass( 'current-panel' ) ) {
panel._animateChangeExpanded( function() {
changeBtn.attr( 'tabindex', '0' );
customizeBtn.attr( 'tabindex', '-1' );
changeBtn.focus();
section.css( 'top', '' );
if ( args.completeCallback ) {
args.completeCallback();
}
} );
overlay.removeClass( 'in-themes-panel' );
section.removeClass( 'current-panel' );
}
}, },
/** /**
@ -1237,17 +1315,17 @@
*/ */
embed: function () { embed: function () {
var panel = this, var panel = this,
parentContainer = $( '#customize-theme-controls > ul' ); // @todo This should be defined elsewhere, and to be configurable container = $( '#customize-theme-controls' ),
parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
if ( ! panel.container.parent().is( parentContainer ) ) { if ( ! panel.headContainer.parent().is( parentContainer ) ) {
parentContainer.append( panel.container ); parentContainer.append( panel.headContainer );
}
if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) {
container.append( panel.contentContainer );
panel.renderContent(); panel.renderContent();
} }
api.bind( 'pane-contents-reflowed', _.debounce( function() {
panel._recalculateTopMargin();
}, 100 ) );
panel.deferred.embedded.resolve(); panel.deferred.embedded.resolve();
}, },
@ -1258,7 +1336,7 @@
var meta, panel = this; var meta, panel = this;
// Expand/Collapse accordion sections on click. // Expand/Collapse accordion sections on click.
panel.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) { panel.headContainer.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
if ( api.utils.isKeydownButNotEnterEvent( event ) ) { if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
return; return;
} }
@ -1289,7 +1367,6 @@
} }
event.preventDefault(); // Keep this AFTER the key filter above event.preventDefault(); // Keep this AFTER the key filter above
meta = panel.container.find( '.panel-meta' );
if ( meta.hasClass( 'cannot-expand' ) ) { if ( meta.hasClass( 'cannot-expand' ) ) {
return; return;
} }
@ -1359,20 +1436,14 @@
} }
// Note: there is a second argument 'args' passed // Note: there is a second argument 'args' passed
var position, scroll, var panel = this,
panel = this, accordionSection = panel.contentContainer,
accordionSection = panel.container.closest( '.accordion-section' ),
overlay = accordionSection.closest( '.wp-full-overlay' ), overlay = accordionSection.closest( '.wp-full-overlay' ),
container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ), container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
siblings = container.find( '.open' ), topPanel = panel.headContainer.find( '.accordion-section-title' ),
topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ), backBtn = accordionSection.find( '.customize-panel-back' );
backBtn = accordionSection.find( '.customize-panel-back' ),
panelTitle = accordionSection.find( '.accordion-section-title' ).first(),
content = accordionSection.find( '.control-panel-content' ),
headerActionsHeight = $( '#customize-header-actions' ).height();
if ( expanded ) {
if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
// Collapse any sibling sections/panels // Collapse any sibling sections/panels
api.section.each( function ( section ) { api.section.each( function ( section ) {
if ( panel.id !== section.panel() ) { if ( panel.id !== section.panel() ) {
@ -1385,51 +1456,38 @@
} }
}); });
content.show( 0, function() { panel._animateChangeExpanded( function() {
content.parent().show(); topPanel.attr( 'tabindex', '-1' );
position = content.offset().top; backBtn.attr( 'tabindex', '0' );
scroll = container.scrollTop();
content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
accordionSection.addClass( 'current-panel' );
overlay.addClass( 'in-sub-panel' );
container.scrollTop( 0 );
if ( args.completeCallback ) {
args.completeCallback();
}
} );
topPanel.attr( 'tabindex', '-1' );
backBtn.attr( 'tabindex', '0' );
backBtn.focus();
panel._recalculateTopMargin();
} else {
siblings.removeClass( 'open' );
accordionSection.removeClass( 'current-panel' );
overlay.removeClass( 'in-sub-panel' );
content.delay( 180 ).hide( 0, function() {
content.css( 'margin-top', 'inherit' ); // Reset
if ( args.completeCallback ) {
args.completeCallback();
}
} );
topPanel.attr( 'tabindex', '0' );
backBtn.attr( 'tabindex', '-1' );
panelTitle.focus();
container.scrollTop( 0 );
}
},
/** backBtn.focus();
* Recalculate the top margin. accordionSection.css( 'top', '' );
* container.scrollTop( 0 );
* @since 4.4.0
* @private if ( args.completeCallback ) {
*/ args.completeCallback();
_recalculateTopMargin: function() { }
var panel = this, headerActionsHeight, content, accordionSection; } );
headerActionsHeight = $( '#customize-header-actions' ).height();
accordionSection = panel.container.closest( '.accordion-section' ); overlay.addClass( 'in-sub-panel' );
content = accordionSection.find( '.control-panel-content' ); accordionSection.addClass( 'current-panel' );
content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
} else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
panel._animateChangeExpanded( function() {
topPanel.attr( 'tabindex', '0' );
backBtn.attr( 'tabindex', '-1' );
topPanel.focus();
accordionSection.css( 'top', '' );
if ( args.completeCallback ) {
args.completeCallback();
}
} );
overlay.removeClass( 'in-sub-panel' );
accordionSection.removeClass( 'current-panel' );
}
}, },
/** /**
@ -1449,8 +1507,8 @@
} else { } else {
template = wp.template( 'customize-panel-default-content' ); template = wp.template( 'customize-panel-default-content' );
} }
if ( template && panel.container ) { if ( template && panel.headContainer ) {
panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) ); panel.contentContainer.html( template( panel.params ) );
} }
} }
}); });
@ -1626,7 +1684,7 @@
api.section( sectionId, function ( section ) { api.section( sectionId, function ( section ) {
// Wait for the section to be ready/initialized // Wait for the section to be ready/initialized
section.deferred.embedded.done( function () { section.deferred.embedded.done( function () {
parentContainer = section.container.find( 'ul:first' ); parentContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' );
if ( ! control.container.parent().is( parentContainer ) ) { if ( ! control.container.parent().is( parentContainer ) ) {
parentContainer.append( control.container ); parentContainer.append( control.container );
control.renderContent(); control.renderContent();
@ -3542,7 +3600,7 @@
*/ */
api.reflowPaneContents = _.bind( function () { api.reflowPaneContents = _.bind( function () {
var appendContainer, activeElement, rootContainers, rootNodes = [], wasReflowed = false; var appendContainer, activeElement, rootHeadContainers, rootNodes = [], wasReflowed = false;
if ( document.activeElement ) { if ( document.activeElement ) {
activeElement = $( document.activeElement ); activeElement = $( document.activeElement );
@ -3551,12 +3609,12 @@
// Sort the sections within each panel // Sort the sections within each panel
api.panel.each( function ( panel ) { api.panel.each( function ( panel ) {
var sections = panel.sections(), var sections = panel.sections(),
sectionContainers = _.pluck( sections, 'container' ); sectionHeadContainers = _.pluck( sections, 'headContainer' );
rootNodes.push( panel ); rootNodes.push( panel );
appendContainer = panel.container.find( 'ul:first' ); appendContainer = ( panel.contentContainer.is( 'ul' ) ) ? panel.contentContainer : panel.contentContainer.find( 'ul:first' );
if ( ! api.utils.areElementListsEqual( sectionContainers, appendContainer.children( '[id]' ) ) ) { if ( ! api.utils.areElementListsEqual( sectionHeadContainers, appendContainer.children( '[id]' ) ) ) {
_( sections ).each( function ( section ) { _( sections ).each( function ( section ) {
appendContainer.append( section.container ); appendContainer.append( section.headContainer );
} ); } );
wasReflowed = true; wasReflowed = true;
} }
@ -3569,7 +3627,7 @@
if ( ! section.panel() ) { if ( ! section.panel() ) {
rootNodes.push( section ); rootNodes.push( section );
} }
appendContainer = section.container.find( 'ul:first' ); appendContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' );
if ( ! api.utils.areElementListsEqual( controlContainers, appendContainer.children( '[id]' ) ) ) { if ( ! api.utils.areElementListsEqual( controlContainers, appendContainer.children( '[id]' ) ) ) {
_( controls ).each( function ( control ) { _( controls ).each( function ( control ) {
appendContainer.append( control.container ); appendContainer.append( control.container );
@ -3580,11 +3638,11 @@
// Sort the root panels and sections // Sort the root panels and sections
rootNodes.sort( api.utils.prioritySort ); rootNodes.sort( api.utils.prioritySort );
rootContainers = _.pluck( rootNodes, 'container' ); rootHeadContainers = _.pluck( rootNodes, 'headContainer' );
appendContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable appendContainer = $( '#customize-theme-controls .customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
if ( ! api.utils.areElementListsEqual( rootContainers, appendContainer.children() ) ) { if ( ! api.utils.areElementListsEqual( rootHeadContainers, appendContainer.children() ) ) {
_( rootNodes ).each( function ( rootNode ) { _( rootNodes ).each( function ( rootNode ) {
appendContainer.append( rootNode.container ); appendContainer.append( rootNode.headContainer );
} ); } );
wasReflowed = true; wasReflowed = true;
} }

4
wp-admin/js/customize-controls.min.js vendored
View File

File diff suppressed because one or more lines are too long

37
wp-admin/js/customize-nav-menus.js
View File

@ -851,7 +851,7 @@
api.bind( 'pane-contents-reflowed', function() { api.bind( 'pane-contents-reflowed', function() {
// Skip menus that have been removed. // Skip menus that have been removed.
if ( ! section.container.parent().length ) { if ( ! section.contentContainer.parent().length ) {
return; return;
} }
section.container.find( '.menu-item .menu-item-reorder-nav button' ).attr({ 'tabindex': '0', 'aria-hidden': 'false' }); section.container.find( '.menu-item .menu-item-reorder-nav button' ).attr({ 'tabindex': '0', 'aria-hidden': 'false' });
@ -969,7 +969,7 @@
var section = this; var section = this;
if ( expanded ) { if ( expanded ) {
wpNavMenu.menuList = section.container.find( '.accordion-section-content:first' ); wpNavMenu.menuList = section.contentContainer;
wpNavMenu.targetList = wpNavMenu.menuList; wpNavMenu.targetList = wpNavMenu.menuList;
// Add attributes needed by wpNavMenu // Add attributes needed by wpNavMenu
@ -1031,8 +1031,8 @@
onChangeExpanded: function( expanded ) { onChangeExpanded: function( expanded ) {
var section = this, var section = this,
button = section.container.find( '.add-menu-toggle' ), button = section.container.find( '.add-menu-toggle' ),
content = section.container.find( '.new-menu-section-content' ), content = section.contentContainer,
customizer = section.container.closest( '.wp-full-overlay-sidebar-content' ); customizer = section.headContainer.closest( '.wp-full-overlay-sidebar-content' );
if ( expanded ) { if ( expanded ) {
button.addClass( 'open' ); button.addClass( 'open' );
button.attr( 'aria-expanded', 'true' ); button.attr( 'aria-expanded', 'true' );
@ -1045,6 +1045,17 @@
content.slideUp( 'fast' ); content.slideUp( 'fast' );
content.find( '.menu-name-field' ).removeClass( 'invalid' ); content.find( '.menu-name-field' ).removeClass( 'invalid' );
} }
},
/**
* Find the content element.
*
* @since 4.7.0
*
* @returns {jQuery} Content UL element.
*/
getContent: function() {
return this.container.find( 'ul:first' );
} }
}); });
@ -2001,6 +2012,7 @@
*/ */
ready: function() { ready: function() {
var control = this, var control = this,
section = api.section( control.section() ),
menuId = control.params.menu_id, menuId = control.params.menu_id,
menu = control.setting(), menu = control.setting(),
name, name,
@ -2017,7 +2029,7 @@
* being deactivated. * being deactivated.
*/ */
control.active.validate = function() { control.active.validate = function() {
var value, section = api.section( control.section() ); var value;
if ( section ) { if ( section ) {
value = section.active(); value = section.active();
} else { } else {
@ -2026,7 +2038,7 @@
return value; return value;
}; };
control.$controlSection = control.container.closest( '.control-section' ); control.$controlSection = section.headContainer;
control.$sectionContent = control.container.closest( '.accordion-section-content' ); control.$sectionContent = control.container.closest( '.accordion-section-content' );
this._setupModel(); this._setupModel();
@ -2300,11 +2312,11 @@
return; return;
} }
var section = control.container.closest( '.accordion-section' ), var section = api.section( control.section() ),
menuId = control.params.menu_id, menuId = control.params.menu_id,
controlTitle = section.find( '.accordion-section-title' ), controlTitle = section.headContainer.find( '.accordion-section-title' ),
sectionTitle = section.find( '.customize-section-title h3' ), sectionTitle = section.contentContainer.find( '.customize-section-title h3' ),
location = section.find( '.menu-in-location' ), location = section.headContainer.find( '.menu-in-location' ),
action = sectionTitle.find( '.customize-action' ), action = sectionTitle.find( '.customize-action' ),
name = displayNavMenuName( menu.name ); name = displayNavMenuName( menu.name );
@ -2328,7 +2340,7 @@
} ); } );
// Update the nav menu name in all location checkboxes. // Update the nav menu name in all location checkboxes.
section.find( '.customize-control-checkbox input' ).each( function() { section.contentContainer.find( '.customize-control-checkbox input' ).each( function() {
if ( $( this ).prop( 'checked' ) ) { if ( $( this ).prop( 'checked' ) ) {
$( '.current-menu-location-name-' + $( this ).data( 'location-id' ) ).text( name ); $( '.current-menu-location-name-' + $( this ).data( 'location-id' ) ).text( name );
} }
@ -2642,9 +2654,6 @@
// Focus on the new menu section. // Focus on the new menu section.
api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow... api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
// Fix an issue with extra space at top immediately after creating new menu.
$( '#menu-to-edit' ).css( 'margin-top', 0 );
} }
}); });

4
wp-admin/js/customize-nav-menus.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.7-alpha-38647'; $wp_version = '4.7-alpha-38648';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.