Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update navigation placeholder label #23297

Merged
merged 4 commits into from
Jul 2, 2020
Merged

Update navigation placeholder label #23297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a022593
Update navigation placeholder label
tellthemachines Jun 19, 2020
9331430
Fix e2e tests
tellthemachines Jun 22, 2020
005799f
Should create from preselected menu
tellthemachines Jun 26, 2020
f83f768
Label style overrides.
tellthemachines Jun 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions packages/block-library/src/navigation/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,60 @@ $color-control-label-height: 20px;
}
}

.wp-block-navigation-placeholder {

.components-spinner {
margin-top: -4px;
margin-left: 4px;
vertical-align: middle;
margin-right: 7px;
}

.components-custom-select-control__label {
margin-bottom: 1rem;
}

.components-custom-select-control__button {
height: auto;
padding: 0.375rem 0.75rem 0.375rem 1.5rem;
min-width: 13.75rem; // avoids control size jump depending on selection
}

// Styles for when there are Menus present in the dropdown.
.components-custom-select-control.has-menus .components-custom-select-control__item {

// Creates a faux divider between the menu options if present
&.is-create-empty-option {
position: relative; // positioning context for pseudo
margin-top: 20px;

&::before {
content: "";
position: absolute; // take out of flow to retain size of list item
top: -10px;
left: 25px; // match list item padding
right: 25px; // match list item padding
height: 15px;
border-top: 1px solid $medium-gray-text;
}
}
}

.components-custom-select-control__label {
// Overrides theme styles (Twenty Twenty).
font-size: $default-font-size;
font-weight: normal;
}

.components-custom-select-control__menu {
margin: 0;
max-height: none;
font-family: $default-font;
font-size: $default-font-size;
}

}

.wp-block-navigation .block-editor-button-block-appender {
justify-content: flex-start;
}
61 changes: 28 additions & 33 deletions packages/block-library/src/navigation/placeholder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ import createDataTree from './create-data-tree';

const CREATE_EMPTY_OPTION_VALUE = '__CREATE_EMPTY__';
const CREATE_FROM_PAGES_OPTION_VALUE = '__CREATE_FROM_PAGES__';
const CREATE_PLACEHOLDER_VALUE = '__CREATE_PLACEHOLDER__';

/**
* Get instruction text for the Placeholder component.
Expand All @@ -46,13 +45,15 @@ const CREATE_PLACEHOLDER_VALUE = '__CREATE_PLACEHOLDER__';
function getPlaceholderInstructions( hasMenus, hasPages ) {
if ( hasMenus && hasPages ) {
return __(
'Create a navigation from all existing pages, or choose a menu.'
'Use an existing menu here, include all top-level pages, or add an empty Navigation block.'
);
} else if ( hasMenus && ! hasPages ) {
return __( 'Create a navigation from a menu or create empty.' );
return __(
'Use an existing menu here, or add an empty Navigation block.'
);
} else if ( ! hasMenus && hasPages ) {
return __(
'Create a navigation from all existing pages, or create empty.'
'Include all existing pages here, or add an empty Navigation block.'
);
}

Expand All @@ -68,9 +69,9 @@ function getPlaceholderInstructions( hasMenus, hasPages ) {
* @return {number|undefined} The menu id.
*/
function getSelectedMenu( selectedCreateOption ) {
const optionKey = selectedCreateOption?.key;
return optionKey !== undefined && Number.isInteger( optionKey )
? optionKey
const optionId = selectedCreateOption?.id;
return optionId !== undefined && Number.isInteger( optionId )
? optionId
: undefined;
}

