diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000000000..ec3706e802dfbb Binary files /dev/null and b/.DS_Store differ diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js index 78105fbc486b30..6b08226990a4a7 100644 --- a/blocks/library/heading/index.js +++ b/blocks/library/heading/index.js @@ -8,6 +8,7 @@ import { isString, isObject } from 'lodash'; */ import { __, sprintf } from 'i18n'; import { concatChildren } from 'element'; +import { Toolbar } from 'components'; /** * Internal dependencies @@ -16,6 +17,8 @@ import './style.scss'; import { registerBlockType, createBlock, query } from '../../api'; import Editable from '../../editable'; import BlockControls from '../../block-controls'; +import InspectorControls from '../../inspector-controls'; +import AlignmentToolbar from '../../alignment-toolbar'; const { children, prop } = query; @@ -86,14 +89,14 @@ registerBlockType( 'core/heading', { }, edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, insertBlockAfter } ) { - const { content, nodeName = 'H2' } = attributes; + const { align, content, nodeName = 'H2' } = attributes; return [ focus && ( ( { + '234'.split( '' ).map( ( level ) => ( { icon: 'heading', title: sprintf( __( 'Heading %s' ), level ), isActive: 'H' + level === nodeName, @@ -103,6 +106,29 @@ registerBlockType( 'core/heading', { } /> ), + focus && ( + +

{ __( 'Heading Size' ) }

+ ( { + icon: 'heading', + title: sprintf( __( 'Heading %s' ), level ), + isActive: 'H' + level === nodeName, + onClick: () => setAttributes( { nodeName: 'H' + level } ), + subscript: level, + } ) ) + } + /> +

{ __( 'Text Alignment' ) }

+ { + setAttributes( { align: nextAlign } ); + } } + /> +
+ ), , ]; }, save( { attributes } ) { - const { nodeName = 'H2', content } = attributes; + const { align, nodeName = 'H2', content } = attributes; const Tag = nodeName.toLowerCase(); return ( - + { content } ); diff --git a/components/panel/style.scss b/components/panel/style.scss index e4caad680e8885..3f74b2465fc6d9 100644 --- a/components/panel/style.scss +++ b/components/panel/style.scss @@ -18,7 +18,7 @@ } .components-panel__body { - padding: 15px; + padding: $panel-padding; border-top: 1px solid $light-gray-500; border-bottom: 1px solid $light-gray-500; } @@ -28,7 +28,7 @@ justify-content: space-between; align-items: center; background: $light-gray-300; - padding: 0 15px; + padding: 0 $panel-padding; height: 50px; border-top: 1px solid $light-gray-500; border-bottom: 1px solid $light-gray-500; diff --git a/components/toolbar/style.scss b/components/toolbar/style.scss index 19edc07363a1cf..1dfed29ee34652 100644 --- a/components/toolbar/style.scss +++ b/components/toolbar/style.scss @@ -3,10 +3,10 @@ border: 1px solid $light-gray-500; box-shadow: $shadow-popover; background-color: $white; + display: inline-flex; } -.editor-visual-editor__block-controls ul.components-toolbar, -.block-editable__inline-toolbar ul.components-toolbar { +ul.components-toolbar { list-style-type: none; &> li { diff --git a/docs/.DS_Store b/docs/.DS_Store new file mode 100644 index 00000000000000..22ca23d020bdac Binary files /dev/null and b/docs/.DS_Store differ diff --git a/docs/tinymce-single-react-ui/.DS_Store b/docs/tinymce-single-react-ui/.DS_Store new file mode 100644 index 00000000000000..a5fe3cfe2e1b58 Binary files /dev/null and b/docs/tinymce-single-react-ui/.DS_Store differ diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss index 36a19dcd6d6609..74ea5ddad0291f 100644 --- a/editor/assets/stylesheets/_variables.scss +++ b/editor/assets/stylesheets/_variables.scss @@ -46,6 +46,7 @@ $text-editor-font-size: 14px; $editor-line-height: 1.8; $big-font-size: 18px; $item-spacing: 10px; +$panel-padding: 16px; $header-height: 56px; $sidebar-width: 280px; $admin-bar-height: 32px; diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 52287184921032..f8411f8cce6b3f 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -238,7 +238,6 @@ $sticky-bottom-offset: 20px; } .editor-visual-editor__block-controls .components-toolbar { - display: inline-flex; margin-right: -1px; @include break-small() { diff --git a/editor/sidebar/post-taxonomies/style.scss b/editor/sidebar/post-taxonomies/style.scss index cbba6079e943a5..35f42e348c381c 100644 --- a/editor/sidebar/post-taxonomies/style.scss +++ b/editor/sidebar/post-taxonomies/style.scss @@ -1,6 +1,6 @@ .editor-post-taxonomies__tags-selector, .editor-post-taxonomies__categories-selector { - margin-top: 15px; + margin-top: $panel-padding; } .editor-post-taxonomies__tags-selector-title, @@ -19,5 +19,5 @@ .editor-post-taxonomies__categories-subchoices { margin-top: 5px; - margin-left: 15px; + margin-left: $panel-padding; } diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss index 8b4b5ae77f4eb9..1192096574c720 100644 --- a/editor/sidebar/style.scss +++ b/editor/sidebar/style.scss @@ -28,6 +28,17 @@ margin-bottom: -1px; } } + + h3 { + font-size: $default-font-size; + margin-top: 0; + margin-bottom: .5em; + } + + ul.components-toolbar { + box-shadow: none; + margin-bottom: $panel-padding; + } } /* Visual and Text editor both */