Skip to content

Commit

Permalink
Add functionality on inner blocks to not include parts of the UI.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed Oct 29, 2019
1 parent bc8a136 commit f931bff
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 36 deletions.
21 changes: 15 additions & 6 deletions packages/block-editor/src/components/block-list/block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,13 @@ function BlockListBlock( {
enableAnimation,
isNavigationMode,
enableNavigationMode,
hasSelectedUI = true,
hasHoveredUI = true,
hasFocusedUI = true,
hasBreadcrumbs = true,
hasMovers = true,
hasSpacing = true,
hasSideInserter = true,
} ) {
// Random state used to rerender the component if needed, ideally we don't need this
const [ , updateRerenderState ] = useState( {} );
Expand Down Expand Up @@ -403,7 +410,7 @@ function BlockListBlock( {
isSelected &&
! showEmptyBlockSideInserter &&
! isPartOfMultiSelection &&
! isTypingWithinBlock;
! isTypingWithinBlock && hasMovers;
const shouldShowBreadcrumb =
( isSelected && isNavigationMode ) ||
( ! isNavigationMode && ! isFocusMode && isHovered && ! isEmptyDefaultBlock );
Expand All @@ -428,17 +435,19 @@ function BlockListBlock( {
const wrapperClassName = classnames(
'wp-block editor-block-list__block block-editor-block-list__block',
{
'has-selected-ui': hasSelectedUI,
'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
'is-selected': shouldAppearSelected,
'is-selected': shouldAppearSelected && hasSelectedUI,
'is-navigate-mode': isNavigationMode,
'is-multi-selected': isPartOfMultiSelection,
'is-hovered': shouldAppearHovered,
'is-hovered': shouldAppearHovered && hasHoveredUI,
'is-reusable': isReusableBlock( blockType ),
'is-dragging': isDragging,
'is-typing': isTypingWithinBlock,
'is-focused': isFocusMode && ( isSelected || isParentOfSelectedBlock ),
'is-focused': isFocusMode && ( isSelected || isParentOfSelectedBlock ) && hasFocusedUI,
'is-focus-mode': isFocusMode,
'has-child-selected': isParentOfSelectedBlock,
'has-spacing': hasSpacing,
},
className
);
Expand Down Expand Up @@ -538,7 +547,7 @@ function BlockListBlock( {
) }
>
{ shouldRenderMovers && ( moverDirection === 'vertical' ) && blockMover }
{ shouldShowBreadcrumb && (
{ hasBreadcrumbs && shouldShowBreadcrumb && (
<BlockBreadcrumb
clientId={ clientId }
ref={ breadcrumb }
Expand Down Expand Up @@ -603,7 +612,7 @@ function BlockListBlock( {
/>
</div>
) }
{ showEmptyBlockSideInserter && (
{ showEmptyBlockSideInserter && hasSideInserter && (
<div className="editor-block-list__empty-block-inserter block-editor-block-list__empty-block-inserter">
<Inserter
position="top right"
Expand Down
23 changes: 22 additions & 1 deletion packages/block-editor/src/components/block-list/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,13 +202,27 @@ class BlockList extends Component {
hasMultiSelection,
renderAppender,
enableAnimation,
__experimentalUIParts = {},
} = this.props;

const uiParts = {
hasBreadcrumbs: true,
hasMovers: true,
hasSpacing: true,
hasSelectedUI: true,
hasFocusedUI: true,
hasHoveredUI: true,
hasSideInserter: true,
...__experimentalUIParts,
};
return (
<div className={
classnames(
'editor-block-list__layout block-editor-block-list__layout',
className
className,
{
'has-spacing': uiParts.hasSpacing,
}
)
}>
{ blockClientIds.map( ( clientId, index ) => {
Expand All @@ -235,6 +249,13 @@ class BlockList extends Component {
// otherwise there might be a small delay to trigger the animation.
animateOnChange={ index }
enableAnimation={ enableAnimation }
hasSelectedUI={ uiParts.hasSelectedUI }
hasHoveredUI={ uiParts.hasHoveredUI }
hasFocusedUI={ uiParts.hasFocusedUI }
hasBreadcrumbs={ uiParts.hasBreadcrumbs }
hasMovers={ uiParts.hasMovers }
hasSpacing={ uiParts.hasSpacing }
hasSideInserter={ uiParts.hasSideInserter }
/>
</BlockAsyncModeProvider>
);
Expand Down
41 changes: 22 additions & 19 deletions packages/block-editor/src/components/block-list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,26 +51,29 @@
// Compensate for side UI.
padding-left: 0;
padding-right: 0;

// Compensate for block padding.
margin-left: -$block-padding;
margin-right: -$block-padding;
}
}

.block-editor-block-list__layout .block-editor-block-list__block {
position: relative;
.block-editor-block-list__block .block-editor-block-list__layout.has-spacing {
// Compensate for block padding.
margin-left: -$block-padding;
margin-right: -$block-padding;
}

.block-editor-block-list__layout .block-editor-block-list__block.has-spacing {
padding-left: $block-padding;
padding-right: $block-padding;

// Break long strings of text without spaces so they don't overflow the block.
overflow-wrap: break-word;

@include break-small() {
// The block mover needs to stay inside the block to allow clicks when hovering the block-.
padding-left: $block-padding + $block-side-ui-width + $block-side-ui-clearance - $border-width;
padding-right: $block-padding + $block-side-ui-width + $block-side-ui-clearance - $border-width;
}
}

.block-editor-block-list__layout .block-editor-block-list__block {
position: relative;
// Break long strings of text without spaces so they don't overflow the block.
overflow-wrap: break-word;

/**
* Notices
Expand Down Expand Up @@ -192,9 +195,9 @@
}
}

> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).has-selected-ui > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).has-selected-ui > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).has-selected-ui > .block-editor-block-list__block-edit::before {
border: $border-width dashed $dark-opacity-light-600;

.is-dark-theme & {
Expand All @@ -203,9 +206,9 @@
}

&.is-hovered > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before {
> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected).has-selected-ui > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected).has-selected-ui > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected).has-selected-ui > .block-editor-block-list__block-edit::before {
border-style: solid;
border-color: $dark-opacity-light-500;
border-left-color: transparent;
Expand All @@ -220,9 +223,9 @@
// Add extra border to child blocks when they are selected.
&.is-selected {

> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected),
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected),
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) {
> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).has-selected-ui,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).has-selected-ui,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).has-selected-ui {

> .block-editor-block-list__block-edit::before {
border: $border-width dashed $dark-opacity-light-600;
Expand Down
6 changes: 2 additions & 4 deletions packages/block-editor/src/components/inner-blocks/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,11 @@ class InnerBlocks extends Component {
isSmallScreen, // Temporary click-through disable on desktop.
clientId,
hasOverlay,
renderAppender,
template,
__experimentalMoverDirection: moverDirection,
__experimentalTemplateOptions: templateOptions,
__experimentalOnSelectTemplateOption: onSelectTemplateOption,
__experimentalAllowTemplateOptionSkip: allowTemplateOptionSkip,
...props
} = this.props;
const { templateInProcess } = this.state;

Expand All @@ -131,8 +130,7 @@ class InnerBlocks extends Component {
/> :
<BlockList
rootClientId={ clientId }
renderAppender={ renderAppender }
__experimentalMoverDirection={ moverDirection }
{ ...props }
/>
) }
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@

// Provide every block with a default base margin. This margin provides a consistent spacing
// between blocks in the editor.
.editor-styles-wrapper [data-block] {
.editor-styles-wrapper .block-editor-block-list__block.has-spacing > .block-editor-block-list__block-edit > [data-block] {
margin-top: $default-block-margin;
margin-bottom: $default-block-margin;
}
14 changes: 9 additions & 5 deletions packages/edit-post/src/components/visual-editor/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,20 @@
}

// The base width of blocks
.edit-post-visual-editor .block-editor-block-list__block {
margin-left: auto;
margin-right: auto;

.edit-post-visual-editor .block-editor-block-list__block.has-spacing {
@include break-small() {
// Compensate for side UI width.
.block-editor-block-list__block-edit {
> .block-editor-block-list__block-edit {
margin-left: -$block-side-ui-width;
margin-right: -$block-side-ui-width;
}
}
}
.edit-post-visual-editor .block-editor-block-list__block {
margin-left: auto;
margin-right: auto;

@include break-small() {

// Center the block toolbar on wide and full-wide blocks.
// Use specific selector to not affect nested block toolbars.
Expand Down

0 comments on commit f931bff

Please sign in to comment.