@wordpress/block-library
Version:
Block library for the WordPress editor.
930 lines (929 loc) • 23.6 kB
JavaScript
// packages/block-library/src/media-text/deprecated.js
import clsx from "clsx";
import {
InnerBlocks,
getColorClassName,
useInnerBlocksProps,
useBlockProps
} from "@wordpress/block-editor";
import { compose } from "@wordpress/compose";
import { DEFAULT_MEDIA_SIZE_SLUG } from "./constants";
import { jsx, jsxs } from "react/jsx-runtime";
var v1ToV5ImageFillStyles = (url, focalPoint) => {
return url ? {
backgroundImage: `url(${url})`,
backgroundPosition: focalPoint ? `${focalPoint.x * 100}% ${focalPoint.y * 100}%` : `50% 50%`
} : {};
};
var v6ToV7ImageFillStyles = (url, focalPoint) => {
return url ? {
backgroundImage: `url(${url})`,
backgroundPosition: focalPoint ? `${Math.round(focalPoint.x * 100)}% ${Math.round(
focalPoint.y * 100
)}%` : `50% 50%`
} : {};
};
var DEFAULT_MEDIA_WIDTH = 50;
var noop = () => {
};
var migrateCustomColors = (attributes) => {
if (!attributes.customBackgroundColor) {
return attributes;
}
const style = {
color: {
background: attributes.customBackgroundColor
}
};
const { customBackgroundColor, ...restAttributes } = attributes;
return {
...restAttributes,
style
};
};
var migrateDefaultAlign = (attributes) => {
if (attributes.align) {
return attributes;
}
return {
...attributes,
align: "wide"
};
};
var v0Attributes = {
align: {
type: "string",
default: "wide"
},
mediaAlt: {
type: "string",
source: "attribute",
selector: "figure img",
attribute: "alt",
default: ""
},
mediaPosition: {
type: "string",
default: "left"
},
mediaId: {
type: "number"
},
mediaType: {
type: "string"
},
mediaWidth: {
type: "number",
default: 50
},
isStackedOnMobile: {
type: "boolean",
default: false
}
};
var v4ToV5BlockAttributes = {
...v0Attributes,
isStackedOnMobile: {
type: "boolean",
default: true
},
mediaUrl: {
type: "string",
source: "attribute",
selector: "figure video,figure img",
attribute: "src"
},
mediaLink: {
type: "string"
},
linkDestination: {
type: "string"
},
linkTarget: {
type: "string",
source: "attribute",
selector: "figure a",
attribute: "target"
},
href: {
type: "string",
source: "attribute",
selector: "figure a",
attribute: "href"
},
rel: {
type: "string",
source: "attribute",
selector: "figure a",
attribute: "rel"
},
linkClass: {
type: "string",
source: "attribute",
selector: "figure a",
attribute: "class"
},
mediaSizeSlug: {
type: "string"
},
verticalAlignment: {
type: "string"
},
imageFill: {
type: "boolean"
},
focalPoint: {
type: "object"
}
};
var v6Attributes = {
...v4ToV5BlockAttributes,
mediaAlt: {
type: "string",
source: "attribute",
selector: "figure img",
attribute: "alt",
default: "",
role: "content"
},
mediaId: {
type: "number",
role: "content"
},
mediaUrl: {
type: "string",
source: "attribute",
selector: "figure video,figure img",
attribute: "src",
role: "content"
},
href: {
type: "string",
source: "attribute",
selector: "figure a",
attribute: "href",
role: "content"
},
mediaType: {
type: "string",
role: "content"
}
};
var v7Attributes = {
...v6Attributes,
align: {
type: "string",
// v7 changed the default for the `align` attribute.
default: "none"
},
// New attribute.
useFeaturedImage: {
type: "boolean",
default: false
}
};
var v4ToV5Supports = {
anchor: true,
align: ["wide", "full"],
html: false,
color: {
gradients: true,
link: true
}
};
var v6Supports = {
...v4ToV5Supports,
color: {
gradients: true,
link: true,
__experimentalDefaultControls: {
background: true,
text: true
}
},
spacing: {
margin: true,
padding: true
},
typography: {
fontSize: true,
lineHeight: true,
__experimentalFontFamily: true,
__experimentalFontWeight: true,
__experimentalFontStyle: true,
__experimentalTextTransform: true,
__experimentalTextDecoration: true,
__experimentalLetterSpacing: true,
__experimentalDefaultControls: {
fontSize: true
}
}
};
var v7Supports = {
...v6Supports,
__experimentalBorder: {
color: true,
radius: true,
style: true,
width: true,
__experimentalDefaultControls: {
color: true,
radius: true,
style: true,
width: true
}
},
color: {
gradients: true,
heading: true,
link: true,
__experimentalDefaultControls: {
background: true,
text: true
}
},
interactivity: {
clientNavigation: true
}
};
var v7 = {
attributes: v7Attributes,
supports: v7Supports,
usesContext: ["postId", "postType"],
save({ attributes }) {
const {
isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth,
mediaId,
verticalAlignment,
imageFill,
focalPoint,
linkClass,
href,
linkTarget,
rel
} = attributes;
const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
const newRel = !rel ? void 0 : rel;
const imageClasses = clsx({
[`wp-image-${mediaId}`]: mediaId && mediaType === "image",
[`size-${mediaSizeSlug}`]: mediaId && mediaType === "image"
});
let image = mediaUrl ? /* @__PURE__ */ jsx(
"img",
{
src: mediaUrl,
alt: mediaAlt,
className: imageClasses || null
}
) : null;
if (href) {
image = /* @__PURE__ */ jsx(
"a",
{
className: linkClass,
href,
target: linkTarget,
rel: newRel,
children: image
}
);
}
const mediaTypeRenders = {
image: () => image,
video: () => /* @__PURE__ */ jsx("video", { controls: true, src: mediaUrl })
};
const className = clsx({
"has-media-on-the-right": "right" === mediaPosition,
"is-stacked-on-mobile": isStackedOnMobile,
[`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
"is-image-fill": imageFill
});
const backgroundStyles = imageFill ? v6ToV7ImageFillStyles(mediaUrl, focalPoint) : {};
let gridTemplateColumns;
if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
gridTemplateColumns = "right" === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
}
const style = {
gridTemplateColumns
};
if ("right" === mediaPosition) {
return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className, style }), children: [
/* @__PURE__ */ jsx(
"div",
{
...useInnerBlocksProps.save({
className: "wp-block-media-text__content"
})
}
),
/* @__PURE__ */ jsx(
"figure",
{
className: "wp-block-media-text__media",
style: backgroundStyles,
children: (mediaTypeRenders[mediaType] || noop)()
}
)
] });
}
return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className, style }), children: [
/* @__PURE__ */ jsx(
"figure",
{
className: "wp-block-media-text__media",
style: backgroundStyles,
children: (mediaTypeRenders[mediaType] || noop)()
}
),
/* @__PURE__ */ jsx(
"div",
{
...useInnerBlocksProps.save({
className: "wp-block-media-text__content"
})
}
)
] });
}
};
var v6 = {
attributes: v6Attributes,
supports: v6Supports,
save({ attributes }) {
const {
isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth,
mediaId,
verticalAlignment,
imageFill,
focalPoint,
linkClass,
href,
linkTarget,
rel
} = attributes;
const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
const newRel = !rel ? void 0 : rel;
const imageClasses = clsx({
[`wp-image-${mediaId}`]: mediaId && mediaType === "image",
[`size-${mediaSizeSlug}`]: mediaId && mediaType === "image"
});
let image = /* @__PURE__ */ jsx(
"img",
{
src: mediaUrl,
alt: mediaAlt,
className: imageClasses || null
}
);
if (href) {
image = /* @__PURE__ */ jsx(
"a",
{
className: linkClass,
href,
target: linkTarget,
rel: newRel,
children: image
}
);
}
const mediaTypeRenders = {
image: () => image,
video: () => /* @__PURE__ */ jsx("video", { controls: true, src: mediaUrl })
};
const className = clsx({
"has-media-on-the-right": "right" === mediaPosition,
"is-stacked-on-mobile": isStackedOnMobile,
[`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
"is-image-fill": imageFill
});
const backgroundStyles = imageFill ? v6ToV7ImageFillStyles(mediaUrl, focalPoint) : {};
let gridTemplateColumns;
if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
gridTemplateColumns = "right" === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
}
const style = {
gridTemplateColumns
};
if ("right" === mediaPosition) {
return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className, style }), children: [
/* @__PURE__ */ jsx(
"div",
{
...useInnerBlocksProps.save({
className: "wp-block-media-text__content"
})
}
),
/* @__PURE__ */ jsx(
"figure",
{
className: "wp-block-media-text__media",
style: backgroundStyles,
children: (mediaTypeRenders[mediaType] || noop)()
}
)
] });
}
return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className, style }), children: [
/* @__PURE__ */ jsx(
"figure",
{
className: "wp-block-media-text__media",
style: backgroundStyles,
children: (mediaTypeRenders[mediaType] || noop)()
}
),
/* @__PURE__ */ jsx(
"div",
{
...useInnerBlocksProps.save({
className: "wp-block-media-text__content"
})
}
)
] });
},
migrate: migrateDefaultAlign,
isEligible(attributes, innerBlocks, { block }) {
const { attributes: finalizedAttributes } = block;
return attributes.align === void 0 && !!finalizedAttributes.className?.includes("alignwide");
}
};
var v5 = {
attributes: v4ToV5BlockAttributes,
supports: v4ToV5Supports,
save({ attributes }) {
const {
isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth,
mediaId,
verticalAlignment,
imageFill,
focalPoint,
linkClass,
href,
linkTarget,
rel
} = attributes;
const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
const newRel = !rel ? void 0 : rel;
const imageClasses = clsx({
[`wp-image-${mediaId}`]: mediaId && mediaType === "image",
[`size-${mediaSizeSlug}`]: mediaId && mediaType === "image"
});
let image = /* @__PURE__ */ jsx(
"img",
{
src: mediaUrl,
alt: mediaAlt,
className: imageClasses || null
}
);
if (href) {
image = /* @__PURE__ */ jsx(
"a",
{
className: linkClass,
href,
target: linkTarget,
rel: newRel,
children: image
}
);
}
const mediaTypeRenders = {
image: () => image,
video: () => /* @__PURE__ */ jsx("video", { controls: true, src: mediaUrl })
};
const className = clsx({
"has-media-on-the-right": "right" === mediaPosition,
"is-stacked-on-mobile": isStackedOnMobile,
[`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
"is-image-fill": imageFill
});
const backgroundStyles = imageFill ? v1ToV5ImageFillStyles(mediaUrl, focalPoint) : {};
let gridTemplateColumns;
if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
gridTemplateColumns = "right" === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
}
const style = {
gridTemplateColumns
};
if ("right" === mediaPosition) {
return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className, style }), children: [
/* @__PURE__ */ jsx(
"div",
{
...useInnerBlocksProps.save({
className: "wp-block-media-text__content"
})
}
),
/* @__PURE__ */ jsx(
"figure",
{
className: "wp-block-media-text__media",
style: backgroundStyles,
children: (mediaTypeRenders[mediaType] || noop)()
}
)
] });
}
return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className, style }), children: [
/* @__PURE__ */ jsx(
"figure",
{
className: "wp-block-media-text__media",
style: backgroundStyles,
children: (mediaTypeRenders[mediaType] || noop)()
}
),
/* @__PURE__ */ jsx(
"div",
{
...useInnerBlocksProps.save({
className: "wp-block-media-text__content"
})
}
)
] });
},
migrate: migrateDefaultAlign
};
var v4 = {
attributes: v4ToV5BlockAttributes,
supports: v4ToV5Supports,
save({ attributes }) {
const {
isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth,
mediaId,
verticalAlignment,
imageFill,
focalPoint,
linkClass,
href,
linkTarget,
rel
} = attributes;
const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
const newRel = !rel ? void 0 : rel;
const imageClasses = clsx({
[`wp-image-${mediaId}`]: mediaId && mediaType === "image",
[`size-${mediaSizeSlug}`]: mediaId && mediaType === "image"
});
let image = /* @__PURE__ */ jsx(
"img",
{
src: mediaUrl,
alt: mediaAlt,
className: imageClasses || null
}
);
if (href) {
image = /* @__PURE__ */ jsx(
"a",
{
className: linkClass,
href,
target: linkTarget,
rel: newRel,
children: image
}
);
}
const mediaTypeRenders = {
image: () => image,
video: () => /* @__PURE__ */ jsx("video", { controls: true, src: mediaUrl })
};
const className = clsx({
"has-media-on-the-right": "right" === mediaPosition,
"is-stacked-on-mobile": isStackedOnMobile,
[`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
"is-image-fill": imageFill
});
const backgroundStyles = imageFill ? v1ToV5ImageFillStyles(mediaUrl, focalPoint) : {};
let gridTemplateColumns;
if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
gridTemplateColumns = "right" === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
}
const style = {
gridTemplateColumns
};
return /* @__PURE__ */ jsxs("div", { ...useBlockProps.save({ className, style }), children: [
/* @__PURE__ */ jsx(
"figure",
{
className: "wp-block-media-text__media",
style: backgroundStyles,
children: (mediaTypeRenders[mediaType] || noop)()
}
),
/* @__PURE__ */ jsx(
"div",
{
...useInnerBlocksProps.save({
className: "wp-block-media-text__content"
})
}
)
] });
},
migrate: migrateDefaultAlign
};
var v3 = {
attributes: {
...v0Attributes,
isStackedOnMobile: {
type: "boolean",
default: true
},
backgroundColor: {
type: "string"
},
customBackgroundColor: {
type: "string"
},
mediaLink: {
type: "string"
},
linkDestination: {
type: "string"
},
linkTarget: {
type: "string",
source: "attribute",
selector: "figure a",
attribute: "target"
},
href: {
type: "string",
source: "attribute",
selector: "figure a",
attribute: "href"
},
rel: {
type: "string",
source: "attribute",
selector: "figure a",
attribute: "rel"
},
linkClass: {
type: "string",
source: "attribute",
selector: "figure a",
attribute: "class"
},
verticalAlignment: {
type: "string"
},
imageFill: {
type: "boolean"
},
focalPoint: {
type: "object"
}
},
migrate: compose(migrateCustomColors, migrateDefaultAlign),
save({ attributes }) {
const {
backgroundColor,
customBackgroundColor,
isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth,
mediaId,
verticalAlignment,
imageFill,
focalPoint,
linkClass,
href,
linkTarget,
rel
} = attributes;
const newRel = !rel ? void 0 : rel;
let image = /* @__PURE__ */ jsx(
"img",
{
src: mediaUrl,
alt: mediaAlt,
className: mediaId && mediaType === "image" ? `wp-image-${mediaId}` : null
}
);
if (href) {
image = /* @__PURE__ */ jsx(
"a",
{
className: linkClass,
href,
target: linkTarget,
rel: newRel,
children: image
}
);
}
const mediaTypeRenders = {
image: () => image,
video: () => /* @__PURE__ */ jsx("video", { controls: true, src: mediaUrl })
};
const backgroundClass = getColorClassName(
"background-color",
backgroundColor
);
const className = clsx({
"has-media-on-the-right": "right" === mediaPosition,
"has-background": backgroundClass || customBackgroundColor,
[backgroundClass]: backgroundClass,
"is-stacked-on-mobile": isStackedOnMobile,
[`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
"is-image-fill": imageFill
});
const backgroundStyles = imageFill ? v1ToV5ImageFillStyles(mediaUrl, focalPoint) : {};
let gridTemplateColumns;
if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
gridTemplateColumns = "right" === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
}
const style = {
backgroundColor: backgroundClass ? void 0 : customBackgroundColor,
gridTemplateColumns
};
return /* @__PURE__ */ jsxs("div", { className, style, children: [
/* @__PURE__ */ jsx(
"figure",
{
className: "wp-block-media-text__media",
style: backgroundStyles,
children: (mediaTypeRenders[mediaType] || noop)()
}
),
/* @__PURE__ */ jsx("div", { className: "wp-block-media-text__content", children: /* @__PURE__ */ jsx(InnerBlocks.Content, {}) })
] });
}
};
var v2 = {
attributes: {
...v0Attributes,
backgroundColor: {
type: "string"
},
customBackgroundColor: {
type: "string"
},
mediaUrl: {
type: "string",
source: "attribute",
selector: "figure video,figure img",
attribute: "src"
},
verticalAlignment: {
type: "string"
},
imageFill: {
type: "boolean"
},
focalPoint: {
type: "object"
}
},
migrate: compose(migrateCustomColors, migrateDefaultAlign),
save({ attributes }) {
const {
backgroundColor,
customBackgroundColor,
isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth,
mediaId,
verticalAlignment,
imageFill,
focalPoint
} = attributes;
const mediaTypeRenders = {
image: () => /* @__PURE__ */ jsx(
"img",
{
src: mediaUrl,
alt: mediaAlt,
className: mediaId && mediaType === "image" ? `wp-image-${mediaId}` : null
}
),
video: () => /* @__PURE__ */ jsx("video", { controls: true, src: mediaUrl })
};
const backgroundClass = getColorClassName(
"background-color",
backgroundColor
);
const className = clsx({
"has-media-on-the-right": "right" === mediaPosition,
[backgroundClass]: backgroundClass,
"is-stacked-on-mobile": isStackedOnMobile,
[`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
"is-image-fill": imageFill
});
const backgroundStyles = imageFill ? v1ToV5ImageFillStyles(mediaUrl, focalPoint) : {};
let gridTemplateColumns;
if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
gridTemplateColumns = "right" === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
}
const style = {
backgroundColor: backgroundClass ? void 0 : customBackgroundColor,
gridTemplateColumns
};
return /* @__PURE__ */ jsxs("div", { className, style, children: [
/* @__PURE__ */ jsx(
"figure",
{
className: "wp-block-media-text__media",
style: backgroundStyles,
children: (mediaTypeRenders[mediaType] || noop)()
}
),
/* @__PURE__ */ jsx("div", { className: "wp-block-media-text__content", children: /* @__PURE__ */ jsx(InnerBlocks.Content, {}) })
] });
}
};
var v1 = {
attributes: {
...v0Attributes,
backgroundColor: {
type: "string"
},
customBackgroundColor: {
type: "string"
},
mediaUrl: {
type: "string",
source: "attribute",
selector: "figure video,figure img",
attribute: "src"
}
},
migrate: migrateDefaultAlign,
save({ attributes }) {
const {
backgroundColor,
customBackgroundColor,
isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth
} = attributes;
const mediaTypeRenders = {
image: () => /* @__PURE__ */ jsx("img", { src: mediaUrl, alt: mediaAlt }),
video: () => /* @__PURE__ */ jsx("video", { controls: true, src: mediaUrl })
};
const backgroundClass = getColorClassName(
"background-color",
backgroundColor
);
const className = clsx({
"has-media-on-the-right": "right" === mediaPosition,
[backgroundClass]: backgroundClass,
"is-stacked-on-mobile": isStackedOnMobile
});
let gridTemplateColumns;
if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
gridTemplateColumns = "right" === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
}
const style = {
backgroundColor: backgroundClass ? void 0 : customBackgroundColor,
gridTemplateColumns
};
return /* @__PURE__ */ jsxs("div", { className, style, children: [
/* @__PURE__ */ jsx("figure", { className: "wp-block-media-text__media", children: (mediaTypeRenders[mediaType] || noop)() }),
/* @__PURE__ */ jsx("div", { className: "wp-block-media-text__content", children: /* @__PURE__ */ jsx(InnerBlocks.Content, {}) })
] });
}
};
var deprecated_default = [v7, v6, v5, v4, v3, v2, v1];
export {
deprecated_default as default
};
//# sourceMappingURL=deprecated.js.map