Customize: assign static front page and posts page to new pages

[celloexpressions]

Following up on #38013, the ability to create new auto-draft pages within menus should extend to the static front page and posts page selectors in the Static Front Page section. Per @westonruter, there is code in the Customize Posts plugin that can be reused for this.

Note that on clean installs, there is only one page, making it impossible to have a separate static front page and a posts page without leaving the customizer to add another page.

For the UI, we need to decide if a separate button (with text or an icon) next to each select makes sense, or if there should be a persistent input field for this.

[celloexpressions]

Previously-shared screenshots to illustrate this (see #38013):

Clicking on a button would open an input field for this.

[celloexpressions]

Per today's design meeting, we're going to try a button-link under each dropdown that open an input to add a new page by title.

[celloexpressions]

First pass, with full menus integration.

[celloexpressions]

With [attachment:38164.diff​[.

[celloexpressions]

38164.diff​ is a fully-functional first pass:

• Dropdown-pages controls that set the add_new arg to true can add pages now.
• The front page and posts page controls allow new pages to be added directly.
• Newly-added pages use the existing menus functions for now, to avoid adding a larger customize-posts-like framework.
• Newly-added pages are added to menus and all sropdown-pages controls and can be previewed right away.
• Patch also cleans up the styling for the initial ability to add pages in menus as well.

[westonruter]

@celloexpressions the style of the “Add new page” link/button seems off. To me it doesn't seem like it should be something that is clickable at all. Shouldn't there be maybe a “+” button next to the dropdown, and when this is clicked it then has the behavior for the Add Item or Add Widget buttons where the “+” becomes an “x” to cancel out of adding the item? After clicking “+” this can reveal a second row that has the text box for the title along with the Add button.

[celloexpressions]

The design team specifically requested the button-link design with text below the select. However, I'm guessing the intent was to also include link colors and underline, which the .button-link class seems to be missing. I'd prefer an actual ternary button style here, but I care more about getting something in here. Does anyone have further thoughts on the design?

[celloexpressions]

See comment.

[celloexpressions]

In 38164.2.diff​:

• Use button styling for add new, per design meeting.
• Add an invalid indicator when there's no title.
• Remove disabled attr on always.
• Improve alignment relative to select element.

[celloexpressions]

This is ready for commit review.

[westonruter]

Review and revisions are being done in ​https://github.com/xwp/wordpress-develop/pull/182

[westonruter]

In 38906:

Customize: Allow page stubs to be created via dropdown-pages controls in the Static Front Page section.

This ability was previously added to nav menus via the available page items panel. The "Add New Page" button only appears when the allow_addition control param is supplied as true. Code is adapted from the Customize Posts feature plugin.

Props celloexpressions, westonruter.
See #38013, #34923.
Fixes #38164.

[rabmalin]

After Add New Page button is clicked, Cancel button would be good I guess. Currently there is no way to cancel. Esc button takes backs to the previous panel.

[helen]

Reopening for two things - I think the button should be of the .button-link style to be less intrusive, and the comment above about having a Cancel button (also .button-link I imagine), please.

[westonruter]

See 38164.button-link.diff​ and screen capture depicting interactions in button-link.mov​. Probably needs better styling.

[celloexpressions]

Replying to helen:

Reopening for two things - I think the button should be of the .button-link style to be less intrusive, and the comment above about having a Cancel button (also .button-link I imagine), please.

The design team specifically asked for this to be changed to actual button styling in a more recent meeting with more attendees, after the initial meeting with fewer attendees favored the button-link style. They should be consulted before switching back.

[helen]

Replying to celloexpressions:

The design team specifically asked for this to be changed to actual button styling

Followed up on this in #design. I'll look to @karmatosed to give a verdict here on ticket so we've got it all documented in one place. My thoughts here are that the buttons make it a bit visually overwhelming, there's the existing non-customizer pattern from the categories metabox, and having it not be a button-looking help separate the action from any inputs around it. As for cancel, we may not need it since placement might be tough at the moment, it's easy enough to just move on from the input if you've changed your mind.

Potential change:

Categories metabox:

[karmatosed]

After seeing the button, I agree with @helen's suggestion of a link similar to categories, over having an actual button as we have in the current patch.

There is a lot of visual complexity with the styled button that just having a link styling avoids. We also have the benefit of it being an existing pattern that makes sense to users.

[melchoyce]

Yeah, even though I said it should be a button, I'm coming around to this particular link styling. Would be nice to keep patterns consistent, and it's still very explicit.

[helen]

In 39194:

Customize: Make "Add New Page" buttons less intrusive.

They now better match the existing add functionality from the category metabox and are better separated from the surrounding inputs. All hail .button-link.

fixes #38164. see #35126.

[westonruter]

In 40380:

Customize: Fix reversal of nav menu item's type and object properties for page stub added in customizer.

Amends [38906].
See #38164.
Fixes #40277.

[swissspidy]

In 40383:

Customize: Fix reversal of nav menu item's type and object properties for
page stub added in customizer.

Amends [38906].
See #38164.
Fixes #40277.

Merges [40380] to the 4.7 branch.