Customize: Improve the menu creation flow.

Often, folks run into two issues when they create new menus: they click "Add a Menu" thinking it will add a new page to their menu, or they forget to assign their new menu to a location, and then wonder why it doesn't show up on their site.

This commit rearranges the order of items in the menu panel, and updates the flow for creating a menu by breaking it up into steps. Additionally, more help text has been added to guide people through the process of creating a menu.

Also adds default `type` lookups for Panel and Section instances. See #30741.

Props bpayton, obenland, westonruter, celloexpessions, afercia, melchoyce, zoonini, michelleweber.
Fixes #40104.


git-svn-id: https://develop.svn.wordpress.org/trunk@41768 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
2017-10-05 02:21:22 +00:00
parent ff65c814f9
commit fb28cd4663
14 changed files with 592 additions and 350 deletions
+9 -3
View File
@@ -557,11 +557,16 @@ body.trashing #publish-settings {
border-bottom-color: #ddd;
}
#customize-theme-controls .control-panel-content .control-section:nth-child(2),
#customize-theme-controls .control-panel-nav_menus .control-section:nth-child(3) {
#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
border-top: 1px solid #ddd;
}
#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu {
border-top: none;
}
#customize-theme-controls > ul {
margin: 0;
}
@@ -661,7 +666,8 @@ body.trashing #publish-settings {
position: static;
}
.customize-section-description-container {
.customize-section-description-container,
.control-section-nav_menu .customize-section-description-container {
margin-bottom: 15px;
}
+61 -21
View File
@@ -1,10 +1,22 @@
#customize-theme-controls #accordion-section-menu_locations {
position: relative;
margin-bottom: 15px;
margin-top: 15px;
}
#customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
border-bottom-color: #ddd;
margin-top: 15px;
}
#customize-theme-controls .customize-section-title-nav_menus-heading,
#customize-theme-controls .customize-section-title-menu_locations-heading,
#customize-theme-controls .customize-section-title-menu_locations-description {
padding: 0 12px 0 12px;
}
#customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description {
/* Override the default italic style for control descriptions */
font-style: normal;
}
.menu-in-location,
@@ -27,6 +39,23 @@
line-height: 28px;
}
#customize-controls .customize-control-nav_menu_name {
margin-bottom: 12px;
}
.customize-control-nav_menu_name p:last-of-type {
margin-bottom: 0;
}
#customize-new-menu-submit {
float: right;
min-width: 85px;
}
#customize-new-menu-submit-description {
margin: 0;
}
.wp-customizer .menu-item-bar .menu-item-handle,
.wp-customizer .menu-item-settings,
.wp-customizer .menu-item-settings .description-thin {
@@ -175,12 +204,25 @@
border-top: none;
}
.menu-settings .customize-control-checkbox label {
.wp-customizer .menu-location-settings {
margin-top: 12px;
border-top: none;
}
.wp-customizer .control-section-nav_menu .menu-location-settings {
margin-top: 24px;
border-top: 1px solid #ddd;
padding-top: 12px;
}
.menu-settings .customize-control-checkbox label,
.menu-location-settings .customize-control-checkbox label {
line-height: 1;
}
/* @todo update selector or potentially remove */
.menu-settings .customize-control.customize-control-checkbox {
.menu-settings .customize-control.customize-control-checkbox,
.menu-location-settings .customize-control.customize-control-checkbox {
margin-bottom: 8px; /* Override collapsing at smaller viewports. */
}
@@ -738,27 +780,16 @@ body.adding-menu-items #customize-preview iframe {
/* @todo update selector */
#accordion-section-add_menu {
margin: 15px 12px;
overflow: hidden;
text-align: right;
}
.new-menu-section-content {
display: none;
padding: 15px 0 0 0;
clear: both;
#accordion-section-add_menu h3,
#accordion-section-add_menu .customize-add-menu-button {
margin: 0;
}
/* @todo update selector */
#accordion-section-add_menu .accordion-section-title {
padding-left: 45px;
}
/* @todo update selector */
#accordion-section-add_menu .accordion-section-title:before {
font: normal 20px/1 dashicons;
position: absolute;
top: 12px;
left: 14px;
content: "\f132";
#accordion-section-add_menu .customize-add-menu-button {
font-weight: normal;
}
#create-new-menu-submit {
@@ -772,6 +803,10 @@ body.adding-menu-items #customize-preview iframe {
width: 100%;
}
.assigned-menu-locations-title p {
margin: 0 0 8px 0;
}
li.assigned-to-menu-location .menu-delete-item {
display: none;
}
@@ -808,7 +843,12 @@ li.assigned-to-menu-location .add-new-menu-item {
margin-bottom: 0;
}
.customize-control-nav_menu {
.customize-control-nav_menu .new-menu-item-invitation {
margin-top: 0;
margin-bottom: 0;
}
.customize-control-nav_menu .customize-control-nav_menu-buttons {
margin-top: 12px;
}