From da94830079a141b1296170fb2ffd058b766b3a42 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Thu, 7 Mar 2019 11:40:23 +0000 Subject: [PATCH] Add nested blocks inside cover block (#13822) --- assets/stylesheets/_z-index.scss | 1 + package-lock.json | 6 + packages/block-library/package.json | 1 + packages/block-library/src/cover/edit.js | 367 +++++++++++++++++ packages/block-library/src/cover/editor.scss | 22 +- packages/block-library/src/cover/index.js | 385 +++++------------- packages/block-library/src/cover/style.scss | 17 + .../fixtures/blocks/core__cover.html | 17 +- .../fixtures/blocks/core__cover.json | 21 +- .../fixtures/blocks/core__cover.parsed.json | 22 +- .../blocks/core__cover.serialized.html | 6 +- .../blocks/core__cover__video-overlay.html | 22 +- .../blocks/core__cover__video-overlay.json | 21 +- .../core__cover__video-overlay.parsed.json | 22 +- ...core__cover__video-overlay.serialized.html | 6 +- .../fixtures/blocks/core__cover__video.html | 21 +- .../fixtures/blocks/core__cover__video.json | 21 +- .../blocks/core__cover__video.parsed.json | 22 +- .../blocks/core__cover__video.serialized.html | 6 +- .../src/components/block-mover/style.scss | 6 +- post-content.php | 6 +- 21 files changed, 701 insertions(+), 317 deletions(-) create mode 100644 packages/block-library/src/cover/edit.js diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 8efd108ba73d0..87bc9ea5575de 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -28,6 +28,7 @@ $z-layers: ( ".edit-post-header": 30, ".block-library-button__inline-link .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. diff --git a/package-lock.json b/package-lock.json index 5c30b5addb71b..82560b53523e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2563,6 +2563,7 @@ "@wordpress/keycodes": "file:packages/keycodes", "@wordpress/viewport": "file:packages/viewport", "classnames": "^2.2.5", + "fast-average-color": "4.3.0", "lodash": "^4.17.11", "memize": "^1.0.5", "url": "^0.11.0" @@ -8190,6 +8191,11 @@ "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=", "dev": true }, + "fast-average-color": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/fast-average-color/-/fast-average-color-4.3.0.tgz", + "integrity": "sha512-k8FXd6+JeXoItmdNqB3hMwFgArryjdYBLuzEM8fRY/oztd/051yhSHU6GUrMOfIQU9dDHyFDcIAkGrQKlYtpDA==" + }, "fast-deep-equal": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 8c5ebfa5cb6dc..5a497ce617376 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -38,6 +38,7 @@ "@wordpress/keycodes": "file:../keycodes", "@wordpress/viewport": "file:../viewport", "classnames": "^2.2.5", + "fast-average-color": "4.3.0", "lodash": "^4.17.11", "memize": "^1.0.5", "url": "^0.11.0" diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js new file mode 100644 index 0000000000000..398e842d9eafb --- /dev/null +++ b/packages/block-library/src/cover/edit.js @@ -0,0 +1,367 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; +import FastAverageColor from 'fast-average-color'; +import tinycolor from 'tinycolor2'; + +/** + * WordPress dependencies + */ +import { + FocalPointPicker, + IconButton, + PanelBody, + RangeControl, + ToggleControl, + Toolbar, + withNotices, +} from '@wordpress/components'; +import { compose } from '@wordpress/compose'; +import { + BlockControls, + BlockIcon, + InnerBlocks, + InspectorControls, + MediaPlaceholder, + MediaUpload, + MediaUploadCheck, + PanelColorSettings, + withColors, +} from '@wordpress/editor'; +import { Component, createRef, Fragment } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import icon from './icon'; + +/** + * Module Constants + */ +export const IMAGE_BACKGROUND_TYPE = 'image'; +export const VIDEO_BACKGROUND_TYPE = 'video'; +const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ]; +const INNER_BLOCKS_TEMPLATE = [ + [ 'core/paragraph', { + align: 'center', + fontSize: 'large', + placeholder: __( 'Write title…' ), + } ], +]; +const INNER_BLOCKS_ALLOWED_BLOCKS = [ 'core/button', 'core/heading', 'core/paragraph' ]; + +function retrieveFastAverageColor() { + if ( ! retrieveFastAverageColor.fastAverageColor ) { + retrieveFastAverageColor.fastAverageColor = new FastAverageColor(); + } + return retrieveFastAverageColor.fastAverageColor; +} + +export function backgroundImageStyles( url ) { + return url ? + { backgroundImage: `url(${ url })` } : + {}; +} + +export function dimRatioToClass( ratio ) { + return ( ratio === 0 || ratio === 50 ) ? + null : + 'has-background-dim-' + ( 10 * Math.round( ratio / 10 ) ); +} + +class CoverEdit extends Component { + constructor() { + super( ...arguments ); + this.state = { + isDark: false, + }; + this.imageRef = createRef(); + this.videoRef = createRef(); + this.changeIsDarkIfRequired = this.changeIsDarkIfRequired.bind( this ); + } + + componentDidMount() { + this.handleBackgroundMode(); + } + + componentDidUpdate( prevProps ) { + this.handleBackgroundMode( prevProps ); + } + + render() { + const { + attributes, + setAttributes, + className, + noticeOperations, + noticeUI, + overlayColor, + setOverlayColor, + } = this.props; + const { + backgroundType, + dimRatio, + focalPoint, + hasParallax, + id, + url, + } = attributes; + const onSelectMedia = ( media ) => { + if ( ! media || ! media.url ) { + setAttributes( { url: undefined, id: undefined } ); + return; + } + let mediaType; + // for media selections originated from a file upload. + if ( media.media_type ) { + if ( media.media_type === IMAGE_BACKGROUND_TYPE ) { + mediaType = IMAGE_BACKGROUND_TYPE; + } else { + // only images and videos are accepted so if the media_type is not an image we can assume it is a video. + // Videos contain the media type of 'file' in the object returned from the rest api. + mediaType = VIDEO_BACKGROUND_TYPE; + } + } else { // for media selections originated from existing files in the media library. + if ( + media.type !== IMAGE_BACKGROUND_TYPE && + media.type !== VIDEO_BACKGROUND_TYPE + ) { + return; + } + mediaType = media.type; + } + + setAttributes( { + url: media.url, + id: media.id, + backgroundType: mediaType, + } ); + }; + const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } ); + const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } ); + + const style = { + ...( + backgroundType === IMAGE_BACKGROUND_TYPE ? + backgroundImageStyles( url ) : + {} + ), + backgroundColor: overlayColor.color, + }; + + if ( focalPoint ) { + style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`; + } + + const controls = ( + + + { !! url && ( + + + + ( + + ) } + /> + + + + ) } + + { !! url && ( + + + { IMAGE_BACKGROUND_TYPE === backgroundType && ( + + ) } + { IMAGE_BACKGROUND_TYPE === backgroundType && ! hasParallax && ( + setAttributes( { focalPoint: value } ) } + /> + ) } + + + + + + ) } + + ); + + if ( ! url ) { + const placeholderIcon = ; + const label = __( 'Cover' ); + + return ( + + { controls } + + + ); + } + + const classes = classnames( + className, + dimRatioToClass( dimRatio ), + { + 'is-dark-theme': this.state.isDark, + 'has-background-dim': dimRatio !== 0, + 'has-parallax': hasParallax, + } + ); + + return ( + + { controls } +
+ { IMAGE_BACKGROUND_TYPE === backgroundType && ( + // Used only to programmatically check if the image is dark or not + + ) } + { VIDEO_BACKGROUND_TYPE === backgroundType && ( +
+ + ); + } + + handleBackgroundMode( prevProps ) { + const { attributes, overlayColor } = this.props; + const { dimRatio, url } = attributes; + // If opacity is greater than 50 the dominant color is the overlay color, + // so use that color for the dark mode computation. + if ( dimRatio > 50 ) { + if ( + prevProps && + prevProps.attributes.dimRatio > 50 && + prevProps.overlayColor.color === overlayColor.color + ) { + // No relevant prop changes happened there is no need to apply any change. + return; + } + if ( ! overlayColor.color ) { + // If no overlay color exists the overlay color is black (isDark ) + this.changeIsDarkIfRequired( true ); + return; + } + this.changeIsDarkIfRequired( + tinycolor( overlayColor.color ).isDark() + ); + return; + } + // If opacity is lower than 50 the dominant color is the image or video color, + // so use that color for the dark mode computation. + + if ( + prevProps && + prevProps.attributes.dimRatio <= 50 && + prevProps.attributes.url === url + ) { + // No relevant prop changes happened there is no need to apply any change. + return; + } + const { backgroundType } = attributes; + + let element; + + switch ( backgroundType ) { + case IMAGE_BACKGROUND_TYPE: + element = this.imageRef.current; + break; + case VIDEO_BACKGROUND_TYPE: + element = this.videoRef.current; + break; + } + if ( ! element ) { + return; + } + retrieveFastAverageColor().getColorAsync( element, ( color ) => { + this.changeIsDarkIfRequired( color.isDark ); + } ); + } + + changeIsDarkIfRequired( newIsDark ) { + if ( this.state.isDark !== newIsDark ) { + this.setState( { + isDark: newIsDark, + } ); + } + } +} + +export default compose( [ + withColors( { overlayColor: 'background-color' } ), + withNotices, +] )( CoverEdit ); diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index 00d3fed4c8fca..6e84c3a4837eb 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -9,12 +9,28 @@ color: inherit; } + &.has-right-content .editor-rich-text__inline-toolbar, &.has-left-content .editor-rich-text__inline-toolbar { - justify-content: flex-start; + display: inline-block; } - &.has-right-content .editor-rich-text__inline-toolbar { - justify-content: flex-end; + .editor-block-list__layout { + width: 100%; + } + + .editor-block-list__block { + color: $light-gray-100; + } + + // wp-block-cover class is used just to increase selector specificity + .wp-block-cover__inner-container { + // avoid text align inherit from cover image align. + text-align: left; + } + + .wp-block-cover__inner-container > .editor-inner-blocks > .editor-block-list__layout { + margin-left: 0; + margin-right: 0; } &.components-placeholder { diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js index 3ad3e1c8546e7..cd39eaf9e496a 100644 --- a/packages/block-library/src/cover/index.js +++ b/packages/block-library/src/cover/index.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import { omit } from 'lodash'; import classnames from 'classnames'; /** @@ -8,49 +9,28 @@ import classnames from 'classnames'; */ import { createBlock } from '@wordpress/blocks'; import { - FocalPointPicker, - IconButton, - PanelBody, - RangeControl, - ToggleControl, - Toolbar, - withNotices, -} from '@wordpress/components'; -import { compose } from '@wordpress/compose'; -import { - AlignmentToolbar, - BlockControls, - BlockIcon, - InspectorControls, - MediaPlaceholder, - MediaUpload, - MediaUploadCheck, - PanelColorSettings, + InnerBlocks, RichText, getColorClassName, - withColors, } from '@wordpress/editor'; -import { Fragment } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import icon from './icon'; +import { + default as CoverEdit, + IMAGE_BACKGROUND_TYPE, + VIDEO_BACKGROUND_TYPE, + backgroundImageStyles, + dimRatioToClass, +} from './edit'; const blockAttributes = { - title: { - type: 'string', - source: 'html', - selector: 'p', - }, url: { type: 'string', }, - contentAlign: { - type: 'string', - default: 'center', - }, id: { type: 'number', }, @@ -79,10 +59,6 @@ const blockAttributes = { export const name = 'core/cover'; -const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ]; -const IMAGE_BACKGROUND_TYPE = 'image'; -const VIDEO_BACKGROUND_TYPE = 'video'; - export const settings = { title: __( 'Cover' ), @@ -100,13 +76,6 @@ export const settings = { transforms: { from: [ - { - type: 'block', - blocks: [ 'core/heading' ], - transform: ( { content } ) => ( - createBlock( 'core/cover', { title: content } ) - ), - }, { type: 'block', blocks: [ 'core/image' ], @@ -134,13 +103,6 @@ export const settings = { }, ], to: [ - { - type: 'block', - blocks: [ 'core/heading' ], - transform: ( { title } ) => ( - createBlock( 'core/heading', { content: title } ) - ), - }, { type: 'block', blocks: [ 'core/image' ], @@ -174,227 +136,14 @@ export const settings = { ], }, - edit: compose( [ - withColors( { overlayColor: 'background-color' } ), - withNotices, - ] )( - ( { attributes, setAttributes, isSelected, className, noticeOperations, noticeUI, overlayColor, setOverlayColor } ) => { - const { - backgroundType, - contentAlign, - dimRatio, - focalPoint, - hasParallax, - id, - title, - url, - } = attributes; - const onSelectMedia = ( media ) => { - if ( ! media || ! media.url ) { - setAttributes( { url: undefined, id: undefined } ); - return; - } - let mediaType; - // for media selections originated from a file upload. - if ( media.media_type ) { - if ( media.media_type === IMAGE_BACKGROUND_TYPE ) { - mediaType = IMAGE_BACKGROUND_TYPE; - } else { - // only images and videos are accepted so if the media_type is not an image we can assume it is a video. - // Videos contain the media type of 'file' in the object returned from the rest api. - mediaType = VIDEO_BACKGROUND_TYPE; - } - } else { // for media selections originated from existing files in the media library. - if ( - media.type !== IMAGE_BACKGROUND_TYPE && - media.type !== VIDEO_BACKGROUND_TYPE - ) { - return; - } - mediaType = media.type; - } - - setAttributes( { - url: media.url, - id: media.id, - backgroundType: mediaType, - } ); - }; - const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } ); - const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } ); - const setTitle = ( newTitle ) => setAttributes( { title: newTitle } ); - - const style = { - ...( - backgroundType === IMAGE_BACKGROUND_TYPE ? - backgroundImageStyles( url ) : - {} - ), - backgroundColor: overlayColor.color, - }; - - if ( focalPoint ) { - style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`; - } - - const controls = ( - - - { !! url && ( - - { - setAttributes( { contentAlign: nextAlign } ); - } } - /> - - - ( - - ) } - /> - - - - ) } - - { !! url && ( - - - { IMAGE_BACKGROUND_TYPE === backgroundType && ( - - ) } - { IMAGE_BACKGROUND_TYPE === backgroundType && ! hasParallax && ( - setAttributes( { focalPoint: value } ) } - /> - ) } - - - - - - ) } - - ); - - if ( ! url ) { - const hasTitle = ! RichText.isEmpty( title ); - const placeholderIcon = hasTitle ? undefined : ; - const label = hasTitle ? ( - - ) : __( 'Cover' ); - - return ( - - { controls } - - - ); - } - - const classes = classnames( - className, - contentAlign !== 'center' && `has-${ contentAlign }-content`, - dimRatioToClass( dimRatio ), - { - 'has-background-dim': dimRatio !== 0, - 'has-parallax': hasParallax, - } - ); - - return ( - - { controls } -
- { VIDEO_BACKGROUND_TYPE === backgroundType && ( -
- - ); - } - ), - save( { attributes } ) { const { backgroundType, - contentAlign, customOverlayColor, dimRatio, focalPoint, hasParallax, overlayColor, - title, url, } = attributes; const overlayColorClass = getColorClassName( 'background-color', overlayColor ); @@ -414,7 +163,6 @@ export const settings = { { 'has-background-dim': dimRatio !== 0, 'has-parallax': hasParallax, - [ `has-${ contentAlign }-content` ]: contentAlign !== 'center', }, ); @@ -427,16 +175,109 @@ export const settings = { loop src={ url } /> ) } - { ! RichText.isEmpty( title ) && ( - - ) } +
+ +
); }, + edit: CoverEdit, deprecated: [ { attributes: { ...blockAttributes, + title: { + type: 'string', + source: 'html', + selector: 'p', + }, + contentAlign: { + type: 'string', + default: 'center', + }, + }, + + supports: { + align: true, + }, + + save( { attributes } ) { + const { + backgroundType, + contentAlign, + customOverlayColor, + dimRatio, + focalPoint, + hasParallax, + overlayColor, + title, + url, + } = attributes; + const overlayColorClass = getColorClassName( 'background-color', overlayColor ); + const style = backgroundType === IMAGE_BACKGROUND_TYPE ? + backgroundImageStyles( url ) : + {}; + if ( ! overlayColorClass ) { + style.backgroundColor = customOverlayColor; + } + if ( focalPoint && ! hasParallax ) { + style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`; + } + + const classes = classnames( + dimRatioToClass( dimRatio ), + overlayColorClass, + { + 'has-background-dim': dimRatio !== 0, + 'has-parallax': hasParallax, + [ `has-${ contentAlign }-content` ]: contentAlign !== 'center', + }, + ); + + return ( +
+ { VIDEO_BACKGROUND_TYPE === backgroundType && url && (
+ ); + }, + + migrate( attributes ) { + return [ + omit( attributes, [ 'title', 'contentAlign' ] ), + [ + createBlock( + 'core/paragraph', + { + content: attributes.title, + align: attributes.contentAlign, + fontSize: 'large', + placeholder: __( 'Write title…' ), + } + ), + ], + ]; + }, + }, { + attributes: { + ...blockAttributes, + title: { + type: 'string', + source: 'html', + selector: 'p', + }, + contentAlign: { + type: 'string', + default: 'center', + }, align: { type: 'string', }, @@ -485,6 +326,10 @@ export const settings = { source: 'html', selector: 'h2', }, + contentAlign: { + type: 'string', + default: 'center', + }, }, save( { attributes } ) { @@ -507,15 +352,3 @@ export const settings = { }, } ], }; - -function dimRatioToClass( ratio ) { - return ( ratio === 0 || ratio === 50 ) ? - null : - 'has-background-dim-' + ( 10 * Math.round( ratio / 10 ) ); -} - -function backgroundImageStyles( url ) { - return url ? - { backgroundImage: `url(${ url })` } : - {}; -} diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 5e35c6d8ff809..c11243504016a 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -110,6 +110,23 @@ &.alignright { display: flex; } + + .wp-block-cover__inner-container { + width: calc(100% - 70px); + z-index: z-index(".wp-block-cover__inner-container"); + color: $light-gray-100; + } + + p, + h1, + h2, + h3, + h4, + h5, + h6, + .wp-block-subhead { + color: inherit; + } } .wp-block-cover__video-background { diff --git a/packages/e2e-tests/fixtures/blocks/core__cover.html b/packages/e2e-tests/fixtures/blocks/core__cover.html index ae26d922c2644..a95fdd0d43f78 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover.html +++ b/packages/e2e-tests/fixtures/blocks/core__cover.html @@ -1,5 +1,14 @@ - -
-

Guten Berg!

+ +
+
+ +

+ Guten Berg! +

+ +
- + diff --git a/packages/e2e-tests/fixtures/blocks/core__cover.json b/packages/e2e-tests/fixtures/blocks/core__cover.json index dea09d92c11c8..8dfaaf80485a8 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover.json +++ b/packages/e2e-tests/fixtures/blocks/core__cover.json @@ -4,14 +4,27 @@ "name": "core/cover", "isValid": true, "attributes": { - "title": "Guten Berg!", "url": "https://cldup.com/uuUqE_dXzy.jpg", - "contentAlign": "center", "hasParallax": false, "dimRatio": 40, "backgroundType": "image" }, - "innerBlocks": [], - "originalContent": "
\n

Guten Berg!

\n
" + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "\n\t\t\tGuten Berg!\n\t\t", + "align": "center", + "dropCap": false, + "placeholder": "Write title…", + "fontSize": "large" + }, + "innerBlocks": [], + "originalContent": "

\n\t\t\tGuten Berg!\n\t\t

" + } + ], + "originalContent": "\n\t
\n\t\t\n\t
\n
" } ] diff --git a/packages/e2e-tests/fixtures/blocks/core__cover.parsed.json b/packages/e2e-tests/fixtures/blocks/core__cover.parsed.json index 14f37b617067b..116012372ec34 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover.parsed.json +++ b/packages/e2e-tests/fixtures/blocks/core__cover.parsed.json @@ -5,10 +5,26 @@ "url": "https://cldup.com/uuUqE_dXzy.jpg", "dimRatio": 40 }, - "innerBlocks": [], - "innerHTML": "\n
\n

Guten Berg!

\n
\n", + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "align": "center", + "placeholder": "Write title…", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "\n\t\t

\n\t\t\tGuten Berg!\n\t\t

\n\t\t", + "innerContent": [ + "\n\t\t

\n\t\t\tGuten Berg!\n\t\t

\n\t\t" + ] + } + ], + "innerHTML": "\n\n\t
\n\t\t\n\t
\n\n", "innerContent": [ - "\n
\n

Guten Berg!

\n
\n" + "\n\n\t
\n\t\t", + null, + "\n\t
\n\n" ] }, { diff --git a/packages/e2e-tests/fixtures/blocks/core__cover.serialized.html b/packages/e2e-tests/fixtures/blocks/core__cover.serialized.html index a6d795bb56175..306a5a740160a 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__cover.serialized.html @@ -1,3 +1,7 @@ -

Guten Berg!

+
+

+ Guten Berg! +

+
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.html b/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.html index 2a3530954f29b..1eb26c9730be6 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.html +++ b/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.html @@ -1,6 +1,22 @@ -
- -

Guten Berg!

+
+ +
+ +

+ Guten Berg! +

+ +
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.json b/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.json index 08f0de4eb4c15..36298998345e8 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.json +++ b/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.json @@ -4,15 +4,28 @@ "name": "core/cover", "isValid": true, "attributes": { - "title": "Guten Berg!", "url": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=", - "contentAlign": "center", "hasParallax": false, "dimRatio": 10, "customOverlayColor": "#3615d9", "backgroundType": "video" }, - "innerBlocks": [], - "originalContent": "
\n\t\n\t

Guten Berg!

\n
" + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "\n\t\t\tGuten Berg!\n\t\t", + "align": "center", + "dropCap": false, + "placeholder": "Write title…", + "fontSize": "large" + }, + "innerBlocks": [], + "originalContent": "

\n\t\t\tGuten Berg!\n\t\t

" + } + ], + "originalContent": "\n\t\n\t\n\t
\n\t\t\n\t
\n
" } ] diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.parsed.json b/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.parsed.json index a2a3ccc94a713..4b72e0d4148e7 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.parsed.json +++ b/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.parsed.json @@ -7,10 +7,26 @@ "customOverlayColor": "#3615d9", "backgroundType": "video" }, - "innerBlocks": [], - "innerHTML": "\n
\n\t\n\t

Guten Berg!

\n
\n", + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "align": "center", + "placeholder": "Write title…", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "\n\t\t

\n\t\t\tGuten Berg!\n\t\t

\n\t\t", + "innerContent": [ + "\n\t\t

\n\t\t\tGuten Berg!\n\t\t

\n\t\t" + ] + } + ], + "innerHTML": "\n\n\t\n\t\n\t
\n\t\t\n\t
\n\n", "innerContent": [ - "\n
\n\t\n\t

Guten Berg!

\n
\n" + "\n\n\t\n\t\n\t
\n\t\t", + null, + "\n\t
\n\n" ] }, { diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.serialized.html b/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.serialized.html index 14786a0f0d189..831388b0182b8 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__cover__video-overlay.serialized.html @@ -1,3 +1,7 @@ -

Guten Berg!

+
+

+ Guten Berg! +

+
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__video.html b/packages/e2e-tests/fixtures/blocks/core__cover__video.html index 0ab2fd73ccdf8..eb50abcb28cf3 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover__video.html +++ b/packages/e2e-tests/fixtures/blocks/core__cover__video.html @@ -1,6 +1,21 @@ -
- -

Guten Berg!

+
+ +
+ +

+ Guten Berg! +

+ +
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__video.json b/packages/e2e-tests/fixtures/blocks/core__cover__video.json index 1fa4d25d66cda..4c05b5f2f0c1f 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover__video.json +++ b/packages/e2e-tests/fixtures/blocks/core__cover__video.json @@ -4,14 +4,27 @@ "name": "core/cover", "isValid": true, "attributes": { - "title": "Guten Berg!", "url": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=", - "contentAlign": "center", "hasParallax": false, "dimRatio": 40, "backgroundType": "video" }, - "innerBlocks": [], - "originalContent": "
\n\t\n\t

Guten Berg!

\n
" + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "\n\t\t\tGuten Berg!\n\t\t", + "align": "center", + "dropCap": false, + "placeholder": "Write title…", + "fontSize": "large" + }, + "innerBlocks": [], + "originalContent": "

\n\t\t\tGuten Berg!\n\t\t

" + } + ], + "originalContent": "\n\t\n\t\n\t
\n\t\t\n\t
\n
" } ] diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__video.parsed.json b/packages/e2e-tests/fixtures/blocks/core__cover__video.parsed.json index a864b5fea344e..c48b676a2f1c5 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover__video.parsed.json +++ b/packages/e2e-tests/fixtures/blocks/core__cover__video.parsed.json @@ -6,10 +6,26 @@ "dimRatio": 40, "backgroundType": "video" }, - "innerBlocks": [], - "innerHTML": "\n
\n\t\n\t

Guten Berg!

\n
\n", + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "align": "center", + "placeholder": "Write title…", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "\n\t\t

\n\t\t\tGuten Berg!\n\t\t

\n\t\t", + "innerContent": [ + "\n\t\t

\n\t\t\tGuten Berg!\n\t\t

\n\t\t" + ] + } + ], + "innerHTML": "\n\n\t\n\t\n\t
\n\t\t\n\t
\n\n", "innerContent": [ - "\n
\n\t\n\t

Guten Berg!

\n
\n" + "\n\n\t\n\t\n\t
\n\t\t", + null, + "\n\t
\n\n" ] }, { diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__video.serialized.html b/packages/e2e-tests/fixtures/blocks/core__cover__video.serialized.html index 03398311e20f6..5f23cddf2fa1c 100644 --- a/packages/e2e-tests/fixtures/blocks/core__cover__video.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__cover__video.serialized.html @@ -1,3 +1,7 @@ -

Guten Berg!

+
+

+ Guten Berg! +

+
diff --git a/packages/editor/src/components/block-mover/style.scss b/packages/editor/src/components/block-mover/style.scss index 39a908806ad5b..be9ddeab9c1b1 100644 --- a/packages/editor/src/components/block-mover/style.scss +++ b/packages/editor/src/components/block-mover/style.scss @@ -43,7 +43,8 @@ } // Nested movers have a background, so don't invert the colors there. - .is-dark-theme .wp-block .wp-block & { + .is-dark-theme .wp-block .wp-block &, + .wp-block .is-dark-theme .wp-block & { color: $dark-opacity-300; } @@ -79,7 +80,8 @@ } // Nested movers have a background, so don't invert the colors there. - .is-dark-theme .wp-block .wp-block & { + .is-dark-theme .wp-block .wp-block &, + .wp-block .is-dark-theme .wp-block & { color: $dark-opacity-500; } } diff --git a/post-content.php b/post-content.php index 45684cb6b0d2a..032c4ad10be6a 100644 --- a/post-content.php +++ b/post-content.php @@ -6,8 +6,10 @@ */ ?> - -

+ +
+

+