WordPress.org

Make WordPress Core

Opened 13 months ago

Closed 11 months ago

Last modified 7 months ago

#38164 closed enhancement (fixed)

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

Reported by: celloexpressions Owned by: helen
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.7
Component: Customize Keywords: has-screenshots needs-patch ui-feedback
Focuses: ui Cc:

Description

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.

Attachments (5)

38164.diff (8.4 KB) - added by celloexpressions 12 months ago.
First pass, with full menus integration.
38164.gif (1.9 MB) - added by celloexpressions 12 months ago.
With [attachment:38164.diff[.
38164.2.diff (8.7 KB) - added by celloexpressions 12 months ago.
See comment.
button-link.mov (1.4 MB) - added by westonruter 12 months ago.
38164.button-link.diff (2.6 KB) - added by westonruter 12 months ago.

Change History (39)

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


13 months ago

#2 @celloexpressions
13 months ago

  • Keywords ui-feedback added
  • Owner set to celloexpressions
  • Status changed from new to assigned

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

https://core.trac.wordpress.org/raw-attachment/ticket/38013/static-front-page-with-object-selector-controls.png

https://core.trac.wordpress.org/raw-attachment/ticket/38013/static-front-page-dropdown-pages-controls-with-customize-posts.png

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

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


13 months ago

#4 @celloexpressions
13 months ago

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.

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


13 months ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


12 months ago

@celloexpressions
12 months ago

First pass, with full menus integration.

#7 @celloexpressions
12 months ago

  • Keywords has-patch needs-testing has-screenshots added; needs-patch needs-screenshots removed

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.

#8 @westonruter
12 months ago

@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.

#9 @celloexpressions
12 months ago

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?

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


12 months ago

This ticket was mentioned in Slack in #core by celloexpressions. View the logs.


12 months ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


12 months ago

@celloexpressions
12 months ago

See comment.

#13 @celloexpressions
12 months ago

  • Keywords ui-feedback removed

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.

#14 @celloexpressions
12 months ago

  • Owner changed from celloexpressions to westonruter
  • Status changed from assigned to reviewing

This is ready for commit review.

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


12 months ago

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.


12 months ago

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


12 months ago

#19 @westonruter
12 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#20 @rabmalin
12 months ago

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.

#21 follow-up: @helen
12 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

#22 @westonruter
12 months ago

  • Keywords needs-patch added; has-patch removed

#23 @westonruter
12 months ago

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

#24 @westonruter
12 months ago

  • Keywords ui-feedback added

This ticket was mentioned in Slack in #core by helen. View the logs.


12 months ago

#26 @helen
12 months ago

  • Owner changed from westonruter to helen
  • Status changed from reopened to assigned

#27 in reply to: ↑ 21 ; follow-up: @celloexpressions
12 months ago

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.

This ticket was mentioned in Slack in #design by helen. View the logs.


11 months ago

#29 in reply to: ↑ 27 @helen
11 months ago

  • Keywords needs-testing removed

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:

http://s.hyhs.me/i3zi/image.png

Categories metabox:

http://s.hyhs.me/i3gs/image.png

#30 @karmatosed
11 months ago

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.

#31 @melchoyce
11 months ago

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.

#32 @helen
11 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#33 @westonruter
7 months ago

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.

#34 @swissspidy
7 months ago

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.

Note: See TracTickets for help on using tickets.