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

Jump to bottom

Try: Block Library polish #19836

Closed
wants to merge 6 commits into from
Closed

Try: Block Library polish #19836

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a6f2a20
Try: Block Library polish
Jan 23, 2020
226ae20
Add basic responsiveness to panels.
Jan 24, 2020
6ebc4ac
Address feedback.
Jan 27, 2020
956cb60
Fix issue with library in appender.
Jan 31, 2020
32b535d
Address feedback.
Feb 3, 2020
afebef8
remove help panel setting
youknowriad Feb 11, 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
5 changes: 2 additions & 3 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ import {
BlockEditorProvider,
BlockList,
WritingFlow,
ObserveTyping
ObserveTyping,
} from '@wordpress/block-editor';
import { Popover } from '@wordpress/components';
import { useState } from '@wordpress/element';

function MyEditorComponent () {
function MyEditorComponent() {
const [ blocks, updateBlocks ] = useState( [] );

return (
Expand Down Expand Up @@ -413,7 +413,6 @@ _Properties_
- _bodyPlaceholder_ `string`: Empty post placeholder
- _titlePlaceholder_ `string`: Empty title placeholder
- _codeEditingEnabled_ `boolean`: Whether or not the user can switch to the code editor
- _showInserterHelpPanel_ `boolean`: Whether or not the inserter help panel is shown
- _\_\_experimentalCanUserUseUnfilteredHTML_ `boolean`: 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.
- _\_\_experimentalEnableLegacyWidgetBlock_ `boolean`: Whether the user has enabled the Legacy Widget Block
- _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/block-preview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,8 @@ function ScaledBlockPreview( { blocks, viewportWidth, padding = 0 } ) {
};
}, [] );

if ( ! blocks || blocks.length === 0 ) {
// previewScale sometimes returns -Infinity when rendered hidden.
if ( ! blocks || blocks.length === 0 || previewScale < 0 ) {
return null;
}

Expand Down
10 changes: 7 additions & 3 deletions packages/block-editor/src/components/inserter/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
* External dependencies
*/
import { size } from 'lodash';
import classnames from 'classnames';

/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -109,7 +111,6 @@ class Inserter extends Component {
rootClientId,
clientId,
isAppender,
showInserterHelpPanel,
__experimentalSelectBlockOnInsert: selectBlockOnInsert,
} = this.props;

Expand All @@ -119,14 +120,14 @@ class Inserter extends Component {
rootClientId={ rootClientId }
clientId={ clientId }
isAppender={ isAppender }
showInserterHelpPanel={ showInserterHelpPanel }
__experimentalSelectBlockOnInsert={ selectBlockOnInsert }
/>
);
}

render() {
const {
isAppender,
position,
hasSingleBlockType,
insertOnlyAllowedBlock,
Expand All @@ -139,7 +140,10 @@ class Inserter extends Component {
return (
<Dropdown
className="block-editor-inserter"
contentClassName="block-editor-inserter__popover"
contentClassName={ classnames(
'block-editor-inserter__popover',
{ 'is-top-toolbar-inserter': ! isAppender }
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This variable used to distinguish the visual styling between the top toolbar inserter and the one invoked from the sibling inserter. In a rebase, I failed to verify this still worked before pushing, and somehow it broke. I don't know why it doesn't work anymore. @youknowriad if you have time, can you provide insights into this?

Here's how it looks when broken.

Screenshot 2020-02-03 at 10 08 37

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is definitely not the right variable to check for and in fact we don't have any variable to distinguish these properly at the moment.

I think we follow the CSS suggestions I propose (avoid the large width and use absolute positionning for the preview), we could show the same inserter in all places and it will be shown properly with less code. We might need to add a dedicated prop to remove the preview hideBlockPreview or somthing but the overall design will stay consistent.

Copy link
Contributor

@youknowriad youknowriad Feb 11, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To clarify the issue on that screenshot is that the width of the popover is very large (not just the panel on the left) so centering the toggle appear broken. Absolute positioning of the preview fixes that.

) }
position={ position }
onToggle={ this.onToggle }
expandOnMobile
Expand Down
212 changes: 85 additions & 127 deletions packages/block-editor/src/components/inserter/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
includes,
} from 'lodash';
import scrollIntoView from 'dom-scroll-into-view';
import classnames from 'classnames';

/**
* WordPress dependencies
Expand Down Expand Up @@ -283,7 +282,6 @@ export class InserterMenu extends Component {
instanceId,
onSelect,
rootClientId,
showInserterHelpPanel,
} = this.props;
const {
childItems,
Expand All @@ -304,7 +302,6 @@ export class InserterMenu extends Component {
const hoveredItemBlockType = hoveredItem
? getBlockType( hoveredItem.name )
: null;
const hasHelpPanel = hasItems && showInserterHelpPanel;

// Disable reason (no-autofocus): The inserter menu is a modal display, not one which
// is always visible, and one which already incurs this behavior of autoFocus via
Expand All @@ -314,9 +311,7 @@ export class InserterMenu extends Component {
/* eslint-disable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */
return (
<div
className={ classnames( 'block-editor-inserter__menu', {
'has-help-panel': hasHelpPanel,
} ) }
className="block-editor-inserter__menu"
onKeyPress={ stopKeyPropagation }
onKeyDown={ this.onKeyDown }
>
Expand Down Expand Up @@ -467,86 +462,59 @@ export class InserterMenu extends Component {
} }
</__experimentalInserterMenuExtension.Slot>
</div>

<Tip>
{ __experimentalCreateInterpolateElement(
__(
'While writing, you can press <kbd>/</kbd> to quickly insert new blocks.'
),
{ kbd: <kbd /> }
) }
</Tip>
</div>

{ hasHelpPanel && (
<div className="block-editor-inserter__menu-help-panel">
{ hoveredItem && (
<>
{ ! isReusableBlock( hoveredItem ) && (
<BlockCard blockType={ hoveredItem } />
) }
<div className="block-editor-inserter__preview">
{ isReusableBlock( hoveredItem ) ||
hoveredItemBlockType.example ? (
<div className="block-editor-inserter__preview-content">
<BlockPreview
padding={ 10 }
viewportWidth={ 500 }
blocks={
hoveredItemBlockType.example
? getBlockFromExample(
hoveredItem.name,
{
attributes: {
...hoveredItemBlockType
.example
.attributes,
...hoveredItem.initialAttributes,
},
innerBlocks:
hoveredItemBlockType
.example
.innerBlocks,
}
)
: createBlock(
hoveredItem.name,
hoveredItem.initialAttributes
)
}
/>
</div>
) : (
<div className="block-editor-inserter__preview-content-missing">
{ __( 'No Preview Available.' ) }
</div>
) }
</div>
</>
{ hoveredItem && (
<div className="block-editor-inserter__preview-panel">
{ ! isReusableBlock( hoveredItem ) && (
<BlockCard blockType={ hoveredItemBlockType } />
) }
{ ! hoveredItem && (
<div className="block-editor-inserter__menu-help-panel-no-block">
<div className="block-editor-inserter__menu-help-panel-no-block-text">
<div className="block-editor-inserter__menu-help-panel-title">
{ __( 'Content blocks' ) }
</div>
<p>
{ __(
'Welcome to the wonderful world of blocks! Blocks are the basis of all content within the editor.'
) }
</p>
<p>
{ __(
'There are blocks available for all kinds of content: insert text, headings, images, lists, videos, tables, and lots more.'
) }
</p>
<p>
{ __(
'Browse through the library to learn more about what each block does.'
) }
</p>
<div className="block-editor-inserter__preview">
{ isReusableBlock( hoveredItem ) ||
hoveredItemBlockType.example ? (
<div className="block-editor-inserter__preview-content">
<BlockPreview
padding={ 10 }
viewportWidth={ 500 }
blocks={
hoveredItemBlockType.example
? getBlockFromExample(
hoveredItem.name,
{
attributes: {
...hoveredItemBlockType
.example
.attributes,
...hoveredItem.initialAttributes,
},
innerBlocks:
hoveredItemBlockType
.example
.innerBlocks,
}
)
: createBlock(
hoveredItem.name,
hoveredItem.initialAttributes
)
}
/>
</div>
<Tip>
{ __experimentalCreateInterpolateElement(
__(
'While writing, you can press <kbd>/</kbd> to quickly insert new blocks.'
),
{ kbd: <kbd /> }
) }
</Tip>
</div>
) }
) : (
<div className="block-editor-inserter__preview-content-missing">
{ __( 'No preview available.' ) }
</div>
) }
</div>
</div>
) }
</div>
Expand All @@ -556,53 +524,43 @@ export class InserterMenu extends Component {
}

export default compose(
withSelect(
(
select,
{ clientId, isAppender, rootClientId, showInserterHelpPanel }
) => {
const {
getInserterItems,
getBlockName,
getBlockRootClientId,
getBlockSelectionEnd,
getSettings,
} = select( 'core/block-editor' );
const {
getCategories,
getCollections,
getChildBlockNames,
} = select( 'core/blocks' );

let destinationRootClientId = rootClientId;
if ( ! destinationRootClientId && ! clientId && ! isAppender ) {
const end = getBlockSelectionEnd();
if ( end ) {
destinationRootClientId =
getBlockRootClientId( end ) || undefined;
}
}
const destinationRootBlockName = getBlockName(
destinationRootClientId
);
withSelect( ( select, { clientId, isAppender, rootClientId } ) => {
const {
getInserterItems,
getBlockName,
getBlockRootClientId,
getBlockSelectionEnd,
getSettings,
} = select( 'core/block-editor' );
const { getCategories, getCollections, getChildBlockNames } = select(
'core/blocks'
);

const {
showInserterHelpPanel: showInserterHelpPanelSetting,
__experimentalFetchReusableBlocks: fetchReusableBlocks,
} = getSettings();

return {
categories: getCategories(),
collections: getCollections(),
rootChildBlocks: getChildBlockNames( destinationRootBlockName ),
items: getInserterItems( destinationRootClientId ),
showInserterHelpPanel:
showInserterHelpPanel && showInserterHelpPanelSetting,
destinationRootClientId,
fetchReusableBlocks,
};
let destinationRootClientId = rootClientId;
if ( ! destinationRootClientId && ! clientId && ! isAppender ) {
const end = getBlockSelectionEnd();
if ( end ) {
destinationRootClientId =
getBlockRootClientId( end ) || undefined;
}
}
),
const destinationRootBlockName = getBlockName(
destinationRootClientId
);

const {
__experimentalFetchReusableBlocks: fetchReusableBlocks,
} = getSettings();

return {
categories: getCategories(),
collections: getCollections(),
rootChildBlocks: getChildBlockNames( destinationRootBlockName ),
items: getInserterItems( destinationRootClientId ),
destinationRootClientId,
fetchReusableBlocks,
};
} ),
withDispatch( ( dispatch, ownProps, { select } ) => {
const { showInsertionPoint, hideInsertionPoint } = dispatch(
'core/block-editor'
Expand Down
Loading