Expand Down Expand Up @@ -223,21 +224,17 @@ function NavigationPlaceholder( { onCreate }, ref ) {

const createOptions = useMemo(
() => [
{
id: CREATE_PLACEHOLDER_VALUE,
name: __( 'Select where to start from…' ),
},
...( hasMenus ? menus : [] ),
{
id: CREATE_EMPTY_OPTION_VALUE,
name: __( 'Create empty menu' ),
name: __( 'Create empty Navigation' ),
className: 'is-create-empty-option',
},
...( hasPages
? [
{
id: CREATE_FROM_PAGES_OPTION_VALUE,
name: __( 'New from all top-level pages' ),
name: __( 'Create from all top-level pages' ),
},
]
: [] ),
Expand Down Expand Up @@ -265,10 +262,6 @@ function NavigationPlaceholder( { onCreate }, ref ) {

const { key } = selectedCreateOption;
switch ( key ) {
case CREATE_PLACEHOLDER_VALUE:
// Do nothing.
return;

case CREATE_EMPTY_OPTION_VALUE: {
const blocks = [ createBlock( 'core/navigation-link' ) ];
onCreate( blocks );
Expand Down Expand Up @@ -304,16 +297,15 @@ function NavigationPlaceholder( { onCreate }, ref ) {
}
}, [ isCreatingFromMenu, hasResolvedMenuItems ] );

if ( hasMenus && ! selectedCreateOption ) {
setSelectedCreateOption( createOptions[ 0 ] );
}

return (
<Placeholder
className="wp-block-navigation-placeholder"
icon={ icon }
label={ __( 'Navigation' ) }
instructions={
! isLoading
? getPlaceholderInstructions( hasMenus, hasPages )
: undefined
}
>
{ isLoading && (
<div ref={ ref }>
Expand All @@ -327,13 +319,20 @@ function NavigationPlaceholder( { onCreate }, ref ) {
>
<>
<CustomSelectControl
className={ classnames( {
'has-menus': hasMenus,
} ) }
label={ __(
'Select to create from Pages, existing Menu or empty'
className={ classnames(
'wp-block-navigation-placeholder__select-control',
{
'has-menus': hasMenus,
}
) }
hideLabelFromVision={ true }
label={
! isLoading
? getPlaceholderInstructions(
hasMenus,
hasPages
)
: undefined
}
value={ selectedCreateOption || createOptions[ 0 ] }
onChange={ ( { selectedItem } ) => {
if (
Expand All @@ -354,11 +353,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {
<Button
isSecondary
className="wp-block-navigation-placeholder__button"
disabled={
! selectedCreateOption ||
selectedCreateOption.key ===
CREATE_PLACEHOLDER_VALUE
}
disabled={ ! selectedCreateOption }
isBusy={ isCreatingFromMenu }
onClick={ onCreateButtonClick }
>
Expand Down
62 changes: 0 additions & 62 deletions packages/block-library/src/navigation/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,65 +171,3 @@
justify-content: flex-end;
}

.wp-block-navigation-placeholder__actions {
display: flex;
align-items: flex-start;

.components-base-control {
margin-right: 5px;
}

.components-select-control__input {
margin: 0;
min-height: 36px; // match button height
}

.wp-block-navigation-placeholder__button {
height: 36px;
}
}

.wp-block-navigation-placeholder {

.components-spinner {
margin-top: -4px;
margin-left: 4px;
vertical-align: middle;
margin-right: 7px;
}
.components-custom-select-control__button {
height: auto; // overide default button styles
margin-bottom: 0; // cancel bottom margin
min-width: 220px; // avoids control size jump depending on selection
}

// Styles for when there are Menus present in the dropdown.
.components-custom-select-control.has-menus .components-custom-select-control__item {
display: list-item; // remove flex to allow pseudo element to stack
padding: 10px 25px;

// Creates a faux divider between the menu options if present
&.is-create-empty-option {
position: relative; // positioning context for pseudo
margin-top: 20px;

&::before {
content: "";
position: absolute; // take out of flow to retain size of list item
top: -10px;
left: 25px; // match list item padding
right: 25px; // match list item padding
display: list-item;
height: 15px;
border-top: 1px solid $medium-gray-text;
}
}
}

.components-custom-select-control__menu {
margin-top: 3px; // match gap in design
font-family: $default-font;
font-size: $default-font-size;
}

}
49 changes: 20 additions & 29 deletions packages/e2e-tests/specs/experiments/navigation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,14 +218,12 @@ async function updateActiveNavigationLink( { url, label, type } ) {
}

async function selectDropDownOption( optionText ) {
const buttonText = 'Select where to start from…';
await page.waitForXPath(
`//button[text()="${ buttonText }"][not(@disabled)]`
await page.waitForSelector(
'.wp-block-navigation-placeholder__select-control button'
);
const [ dropdownToggle ] = await page.$x(
`//button[text()="${ buttonText }"][not(@disabled)]`
await page.click(
'.wp-block-navigation-placeholder__select-control button'
);
await dropdownToggle.click();

const [ theOption ] = await page.$x( `//li[text()="${ optionText }"]` );

Expand All @@ -249,7 +247,7 @@ async function clickCreateButton() {
}

async function createEmptyNavBlock() {
await selectDropDownOption( 'Create empty menu' );
await selectDropDownOption( 'Create empty Navigation' );
await clickCreateButton();
}

Expand Down Expand Up @@ -283,7 +281,7 @@ describe( 'Navigation', () => {
// Add the navigation block.
await insertBlock( 'Navigation' );

await selectDropDownOption( 'New from all top-level pages' );
await selectDropDownOption( 'Create from all top-level pages' );

await clickCreateButton();

Expand All @@ -298,27 +296,23 @@ describe( 'Navigation', () => {
// Add the navigation block.
await insertBlock( 'Navigation' );

const dropdownButtonText = 'Select where to start from…';
await page.waitForXPath(
`//button[text()="${ dropdownButtonText }"][not(@disabled)]`
await page.waitForSelector(
'.wp-block-navigation-placeholder__select-control button'
);
const [ dropdownToggle ] = await page.$x(
`//button[text()="${ dropdownButtonText }"][not(@disabled)]`
await page.click(
'.wp-block-navigation-placeholder__select-control button'
);

await dropdownToggle.click();

const dropDownItemsLength = await page.$$eval(
'ul[role="listbox"] li[role="option"]',
( els ) => els.length
);

// Should only be showing
// 1. Placeholder value.
// 2. Create empty menu.
expect( dropDownItemsLength ).toEqual( 2 );
// 1. Create empty menu.
expect( dropDownItemsLength ).toEqual( 1 );

await page.waitForXPath( '//li[text()="Create empty menu"]' );
await page.waitForXPath( '//li[text()="Create empty Navigation"]' );

// Snapshot should contain the mocked menu items.
expect( await getEditedPostContent() ).toMatchSnapshot();
Expand Down Expand Up @@ -386,26 +380,23 @@ describe( 'Navigation', () => {
// Add the navigation block.
await insertBlock( 'Navigation' );

const dropdownButtonText = 'Select where to start from…';
await page.waitForXPath(
`//button[text()="${ dropdownButtonText }"][not(@disabled)]`
await page.waitForSelector(
'.wp-block-navigation-placeholder__select-control button'
);
const [ dropdownToggle ] = await page.$x(
`//button[text()="${ dropdownButtonText }"][not(@disabled)]`
await page.click(
'.wp-block-navigation-placeholder__select-control button'
);
await dropdownToggle.click();

const dropDownItemsLength = await page.$$eval(
'ul[role="listbox"] li[role="option"]',
( els ) => els.length
);

// Should only be showing
// 1. Placeholder.
// 2. Create from Empty.
expect( dropDownItemsLength ).toEqual( 2 );
// 1. Create empty menu.
expect( dropDownItemsLength ).toEqual( 1 );

await page.waitForXPath( '//li[text()="Create empty menu"]' );
await page.waitForXPath( '//li[text()="Create empty Navigation"]' );

// Snapshot should contain the mocked menu items.
expect( await getEditedPostContent() ).toMatchSnapshot();
Expand Down