@wordpress/block-library
Version:
Block library for the WordPress editor.
1,562 lines (1,552 loc) • 47 kB
JavaScript
/**
* External dependencies
*/
import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { createBlock } from '@wordpress/blocks';
import { RichText, getColorClassName, InnerBlocks, __experimentalGetGradientClass, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE, getPositionClassName, isContentPositionCenter, dimRatioToClass, mediaPosition } from './shared';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function backgroundImageStyles(url) {
return url ? {
backgroundImage: `url(${url})`
} : {};
}
/**
* Original function to determine the background opacity classname
*
* Used in deprecations: v1-7.
*
* @param {number} ratio ratio to use for opacity.
* @return {string} background opacity class .
*/
function dimRatioToClassV1(ratio) {
return ratio === 0 || ratio === 50 || !ratio ? null : 'has-background-dim-' + 10 * Math.round(ratio / 10);
}
function migrateDimRatio(attributes) {
return {
...attributes,
dimRatio: !attributes.url ? 100 : attributes.dimRatio
};
}
function migrateTag(attributes) {
if (!attributes.tagName) {
attributes = {
...attributes,
tagName: 'div'
};
}
return {
...attributes
};
}
const blockAttributes = {
url: {
type: 'string'
},
id: {
type: 'number'
},
hasParallax: {
type: 'boolean',
default: false
},
dimRatio: {
type: 'number',
default: 50
},
overlayColor: {
type: 'string'
},
customOverlayColor: {
type: 'string'
},
backgroundType: {
type: 'string',
default: 'image'
},
focalPoint: {
type: 'object'
}
};
const v8ToV11BlockAttributes = {
url: {
type: 'string'
},
id: {
type: 'number'
},
alt: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'alt',
default: ''
},
hasParallax: {
type: 'boolean',
default: false
},
isRepeated: {
type: 'boolean',
default: false
},
dimRatio: {
type: 'number',
default: 100
},
overlayColor: {
type: 'string'
},
customOverlayColor: {
type: 'string'
},
backgroundType: {
type: 'string',
default: 'image'
},
focalPoint: {
type: 'object'
},
minHeight: {
type: 'number'
},
minHeightUnit: {
type: 'string'
},
gradient: {
type: 'string'
},
customGradient: {
type: 'string'
},
contentPosition: {
type: 'string'
},
isDark: {
type: 'boolean',
default: true
},
allowedBlocks: {
type: 'array'
},
templateLock: {
type: ['string', 'boolean'],
enum: ['all', 'insert', false]
}
};
const v12toV13BlockAttributes = {
...v8ToV11BlockAttributes,
useFeaturedImage: {
type: 'boolean',
default: false
},
tagName: {
type: 'string',
default: 'div'
}
};
const v14BlockAttributes = {
...v12toV13BlockAttributes,
isUserOverlayColor: {
type: 'boolean'
},
sizeSlug: {
type: 'string'
},
alt: {
type: 'string',
default: ''
}
};
const v7toV11BlockSupports = {
anchor: true,
align: true,
html: false,
spacing: {
padding: true,
__experimentalDefaultControls: {
padding: true
}
},
color: {
__experimentalDuotone: '> .wp-block-cover__image-background, > .wp-block-cover__video-background',
text: false,
background: false
}
};
const v12BlockSupports = {
...v7toV11BlockSupports,
spacing: {
padding: true,
margin: ['top', 'bottom'],
blockGap: true,
__experimentalDefaultControls: {
padding: true,
blockGap: true
}
},
__experimentalBorder: {
color: true,
radius: true,
style: true,
width: true,
__experimentalDefaultControls: {
color: true,
radius: true,
style: true,
width: true
}
},
color: {
__experimentalDuotone: '> .wp-block-cover__image-background, > .wp-block-cover__video-background',
heading: true,
text: true,
background: false,
__experimentalSkipSerialization: ['gradients'],
enableContrastChecker: false
},
typography: {
fontSize: true,
lineHeight: true,
__experimentalFontFamily: true,
__experimentalFontWeight: true,
__experimentalFontStyle: true,
__experimentalTextTransform: true,
__experimentalTextDecoration: true,
__experimentalLetterSpacing: true,
__experimentalDefaultControls: {
fontSize: true
}
},
layout: {
allowJustification: false
}
};
const v14BlockSupports = {
...v12BlockSupports,
shadow: true,
dimensions: {
aspectRatio: true
},
interactivity: {
clientNavigation: true
}
};
// Deprecation for blocks that have z-index.
const v14 = {
attributes: v14BlockAttributes,
supports: v14BlockSupports,
save({
attributes
}) {
const {
backgroundType,
gradient,
contentPosition,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
useFeaturedImage,
hasParallax,
isDark,
isRepeated,
overlayColor,
url,
alt,
id,
minHeight: minHeightProp,
minHeightUnit,
tagName: Tag,
sizeSlug
} = 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 = clsx({
'is-light': !isDark,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
'has-custom-content-position': !isContentPositionCenter(contentPosition)
}, getPositionClassName(contentPosition));
const imgClasses = clsx('wp-block-cover__image-background', id ? `wp-image-${id}` : null, {
[`size-${sizeSlug}`]: sizeSlug,
'has-parallax': hasParallax,
'is-repeated': isRepeated
});
const gradientValue = gradient || customGradient;
return /*#__PURE__*/_jsxs(Tag, {
...useBlockProps.save({
className: classes,
style
}),
children: [/*#__PURE__*/_jsx("span", {
"aria-hidden": "true",
className: clsx('wp-block-cover__background', overlayColorClass, dimRatioToClass(dimRatio), {
'has-background-dim': dimRatio !== undefined,
// For backwards compatibility. Former versions of the Cover Block applied
// `.wp-block-cover__gradient-background` in the presence of
// media, a gradient and a dim.
'wp-block-cover__gradient-background': url && gradientValue && dimRatio !== 0,
'has-background-gradient': gradientValue,
[gradientClass]: gradientClass
}),
style: bgStyle
}), !useFeaturedImage && isImageBackground && url && (isImgElement ? /*#__PURE__*/_jsx("img", {
className: imgClasses,
alt: alt,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}) : /*#__PURE__*/_jsx("div", {
role: alt ? 'img' : undefined,
"aria-label": alt ? alt : undefined,
className: imgClasses,
style: {
backgroundPosition,
backgroundImage
}
})), isVideoBackground && url && /*#__PURE__*/_jsx("video", {
className: clsx('wp-block-cover__video-background', 'intrinsic-ignore'),
autoPlay: true,
muted: true,
loop: true,
playsInline: true,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), /*#__PURE__*/_jsx("div", {
...useInnerBlocksProps.save({
className: 'wp-block-cover__inner-container'
})
})]
});
}
};
// Deprecation for blocks that does not have the aria-label when the image background is fixed or repeated.
const v13 = {
attributes: v12toV13BlockAttributes,
supports: v12BlockSupports,
save({
attributes
}) {
const {
backgroundType,
gradient,
contentPosition,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
useFeaturedImage,
hasParallax,
isDark,
isRepeated,
overlayColor,
url,
alt,
id,
minHeight: minHeightProp,
minHeightUnit,
tagName: Tag
} = 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 = clsx({
'is-light': !isDark,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
'has-custom-content-position': !isContentPositionCenter(contentPosition)
}, getPositionClassName(contentPosition));
const imgClasses = clsx('wp-block-cover__image-background', id ? `wp-image-${id}` : null, {
'has-parallax': hasParallax,
'is-repeated': isRepeated
});
const gradientValue = gradient || customGradient;
return /*#__PURE__*/_jsxs(Tag, {
...useBlockProps.save({
className: classes,
style
}),
children: [/*#__PURE__*/_jsx("span", {
"aria-hidden": "true",
className: clsx('wp-block-cover__background', overlayColorClass, dimRatioToClass(dimRatio), {
'has-background-dim': dimRatio !== undefined,
// For backwards compatibility. Former versions of the Cover Block applied
// `.wp-block-cover__gradient-background` in the presence of
// media, a gradient and a dim.
'wp-block-cover__gradient-background': url && gradientValue && dimRatio !== 0,
'has-background-gradient': gradientValue,
[gradientClass]: gradientClass
}),
style: bgStyle
}), !useFeaturedImage && isImageBackground && url && (isImgElement ? /*#__PURE__*/_jsx("img", {
className: imgClasses,
alt: alt,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}) : /*#__PURE__*/_jsx("div", {
role: "img",
className: imgClasses,
style: {
backgroundPosition,
backgroundImage
}
})), isVideoBackground && url && /*#__PURE__*/_jsx("video", {
className: clsx('wp-block-cover__video-background', 'intrinsic-ignore'),
autoPlay: true,
muted: true,
loop: true,
playsInline: true,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), /*#__PURE__*/_jsx("div", {
...useInnerBlocksProps.save({
className: 'wp-block-cover__inner-container'
})
})]
});
}
};
// Deprecation for blocks to prevent auto overlay color from overriding previously set values.
const v12 = {
attributes: v12toV13BlockAttributes,
supports: v12BlockSupports,
isEligible(attributes) {
return (attributes.customOverlayColor !== undefined || attributes.overlayColor !== undefined) && attributes.isUserOverlayColor === undefined;
},
migrate(attributes) {
return {
...attributes,
isUserOverlayColor: true
};
},
save({
attributes
}) {
const {
backgroundType,
gradient,
contentPosition,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
useFeaturedImage,
hasParallax,
isDark,
isRepeated,
overlayColor,
url,
alt,
id,
minHeight: minHeightProp,
minHeightUnit,
tagName: Tag
} = 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 = clsx({
'is-light': !isDark,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
'has-custom-content-position': !isContentPositionCenter(contentPosition)
}, getPositionClassName(contentPosition));
const imgClasses = clsx('wp-block-cover__image-background', id ? `wp-image-${id}` : null, {
'has-parallax': hasParallax,
'is-repeated': isRepeated
});
const gradientValue = gradient || customGradient;
return /*#__PURE__*/_jsxs(Tag, {
...useBlockProps.save({
className: classes,
style
}),
children: [/*#__PURE__*/_jsx("span", {
"aria-hidden": "true",
className: clsx('wp-block-cover__background', overlayColorClass, dimRatioToClass(dimRatio), {
'has-background-dim': dimRatio !== undefined,
// For backwards compatibility. Former versions of the Cover Block applied
// `.wp-block-cover__gradient-background` in the presence of
// media, a gradient and a dim.
'wp-block-cover__gradient-background': url && gradientValue && dimRatio !== 0,
'has-background-gradient': gradientValue,
[gradientClass]: gradientClass
}),
style: bgStyle
}), !useFeaturedImage && isImageBackground && url && (isImgElement ? /*#__PURE__*/_jsx("img", {
className: imgClasses,
alt: alt,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}) : /*#__PURE__*/_jsx("div", {
role: "img",
className: imgClasses,
style: {
backgroundPosition,
backgroundImage
}
})), isVideoBackground && url && /*#__PURE__*/_jsx("video", {
className: clsx('wp-block-cover__video-background', 'intrinsic-ignore'),
autoPlay: true,
muted: true,
loop: true,
playsInline: true,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), /*#__PURE__*/_jsx("div", {
...useInnerBlocksProps.save({
className: 'wp-block-cover__inner-container'
})
})]
});
}
};
// Deprecation for blocks that does not have a HTML tag option.
const v11 = {
attributes: v8ToV11BlockAttributes,
supports: v7toV11BlockSupports,
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 = clsx({
'is-light': !isDark,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
'has-custom-content-position': !isContentPositionCenter(contentPosition)
}, getPositionClassName(contentPosition));
const imgClasses = clsx('wp-block-cover__image-background', id ? `wp-image-${id}` : null, {
'has-parallax': hasParallax,
'is-repeated': isRepeated
});
const gradientValue = gradient || customGradient;
return /*#__PURE__*/_jsxs("div", {
...useBlockProps.save({
className: classes,
style
}),
children: [/*#__PURE__*/_jsx("span", {
"aria-hidden": "true",
className: clsx('wp-block-cover__background', overlayColorClass, dimRatioToClass(dimRatio), {
'has-background-dim': dimRatio !== undefined,
// For backwards compatibility. Former versions of the Cover Block applied
// `.wp-block-cover__gradient-background` in the presence of
// media, a gradient and a dim.
'wp-block-cover__gradient-background': url && gradientValue && dimRatio !== 0,
'has-background-gradient': gradientValue,
[gradientClass]: gradientClass
}),
style: bgStyle
}), !useFeaturedImage && isImageBackground && url && (isImgElement ? /*#__PURE__*/_jsx("img", {
className: imgClasses,
alt: alt,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}) : /*#__PURE__*/_jsx("div", {
role: "img",
className: imgClasses,
style: {
backgroundPosition,
backgroundImage
}
})), isVideoBackground && url && /*#__PURE__*/_jsx("video", {
className: clsx('wp-block-cover__video-background', 'intrinsic-ignore'),
autoPlay: true,
muted: true,
loop: true,
playsInline: true,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), /*#__PURE__*/_jsx("div", {
...useInnerBlocksProps.save({
className: 'wp-block-cover__inner-container'
})
})]
});
},
migrate: migrateTag
};
// Deprecation for blocks that renders fixed background as background from the main block container.
const v10 = {
attributes: v8ToV11BlockAttributes,
supports: v7toV11BlockSupports,
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 = {
...(isImageBackground && !isImgElement && !useFeaturedImage ? backgroundImageStyles(url) : {}),
minHeight: minHeight || undefined
};
const bgStyle = {
backgroundColor: !overlayColorClass ? customOverlayColor : undefined,
background: customGradient ? customGradient : undefined
};
const objectPosition =
// prettier-ignore
focalPoint && isImgElement ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : undefined;
const classes = clsx({
'is-light': !isDark,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
'has-custom-content-position': !isContentPositionCenter(contentPosition)
}, getPositionClassName(contentPosition));
const gradientValue = gradient || customGradient;
return /*#__PURE__*/_jsxs("div", {
...useBlockProps.save({
className: classes,
style
}),
children: [/*#__PURE__*/_jsx("span", {
"aria-hidden": "true",
className: clsx('wp-block-cover__background', overlayColorClass, dimRatioToClass(dimRatio), {
'has-background-dim': dimRatio !== undefined,
// For backwards compatibility. Former versions of the Cover Block applied
// `.wp-block-cover__gradient-background` in the presence of
// media, a gradient and a dim.
'wp-block-cover__gradient-background': url && gradientValue && dimRatio !== 0,
'has-background-gradient': gradientValue,
[gradientClass]: gradientClass
}),
style: bgStyle
}), !useFeaturedImage && isImageBackground && isImgElement && url && /*#__PURE__*/_jsx("img", {
className: clsx('wp-block-cover__image-background', id ? `wp-image-${id}` : null),
alt: alt,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), isVideoBackground && url && /*#__PURE__*/_jsx("video", {
className: clsx('wp-block-cover__video-background', 'intrinsic-ignore'),
autoPlay: true,
muted: true,
loop: true,
playsInline: true,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), /*#__PURE__*/_jsx("div", {
...useInnerBlocksProps.save({
className: 'wp-block-cover__inner-container'
})
})]
});
},
migrate: migrateTag
};
// Deprecation for blocks with `minHeightUnit` set but no `minHeight`.
const v9 = {
attributes: v8ToV11BlockAttributes,
supports: v7toV11BlockSupports,
save({
attributes
}) {
const {
backgroundType,
gradient,
contentPosition,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
hasParallax,
isDark,
isRepeated,
overlayColor,
url,
alt,
id,
minHeight: minHeightProp,
minHeightUnit
} = attributes;
const overlayColorClass = getColorClassName('background-color', overlayColor);
const gradientClass = __experimentalGetGradientClass(gradient);
const minHeight = minHeightUnit ? `${minHeightProp}${minHeightUnit}` : minHeightProp;
const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
const isImgElement = !(hasParallax || isRepeated);
const style = {
...(isImageBackground && !isImgElement ? backgroundImageStyles(url) : {}),
minHeight: minHeight || undefined
};
const bgStyle = {
backgroundColor: !overlayColorClass ? customOverlayColor : undefined,
background: customGradient ? customGradient : undefined
};
const objectPosition =
// prettier-ignore
focalPoint && isImgElement ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : undefined;
const classes = clsx({
'is-light': !isDark,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
'has-custom-content-position': !isContentPositionCenter(contentPosition)
}, getPositionClassName(contentPosition));
const gradientValue = gradient || customGradient;
return /*#__PURE__*/_jsxs("div", {
...useBlockProps.save({
className: classes,
style
}),
children: [/*#__PURE__*/_jsx("span", {
"aria-hidden": "true",
className: clsx('wp-block-cover__background', overlayColorClass, dimRatioToClass(dimRatio), {
'has-background-dim': dimRatio !== undefined,
// For backwards compatibility. Former versions of the Cover Block applied
// `.wp-block-cover__gradient-background` in the presence of
// media, a gradient and a dim.
'wp-block-cover__gradient-background': url && gradientValue && dimRatio !== 0,
'has-background-gradient': gradientValue,
[gradientClass]: gradientClass
}),
style: bgStyle
}), isImageBackground && isImgElement && url && /*#__PURE__*/_jsx("img", {
className: clsx('wp-block-cover__image-background', id ? `wp-image-${id}` : null),
alt: alt,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), isVideoBackground && url && /*#__PURE__*/_jsx("video", {
className: clsx('wp-block-cover__video-background', 'intrinsic-ignore'),
autoPlay: true,
muted: true,
loop: true,
playsInline: true,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), /*#__PURE__*/_jsx("div", {
...useInnerBlocksProps.save({
className: 'wp-block-cover__inner-container'
})
})]
});
},
migrate: migrateTag
};
// v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
const v8 = {
attributes: v8ToV11BlockAttributes,
supports: v7toV11BlockSupports,
save({
attributes
}) {
const {
backgroundType,
gradient,
contentPosition,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
hasParallax,
isDark,
isRepeated,
overlayColor,
url,
alt,
id,
minHeight: minHeightProp,
minHeightUnit
} = attributes;
const overlayColorClass = getColorClassName('background-color', overlayColor);
const gradientClass = __experimentalGetGradientClass(gradient);
const minHeight = minHeightUnit ? `${minHeightProp}${minHeightUnit}` : minHeightProp;
const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
const isImgElement = !(hasParallax || isRepeated);
const style = {
...(isImageBackground && !isImgElement ? backgroundImageStyles(url) : {}),
minHeight: minHeight || undefined
};
const bgStyle = {
backgroundColor: !overlayColorClass ? customOverlayColor : undefined,
background: customGradient ? customGradient : undefined
};
const objectPosition =
// prettier-ignore
focalPoint && isImgElement ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : undefined;
const classes = clsx({
'is-light': !isDark,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
'has-custom-content-position': !isContentPositionCenter(contentPosition)
}, getPositionClassName(contentPosition));
return /*#__PURE__*/_jsxs("div", {
...useBlockProps.save({
className: classes,
style
}),
children: [/*#__PURE__*/_jsx("span", {
"aria-hidden": "true",
className: clsx(overlayColorClass, dimRatioToClass(dimRatio), 'wp-block-cover__gradient-background', gradientClass, {
'has-background-dim': dimRatio !== undefined,
'has-background-gradient': gradient || customGradient,
[gradientClass]: !url && gradientClass
}),
style: bgStyle
}), isImageBackground && isImgElement && url && /*#__PURE__*/_jsx("img", {
className: clsx('wp-block-cover__image-background', id ? `wp-image-${id}` : null),
alt: alt,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), isVideoBackground && url && /*#__PURE__*/_jsx("video", {
className: clsx('wp-block-cover__video-background', 'intrinsic-ignore'),
autoPlay: true,
muted: true,
loop: true,
playsInline: true,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), /*#__PURE__*/_jsx("div", {
...useInnerBlocksProps.save({
className: 'wp-block-cover__inner-container'
})
})]
});
},
migrate: migrateTag
};
const v7 = {
attributes: {
...blockAttributes,
isRepeated: {
type: 'boolean',
default: false
},
minHeight: {
type: 'number'
},
minHeightUnit: {
type: 'string'
},
gradient: {
type: 'string'
},
customGradient: {
type: 'string'
},
contentPosition: {
type: 'string'
},
alt: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'alt',
default: ''
}
},
supports: v7toV11BlockSupports,
save({
attributes
}) {
const {
backgroundType,
gradient,
contentPosition,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
hasParallax,
isRepeated,
overlayColor,
url,
alt,
id,
minHeight: minHeightProp,
minHeightUnit
} = attributes;
const overlayColorClass = getColorClassName('background-color', overlayColor);
const gradientClass = __experimentalGetGradientClass(gradient);
const minHeight = minHeightUnit ? `${minHeightProp}${minHeightUnit}` : minHeightProp;
const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
const isImgElement = !(hasParallax || isRepeated);
const style = {
...(isImageBackground && !isImgElement ? backgroundImageStyles(url) : {}),
backgroundColor: !overlayColorClass ? customOverlayColor : undefined,
background: customGradient && !url ? customGradient : undefined,
minHeight: minHeight || undefined
};
const objectPosition =
// prettier-ignore
focalPoint && isImgElement ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : undefined;
const classes = clsx(dimRatioToClassV1(dimRatio), overlayColorClass, {
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
'has-background-gradient': gradient || customGradient,
[gradientClass]: !url && gradientClass,
'has-custom-content-position': !isContentPositionCenter(contentPosition)
}, getPositionClassName(contentPosition));
return /*#__PURE__*/_jsxs("div", {
...useBlockProps.save({
className: classes,
style
}),
children: [url && (gradient || customGradient) && dimRatio !== 0 && /*#__PURE__*/_jsx("span", {
"aria-hidden": "true",
className: clsx('wp-block-cover__gradient-background', gradientClass),
style: customGradient ? {
background: customGradient
} : undefined
}), isImageBackground && isImgElement && url && /*#__PURE__*/_jsx("img", {
className: clsx('wp-block-cover__image-background', id ? `wp-image-${id}` : null),
alt: alt,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), isVideoBackground && url && /*#__PURE__*/_jsx("video", {
className: clsx('wp-block-cover__video-background', 'intrinsic-ignore'),
autoPlay: true,
muted: true,
loop: true,
playsInline: true,
src: url,
style: {
objectPosition
},
"data-object-fit": "cover",
"data-object-position": objectPosition
}), /*#__PURE__*/_jsx("div", {
className: "wp-block-cover__inner-container",
children: /*#__PURE__*/_jsx(InnerBlocks.Content, {})
})]
});
},
migrate: compose(migrateDimRatio, migrateTag)
};
const v6 = {
attributes: {
...blockAttributes,
isRepeated: {
type: 'boolean',
default: false
},
minHeight: {
type: 'number'
},
minHeightUnit: {
type: 'string'
},
gradient: {
type: 'string'
},
customGradient: {
type: 'string'
},
contentPosition: {
type: 'string'
}
},
supports: {
align: true
},
save({
attributes
}) {
const {
backgroundType,
gradient,
contentPosition,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
hasParallax,
isRepeated,
overlayColor,
url,
minHeight: minHeightProp,
minHeightUnit
} = attributes;
const overlayColorClass = getColorClassName('background-color', overlayColor);
const gradientClass = __experimentalGetGradientClass(gradient);
const minHeight = minHeightUnit ? `${minHeightProp}${minHeightUnit}` : minHeightProp;
const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
const style = isImageBackground ? backgroundImageStyles(url) : {};
const videoStyle = {};
if (!overlayColorClass) {
style.backgroundColor = customOverlayColor;
}
if (customGradient && !url) {
style.background = customGradient;
}
style.minHeight = minHeight || undefined;
let positionValue;
if (focalPoint) {
positionValue = `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%`;
if (isImageBackground && !hasParallax) {
style.backgroundPosition = positionValue;
}
if (isVideoBackground) {
videoStyle.objectPosition = positionValue;
}
}
const classes = clsx(dimRatioToClassV1(dimRatio), overlayColorClass, {
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
'has-background-gradient': gradient || customGradient,
[gradientClass]: !url && gradientClass,
'has-custom-content-position': !isContentPositionCenter(contentPosition)
}, getPositionClassName(contentPosition));
return /*#__PURE__*/_jsxs("div", {
...useBlockProps.save({
className: classes,
style
}),
children: [url && (gradient || customGradient) && dimRatio !== 0 && /*#__PURE__*/_jsx("span", {
"aria-hidden": "true",
className: clsx('wp-block-cover__gradient-background', gradientClass),
style: customGradient ? {
background: customGradient
} : undefined
}), isVideoBackground && url && /*#__PURE__*/_jsx("video", {
className: "wp-block-cover__video-background",
autoPlay: true,
muted: true,
loop: true,
playsInline: true,
src: url,
style: videoStyle
}), /*#__PURE__*/_jsx("div", {
className: "wp-block-cover__inner-container",
children: /*#__PURE__*/_jsx(InnerBlocks.Content, {})
})]
});
},
migrate: compose(migrateDimRatio, migrateTag)
};
const v5 = {
attributes: {
...blockAttributes,
minHeight: {
type: 'number'
},
gradient: {
type: 'string'
},
customGradient: {
type: 'string'
}
},
supports: {
align: true
},
save({
attributes
}) {
const {
backgroundType,
gradient,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
hasParallax,
overlayColor,
url,
minHeight
} = attributes;
const overlayColorClass = getColorClassName('background-color', overlayColor);
const gradientClass = __experimentalGetGradientClass(gradient);
const style = backgroundType === IMAGE_BACKGROUND_TYPE ? backgroundImageStyles(url) : {};
if (!overlayColorClass) {
style.backgroundColor = customOverlayColor;
}
if (focalPoint && !hasParallax) {
style.backgroundPosition = `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%`;
}
if (customGradient && !url) {
style.background = customGradient;
}
style.minHeight = minHeight || undefined;
const classes = clsx(dimRatioToClassV1(dimRatio), overlayColorClass, {
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
'has-background-gradient': customGradient,
[gradientClass]: !url && gradientClass
});
return /*#__PURE__*/_jsxs("div", {
className: classes,
style: style,
children: [url && (gradient || customGradient) && dimRatio !== 0 && /*#__PURE__*/_jsx("span", {
"aria-hidden": "true",
className: clsx('wp-block-cover__gradient-background', gradientClass),
style: customGradient ? {
background: customGradient
} : undefined
}), VIDEO_BACKGROUND_TYPE === backgroundType && url && /*#__PURE__*/_jsx("video", {
className: "wp-block-cover__video-background",
autoPlay: true,
muted: true,
loop: true,
src: url
}), /*#__PURE__*/_jsx("div", {
className: "wp-block-cover__inner-container",
children: /*#__PURE__*/_jsx(InnerBlocks.Content, {})
})]
});
},
migrate: compose(migrateDimRatio, migrateTag)
};
const v4 = {
attributes: {
...blockAttributes,
minHeight: {
type: 'number'
},
gradient: {
type: 'string'
},
customGradient: {
type: 'string'
}
},
supports: {
align: true
},
save({
attributes
}) {
const {
backgroundType,
gradient,
customGradient,
customOverlayColor,
dimRatio,
focalPoint,
hasParallax,
overlayColor,
url,
minHeight
} = attributes;
const overlayColorClass = getColorClassName('background-color', overlayColor);
const gradientClass = __experimentalGetGradientClass(gradient);
const style = backgroundType === IMAGE_BACKGROUND_TYPE ? backgroundImageStyles(url) : {};
if (!overlayColorClass) {
style.backgroundColor = customOverlayColor;
}
if (focalPoint && !hasParallax) {
style.backgroundPosition = `${focalPoint.x * 100}% ${focalPoint.y * 100}%`;
}
if (customGradient && !url) {
style.background = customGradient;
}
style.minHeight = minHeight || undefined;
const classes = clsx(dimRatioToClassV1(dimRatio), overlayColorClass, {
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
'has-background-gradient': customGradient,
[gradientClass]: !url && gradientClass
});
return /*#__PURE__*/_jsxs("div", {
className: classes,
style: style,
children: [url && (gradient || customGradient) && dimRatio !== 0 && /*#__PURE__*/_jsx("span", {
"aria-hidden": "true",
className: clsx('wp-block-cover__gradient-background', gradientClass),
style: customGradient ? {
background: customGradient
} : undefined
}), VIDEO_BACKGROUND_TYPE === backgroundType && url && /*#__PURE__*/_jsx("video", {
className: "wp-block-cover__video-background",
autoPlay: true,
muted: true,
loop: true,
src: url
}), /*#__PURE__*/_jsx("div", {
className: "wp-block-cover__inner-container",
children: /*#__PURE__*/_jsx(InnerBlocks.Content, {})
})]
});
},
migrate: compose(migrateDimRatio, migrateTag)
};
const v3 = {
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 = clsx(dimRatioToClassV1(dimRatio), overlayColorClass, {
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
[`has-${contentAlign}-content`]: contentAlign !== 'center'
});
return /*#__PURE__*/_jsxs("div", {
className: classes,
style: style,
children: [VIDEO_BACKGROUND_TYPE === backgroundType && url && /*#__PURE__*/_jsx("video", {
className: "wp-block-cover__video-background",
autoPlay: true,
muted: true,
loop: true,
src: url
}), !RichText.isEmpty(title) && /*#__PURE__*/_jsx(RichText.Content, {
tagName: "p",
className: "wp-block-cover-text",
value: title
})]
});
},
migrate(attributes) {
const newAttribs = {
...attributes,
dimRatio: !attributes.url ? 100 : attributes.dimRatio,
tagName: !attributes.tagName ? 'div' : attributes.tagName
};
const {
title,
contentAlign,
...restAttributes
} = newAttribs;
return [restAttributes, [createBlock('core/paragraph', {
content: attributes.title,
align: attributes.contentAlign,
fontSize: 'large',
placeholder: __('Write title…')
})]];
}
};
const v2 = {
attributes: {
...blockAttributes,
title: {
type: 'string',
source: 'html',
selector: 'p'
},
contentAlign: {
type: 'string',
default: 'center'
},
align: {
type: 'string'
}
},
supports: {
className: false
},
save({
attributes
}) {
const {
url,
title,
hasParallax,
dimRatio,
align,
contentAlign,
overlayColor,
customOverlayColor
} = attributes;
const overlayColorClass = getColorClassName('background-color', overlayColor);
const style = backgroundImageStyles(url);
if (!overlayColorClass) {
style.backgroundColor = customOverlayColor;
}
const classes = clsx('wp-block-cover-image', dimRatioToClassV1(dimRatio), overlayColorClass, {
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
[`has-${contentAlign}-content`]: contentAlign !== 'center'
}, align ? `align${align}` : null);
return /*#__PURE__*/_jsx("div", {
className: classes,
style: style,
children: !RichText.isEmpty(title) && /*#__PURE__*/_jsx(RichText.Content, {
tagName: "p",
className: "wp-block-cover-image-text",
value: title
})
});
},
migrate(attributes) {
const newAttribs = {
...attributes,
dimRatio: !attributes.url ? 100 : attributes.dimRatio,
tagName: !attributes.tagName ? 'div' : attributes.tagName
};
const {
title,
contentAlign,
align,
...restAttributes
} = newAttribs;
return [restAttributes, [createBlock('core/paragraph', {
content: attributes.title,
align: attributes.contentAlign,
fontSize: 'large',
placeholder: __('Write title…')
})]];
}
};
const v1 = {
attributes: {
...blockAttributes,
title: {
type: 'string',
source: 'html',
selector: 'h2'
},
align: {
type: 'string'
},
contentAlign: {
type: 'string',
default: 'center'
}
},
supports: {
className: false
},
save({
attributes
}) {
const {
url,
title,
hasParallax,
dimRatio,
align
} = attributes;
const style = backgroundImageStyles(url);
const classes = clsx('wp-block-cover-image', dimRatioToClassV1(dimRatio), {
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax
}, align ? `align${align}` : null);
return /*#__PURE__*/_jsx("section", {
className: classes,
style: style,
children: /*#__PURE__*/_jsx(RichText.Content, {
tagName: "h2",
value: title
})
});
},
migrate(attributes) {
const newAttribs = {
...attributes,
dimRatio: !attributes.url ? 100 : attributes.dimRatio,
tagName: !attributes.tagName ? 'div' : attributes.tagName
};
const {
title,
contentAlign,
align,
...restAttributes
} = newAttribs;
return [restAttributes, [createBlock('core/paragraph', {
content: attributes.title,
align: attributes.contentAlign,
fontSize: 'large',
placeholder: __('Write title…')
})]];
}
};
export default [v14, v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1];
//# sourceMappingURL=deprecated.js.map