From 589a634f6c5a0e0569d500fd387415f2ba6abfa2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Thu, 14 Mar 2019 13:10:32 +0100 Subject: [PATCH 001/146] Align Spinner circles in RTL locales (#14418) --- packages/components/src/spinner/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/spinner/style.scss b/packages/components/src/spinner/style.scss index 286b8204edd7d..da5bc3c15c168 100644 --- a/packages/components/src/spinner/style.scss +++ b/packages/components/src/spinner/style.scss @@ -10,6 +10,7 @@ position: relative; &::before { + /* rtl:begin:ignore */ content: ""; position: absolute; background-color: $white; @@ -20,6 +21,7 @@ border-radius: 100%; transform-origin: 6px 6px; animation: components-spinner__animation 1s infinite linear; + /* rtl:end:ignore */ } } From dc03691681a060bdd1529114a5b18306ab7f49a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Thu, 14 Mar 2019 17:39:59 +0100 Subject: [PATCH 002/146] Improve handling of transpiled packages in unit tests (#14432) --- package.json | 2 +- .../test/index.js | 2 +- .../components/src/disabled/test/index.js | 2 +- test/unit/jest.config.js | 30 +++++++++++++++++++ test/unit/jest.config.json | 22 -------------- 5 files changed, 33 insertions(+), 25 deletions(-) create mode 100644 test/unit/jest.config.js delete mode 100644 test/unit/jest.config.json diff --git a/package.json b/package.json index 6e071182be1a5..f9ada126e5e1b 100644 --- a/package.json +++ b/package.json @@ -186,7 +186,7 @@ "test-e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js", "test-e2e:watch": "npm run test-e2e -- --watch", "test-php": "npm run lint-php && npm run test-unit-php", - "test-unit": "wp-scripts test-unit-js --config test/unit/jest.config.json", + "test-unit": "wp-scripts test-unit-js --config test/unit/jest.config.js", "test-unit:update": "npm run test-unit -- --updateSnapshot", "test-unit:watch": "npm run test-unit -- --watch", "test-unit-php": "docker-compose run --rm wordpress_phpunit phpunit", diff --git a/packages/block-serialization-default-parser/test/index.js b/packages/block-serialization-default-parser/test/index.js index 72f4121ce1944..068db2ef14c72 100644 --- a/packages/block-serialization-default-parser/test/index.js +++ b/packages/block-serialization-default-parser/test/index.js @@ -12,7 +12,7 @@ import { jsTester, phpTester } from '@wordpress/block-serialization-spec-parser/ /** * Internal dependencies */ -import { parse } from '../'; +import { parse } from '../src'; describe( 'block-serialization-default-parser-js', jsTester( parse ) ); diff --git a/packages/components/src/disabled/test/index.js b/packages/components/src/disabled/test/index.js index 36fdf3a85524d..bd7c556163e4e 100644 --- a/packages/components/src/disabled/test/index.js +++ b/packages/components/src/disabled/test/index.js @@ -14,7 +14,7 @@ import { Component } from '@wordpress/element'; import Disabled from '../'; jest.mock( '@wordpress/dom', () => { - const focus = require.requireActual( '@wordpress/dom' ).focus; + const focus = require.requireActual( '../../../../dom/src' ).focus; return { focus: { diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js new file mode 100644 index 0000000000000..6c5db3c8db011 --- /dev/null +++ b/test/unit/jest.config.js @@ -0,0 +1,30 @@ +/** + * External dependencies + */ +const glob = require( 'glob' ).sync; + +// Finds all packages which are transpiled with Babel to force Jest to use their source code. +const transpiledPackageNames = glob( 'packages/*/src/index.js' ) + .map( ( fileName ) => fileName.split( '/' )[ 1 ] ); + +module.exports = { + rootDir: '../../', + moduleNameMapper: { + [ `@wordpress\\/(${ transpiledPackageNames.join( '|' ) })$` ]: 'packages/$1/src', + }, + preset: '@wordpress/jest-preset-default', + setupFiles: [ + 'core-js/fn/symbol/async-iterator', + '/test/unit/config/gutenberg-phase.js', + ], + testURL: 'http://localhost', + testPathIgnorePatterns: [ + '/node_modules/', + '/packages/e2e-tests', + '/.*/build/', + '/.*/build-module/', + ], + transformIgnorePatterns: [ + 'node_modules/(?!(simple-html-tokenizer)/)', + ], +}; diff --git a/test/unit/jest.config.json b/test/unit/jest.config.json deleted file mode 100644 index 3b7d0ca732a99..0000000000000 --- a/test/unit/jest.config.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "rootDir": "../../", - "moduleNameMapper": { - "@wordpress\\/(block-serialization-spec-parser|is-shallow-equal)$": "packages/$1", - "@wordpress\\/([a-z0-9-]+)$": "packages/$1/src" - }, - "preset": "@wordpress/jest-preset-default", - "setupFiles": [ - "core-js/fn/symbol/async-iterator", - "/test/unit/config/gutenberg-phase.js" - ], - "testURL": "http://localhost", - "testPathIgnorePatterns": [ - "/node_modules/", - "/packages/e2e-tests", - "/.*/build/", - "/.*/build-module/" - ], - "transformIgnorePatterns": [ - "node_modules/(?!(simple-html-tokenizer)/)" - ] -} From 244d7ceed9fb9d867175afdd965121e690f57856 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 Mar 2019 18:51:26 +0100 Subject: [PATCH 003/146] Scripts: use default babel if none is found in project (#14168) --- bin/packages/build.js | 4 +- bin/packages/get-babel-config.js | 96 +++++++++-------------- package.json | 2 +- packages/babel-preset-default/index.js | 74 ++++++++++++----- packages/scripts/config/webpack.config.js | 13 ++- packages/scripts/utils/config.js | 1 + 6 files changed, 104 insertions(+), 86 deletions(-) diff --git a/bin/packages/build.js b/bin/packages/build.js index 8a13f8f10b048..bb6954b4102e7 100755 --- a/bin/packages/build.js +++ b/bin/packages/build.js @@ -164,9 +164,7 @@ function buildScssFile( styleFile ) { function buildJsFileFor( file, silent, environment ) { const buildDir = BUILD_DIR[ environment ]; const destPath = getBuildPath( file, buildDir ); - const babelOptions = getBabelConfig( environment ); - babelOptions.sourceMaps = true; - babelOptions.sourceFileName = file.replace( PACKAGES_DIR, '@wordpress' ); + const babelOptions = getBabelConfig( environment, file.replace( PACKAGES_DIR, '@wordpress' ) ); mkdirp.sync( path.dirname( destPath ) ); const transformed = babel.transformFileSync( file, babelOptions ); diff --git a/bin/packages/get-babel-config.js b/bin/packages/get-babel-config.js index b2646da46955c..d76e171d46b21 100644 --- a/bin/packages/get-babel-config.js +++ b/bin/packages/get-babel-config.js @@ -1,64 +1,38 @@ -/** - * External dependencies - */ -const { get, map } = require( 'lodash' ); -const babel = require( '@babel/core' ); - -/** - * WordPress dependencies - */ -const { options: babelDefaultConfig } = babel.loadPartialConfig( { - configFile: '@wordpress/babel-preset-default', -} ); -const { plugins, presets } = babelDefaultConfig; - -const overrideOptions = ( target, targetName, options ) => { - if ( get( target, [ 'file', 'request' ] ) === targetName ) { - return [ targetName, Object.assign( - {}, - target.options, - options - ) ]; +module.exports = function( environment = '', file ) { + /* + * Specific options to be passed using the caller config option: + * https://babeljs.io/docs/en/options#caller + * + * The caller options can only be 'boolean', 'string', or 'number' by design: + * https://github.com/babel/babel/blob/bd0c62dc0c30cf16a4d4ef0ddf21d386f673815c/packages/babel-core/src/config/validation/option-assertions.js#L122 + */ + const callerOpts = { caller: { + name: `WP_BUILD_${ environment.toUpperCase() }`, + } }; + switch ( environment ) { + case 'main': + // to be merged as a presetEnv option + callerOpts.caller.modules = 'commonjs'; + break; + case 'module': + // to be merged as a presetEnv option + callerOpts.caller.modules = false; + // to be merged as a pluginTransformRuntime option + callerOpts.caller.useESModules = true; + break; + default: + // preventing measure, this shouldn't happen ever + delete callerOpts.caller; } - return target; -}; -const babelConfigs = { - main: Object.assign( - {}, - babelDefaultConfig, - { - plugins, - presets: map( - presets, - ( preset ) => overrideOptions( preset, '@babel/preset-env', { - modules: 'commonjs', - } ) - ), - } - ), - module: Object.assign( - {}, - babelDefaultConfig, - { - plugins: map( - plugins, - ( plugin ) => overrideOptions( plugin, '@babel/plugin-transform-runtime', { - useESModules: true, - } ) - ), - presets: map( - presets, - ( preset ) => overrideOptions( preset, '@babel/preset-env', { - modules: false, - } ) - ), - } - ), -}; - -function getBabelConfig( environment ) { - return babelConfigs[ environment ]; -} + // Sourcemaps options + const sourceMapsOpts = { + sourceMaps: true, + sourceFileName: file, + }; -module.exports = getBabelConfig; + return { + ...callerOpts, + ...sourceMapsOpts, + }; +}; diff --git a/package.json b/package.json index f9ada126e5e1b..71bf946b7694e 100644 --- a/package.json +++ b/package.json @@ -152,7 +152,7 @@ }, "scripts": { "prebuild": "npm run check-engines", - "clean:packages": "rimraf ./packages/*/build ./packages/*/build-module ./packages/*/build-style", + "clean:packages": "rimraf ./packages/*/build ./packages/*/build-module ./packages/*/build-style ./packages/*/node_modules", "prebuild:packages": "npm run clean:packages && lerna run build", "build:packages": "node ./bin/packages/build.js", "build": "npm run build:packages && wp-scripts build", diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js index 8a893ee9c5ea7..5c7f22d98439a 100644 --- a/packages/babel-preset-default/index.js +++ b/packages/babel-preset-default/index.js @@ -1,36 +1,72 @@ module.exports = function( api ) { + let wpBuildOpts = {}; + const isWPBuild = ( name ) => [ 'WP_BUILD_MAIN', 'WP_BUILD_MODULE' ].some( + ( buildName ) => name === buildName + ); + const isTestEnv = api.env() === 'test'; + api.caller( ( caller ) => { + if ( caller && isWPBuild( caller.name ) ) { + wpBuildOpts = { ...caller }; + return caller.name; + } + return undefined; + } ); + + const getPresetEnv = () => { + const opts = {}; + + if ( isTestEnv ) { + opts.useBuiltIns = 'usage'; + } else { + opts.modules = false; + opts.targets = { + browsers: require( '@wordpress/browserslist-config' ), + }; + } + + if ( isWPBuild( wpBuildOpts.name ) ) { + opts.modules = wpBuildOpts.modules; + } + + return [ require.resolve( '@babel/preset-env' ), opts ]; + }; + + const maybeGetPluginTransformRuntime = () => { + if ( isTestEnv ) { + return undefined; + } + + const opts = { + helpers: true, + useESModules: false, + }; + + if ( wpBuildOpts.name === 'WP_BUILD_MODULE' ) { + opts.useESModules = wpBuildOpts.useESModules; + } + + return [ require.resolve( '@babel/plugin-transform-runtime' ), opts ]; + }; + return { - presets: [ - ! isTestEnv && [ '@babel/preset-env', { - modules: false, - targets: { - browsers: [ 'extends @wordpress/browserslist-config' ], - }, - } ], - isTestEnv && [ '@babel/preset-env', { - useBuiltIns: 'usage', - } ], - ].filter( Boolean ), + presets: [ getPresetEnv() ], plugins: [ - '@babel/plugin-proposal-object-rest-spread', + require.resolve( '@babel/plugin-proposal-object-rest-spread' ), [ - '@wordpress/babel-plugin-import-jsx-pragma', + require.resolve( '@wordpress/babel-plugin-import-jsx-pragma' ), { scopeVariable: 'createElement', source: '@wordpress/element', isDefault: false, }, ], - [ '@babel/plugin-transform-react-jsx', { + [ require.resolve( '@babel/plugin-transform-react-jsx' ), { pragma: 'createElement', } ], - '@babel/plugin-proposal-async-generator-functions', - ! isTestEnv && [ '@babel/plugin-transform-runtime', { - helpers: true, - useESModules: false, - } ], + require.resolve( '@babel/plugin-proposal-async-generator-functions' ), + maybeGetPluginTransformRuntime(), ].filter( Boolean ), }; }; diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index 70fed30229ba4..9a1daabf5d752 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -8,7 +8,7 @@ const path = require( 'path' ); /** * Internal dependencies */ -const { camelCaseDash } = require( '../utils' ); +const { camelCaseDash, hasBabelConfig } = require( '../utils' ); /** * Converts @wordpress/* string request into request object. @@ -66,6 +66,12 @@ const externals = [ const isProduction = process.env.NODE_ENV === 'production'; const mode = isProduction ? 'production' : 'development'; +const getBabelLoaderOptions = () => hasBabelConfig() ? {} : { + babelrc: false, + configFile: false, + presets: [ require.resolve( '@wordpress/babel-preset-default' ) ], +}; + const config = { mode, entry: { @@ -91,7 +97,10 @@ const config = { { test: /\.js$/, exclude: /node_modules/, - use: require.resolve( 'babel-loader' ), + use: { + loader: require.resolve( 'babel-loader' ), + options: getBabelLoaderOptions(), + }, }, ], }, diff --git a/packages/scripts/utils/config.js b/packages/scripts/utils/config.js index 0c5ed70c293ce..3ae98725e5fbc 100644 --- a/packages/scripts/utils/config.js +++ b/packages/scripts/utils/config.js @@ -7,6 +7,7 @@ const { hasPackageProp } = require( './package' ); const hasBabelConfig = () => hasProjectFile( '.babelrc' ) || + hasProjectFile( '.babelrc.js' ) || hasProjectFile( 'babel.config.js' ) || hasPackageProp( 'babel' ); From 7964f381e07e06b2ac13698fd1465a4d0c16da1b Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 14 Mar 2019 14:12:17 -0400 Subject: [PATCH 004/146] Block Editor: Update Block Editor classNames to convention (#14420) --- assets/stylesheets/_z-index.scss | 36 +-- .../components/block-compare/block-view.js | 10 +- .../src/components/block-compare/index.js | 10 +- .../src/components/block-compare/style.scss | 18 +- .../test/__snapshots__/block-view.js.snap | 10 +- .../src/components/block-drop-zone/index.js | 2 +- .../src/components/block-drop-zone/style.scss | 2 +- .../src/components/block-icon/index.js | 2 +- .../src/components/block-icon/style.scss | 2 +- .../src/components/block-inspector/index.js | 12 +- .../src/components/block-inspector/style.scss | 14 +- .../components/block-list-appender/style.scss | 2 +- .../block-list/block-contextual-toolbar.js | 2 +- .../src/components/block-list/block-html.js | 2 +- .../block-list/block-invalid-warning.js | 2 +- .../block-list/block-mobile-toolbar.js | 2 +- .../src/components/block-list/block.js | 8 +- .../src/components/block-list/breadcrumb.js | 4 +- .../src/components/block-list/index.js | 2 +- .../components/block-list/insertion-point.js | 6 +- .../src/components/block-list/style.scss | 244 +++++++++--------- .../src/components/block-mover/drag-handle.js | 2 +- .../src/components/block-mover/index.js | 16 +- .../src/components/block-mover/style.scss | 22 +- .../src/components/block-mover/test/index.js | 12 +- .../components/block-navigation/dropdown.js | 2 +- .../src/components/block-navigation/index.js | 10 +- .../components/block-navigation/style.scss | 20 +- .../src/components/block-preview/index.js | 6 +- .../src/components/block-preview/style.scss | 6 +- .../block-convert-button.js | 2 +- .../block-settings-menu/block-mode-toggle.js | 2 +- .../components/block-settings-menu/index.js | 16 +- .../reusable-block-convert-button.js | 4 +- .../reusable-block-delete-button.js | 2 +- .../components/block-settings-menu/style.scss | 12 +- .../reusable-block-delete-button.js.snap | 2 +- .../src/components/block-styles/index.js | 8 +- .../src/components/block-styles/style.scss | 10 +- .../src/components/block-switcher/index.js | 10 +- .../src/components/block-switcher/style.scss | 52 ++-- .../test/__snapshots__/index.js.snap | 10 +- .../src/components/block-toolbar/index.js | 4 +- .../src/components/block-toolbar/style.scss | 2 +- .../src/components/block-types-list/index.js | 2 +- .../components/block-types-list/style.scss | 2 +- .../src/components/color-palette/control.js | 4 +- .../src/components/color-palette/control.scss | 2 +- .../test/__snapshots__/control.js.snap | 4 +- .../src/components/contrast-checker/index.js | 2 +- .../components/contrast-checker/style.scss | 2 +- .../test/__snapshots__/index.js.snap | 12 +- .../default-block-appender/index.js | 4 +- .../default-block-appender/style.scss | 32 +-- .../test/__snapshots__/index.js.snap | 12 +- .../src/components/inner-blocks/index.js | 2 +- .../src/components/inner-blocks/style.scss | 4 +- .../components/inserter-list-item/index.js | 12 +- .../components/inserter-list-item/style.scss | 24 +- .../inserter-with-shortcuts/index.js | 4 +- .../inserter-with-shortcuts/style.scss | 4 +- .../src/components/inserter/child-blocks.js | 4 +- .../src/components/inserter/index.js | 6 +- .../src/components/inserter/menu.js | 16 +- .../src/components/inserter/style.scss | 32 +-- .../src/components/inserter/test/menu.js | 24 +- .../src/components/media-placeholder/index.js | 16 +- .../components/media-placeholder/style.scss | 14 +- .../multi-selection-inspector/index.js | 8 +- .../multi-selection-inspector/style.scss | 10 +- .../src/components/observe-typing/index.js | 2 +- .../components/panel-color-settings/index.js | 6 +- .../panel-color-settings/style.scss | 2 +- .../test/__snapshots__/index.js.snap | 12 +- .../src/components/plain-text/index.js | 2 +- .../src/components/plain-text/index.native.js | 4 +- .../components/plain-text/style.native.scss | 2 +- .../src/components/plain-text/style.scss | 2 +- .../src/components/rich-text/editable.js | 2 +- .../rich-text/format-toolbar/index.js | 2 +- .../rich-text/format-toolbar/style.scss | 6 +- .../src/components/rich-text/index.js | 6 +- .../src/components/rich-text/index.native.js | 4 +- .../components/rich-text/style.native.scss | 2 +- .../src/components/rich-text/style.scss | 10 +- .../skip-to-selected-block/index.js | 2 +- .../skip-to-selected-block/style.scss | 2 +- .../src/components/url-input/button.js | 8 +- .../src/components/url-input/index.js | 12 +- .../src/components/url-input/style.scss | 22 +- .../src/components/url-input/test/button.js | 4 +- .../src/components/url-popover/index.js | 8 +- .../src/components/url-popover/style.scss | 10 +- .../test/__snapshots__/index.js.snap | 18 +- .../src/components/url-popover/test/index.js | 2 +- .../src/components/warning/index.js | 12 +- .../src/components/warning/style.scss | 12 +- .../warning/test/__snapshots__/index.js.snap | 6 +- .../src/components/warning/test/index.js | 12 +- .../src/components/writing-flow/index.js | 4 +- .../src/components/writing-flow/style.scss | 4 +- packages/block-editor/src/utils/dom.js | 8 +- packages/block-editor/src/utils/test/dom.js | 12 +- .../src/block/edit-panel/style.scss | 4 +- .../src/block/indicator/style.scss | 4 +- packages/block-library/src/button/editor.scss | 18 +- .../block-library/src/classic/editor.scss | 16 +- packages/block-library/src/code/editor.scss | 2 +- .../block-library/src/columns/editor.scss | 22 +- packages/block-library/src/cover/editor.scss | 12 +- packages/block-library/src/embed/style.scss | 4 +- .../embed/test/__snapshots__/index.js.snap | 2 +- .../block-library/src/gallery/editor.scss | 10 +- packages/block-library/src/html/editor.scss | 2 +- packages/block-library/src/image/editor.scss | 12 +- .../block-library/src/media-text/editor.scss | 4 +- packages/block-library/src/more/editor.scss | 2 +- .../block-library/src/nextpage/editor.scss | 2 +- .../block-library/src/paragraph/editor.scss | 2 +- .../block-library/src/pullquote/editor.scss | 8 +- .../block-library/src/shortcode/editor.scss | 2 +- packages/block-library/src/table/editor.scss | 2 +- .../src/text-columns/editor.scss | 2 +- packages/block-library/src/video/editor.scss | 2 +- .../components/src/placeholder/style.scss | 2 +- .../src/positioned-at-selection/index.js | 2 +- .../src/click-block-appender.js | 2 +- .../src/click-block-toolbar-button.js | 2 +- .../src/get-all-block-inserter-item-titles.js | 2 +- .../src/get-available-block-transforms.js | 4 +- .../e2e-test-utils/src/has-block-switcher.js | 2 +- .../src/open-all-block-inserter-categories.js | 2 +- .../src/open-global-block-inserter.js | 2 +- .../e2e-test-utils/src/transform-block-to.js | 6 +- packages/e2e-tests/specs/a11y.test.js | 2 +- .../e2e-tests/specs/adding-blocks.test.js | 22 +- .../e2e-tests/specs/block-deletion.test.js | 8 +- .../specs/block-hierarchy-navigation.test.js | 4 +- packages/e2e-tests/specs/block-mover.test.js | 12 +- .../e2e-tests/specs/blocks/columns.test.js | 2 +- .../e2e-tests/specs/blocks/media-text.test.js | 2 +- .../specs/convert-block-type.test.js | 2 +- packages/e2e-tests/specs/editor-modes.test.js | 16 +- .../e2e-tests/specs/invalid-block.test.js | 6 +- .../specs/keyboard-navigable-blocks.test.js | 10 +- packages/e2e-tests/specs/links.test.js | 54 ++-- .../e2e-tests/specs/navigable-toolbar.test.js | 2 +- .../__snapshots__/plugins-api.test.js.snap | 2 +- .../specs/plugins/align-hook.test.js | 8 +- .../specs/plugins/annotations.test.js | 6 +- .../specs/plugins/block-icons.test.js | 10 +- .../specs/plugins/container-blocks.test.js | 4 +- .../inner-blocks-allowed-blocks.test.js | 2 +- .../e2e-tests/specs/reusable-blocks.test.js | 16 +- .../e2e-tests/specs/splitting-merging.test.js | 2 +- .../e2e-tests/specs/style-variation.test.js | 2 +- .../header/header-toolbar/style.scss | 8 +- .../src/components/sidebar/style.scss | 2 +- .../visual-editor/block-inspector-button.js | 2 +- .../src/components/visual-editor/style.scss | 26 +- packages/edit-post/src/style.scss | 4 +- .../src/components/autocompleters/style.scss | 14 +- packages/format-library/src/image/index.js | 4 +- packages/format-library/src/image/style.scss | 4 +- packages/format-library/src/link/inline.js | 6 +- packages/format-library/src/link/style.scss | 4 +- 166 files changed, 765 insertions(+), 767 deletions(-) diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 87bc9ea5575de..6b1a15b95ec7b 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -3,37 +3,37 @@ // value is designed to work with). $z-layers: ( - ".editor-block-list__block-edit::before": 0, - ".editor-block-switcher__arrow": 1, - ".editor-block-list__block {core/image aligned wide or fullwide}": 20, + ".block-editor-block-list__block-edit::before": 0, + ".block-editor-block-switcher__arrow": 1, + ".block-editor-block-list__block {core/image aligned wide or fullwide}": 20, ".block-library-classic__toolbar": 10, - ".editor-block-list__layout .reusable-block-indicator": 1, - ".editor-block-list__breadcrumb": 2, + ".block-editor-block-list__layout .reusable-block-indicator": 1, + ".block-editor-block-list__breadcrumb": 2, ".components-form-toggle__input": 1, ".components-panel__header.edit-post-sidebar__panel-tabs": -1, ".edit-post-sidebar .components-panel": -2, - ".editor-inserter__tabs": 1, - ".editor-inserter__tab.is-active": 1, + ".block-editor-inserter__tabs": 1, + ".block-editor-inserter__tab.is-active": 1, ".components-panel__header": 1, ".components-modal__header": 10, ".edit-post-meta-boxes-area.is-loading::before": 1, ".edit-post-meta-boxes-area .spinner": 5, - ".editor-block-contextual-toolbar": 21, + ".block-editor-block-contextual-toolbar": 21, ".components-popover__close": 5, - ".editor-block-list__insertion-point": 6, - ".editor-inserter-with-shortcuts": 5, - ".editor-warning": 5, + ".block-editor-block-list__insertion-point": 6, + ".block-editor-inserter-with-shortcuts": 5, + ".block-editor-warning": 5, ".block-library-gallery-item__inline-menu": 20, - ".editor-url-input__suggestions": 30, + ".block-editor-url-input__suggestions": 30, ".edit-post-header": 30, - ".block-library-button__inline-link .editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter + ".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter ".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter ".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block ".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background. ".wp-block-cover__video-background": 0, // Video background inside cover block. // Side UI active buttons - ".editor-block-mover__control": 1, + ".block-editor-block-mover__control": 1, // Active pill button ".components-button.is-button {:focus or .is-primary}": 1, @@ -43,7 +43,7 @@ $z-layers: ( // Should have higher index than the inset/underlay used for dragging ".components-placeholder__fieldset": 1, - ".editor-block-list__block-edit .reusable-block-edit-panel *": 1, + ".block-editor-block-list__block-edit .reusable-block-edit-panel *": 1, // Show drop zone above most standard content, but below any overlays ".components-drop-zone": 100, @@ -51,14 +51,14 @@ $z-layers: ( // The block mover, particularly in nested contexts, // should overlap most block content. - ".editor-block-list__block.is-{selected,hovered} .editor-block-mover": 80, + ".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 80, // The block mover for floats should overlap the controls of adjacent blocks. - ".editor-block-list__block {core/image aligned left or right}": 81, + ".block-editor-block-list__block {core/image aligned left or right}": 81, // Small screen inner blocks overlay must be displayed above drop zone, // settings menu, and movers. - ".editor-inner-blocks__small-screen-overlay:after": 120, + ".block-editor-inner-blocks__small-screen-overlay:after": 120, // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } diff --git a/packages/block-editor/src/components/block-compare/block-view.js b/packages/block-editor/src/components/block-compare/block-view.js index 0c8189a32baa3..274c2896d98a9 100644 --- a/packages/block-editor/src/components/block-compare/block-view.js +++ b/packages/block-editor/src/components/block-compare/block-view.js @@ -6,19 +6,19 @@ import { Button } from '@wordpress/components'; const BlockView = ( { title, rawContent, renderedContent, action, actionText, className } ) => { return (
-
-

{ title }

+
+

{ title }

-
+
{ rawContent }
-
+
{ renderedContent }
-
+
diff --git a/packages/block-editor/src/components/block-compare/index.js b/packages/block-editor/src/components/block-compare/index.js index 0782976519201..1b294649e9c62 100644 --- a/packages/block-editor/src/components/block-compare/index.js +++ b/packages/block-editor/src/components/block-compare/index.js @@ -23,8 +23,8 @@ class BlockCompare extends Component { return difference.map( ( item, pos ) => { const classes = classnames( { - 'editor-block-compare__added': item.added, - 'editor-block-compare__removed': item.removed, + 'editor-block-compare__added block-editor-block-compare__added': item.added, + 'editor-block-compare__removed block-editor-block-compare__removed': item.removed, } ); return { item.value }; @@ -59,10 +59,10 @@ class BlockCompare extends Component { const difference = this.getDifference( original.rawContent, converted.rawContent ); return ( -
+

title

raw
render
{ __( 'No block selected.' ) }; + return { __( 'No block selected.' ) }; } return ( -
+
-
-
{ blockType.title }
-
{ blockType.description }
+
+
{ blockType.title }
+
{ blockType.description }
{ hasBlockStyles && ( @@ -63,7 +63,7 @@ const BlockInspector = ( { selectedBlockClientId, selectedBlockName, blockType, { ( fills ) => ! isEmpty( fills ) && ( diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss index e238a08561684..2fdb6d04b44aa 100644 --- a/packages/block-editor/src/components/block-inspector/style.scss +++ b/packages/block-editor/src/components/block-inspector/style.scss @@ -1,4 +1,4 @@ -.editor-block-inspector__no-blocks { +.block-editor-block-inspector__no-blocks { display: block; font-size: $default-font-size; background: $white; @@ -7,14 +7,14 @@ } -.editor-block-inspector__card { +.block-editor-block-inspector__card { display: flex; align-items: flex-start; margin: -16px; padding: 16px; } -.editor-block-inspector__card-icon { +.block-editor-block-inspector__card-icon { border: $border-width solid $light-gray-700; padding: 7px; margin-right: 10px; @@ -22,20 +22,20 @@ width: 36px; } -.editor-block-inspector__card-content { +.block-editor-block-inspector__card-content { flex-grow: 1; } -.editor-block-inspector__card-title { +.block-editor-block-inspector__card-title { font-weight: 500; margin-bottom: 5px; } -.editor-block-inspector__card-description { +.block-editor-block-inspector__card-description { font-size: $default-font-size; } -.editor-block-inspector__card .editor-block-icon { +.block-editor-block-inspector__card .block-editor-block-icon { margin-left: -2px; margin-right: 10px; padding: 0 3px; diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss index a31989fcc5432..9f53f7572f179 100644 --- a/packages/block-editor/src/components/block-list-appender/style.scss +++ b/packages/block-editor/src/components/block-list-appender/style.scss @@ -1,4 +1,4 @@ -.block-list-appender > .editor-inserter { +.block-list-appender > .block-editor-inserter { display: block; } diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js index 8e6726e78f118..36575d90f9ab5 100644 --- a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js @@ -13,7 +13,7 @@ function BlockContextualToolbar( { focusOnMount } ) { return ( diff --git a/packages/block-editor/src/components/block-list/block-html.js b/packages/block-editor/src/components/block-list/block-html.js index 9ec13410b367a..ce70122701828 100644 --- a/packages/block-editor/src/components/block-list/block-html.js +++ b/packages/block-editor/src/components/block-list/block-html.js @@ -56,7 +56,7 @@ export class BlockHTML extends Component { const { html } = this.state; return ( +
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 2b828a34cdd93..c5abcdc5deee3 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -431,7 +431,7 @@ export class BlockListBlock extends Component { // The wp-block className is important for editor styles. // Generate the wrapper class names handling the different states of the block. const wrapperClassName = classnames( - 'wp-block editor-block-list__block', + 'wp-block editor-block-list__block block-editor-block-list__block', { 'has-warning': ! isValid || !! error || isUnregisteredBlock, 'is-selected': shouldAppearSelected, @@ -522,7 +522,7 @@ export class BlockListBlock extends Component { { isFirstMultiSelected && ( ) } -
+
{ shouldRenderMovers && ( { showEmptyBlockSideInserter && ( -
+
-
+
+
{ rootClientId && ( - + ) } diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index cc998be715c68..5231dcb71749b 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -199,7 +199,7 @@ class BlockList extends Component { } = this.props; return ( -
+
{ map( blockClientIds, ( clientId, blockIndex ) => { const isBlockInSelection = hasMultiSelection ? multiSelectedBlockClientIds.includes( clientId ) : diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js index b0c7b5b270f16..daa1a0f408f4e 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -51,9 +51,9 @@ class BlockInsertionPoint extends Component { } = this.props; return ( -
+
{ showInsertionPoint && ( -
+
) }
.editor-block-list__block-edit > * { + > .block-editor-block-list__block-edit > * { background: $light-gray-100; } - > .editor-block-list__block-edit > * > * { + > .block-editor-block-list__block-edit > * > * { visibility: hidden; } - .editor-block-mover, - .editor-block-contextual-toolbar { + .block-editor-block-mover, + .block-editor-block-contextual-toolbar { display: none; } } - > .editor-block-list__block-edit .reusable-block-edit-panel * { - z-index: z-index(".editor-block-list__block-edit .reusable-block-edit-panel *"); + > .block-editor-block-list__block-edit .reusable-block-edit-panel * { + z-index: z-index(".block-editor-block-list__block-edit .reusable-block-edit-panel *"); } } @@ -38,7 +38,7 @@ * General layout */ -.editor-block-list__layout { +.block-editor-block-list__layout { // Make room in the main content column for the side UI. // The side UI uses negative margins to position itself so as to not affect the block width. @include break-small() { @@ -47,7 +47,7 @@ } // Don't add side padding for nested blocks. - .editor-block-list__block & { + .block-editor-block-list__block & { // Compensate for side UI. padding-left: 0; padding-right: 0; @@ -59,15 +59,15 @@ // Space every block, and the default appender, using margins. // This allows margins to collapse, which gives a better representation of how it looks on the frontend. - .editor-default-block-appender > .editor-default-block-appender__content, - > .editor-block-list__block > .editor-block-list__block-edit, - > .editor-block-list__layout > .editor-block-list__block > .editor-block-list__block-edit { + .block-editor-default-block-appender > .block-editor-default-block-appender__content, + > .block-editor-block-list__block > .block-editor-block-list__block-edit, + > .block-editor-block-list__layout > .block-editor-block-list__block > .block-editor-block-list__block-edit { margin-top: $block-padding * 2 + $block-spacing; margin-bottom: $block-padding * 2 + $block-spacing; } } -.editor-block-list__layout .editor-block-list__block { +.block-editor-block-list__layout .block-editor-block-list__block { position: relative; padding-left: $block-padding; padding-right: $block-padding; @@ -108,11 +108,11 @@ * Block outline layout */ - .editor-block-list__block-edit { + .block-editor-block-list__block-edit { position: relative; &::before { - z-index: z-index(".editor-block-list__block-edit::before"); + z-index: z-index(".block-editor-block-list__block-edit::before"); content: ""; position: absolute; outline: $border-width solid transparent; @@ -128,7 +128,7 @@ } // Selected style. - &.is-selected > .editor-block-list__block-edit::before { + &.is-selected > .block-editor-block-list__block-edit::before { // Use opacity to work in various editor styles. outline: $border-width solid $dark-opacity-light-500; @@ -138,7 +138,7 @@ } // Hover style. - &.is-hovered > .editor-block-list__block-edit::before { + &.is-hovered > .block-editor-block-list__block-edit::before { outline: $border-width solid theme(outlines); } @@ -147,7 +147,7 @@ opacity: 0.5; transition: opacity 0.1s linear; - &:not(.is-focused) .editor-block-list__block, + &:not(.is-focused) .block-editor-block-list__block, &.is-focused { opacity: 1; } @@ -159,7 +159,7 @@ * Cross-block selection */ -.editor-block-list__layout .editor-block-list__block { +.block-editor-block-list__layout .block-editor-block-list__block { ::-moz-selection { background-color: $blue-medium-highlight; } @@ -173,7 +173,7 @@ background-color: transparent; } - &.is-multi-selected .editor-block-list__block-edit::before { + &.is-multi-selected .block-editor-block-list__block-edit::before { background: $blue-medium-highlight; // Use opacity to work in various editor styles. @@ -194,13 +194,13 @@ * Block styles and alignments */ -.editor-block-list__layout .editor-block-list__block { +.block-editor-block-list__layout .block-editor-block-list__block { &.has-warning { min-height: ( $block-padding + $block-spacing ) * 2; } // Warnings - &.has-warning .editor-block-list__block-edit { + &.has-warning .block-editor-block-list__block-edit { // When a block has a warning, you shouldn't be able to manipulate the contents. > * { pointer-events: none; @@ -208,12 +208,12 @@ } // Allow the warning action buttons to be manipulable. - .editor-warning { + .block-editor-warning { pointer-events: all; } } - &.has-warning:not(.is-hovered) .editor-block-list__block-edit::before { + &.has-warning:not(.is-hovered) .block-editor-block-list__block-edit::before { // Use opacity to work in various editor styles. outline-color: $dark-opacity-light-500; @@ -222,7 +222,7 @@ } } - &.has-warning .editor-block-list__block-edit::after { + &.has-warning .block-editor-block-list__block-edit::after { content: ""; position: absolute; background-color: rgba($light-gray-100, 0.4); @@ -234,11 +234,11 @@ } // Avoid conflict with the multi-selection highlight color. - &.has-warning.is-multi-selected .editor-block-list__block-edit::after { + &.has-warning.is-multi-selected .block-editor-block-list__block-edit::after { background-color: transparent; } - &.has-warning.is-selected .editor-block-list__block-edit::after { + &.has-warning.is-selected .block-editor-block-list__block-edit::after { bottom: ( $block-toolbar-height - $block-padding - $border-width ); @include break-small() { @@ -247,19 +247,19 @@ } // Appender - &.is-typing .editor-block-list__empty-block-inserter, - &.is-typing .editor-block-list__side-inserter { + &.is-typing .block-editor-block-list__empty-block-inserter, + &.is-typing .block-editor-block-list__side-inserter { opacity: 0; animation: none; } - .editor-block-list__empty-block-inserter, - .editor-block-list__side-inserter { + .block-editor-block-list__empty-block-inserter, + .block-editor-block-list__side-inserter { @include edit-post__fade-in-animation; } // Reusable blocks - &.is-reusable > .editor-block-list__block-edit::before { + &.is-reusable > .block-editor-block-list__block-edit::before { // Use opacity to work in various editor styles. outline: $border-width dashed $dark-opacity-light-500; @@ -272,14 +272,14 @@ &[data-align="left"], &[data-align="right"] { // Without z-index, won't be clickable as "above" adjacent content. - z-index: z-index(".editor-block-list__block {core/image aligned left or right}"); + z-index: z-index(".block-editor-block-list__block {core/image aligned left or right}"); width: 100%; // When images are floated, the block itself should collapse to zero height. height: 0; // Hide block outline when an image is floated. - .editor-block-list__block-edit { + .block-editor-block-list__block-edit { &::before { content: none; } @@ -289,12 +289,12 @@ } // Keep a 1px margin to compensate for the border/outline. - .editor-block-contextual-toolbar { + .block-editor-block-contextual-toolbar { margin-bottom: $border-width; } // Position toolbar better on mobile. - .editor-block-contextual-toolbar { + .block-editor-block-contextual-toolbar { width: auto; border-bottom: $border-width solid $light-gray-500; bottom: auto; @@ -302,20 +302,20 @@ } // Unlike most explicit left/right alignments, this one should be flipped by the auto-RTL system. - &[data-align="left"] .editor-block-contextual-toolbar { + &[data-align="left"] .block-editor-block-contextual-toolbar { left: 0; right: auto; } - &[data-align="right"] .editor-block-contextual-toolbar { + &[data-align="right"] .block-editor-block-contextual-toolbar { left: auto; right: 0; } // Position the sticky toolbar correctly beyond the mobile breakpoint. @include break-small() { - &[data-align="right"] .editor-block-contextual-toolbar, - &[data-align="left"] .editor-block-contextual-toolbar { + &[data-align="right"] .block-editor-block-contextual-toolbar, + &[data-align="left"] .block-editor-block-contextual-toolbar { top: $block-padding; } } @@ -323,7 +323,7 @@ // Left &[data-align="left"] { // This is in the editor only; the image should be floated on the frontend. - .editor-block-list__block-edit { + .block-editor-block-list__block-edit { /*!rtl:begin:ignore*/ float: left; margin-right: 2em; @@ -332,7 +332,7 @@ // Align block toolbar to floated content. @include break-small() { - .editor-block-toolbar { + .block-editor-block-toolbar { /*!rtl:begin:ignore*/ left: $block-padding; right: auto; @@ -344,7 +344,7 @@ // Right &[data-align="right"] { // Right: This is in the editor only; the image should be floated on the frontend. - > .editor-block-list__block-edit { + > .block-editor-block-list__block-edit { /*!rtl:begin:ignore*/ float: right; margin-left: 2em; @@ -353,7 +353,7 @@ // Align block toolbar to floated content. @include break-small() { - .editor-block-toolbar { + .block-editor-block-toolbar { /*!rtl:begin:ignore*/ right: $block-padding; left: auto; @@ -368,10 +368,10 @@ clear: both; // Without z-index, the block toolbar will be below an adjecent float - z-index: z-index(".editor-block-list__block {core/image aligned wide or fullwide}"); + z-index: z-index(".block-editor-block-list__block {core/image aligned wide or fullwide}"); // Mover and settings above - > .editor-block-mover { + > .block-editor-block-mover { // This moves the menu up by the height of the button + border + padding. top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance; bottom: auto; @@ -385,22 +385,22 @@ } } - > .editor-block-mover .editor-block-mover__control { + > .block-editor-block-mover .block-editor-block-mover__control { float: left; } // Position hover label on the right - > .editor-block-list__breadcrumb { + > .block-editor-block-list__breadcrumb { right: -$border-width; } // Hide mover until wide breakpoints, or it might be covered by toolbar - > .editor-block-mover { + > .block-editor-block-mover { display: none; } @include break-wide() { - > .editor-block-mover { + > .block-editor-block-mover { display: block; } } @@ -408,7 +408,7 @@ // Beyond the mobile breakpoint, wide images stretch outside of the column. // To center the toolbar, we make it inline-flex so the toolbar is not full-wide. @include break-small () { - .editor-block-toolbar { + .block-editor-block-toolbar { display: inline-flex; } } @@ -417,7 +417,7 @@ // Wide &[data-align="wide"] { // Position mover - > .editor-block-mover { + > .block-editor-block-mover { left: -$block-padding + $border-width; } } @@ -425,7 +425,7 @@ // Full-wide &[data-align="full"] { // Position hover label on the right for the top level block. - > .editor-block-list__block-edit > .editor-block-list__breadcrumb { + > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb { right: 0; } @@ -435,7 +435,7 @@ margin-right: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width; } - > .editor-block-list__block-edit { + > .block-editor-block-list__block-edit { margin-left: -$block-padding; margin-right: -$block-padding; @@ -451,7 +451,7 @@ } } - > .editor-block-list__block-edit::before { + > .block-editor-block-list__block-edit::before { left: 0; right: 0; border-left-width: 0; @@ -459,7 +459,7 @@ } // Position mover - > .editor-block-mover { + > .block-editor-block-mover { left: $border-width; } } @@ -470,7 +470,7 @@ } // Dropzones - .editor-block-drop-zone { + .block-editor-block-drop-zone { top: -4px; bottom: -3px; margin: 0 $block-padding; @@ -479,13 +479,13 @@ // Hide appender shortcuts in nested blocks // This essentially duplicates the mobile styles for the appender component // It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec - .editor-block-list__layout { - .editor-inserter-with-shortcuts { + .block-editor-block-list__layout { + .block-editor-inserter-with-shortcuts { display: none; } - .editor-block-list__empty-block-inserter, - .editor-default-block-appender .editor-inserter { + .block-editor-block-list__empty-block-inserter, + .block-editor-default-block-appender .block-editor-inserter { left: auto; right: $grid-size; } @@ -497,11 +497,11 @@ * Left and right side UI; Unified toolbar on Mobile */ -.editor-block-list__block { +.block-editor-block-list__block { // Left and right block settings and mover. - &.is-multi-selected > .editor-block-mover, - > .editor-block-list__block-edit > .editor-block-mover { + &.is-multi-selected > .block-editor-block-mover, + > .block-editor-block-list__block-edit > .block-editor-block-mover { position: absolute; width: $block-side-ui-width + $block-side-ui-clearance; @@ -511,8 +511,8 @@ } // Position depending on whether selected or not. - &.is-multi-selected > .editor-block-mover, - > .editor-block-list__block-edit > .editor-block-mover { + &.is-multi-selected > .block-editor-block-mover, + > .block-editor-block-list__block-edit > .block-editor-block-mover { top: -$block-padding - $border-width; } @@ -521,15 +521,15 @@ &.is-multi-selected, &.is-selected, &.is-hovered { - .editor-block-mover { - z-index: z-index(".editor-block-list__block.is-{selected,hovered} .editor-block-mover"); + .block-editor-block-mover { + z-index: z-index(".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover"); } } } // Left side UI. - &.is-multi-selected > .editor-block-mover, - > .editor-block-list__block-edit > .editor-block-mover { + &.is-multi-selected > .block-editor-block-mover, + > .block-editor-block-list__block-edit > .block-editor-block-mover { padding-right: $block-side-ui-clearance; // Position for top level blocks. @@ -542,7 +542,7 @@ } } - &.is-multi-selected > .editor-block-mover { + &.is-multi-selected > .block-editor-block-mover { left: -$block-side-ui-width - $block-side-ui-clearance; } @@ -550,7 +550,7 @@ &[data-align="left"], &[data-align="right"] { // Show always when the block is selected. - &.is-selected > .editor-block-list__block-edit > .editor-block-mover { + &.is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover { // Don't show on mobile, allow the special mobile toolbar to work there. display: none; @include break-small() { @@ -571,8 +571,8 @@ } // Don't show on hover, or on the "ghost" when dragging. - &.is-hovered > .editor-block-list__block-edit > .editor-block-mover, - &.is-dragging > .editor-block-list__block-edit > .editor-block-mover { + &.is-hovered > .block-editor-block-list__block-edit > .block-editor-block-mover, + &.is-dragging > .block-editor-block-list__block-edit > .block-editor-block-mover { display: none; } } @@ -583,10 +583,10 @@ * Mobile unified toolbar. */ -.editor-block-list__block { +.block-editor-block-list__block { // Show side UI inline below the block on mobile. - .editor-block-list__block-mobile-toolbar { + .block-editor-block-list__block-mobile-toolbar { display: flex; flex-direction: row; @@ -609,15 +609,15 @@ } // Movers, inserter, trash, and ellipsis. - .editor-inserter { + .block-editor-inserter { position: relative; left: auto; top: auto; margin: 0; } - .editor-inserter__toggle, - .editor-block-mover__control { + .block-editor-inserter__toggle, + .block-editor-block-mover__control { width: $icon-button-size; height: $icon-button-size; border-radius: $radius-round-rectangle; @@ -632,19 +632,19 @@ } // Movers - .editor-block-mover { + .block-editor-block-mover { display: flex; margin-right: auto; - .editor-inserter, - .editor-block-mover__control { + .block-editor-inserter, + .block-editor-block-mover__control { float: left; } } } // Reset negative margins on mobile for full-width. - &[data-align="full"] .editor-block-list__block-mobile-toolbar { + &[data-align="full"] .block-editor-block-list__block-mobile-toolbar { margin-left: 0; margin-right: 0; } @@ -655,20 +655,20 @@ * In-Canvas Inserter */ -.editor-block-list .editor-inserter { +.block-editor-block-list .block-editor-inserter { margin: $grid-size; cursor: move; // Fallback for IE/Edge < 14 cursor: grab; } // Insertion point (includes inbetween inserter and insertion indicator) -.editor-block-list__insertion-point { +.block-editor-block-list__insertion-point { position: relative; - z-index: z-index(".editor-block-list__insertion-point"); + z-index: z-index(".block-editor-block-list__insertion-point"); margin-top: -$block-padding; } -.editor-block-list__insertion-point-indicator { +.block-editor-block-list__insertion-point-indicator { position: absolute; top: calc(50% - #{ $border-width }); height: 2px; @@ -678,7 +678,7 @@ } // This is the clickable plus. -.editor-block-list__insertion-point-inserter { +.block-editor-block-list__insertion-point-inserter { // Don't show on mobile. display: none; @include break-mobile() { @@ -692,7 +692,7 @@ justify-content: center; // Show a clickable plus. - .editor-inserter__toggle { + .block-editor-inserter__toggle { margin-top: -4px; border-radius: 50%; color: $blue-medium-focus; @@ -718,8 +718,8 @@ // Don't show the sibling inserter before the selected block. .edit-post-layout:not(.has-fixed-toolbar) { // The child selector is necessary for this to work properly in nested contexts. - .is-selected > .editor-block-list__insertion-point > .editor-block-list__insertion-point-inserter, - .is-focused > .editor-block-list__insertion-point > .editor-block-list__insertion-point-inserter { + .is-selected > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter, + .is-focused > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter { opacity: 0; pointer-events: none; @@ -732,8 +732,8 @@ } // This is the edge-to-edge hover area that contains the plus. -.editor-block-list__block { - > .editor-block-list__insertion-point { +.block-editor-block-list__block { + > .block-editor-block-list__insertion-point { position: absolute; top: -$block-padding - $block-spacing / 2; @@ -752,13 +752,13 @@ } } - &[data-align="full"] > .editor-block-list__insertion-point { + &[data-align="full"] > .block-editor-block-list__insertion-point { left: 0; right: 0; } } -.editor-block-list__block .editor-block-list__block-html-textarea { +.block-editor-block-list__block .block-editor-block-list__block-html-textarea { display: block; margin: 0; width: 100%; @@ -782,9 +782,9 @@ * Block Toolbar when contextual. */ -.editor-block-list__block { - .editor-block-contextual-toolbar { - z-index: z-index(".editor-block-contextual-toolbar"); +.block-editor-block-list__block { + .block-editor-block-contextual-toolbar { + z-index: z-index(".block-editor-block-contextual-toolbar"); white-space: nowrap; text-align: left; pointer-events: none; @@ -812,14 +812,14 @@ } // Floated items have special needs for the contextual toolbar position. - &[data-align="left"] .editor-block-contextual-toolbar, - &[data-align="right"] .editor-block-contextual-toolbar { + &[data-align="left"] .block-editor-block-contextual-toolbar, + &[data-align="right"] .block-editor-block-contextual-toolbar { margin-bottom: $border-width; margin-top: -$block-toolbar-height; } // Make block toolbar full width on mobile. - .editor-block-contextual-toolbar { + .block-editor-block-contextual-toolbar { margin-left: 0; margin-right: 0; @include break-small() { @@ -829,30 +829,30 @@ } // For floats, compensate for this so content doesn't grow smaller. - &[data-align="left"] .editor-block-contextual-toolbar { + &[data-align="left"] .block-editor-block-contextual-toolbar { /*rtl:ignore*/ margin-right: $block-padding + $border-width; } - &[data-align="right"] .editor-block-contextual-toolbar { + &[data-align="right"] .block-editor-block-contextual-toolbar { /*rtl:ignore*/ margin-left: $block-padding + $border-width; } // Reset pointer-events on children. - .editor-block-contextual-toolbar > * { + .block-editor-block-contextual-toolbar > * { pointer-events: auto; } } -.editor-block-list__block.is-focus-mode:not(.is-multi-selected) > .editor-block-contextual-toolbar { +.block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) > .block-editor-block-contextual-toolbar { margin-left: -$block-side-ui-width; } // Enable toolbar footprint collapsing -.editor-block-contextual-toolbar { +.block-editor-block-contextual-toolbar { // Position the contextual toolbar above the block. - .editor-block-list__block & { + .block-editor-block-list__block & { @include break-small() { bottom: auto; left: auto; @@ -872,27 +872,27 @@ } } - .editor-block-list__block[data-align="left"] & { + .block-editor-block-list__block[data-align="left"] & { // RTL note: this rule should not be auto-flipped based on direction. /*rtl:ignore*/ float: left; } - .editor-block-list__block[data-align="right"] & { + .block-editor-block-list__block[data-align="right"] & { // RTL note: this rule should not be auto-flipped based on direction. /*rtl:ignore*/ float: right; } - .editor-block-list__block[data-align="left"] &, - .editor-block-list__block[data-align="right"] & { + .block-editor-block-list__block[data-align="left"] &, + .block-editor-block-list__block[data-align="right"] & { // Move the block toolbar out of the flow using translate, but less for floats. transform: translateY(-$block-padding -$border-width); } } // Position the block toolbar when contextual. -.editor-block-contextual-toolbar .editor-block-toolbar { +.block-editor-block-contextual-toolbar .block-editor-block-toolbar { width: 100%; @include break-small() { @@ -912,10 +912,10 @@ * Hover label */ -.editor-block-list__breadcrumb { +.block-editor-block-list__breadcrumb { position: absolute; line-height: 1; - z-index: z-index(".editor-block-list__breadcrumb"); + z-index: z-index(".block-editor-block-list__breadcrumb"); // Position in the top right of the border. right: -$block-padding; @@ -933,7 +933,7 @@ color: $white; // Animate in - .editor-block-list__block:hover & { + .block-editor-block-list__block:hover & { opacity: 0; @include edit-post__fade-in-animation(60ms, 0.5s); } @@ -947,7 +947,7 @@ } } -.editor-block-list__descendant-arrow::before { +.block-editor-block-list__descendant-arrow::before { content: "→"; display: inline-block; padding: 0 4px; @@ -957,7 +957,7 @@ } } -.editor-block-list__block { +.block-editor-block-list__block { @include break-small { // Increase the hover and selection area around blocks. // This makes the blue hover line and the settings button appear even if @@ -989,8 +989,8 @@ } } -.editor-block-list__block .editor-warning { - z-index: z-index(".editor-warning"); +.block-editor-block-list__block .block-editor-warning { + z-index: z-index(".block-editor-warning"); position: relative; margin-right: -$block-padding - $border-width; margin-left: -$block-padding - $border-width; diff --git a/packages/block-editor/src/components/block-mover/drag-handle.js b/packages/block-editor/src/components/block-mover/drag-handle.js index 005487e11c5c7..86551bf4be0e3 100644 --- a/packages/block-editor/src/components/block-mover/drag-handle.js +++ b/packages/block-editor/src/components/block-mover/drag-handle.js @@ -13,7 +13,7 @@ export const IconDragHandle = ( { isVisible, className, icon, onDragStart, onDra return null; } - const dragHandleClassNames = classnames( 'editor-block-mover__control-drag-handle', className ); + const dragHandleClassNames = classnames( 'editor-block-mover__control-drag-handle block-editor-block-mover__control-drag-handle', className ); return ( +
- + { getBlockMoverDescription( blocksCount, @@ -98,7 +98,7 @@ export class BlockMover extends Component { ) } - + { getBlockMoverDescription( blocksCount, diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss index be9ddeab9c1b1..5bcc3bfaa63a2 100644 --- a/packages/block-editor/src/components/block-mover/style.scss +++ b/packages/block-editor/src/components/block-mover/style.scss @@ -1,4 +1,4 @@ -.editor-block-mover { +.block-editor-block-mover { min-height: $empty-paragraph-height; opacity: 0; @@ -11,14 +11,14 @@ // To vertically center against a 56px paragraph, move upwards 72px - 56px / 2. // Don't do this for wide, fullwide, or mobile. @include break-small() { - .editor-block-list__block:not([data-align="wide"]):not([data-align="full"]) & { + .block-editor-block-list__block:not([data-align="wide"]):not([data-align="full"]) & { margin-top: -$grid-size; } } } // Mover icon buttons. -.editor-block-mover__control { +.block-editor-block-mover__control { display: flex; align-items: center; justify-content: center; @@ -59,7 +59,7 @@ } } -.editor-block-mover__control-drag-handle { +.block-editor-block-mover__control-drag-handle { cursor: move; // Fallback for IE/Edge < 14 cursor: grab; fill: currentColor; @@ -91,17 +91,17 @@ } } -.editor-block-mover__description { +.block-editor-block-mover__description { display: none; } // Apply a background in nested contexts, only on desktop. -.editor-block-mover__control-drag-handle:not(:disabled):not([aria-disabled="true"]):not(.is-default), -.editor-block-mover__control { +.block-editor-block-mover__control-drag-handle:not(:disabled):not([aria-disabled="true"]):not(.is-default), +.block-editor-block-mover__control { @include break-small() { - .editor-block-list__layout [data-align="right"] &, - .editor-block-list__layout [data-align="left"] &, - .editor-block-list__layout .editor-block-list__layout & { + .block-editor-block-list__layout [data-align="right"] &, + .block-editor-block-list__layout [data-align="left"] &, + .block-editor-block-list__layout .block-editor-block-list__layout & { background: $white; box-shadow: inset 0 0 0 1px $light-gray-500; @@ -113,7 +113,7 @@ &:active, &:focus { // Buttons are stacked with overlapping border to look like a unit, so elevate on interactions. - z-index: z-index(".editor-block-mover__control"); + z-index: z-index(".block-editor-block-mover__control"); } } } diff --git a/packages/block-editor/src/components/block-mover/test/index.js b/packages/block-editor/src/components/block-mover/test/index.js index ffb4ef6ab8198..48809ae790566 100644 --- a/packages/block-editor/src/components/block-mover/test/index.js +++ b/packages/block-editor/src/components/block-mover/test/index.js @@ -30,7 +30,7 @@ describe( 'BlockMover', () => { firstIndex={ 0 } instanceId={ 1 } /> ); - expect( blockMover.hasClass( 'editor-block-mover' ) ).toBe( true ); + expect( blockMover.hasClass( 'block-editor-block-mover' ) ).toBe( true ); const moveUp = blockMover.childAt( 0 ); const drag = blockMover.childAt( 1 ); @@ -41,24 +41,24 @@ describe( 'BlockMover', () => { expect( drag.type().name ).toBe( 'IconDragHandle' ); expect( moveDown.name() ).toBe( 'ForwardRef(IconButton)' ); expect( moveUp.props() ).toMatchObject( { - className: 'editor-block-mover__control', + className: 'editor-block-mover__control block-editor-block-mover__control', onClick: undefined, label: 'Move up', icon: upArrow, 'aria-disabled': undefined, - 'aria-describedby': 'editor-block-mover__up-description-1', + 'aria-describedby': 'block-editor-block-mover__up-description-1', } ); expect( drag.props() ).toMatchObject( { - className: 'editor-block-mover__control', + className: 'editor-block-mover__control block-editor-block-mover__control', icon: dragHandle, } ); expect( moveDown.props() ).toMatchObject( { - className: 'editor-block-mover__control', + className: 'editor-block-mover__control block-editor-block-mover__control', onClick: undefined, label: 'Move down', icon: downArrow, 'aria-disabled': undefined, - 'aria-describedby': 'editor-block-mover__down-description-1', + 'aria-describedby': 'block-editor-block-mover__down-description-1', } ); expect( moveUpDesc.text() ).toBe( 'Move 2 blocks from position 1 up by one place' ); expect( moveDownDesc.text() ).toBe( 'Move 2 blocks from position 1 down by one place' ); diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index 35db5d9b2d1f2..ab8790cefa0d9 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/packages/block-editor/src/components/block-navigation/dropdown.js @@ -37,7 +37,7 @@ function BlockNavigationDropdown( { hasBlocks, isDisabled } ) { aria-expanded={ isOpen } onClick={ isEnabled ? onToggle : undefined } label={ __( 'Block Navigation' ) } - className="editor-block-navigation" + className="editor-block-navigation block-editor-block-navigation" shortcut={ displayShortcut.access( 'o' ) } aria-disabled={ ! isEnabled } /> diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js index be7206d6cac0e..b0542caa3d6f3 100644 --- a/packages/block-editor/src/components/block-navigation/index.js +++ b/packages/block-editor/src/components/block-navigation/index.js @@ -30,16 +30,16 @@ function BlockNavigationList( { * Safari+VoiceOver won't announce the list otherwise. */ /* eslint-disable jsx-a11y/no-redundant-roles */ -