diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 404e8b25c87aef..099d53817829b8 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -75,7 +75,7 @@ $block-toolbar-height: $grid-unit-60; $mobile-block-toolbar-height: 44px; $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size. $block-spacing: 4px; // Vertical space between blocks. -$block-side-ui-width: 28px; // Width of the movers/drag handle UI. +$block-side-ui-width: $button-size; // Width of the movers/drag handle UI. $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block. $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint. $block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group) diff --git a/packages/block-editor/src/components/block-list/root-container.js b/packages/block-editor/src/components/block-list/root-container.js index 1ca09351851667..72783ad80c5f61 100644 --- a/packages/block-editor/src/components/block-list/root-container.js +++ b/packages/block-editor/src/components/block-list/root-container.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -85,7 +90,7 @@ function RootContainer( { children, className, hasPopover = true }, ref ) { { hasPopover ? : null }
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 1157c381e643bb..b2c7f75b853438 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -21,33 +21,6 @@ margin: 0; } -/** - * General Post Content Layout - */ - -// Add side padding for the main block container, currently post_content. -// The purpose of this padding is to ensure that on small viewports, there is -// room for the block border that sits 14px ($block-padding) offset from the -// block footprint, as well as the side-UI. -.block-editor-block-list__layout { - padding-left: $block-padding; - padding-right: $block-padding; - position: relative; - - // Beyond the mobile breakpoint, compensate for side UI. - @include break-small() { - padding-left: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2; - padding-right: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2; - } - - // Don't propogate that padding to nested blocks. - .block-editor-block-list__layout { - padding-left: 0; - padding-right: 0; - } -} - - /** * Notices & Block Selected/Hover Styles. */ @@ -145,6 +118,7 @@ */ .block-editor-block-list__layout { + position: relative; // The primary indicator of selection in text is the native selection marker. // When selecting multiple blocks, we provide an additional selection indicator. @@ -316,18 +290,6 @@ clear: both; } - // Full-wide. - &[data-align="full"], - &.alignfull { - margin-left: -$block-padding; - margin-right: -$block-padding; - - @include break-small() { - margin-left: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width; - margin-right: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width; - } - } - // Clear floats. &[data-clear="true"] { float: none; @@ -669,3 +631,32 @@ .is-dragging-components-draggable .components-tooltip { display: none; } + + +// Add side padding for the canvas, currently edit-post-visual-editor. +// The purpose of this padding is to ensure that on small viewports, there is +// room for the block border that sits 14px ($block-padding) offset from the +// block footprint. +.block-editor-block-list__layout.is-root-container { + padding-left: $block-padding; + padding-right: $block-padding; + + @include break-small() { + padding-left: $block-side-ui-width; + padding-right: $block-side-ui-width; + } +} + +.block-editor-block-list__layout.is-root-container { + // Full-wide. (to account for the padddings added above) + > .block-editor-block-list__block[data-align="full"], + > .block-editor-block-list__block.alignfull { + margin-left: -$block-padding; + margin-right: -$block-padding; + + @include break-small() { + margin-left: -$block-side-ui-width; + margin-right: -$block-side-ui-width; + } + } +} diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index 9bbb44b8ee96ad..368c843a72f465 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/edit-post/src/components/text-editor/style.scss @@ -5,7 +5,7 @@ flex-grow: 1; // Always show outlines in code editor - .editor-post-title__block { + .editor-post-title { textarea { border: $border-width solid $light-gray-500; margin-bottom: $block-spacing; @@ -16,20 +16,8 @@ border: $border-width solid $black; } } - } - - .editor-post-permalink { - margin-top: -6px; - // Hide the thick left border in the code editor. - box-shadow: none; - border: none; - outline: $border-width solid $dark-gray-primary; - } - - @include break-small() { - .editor-post-title, - .editor-post-title__block { + @include break-small() { padding: 0; } } diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index b34d8a1375b66c..9929a6699674f3 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -39,7 +39,9 @@ function VisualEditor() { - +
+ +
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index b29292d18308af..acdf055d22faa1 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -42,40 +42,27 @@ margin-right: auto; } +// Ideally this wrapper div is not needed but if we waant to match the positionning of blocks +// .block-editor-block-list__layout and block-editor-block-list__block +// We need to have two DOM elements. +.edit-post-visual-editor__post-title-wrapper { + // This padding is needed to match the block root container padding + padding-left: $block-padding; + padding-right: $block-padding; -// The base width of the title should match that of blocks even if it isn't a block. -// @todo: This duplicates CSS from line 49 in block-list/style.scss, and should be -// removed when the Title field becomes an actual block. -.editor-post-title { - // Beyond the mobile breakpoint, compensate for side UI. @include break-small() { - padding-left: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2; - padding-right: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2; + padding-left: $block-side-ui-width; + padding-right: $block-side-ui-width; } -} - -.edit-post-visual-editor .editor-post-title__block { - // Center. - margin-left: auto; - margin-right: auto; - // Apply default block margin below the post title. - // This ensures the first block on the page is in a good position. - // This rule can be retired once the title becomes an actual block. - margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style. + .editor-post-title { + // Center. + margin-left: auto; + margin-right: auto; - // Stack borders. - > div { - margin-left: 0; - margin-right: 0; - } - - // Stretch to mimic outline padding on desktop. - // Note that we can't target the textarea as it can't be stretched. - @include break-small() { - > div { - margin-left: -$block-padding - $block-side-ui-clearance; - margin-right: -$block-padding - $block-side-ui-clearance; - } + // Apply default block margin below the post title. + // This ensures the first block on the page is in a good position. + // This rule can be retired once the title becomes an actual block. + margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style. } } diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index c0e285bc77546d..a1872f964f952d 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -1,4 +1,14 @@ .edit-site-block-editor__block-list { padding-bottom: $grid-unit-30; padding-top: $grid-unit-30 + 5; + + padding-left: $block-padding; + padding-right: $block-padding; + + // Full-wide. (to account for the padddings added above) + .block-editor-block-list__block[data-align="full"], + .block-editor-block-list__block.alignfull { + margin-left: -$block-padding; + margin-right: -$block-padding; + } } diff --git a/packages/edit-widgets/src/components/widget-area/style.scss b/packages/edit-widgets/src/components/widget-area/style.scss index 2f1160bd17c77b..248f5d4e4ff856 100644 --- a/packages/edit-widgets/src/components/widget-area/style.scss +++ b/packages/edit-widgets/src/components/widget-area/style.scss @@ -2,11 +2,6 @@ max-width: $widget-area-width; margin: 0 auto 30px; - // Reduce padding inside widget areas - .block-editor-block-list__layout { - padding-left: $block-side-ui-width + $block-padding; - padding-right: $block-side-ui-width + $block-padding; - } // By default the default block appender inserter has a negative position, // but given that on the widget screen we have 0 padding we need to remove the negative position. .block-editor-default-block-appender .block-editor-inserter, diff --git a/packages/editor/src/components/post-permalink/editor.js b/packages/editor/src/components/post-permalink/editor.js deleted file mode 100644 index a09ee66ed984a8..00000000000000 --- a/packages/editor/src/components/post-permalink/editor.js +++ /dev/null @@ -1,102 +0,0 @@ -/** - * WordPress dependencies - */ -import { withDispatch, withSelect } from '@wordpress/data'; -import { Component } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; -import { compose } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import { cleanForSlug } from '../../utils/url'; - -class PostPermalinkEditor extends Component { - constructor( { permalinkParts, slug } ) { - super( ...arguments ); - - this.state = { - editedPostName: slug || permalinkParts.postName, - }; - - this.onSavePermalink = this.onSavePermalink.bind( this ); - } - - onSavePermalink( event ) { - const postName = cleanForSlug( this.state.editedPostName ); - - event.preventDefault(); - - this.props.onSave(); - - if ( postName === this.props.postName ) { - return; - } - - this.props.editPost( { - slug: postName, - } ); - - this.setState( { - editedPostName: postName, - } ); - } - - render() { - const { prefix, suffix } = this.props.permalinkParts; - const { editedPostName } = this.state; - - /* eslint-disable jsx-a11y/no-autofocus */ - // Autofocus is allowed here, as this mini-UI is only loaded when the user clicks to open it. - return ( -
- - - { prefix } - - - this.setState( { - editedPostName: event.target.value, - } ) - } - type="text" - autoFocus - /> - - { suffix } - - ‎ - - -
- ); - /* eslint-enable jsx-a11y/no-autofocus */ - } -} - -export default compose( [ - withSelect( ( select ) => { - const { getPermalinkParts } = select( 'core/editor' ); - return { - permalinkParts: getPermalinkParts(), - }; - } ), - withDispatch( ( dispatch ) => { - const { editPost } = dispatch( 'core/editor' ); - return { editPost }; - } ), -] )( PostPermalinkEditor ); diff --git a/packages/editor/src/components/post-permalink/index.js b/packages/editor/src/components/post-permalink/index.js deleted file mode 100644 index 1facb8432f41a6..00000000000000 --- a/packages/editor/src/components/post-permalink/index.js +++ /dev/null @@ -1,176 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; -import { get } from 'lodash'; - -/** - * WordPress dependencies - */ -import { withDispatch, withSelect } from '@wordpress/data'; -import { Component } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { compose } from '@wordpress/compose'; -import { ClipboardButton, Button, ExternalLink } from '@wordpress/components'; -import { safeDecodeURI, safeDecodeURIComponent } from '@wordpress/url'; -import { link as linkIcon } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import PostPermalinkEditor from './editor.js'; - -class PostPermalink extends Component { - constructor() { - super( ...arguments ); - - this.addVisibilityCheck = this.addVisibilityCheck.bind( this ); - this.onVisibilityChange = this.onVisibilityChange.bind( this ); - - this.state = { - isCopied: false, - isEditingPermalink: false, - }; - } - - addVisibilityCheck() { - window.addEventListener( 'visibilitychange', this.onVisibilityChange ); - } - - onVisibilityChange() { - const { isEditable, refreshPost } = this.props; - // If the user just returned after having clicked the "Change Permalinks" button, - // fetch a new copy of the post from the server, just in case they enabled permalinks. - if ( ! isEditable && 'visible' === document.visibilityState ) { - refreshPost(); - } - } - - componentDidUpdate( prevProps, prevState ) { - // If we've just stopped editing the permalink, focus on the new permalink. - if ( prevState.isEditingPermalink && ! this.state.isEditingPermalink ) { - this.linkElement.focus(); - } - } - - componentWillUnmount() { - window.removeEventListener( - 'visibilitychange', - this.addVisibilityCheck - ); - } - - render() { - const { - isEditable, - isNew, - isPublished, - isViewable, - permalinkParts, - postLink, - postSlug, - } = this.props; - - if ( isNew || ! isViewable || ! permalinkParts || ! postLink ) { - return null; - } - - const { isCopied, isEditingPermalink } = this.state; - const ariaLabel = isCopied - ? __( 'Permalink copied' ) - : __( 'Copy the permalink' ); - - const { prefix, suffix } = permalinkParts; - const samplePermalink = isEditable - ? prefix + postSlug + suffix - : prefix; - - return ( -
- this.setState( { isCopied: true } ) } - aria-disabled={ isCopied } - icon={ linkIcon } - /> - - - { __( 'Permalink:' ) } - - - { ! isEditingPermalink && ( - - ( this.linkElement = linkElement ) - } - > - { safeDecodeURI( samplePermalink ) } - ‎ - - ) } - - { isEditingPermalink && ( - - this.setState( { isEditingPermalink: false } ) - } - /> - ) } - - { isEditable && ! isEditingPermalink && ( - - ) } -
- ); - } -} - -export default compose( [ - withSelect( ( select ) => { - const { - isEditedPostNew, - isPermalinkEditable, - getCurrentPost, - getPermalinkParts, - getEditedPostAttribute, - isCurrentPostPublished, - getEditedPostSlug, - } = select( 'core/editor' ); - const { getPostType } = select( 'core' ); - - const { link } = getCurrentPost(); - - const postTypeName = getEditedPostAttribute( 'type' ); - const postType = getPostType( postTypeName ); - - return { - isNew: isEditedPostNew(), - postLink: link, - permalinkParts: getPermalinkParts(), - postSlug: safeDecodeURIComponent( getEditedPostSlug() ), - isEditable: isPermalinkEditable(), - isPublished: isCurrentPostPublished(), - isViewable: get( postType, [ 'viewable' ], false ), - }; - } ), - withDispatch( ( dispatch ) => { - const { refreshPost } = dispatch( 'core/editor' ); - return { refreshPost }; - } ), -] )( PostPermalink ); diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss deleted file mode 100644 index 241250696123cf..00000000000000 --- a/packages/editor/src/components/post-permalink/style.scss +++ /dev/null @@ -1,140 +0,0 @@ -.editor-post-permalink { - display: inline-flex; - align-items: center; - flex-wrap: wrap; - padding: $grid-unit-10 $grid-unit-10 0; - font-family: $default-font; - font-size: $default-font-size; - white-space: nowrap; - background-clip: padding-box; - - // Block UI appearance. - border: $border-width solid $dark-gray-primary; - border-radius: $radius-block-ui; - background-color: $white; - - // Put toolbar snugly to edge on mobile. - margin-left: -$block-padding - $border-width; // This hides the border off the edge of the screen. - margin-right: -$block-padding - $border-width; - @include break-mobile() { - padding: $grid-unit-05; - } - @include break-small() { - margin-left: -$border-width; - margin-right: -$border-width; - } - - // Increase specificity to override margins set on label element. - &.editor-post-permalink > * { - margin-bottom: $grid-unit-10; - - @include break-mobile() { - margin-bottom: 0; - } - } - - // Prevent button shrinking in IE11 when other items have a 100% flex basis. - // This should be safe to apply in all browsers because we don't want these - // buttons to shrink anyway. - button { - flex-shrink: 0; - } -} - -.editor-post-permalink__copy { - border-radius: 4px; - padding: 6px; -} - -.editor-post-permalink__copy.is-copied { - opacity: 0.3; -} - -.editor-post-permalink__label { - margin: 0 10px 0 5px; - font-weight: 600; -} - -.editor-post-permalink__link { - color: $dark-gray-200; - text-decoration: underline; - margin-right: 10px; - flex-grow: 1; - overflow: hidden; - position: relative; - white-space: nowrap; - text-align: left; -} - -.editor-post-permalink-editor { - width: 100%; - min-width: 20%; - display: inline-flex; - align-items: center; - - .editor-post-permalink__editor-container { - flex: 0 1 100%; - display: flex; - overflow: hidden; // This enables serious flex shrinking. - padding: $border-width 0; // Necessary for the overflow to not crop the focus style. - - .editor-post-permalink-editor__prefix { - flex: 1 1 auto; - - @include break-small { - flex: 1 0 auto; - } - } - - .editor-post-permalink-editor__edit { - flex: 1 1 100%; - } - } - - // Higher specificity required to override core margin styles. - .editor-post-permalink-editor__save { - margin-left: auto; - } -} - -.editor-post-permalink-editor__prefix { - color: $dark-gray-300; - min-width: 20%; - overflow: hidden; - position: relative; - white-space: nowrap; - text-overflow: ellipsis; -} - -.editor-post-permalink input[type="text"].editor-post-permalink-editor__edit { - // Input fields are created with inherent widths. - // By supplying both a (any) width and a min-width, we allow it to scale in a flex container. - min-width: 10%; - width: 100%; - margin: 0 3px; - padding: 2px 4px; -} - -.editor-post-permalink-editor__suffix { - color: $dark-gray-300; - margin-right: 6px; - flex: 0 0 0%; -} - -.editor-post-permalink-editor__prefix { - text-align: left; -} - -/* rtl:begin:ignore */ -.editor-post-permalink__link { - text-align: left; -} -.editor-post-permalink__editor-container, -.editor-post-permalink__link { - direction: ltr; -} -.editor-post-permalink__link::after { - @include long-content-fade($direction:right, $size: 20%, $edge: 0); -} -/* rtl:end:ignore */ - diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index 3a5f17a8f68536..306e9e7c99113d 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -3,7 +3,6 @@ */ import Textarea from 'react-autosize-textarea'; import classnames from 'classnames'; -import { get } from 'lodash'; /** * WordPress dependencies @@ -13,13 +12,12 @@ import { Component } from '@wordpress/element'; import { decodeEntities } from '@wordpress/html-entities'; import { ENTER } from '@wordpress/keycodes'; import { withSelect, withDispatch } from '@wordpress/data'; -import { withFocusOutside, VisuallyHidden } from '@wordpress/components'; +import { VisuallyHidden } from '@wordpress/components'; import { withInstanceId, compose } from '@wordpress/compose'; /** * Internal dependencies */ -import PostPermalink from '../post-permalink'; import PostTypeSupportCheck from '../post-type-support-check'; /** @@ -41,10 +39,6 @@ class PostTitle extends Component { }; } - handleFocusOutside() { - this.onUnselect(); - } - onSelect() { this.setState( { isSelected: true } ); this.props.clearSelectedBlock(); @@ -71,7 +65,6 @@ class PostTitle extends Component { hasFixedToolbar, isCleanNewPost, isFocusMode, - isPostTypeViewable, instanceId, placeholder, title, @@ -79,53 +72,48 @@ class PostTitle extends Component { const { isSelected } = this.state; // The wp-block className is important for editor styles. - const className = classnames( 'wp-block editor-post-title__block', { - 'is-selected': isSelected, - 'is-focus-mode': isFocusMode, - 'has-fixed-toolbar': hasFixedToolbar, - } ); + const className = classnames( + 'wp-block editor-post-title editor-post-title__block', + { + 'is-selected': isSelected, + 'is-focus-mode': isFocusMode, + 'has-fixed-toolbar': hasFixedToolbar, + } + ); const decodedPlaceholder = decodeEntities( placeholder ); return ( -
-
-
- - { decodedPlaceholder || __( 'Add title' ) } - -