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

Make the inserter full height #20526

Merged
merged 3 commits into from
Mar 5, 2020
Merged

Make the inserter full height #20526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ca51b3
Make the inserter full height
youknowriad Feb 28, 2020
6edd3e8
Remove the default help panel
youknowriad Mar 5, 2020
b820f5f
Remove the inserter help panel flag
youknowriad Mar 5, 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
1 change: 0 additions & 1 deletion packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,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
198 changes: 80 additions & 118 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 @@ -312,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 @@ -465,79 +462,54 @@ export class InserterMenu extends Component {
} }
</__experimentalInserterMenuExtension.Slot>
</div>
{ showInserterHelpPanel && (
<div className="block-editor-inserter__tips">
<Tips />
</div>
) }
</div>

{ hasHelpPanel && (
{ hasHelpPanel && hoveredItem && (
<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>
</>
{ ! isReusableBlock( hoveredItem ) && (
<BlockCard blockType={ hoveredItem } />
) }
{ ! 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>
<Tips />
</div>
) }
) : (
<div className="block-editor-inserter__preview-content-missing">
{ __( 'No Preview Available.' ) }
</div>
) }
</div>
</div>
) }
</div>
Expand All @@ -547,53 +519,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
43 changes: 19 additions & 24 deletions packages/block-editor/src/components/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
$block-inserter-content-height: 350px;
$block-inserter-preview-height: 350px;
$block-inserter-tabs-height: 44px;
$block-inserter-search-height: 38px;

Expand All @@ -17,11 +17,10 @@ $block-inserter-search-height: 38px;
}

.block-editor-inserter__popover > .components-popover__content {
padding: 0 0 $border-width 0;

@include break-medium {
overflow-y: visible;
height: $block-inserter-content-height + $block-inserter-tabs-height + $block-inserter-search-height;
height: 100vh;
padding: 0;
}
}

Expand All @@ -38,17 +37,6 @@ $block-inserter-search-height: 38px;

.block-editor-inserter__menu {
height: 100%;
display: flex;
width: auto;
position: relative;

@include break-medium {
width: 400px;

&.has-help-panel {
width: 700px;
}
}
}

.block-editor-inserter__main-area {
Expand Down Expand Up @@ -81,6 +69,7 @@ $block-inserter-search-height: 38px;
position: relative;
z-index: 1;
border-radius: $radius-round-rectangle;
flex-shrink: 0;

/* Fonts smaller than 16px causes mobile safari to zoom. */
font-size: $mobile-text-min-font-size;
Expand All @@ -104,10 +93,6 @@ $block-inserter-search-height: 38px;
outline: $border-width dotted $dark-gray-500;
}

@include break-medium {
height: $block-inserter-content-height + $block-inserter-tabs-height;
}

// Don't show the top border on the first panel, let the Search border be the border.
[role="presentation"] + .components-panel__body {
border-top: none;
Expand Down Expand Up @@ -152,13 +137,17 @@ $block-inserter-search-height: 38px;

.block-editor-inserter__menu-help-panel {
display: none;
border-left: $border-width solid $light-gray-500;
border: $border-width solid $light-gray-secondary;
width: 300px;
height: 100%;
min-height: $block-inserter-preview-height;
margin-right: 20px;
padding: 20px;
overflow-y: auto;
background: $white;

@include break-medium {
position: absolute;
top: 0;
left: calc(100% + 20px);
display: flex;
flex-direction: column;
}
Expand All @@ -172,7 +161,8 @@ $block-inserter-search-height: 38px;

.block-editor-inserter__preview {
display: flex;
flex-grow: 2;
flex-grow: 1;
overflow-y: auto;
}
}

Expand Down Expand Up @@ -220,7 +210,7 @@ $block-inserter-search-height: 38px;
border-radius: $radius-round-rectangle;
min-height: 150px;
display: grid;
flex-grow: 2;
flex-grow: 1;

.block-editor-block-preview__container {
margin-right: 0;
Expand All @@ -238,3 +228,8 @@ $block-inserter-search-height: 38px;
border-radius: $radius-round-rectangle;
align-items: center;
}

.block-editor-inserter__tips {
padding: $grid-unit-20;
flex-shrink: 0;
}
2 changes: 0 additions & 2 deletions packages/block-editor/src/store/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export const PREFERENCES_DEFAULTS = {
* @property {string} bodyPlaceholder Empty post placeholder
* @property {string} titlePlaceholder Empty title placeholder
* @property {boolean} codeEditingEnabled Whether or not the user can switch to the code editor
* @property {boolean} showInserterHelpPanel Whether or not the inserter help panel is shown
* @property {boolean} __experimentalCanUserUseUnfilteredHTML 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.
* @property {boolean} __experimentalEnableLegacyWidgetBlock Whether the user has enabled the Legacy Widget Block
* @property {boolean} __experimentalBlockDirectory Whether the user has enabled the Block Directory
Expand Down Expand Up @@ -147,7 +146,6 @@ export const SETTINGS_DEFAULTS = {

availableLegacyWidgets: {},
hasPermissionsToManageWidgets: false,
showInserterHelpPanel: true,
__experimentalCanUserUseUnfilteredHTML: false,
__experimentalEnableLegacyWidgetBlock: false,
__experimentalBlockDirectory: false,
Expand Down
5 changes: 0 additions & 5 deletions packages/edit-post/src/components/options-modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import {
EnablePluginDocumentSettingPanelOption,
EnablePublishSidebarOption,
EnablePanelOption,
EnableFeature,
} from './options';
import MetaBoxesSection from './meta-boxes-section';

Expand All @@ -48,10 +47,6 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
<EnablePublishSidebarOption
label={ __( 'Pre-publish checks' ) }
/>
<EnableFeature
feature="showInserterHelpPanel"
label={ __( 'Inserter help panel' ) }
/>
</Section>
<Section title={ __( 'Document panels' ) }>
<EnablePluginDocumentSettingPanelOption.Slot />
Expand Down
Loading