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.

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

NUX: Make tips appear inline #16582

Closed
wants to merge 7 commits into from
Closed
@@ -32,6 +32,18 @@ _Returns_

- `?NUX.GuideInfo`: Information about the associated guide.

<a name="hasDismissedAnyTips" href="#hasDismissedAnyTips">#</a> **hasDismissedAnyTips**

Returns whether or not any tips have been dismissed.

_Parameters_

- _state_ `Object`: Global application state.

_Returns_

- `boolean`: Whether any tips have been dismissed.

<a name="isTipVisible" href="#isTipVisible">#</a> **isTipVisible**

Determines whether or not the given tip is showing. Tips are hidden if they

Some generated files are not rendered by default. Learn more.

@@ -370,7 +370,8 @@ The default editor settings
bodyPlaceholder string Empty post placeholder
titlePlaceholder string Empty title placeholder
codeEditingEnabled string Whether or not the user can switch to the code editor
\_\_experimentalCanUserUseUnfilteredHTML string Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
**experimentalCanUserUseUnfilteredHTML string Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
**experimentalEnableTips boolean Whether or not tips aimed at new users should appear in the UI.

This comment has been minimized.

Copy link
@noisysocks

noisysocks Jul 19, 2019

Author Member

I don't know why npm run docs:build has replaced the __ with ** 😕

<a name="SkipToSelectedBlock" href="#SkipToSelectedBlock">#</a> **SkipToSelectedBlock**

@@ -37,6 +37,7 @@
"@wordpress/i18n": "file:../i18n",
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
"@wordpress/keycodes": "file:../keycodes",
"@wordpress/nux": "file:../nux",
This conversation was marked as resolved by noisysocks

This comment has been minimized.

Copy link
@noisysocks

noisysocks Jul 15, 2019

Author Member

Not sure that it's a good idea to have block-editor depend on the nux package. I was thinking that we could have block-editor define some Slots which edit-post fills in. Thoughts?

This comment has been minimized.

Copy link
@talldan

talldan Jul 15, 2019

Contributor

Yeah, I'm not sure tips make sense as a dependency of the raw form of a block editor.

Slots sound like a solution, though I'm not sure what the wider use case for those slots would be. Maybe making them experimental slots to deter usage is the way forward.

This comment has been minimized.

Copy link
@noisysocks

noisysocks Jul 16, 2019

Author Member

What do you think, @youknowriad?

This comment has been minimized.

Copy link
@youknowriad

youknowriad Jul 16, 2019

Contributor

I think it's fine to have the dependency if we have some sort of editor setting saying that tips are disabled by default?

Other question: I assume this is because of the inline tips? What's the difference between that component and just a notice component? (Trying to understand why we need the dependency)?

This comment has been minimized.

Copy link
@noisysocks

noisysocks Jul 17, 2019

Author Member

Other question: I assume this is because of the inline tips? What's the difference between that component and just a notice component? (Trying to understand why we need the dependency)?

Visually, InlineTip and Notice are the same, but InlineTip checks the core/nux data store and determines if the tip has already been dismissed or if all tips are disabled.

This comment has been minimized.

Copy link
@noisysocks

noisysocks Jul 19, 2019

Author Member

I think it's fine to have the dependency if we have some sort of editor setting saying that tips are disabled by default?

Did this in 48652f9!

"@wordpress/rich-text": "file:../rich-text",
"@wordpress/token-list": "file:../token-list",
"@wordpress/url": "file:../url",
@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
import { PanelBody } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { __experimentalInlineTip as InlineTip } from '@wordpress/nux';

