From f931bff64c7bdfcdf4e25ee85e1759c79ff91a21 Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 29 Oct 2019 20:40:26 +0000 Subject: [PATCH] Add functionality on inner blocks to not include parts of the UI. --- .../src/components/block-list/block.js | 21 +++++++--- .../src/components/block-list/index.js | 23 ++++++++++- .../src/components/block-list/style.scss | 41 ++++++++++--------- .../src/components/inner-blocks/index.js | 6 +-- packages/block-library/src/editor.scss | 2 +- .../src/components/visual-editor/style.scss | 14 ++++--- 6 files changed, 71 insertions(+), 36 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 48b5506e452f2..7da0d28dceb3d 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -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( {} ); @@ -403,7 +410,7 @@ function BlockListBlock( { isSelected && ! showEmptyBlockSideInserter && ! isPartOfMultiSelection && - ! isTypingWithinBlock; + ! isTypingWithinBlock && hasMovers; const shouldShowBreadcrumb = ( isSelected && isNavigationMode ) || ( ! isNavigationMode && ! isFocusMode && isHovered && ! isEmptyDefaultBlock ); @@ -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 ); @@ -538,7 +547,7 @@ function BlockListBlock( { ) } > { shouldRenderMovers && ( moverDirection === 'vertical' ) && blockMover } - { shouldShowBreadcrumb && ( + { hasBreadcrumbs && shouldShowBreadcrumb && ( ) } - { showEmptyBlockSideInserter && ( + { showEmptyBlockSideInserter && hasSideInserter && (
{ blockClientIds.map( ( clientId, index ) => { @@ -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 } /> ); diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index e06667a0f914e..353eca78b338e 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -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 @@ -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 & { @@ -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; @@ -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; diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index ed147bfe736ad..1d73383bf67bf 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -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; @@ -131,8 +130,7 @@ class InnerBlocks extends Component { /> : ) }
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 59569f4105ba2..7e0224fc67888 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -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; } diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index cfa17d6d3e517..fe90d180dbef1 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -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.