From ac4d309b8a5d4988d1ec1c4e8ff73c48f67381c6 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 9 Jan 2023 10:10:46 +0100 Subject: [PATCH] Cover block: add HTML element selection --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/cover/block.json | 4 + .../block-library/src/cover/deprecated.js | 179 +++++++++++++++++- .../block-library/src/cover/edit/index.js | 9 +- .../src/cover/edit/inspector-controls.js | 43 +++++ packages/block-library/src/cover/save.js | 5 +- .../fixtures/blocks/core__cover.json | 3 +- .../blocks/core__cover__deprecated-1.json | 3 +- .../blocks/core__cover__deprecated-10.json | 3 +- .../blocks/core__cover__deprecated-2.json | 3 +- .../blocks/core__cover__deprecated-3.json | 3 +- .../blocks/core__cover__deprecated-4.json | 3 +- .../blocks/core__cover__deprecated-5.json | 3 +- .../blocks/core__cover__deprecated-6.json | 9 +- .../blocks/core__cover__deprecated-7.json | 3 +- .../blocks/core__cover__deprecated-8.json | 3 +- .../blocks/core__cover__deprecated-9.json | 3 +- ...core__cover__duotone-fixed-background.json | 1 + .../blocks/core__cover__gradient-custom.json | 3 +- .../blocks/core__cover__gradient-image.json | 3 +- .../blocks/core__cover__gradient-video.json | 3 +- .../blocks/core__cover__gradient.json | 3 +- .../core__cover__gradient__deprecated-8.json | 3 +- .../blocks/core__cover__solid-color.json | 3 +- .../blocks/core__cover__video-overlay.json | 3 +- .../fixtures/blocks/core__cover__video.json | 3 +- 26 files changed, 272 insertions(+), 34 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 25fe5746a04122..09fa09f7dc28a5 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -231,7 +231,7 @@ Add an image or video with a text overlay — great for headers. ([Source](https - **Name:** core/cover - **Category:** media - **Supports:** align, anchor, color (~~background~~, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, templateLock, url, useFeaturedImage +- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage ## Embed diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 1982ecc44853ea..3bcc779a0f1274 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -74,6 +74,10 @@ "templateLock": { "type": [ "string", "boolean" ], "enum": [ "all", "insert", "contentOnly", false ] + }, + "tagName": { + "type": "string", + "default": "div" } }, "usesContext": [ "postId", "postType" ], diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js index 328aeb9e7796a4..7212af5c5cdc91 100644 --- a/packages/block-library/src/cover/deprecated.js +++ b/packages/block-library/src/cover/deprecated.js @@ -16,6 +16,7 @@ import { useInnerBlocksProps, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies @@ -26,6 +27,7 @@ import { getPositionClassName, isContentPositionCenter, dimRatioToClass, + mediaPosition, } from './shared'; function backgroundImageStyles( url ) { @@ -53,6 +55,18 @@ function migrateDimRatio( attributes ) { }; } +function migrateTag( attributes ) { + if ( ! attributes.tagName ) { + attributes = { + ...attributes, + tagName: 'div', + }; + } + return { + ...attributes, + }; +} + const blockAttributes = { url: { type: 'string', @@ -168,6 +182,155 @@ const v7toV10BlockSupports = { }, }; +// Deprecation for blocks that does not have a HTML tag option. +const v11 = { + attributes: v8ToV10BlockAttributes, + supports: v7toV10BlockSupports, + save( { attributes } ) { + const { + backgroundType, + gradient, + contentPosition, + customGradient, + customOverlayColor, + dimRatio, + focalPoint, + useFeaturedImage, + hasParallax, + isDark, + isRepeated, + overlayColor, + url, + alt, + id, + minHeight: minHeightProp, + minHeightUnit, + } = attributes; + const overlayColorClass = getColorClassName( + 'background-color', + overlayColor + ); + const gradientClass = __experimentalGetGradientClass( gradient ); + const minHeight = + minHeightProp && minHeightUnit + ? `${ minHeightProp }${ minHeightUnit }` + : minHeightProp; + + const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType; + const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType; + + const isImgElement = ! ( hasParallax || isRepeated ); + + const style = { + minHeight: minHeight || undefined, + }; + + const bgStyle = { + backgroundColor: ! overlayColorClass + ? customOverlayColor + : undefined, + background: customGradient ? customGradient : undefined, + }; + + const objectPosition = + // prettier-ignore + focalPoint && isImgElement + ? mediaPosition(focalPoint) + : undefined; + + const backgroundImage = url ? `url(${ url })` : undefined; + + const backgroundPosition = mediaPosition( focalPoint ); + + const classes = classnames( + { + 'is-light': ! isDark, + 'has-parallax': hasParallax, + 'is-repeated': isRepeated, + 'has-custom-content-position': + ! isContentPositionCenter( contentPosition ), + }, + getPositionClassName( contentPosition ) + ); + + const imgClasses = classnames( + 'wp-block-cover__image-background', + id ? `wp-image-${ id }` : null, + { + 'has-parallax': hasParallax, + 'is-repeated': isRepeated, + } + ); + + const gradientValue = gradient || customGradient; + + return ( +
+
); }, + migrate: migrateTag, }; const v7 = { @@ -707,7 +872,7 @@ const v7 = { ); }, - migrate: migrateDimRatio, + migrate: compose( migrateDimRatio, migrateTag ), }; const v6 = { @@ -840,7 +1005,7 @@ const v6 = { ); }, - migrate: migrateDimRatio, + migrate: compose( migrateDimRatio, migrateTag ), }; const v5 = { @@ -937,7 +1102,7 @@ const v5 = { ); }, - migrate: migrateDimRatio, + migrate: compose( migrateDimRatio, migrateTag ), }; const v4 = { @@ -1034,7 +1199,7 @@ const v4 = { ); }, - migrate: migrateDimRatio, + migrate: compose( migrateDimRatio, migrateTag ), }; const v3 = { @@ -1117,6 +1282,7 @@ const v3 = { const newAttribs = { ...attributes, dimRatio: ! attributes.url ? 100 : attributes.dimRatio, + tagName: ! attributes.tagName ? 'div' : attributes.tagName, }; const { title, contentAlign, ...restAttributes } = newAttribs; @@ -1202,6 +1368,7 @@ const v2 = { const newAttribs = { ...attributes, dimRatio: ! attributes.url ? 100 : attributes.dimRatio, + tagName: ! attributes.tagName ? 'div' : attributes.tagName, }; const { title, contentAlign, align, ...restAttributes } = newAttribs; @@ -1262,8 +1429,8 @@ const v1 = { const newAttribs = { ...attributes, dimRatio: ! attributes.url ? 100 : attributes.dimRatio, + tagName: ! attributes.tagName ? 'div' : attributes.tagName, }; - const { title, contentAlign, align, ...restAttributes } = newAttribs; return [ @@ -1280,4 +1447,4 @@ const v1 = { }, }; -export default [ v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ]; +export default [ v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ]; diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 88f97297a5d93d..de491582f724ed 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -94,6 +94,7 @@ function CoverEdit( { alt, allowedBlocks, templateLock, + tagName: TagName = 'div', } = attributes; const [ featuredImage ] = useEntityProp( @@ -247,7 +248,7 @@ function CoverEdit( { <> { blockControls } { inspectorControls } -
-
+ ); } @@ -308,7 +309,7 @@ function CoverEdit( { <> { blockControls } { inspectorControls } -
-
+ ); } diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 332f3f6f614cea..a5513bd4865f7c 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -11,6 +11,7 @@ import { RangeControl, TextareaControl, ToggleControl, + SelectControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalUnitControl as UnitControl, @@ -102,6 +103,7 @@ export default function CoverInspectorControls( { minHeight, minHeightUnit, alt, + tagName, } = attributes; const { isVideoBackground, @@ -140,6 +142,27 @@ export default function CoverInspectorControls( { const colorGradientSettings = useMultipleOriginColorsAndGradients(); + const htmlElementMessages = { + header: __( + 'The
element should represent introductory content, typically a group of introductory or navigational aids.' + ), + main: __( + 'The
element should be used for the primary content of your document only. ' + ), + section: __( + "The
element should represent a standalone portion of the document that can't be better represented by another element." + ), + article: __( + 'The
element should represent a self-contained, syndicatable portion of the document.' + ), + aside: __( + "The