/**
* Internal dependencies
@@ -27,6 +28,7 @@ const BlockInspector = ( {
selectedBlockClientId,
selectedBlockName,
showNoBlockSelectedMessage = true,
enableTips,
} ) => {
if ( count > 1 ) {
return <MultiSelectionInspector />;
@@ -51,6 +53,11 @@ const BlockInspector = ( {

return (
<>
{ enableTips && (
<InlineTip tipId="core/editor.blockInspector" className="block-editor-block-inspector__tip">

This comment has been minimized.

Copy link
@talldan

talldan Aug 2, 2019

Contributor

Should it be "core/block-editor.blockInspector" now? Would there be issues with localstorage keys if that changed?

{ __( 'The block tab contains additional settings for the selected block.' ) }
</InlineTip>
) }
<div className="editor-block-inspector__card block-editor-block-inspector__card">
<BlockIcon icon={ blockType.icon } showColors />
<div className="editor-block-inspector__card-content block-editor-block-inspector__card-content">
@@ -91,18 +98,20 @@ const BlockInspector = ( {

export default withSelect(
( select ) => {
const { getSelectedBlockClientId, getSelectedBlockCount, getBlockName } = select( 'core/block-editor' );
const { getSelectedBlockClientId, getSelectedBlockCount, getBlockName, getSettings } = select( 'core/block-editor' );
const { getBlockStyles } = select( 'core/blocks' );
const selectedBlockClientId = getSelectedBlockClientId();
const selectedBlockName = selectedBlockClientId && getBlockName( selectedBlockClientId );
const blockType = selectedBlockClientId && getBlockType( selectedBlockName );
const blockStyles = selectedBlockClientId && getBlockStyles( selectedBlockName );
const { __experimentalEnableTips: enableTips } = getSettings();
return {
count: getSelectedBlockCount(),
hasBlockStyles: blockStyles && blockStyles.length > 0,
selectedBlockName,
selectedBlockClientId,
blockType,
enableTips,
};
}
)( BlockInspector );
@@ -6,6 +6,9 @@
text-align: center;
}

.block-editor-block-inspector__tip {
margin: 0 0 16px 0;
}

.block-editor-block-inspector__card {
display: flex;
@@ -22,7 +22,7 @@ import scrollIntoView from 'dom-scroll-into-view';
*/
import { __, _n, _x, sprintf } from '@wordpress/i18n';
import { Component, createRef } from '@wordpress/element';
import { withSpokenMessages, PanelBody } from '@wordpress/components';
import { withSpokenMessages, PanelBody, ExternalLink } from '@wordpress/components';
import {
getCategories,
isReusableBlock,
@@ -33,6 +33,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose';
import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
import { addQueryArgs } from '@wordpress/url';
import { __experimentalInlineTip as InlineTip } from '@wordpress/nux';

/**
* Internal dependencies
@@ -247,7 +248,7 @@ export class InserterMenu extends Component {
}

render() {
const { instanceId, onSelect, rootClientId } = this.props;
const { instanceId, onSelect, rootClientId, enableTips } = this.props;
const {
childItems,
hoveredItem,
@@ -290,6 +291,16 @@ export class InserterMenu extends Component {
aria-label={ __( 'Available block types' ) }
>

{ enableTips && (
<InlineTip tipId="core/editor.inserter" className="block-editor-inserter__tip">
{ __( 'There are Blocks for most types of content: text, headings, images, lists, and lots more!' ) }
{ ' ' }
<ExternalLink href="https://wordpress.org/support/article/wordpress-editor/#blocks">
{ __( 'Learn more' ) }
</ExternalLink>
</InlineTip>
) }

<ChildBlocks
rootClientId={ rootClientId }
items={ childItems }
@@ -366,6 +377,7 @@ export default compose(
getBlockName,
getBlockRootClientId,
getBlockSelectionEnd,
getSettings,
} = select( 'core/block-editor' );
const {
getChildBlockNames,
@@ -379,11 +391,13 @@ export default compose(
}
}
const destinationRootBlockName = getBlockName( destinationRootClientId );
const { __experimentalEnableTips: enableTips } = getSettings();

return {
rootChildBlocks: getChildBlockNames( destinationRootBlockName ),
items: getInserterItems( destinationRootClientId ),
destinationRootClientId,
enableTips,
};
} ),
withDispatch( ( dispatch, ownProps, { select } ) => {
@@ -105,6 +105,10 @@ $block-inserter-search-height: 38px;
}
}

.block-editor-inserter__tip {
margin: 0 0 $grid-size-large 0;
}

.block-editor-inserter__popover .block-editor-block-types-list {
margin: 0 -8px;
}
@@ -28,9 +28,11 @@ export const PREFERENCES_DEFAULTS = {
* titlePlaceholder string Empty title placeholder
* codeEditingEnabled string Whether or not the user can switch to the code editor
* __experimentalCanUserUseUnfilteredHTML string Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
* __experimentalEnableTips boolean Whether or not tips aimed at new users should appear in the UI.
*/
export const SETTINGS_DEFAULTS = {
alignWide: false,

colors: [
{
name: __( 'Pale pink' ),
@@ -142,7 +144,11 @@ export const SETTINGS_DEFAULTS = {
allowedMimeTypes: null,

availableLegacyWidgets: {},

hasPermissionsToManageWidgets: false,

__experimentalCanUserUseUnfilteredHTML: false,

__experimentalEnableTips: false,
};

@@ -24,9 +24,14 @@ function Notice( {
actions = [],
__unstableHTML,
} ) {
const classes = classnames( className, 'components-notice', 'is-' + status, {
'is-dismissible': isDismissible,
} );
const classes = classnames(
className,
'components-notice',
status ? 'is-' + status : undefined,

This comment has been minimized.

Copy link
@talldan

talldan Aug 2, 2019

Contributor

It's really minor, and I don't care so much if it gets merged without it, but I notice this has changed and I think it could go in the object below.

Also wondering if status should be kebabbed for ultra safety:

[ `is-${ kebabCase( status ) }` ]: status,
{
'is-dismissible': isDismissible,
}
);

if ( __unstableHTML ) {
children = <RawHTML>{ children }</RawHTML>;
@@ -32,8 +32,4 @@ export async function createNewPost( {
const action = _enableTips ? 'enableTips' : 'disableTips';
wp.data.dispatch( 'core/nux' )[ action ]();
}, enableTips );

if ( enableTips ) {
await page.reload();
}
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.