@wordpress/block-library
Version:
Block library for the WordPress editor.
1,017 lines (1,016 loc) • 21.5 kB
JavaScript
// packages/block-library/src/image/deprecated.js
import clsx from "clsx";
import {
RichText,
useBlockProps,
__experimentalGetElementClassName,
__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles
} from "@wordpress/block-editor";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var v1 = {
attributes: {
url: {
type: "string",
source: "attribute",
selector: "img",
attribute: "src"
},
alt: {
type: "string",
source: "attribute",
selector: "img",
attribute: "alt",
default: ""
},
caption: {
type: "array",
source: "children",
selector: "figcaption"
},
href: {
type: "string",
source: "attribute",
selector: "a",
attribute: "href"
},
id: {
type: "number"
},
align: {
type: "string"
},
width: {
type: "number"
},
height: {
type: "number"
}
},
save({ attributes }) {
const { url, alt, caption, align, href, width, height } = attributes;
const extraImageProps = width || height ? { width, height } : {};
const image = /* @__PURE__ */ jsx("img", { src: url, alt, ...extraImageProps });
let figureStyle = {};
if (width) {
figureStyle = { width };
} else if (align === "left" || align === "right") {
figureStyle = { maxWidth: "50%" };
}
return /* @__PURE__ */ jsxs(
"figure",
{
className: align ? `align${align}` : null,
style: figureStyle,
children: [
href ? /* @__PURE__ */ jsx("a", { href, children: image }) : image,
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(RichText.Content, { tagName: "figcaption", value: caption })
]
}
);
}
};
var v2 = {
attributes: {
url: {
type: "string",
source: "attribute",
selector: "img",
attribute: "src"
},
alt: {
type: "string",
source: "attribute",
selector: "img",
attribute: "alt",
default: ""
},
caption: {
type: "array",
source: "children",
selector: "figcaption"
},
href: {
type: "string",
source: "attribute",
selector: "a",
attribute: "href"
},
id: {
type: "number"
},
align: {
type: "string"
},
width: {
type: "number"
},
height: {
type: "number"
}
},
save({ attributes }) {
const { url, alt, caption, align, href, width, height, id } = attributes;
const image = /* @__PURE__ */ jsx(
"img",
{
src: url,
alt,
className: id ? `wp-image-${id}` : null,
width,
height
}
);
return /* @__PURE__ */ jsxs("figure", { className: align ? `align${align}` : null, children: [
href ? /* @__PURE__ */ jsx("a", { href, children: image }) : image,
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(RichText.Content, { tagName: "figcaption", value: caption })
] });
}
};
var v3 = {
attributes: {
url: {
type: "string",
source: "attribute",
selector: "img",
attribute: "src"
},
alt: {
type: "string",
source: "attribute",
selector: "img",
attribute: "alt",
default: ""
},
caption: {
type: "array",
source: "children",
selector: "figcaption"
},
href: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "href"
},
id: {
type: "number"
},
align: {
type: "string"
},
width: {
type: "number"
},
height: {
type: "number"
},
linkDestination: {
type: "string",
default: "none"
}
},
save({ attributes }) {
const { url, alt, caption, align, href, width, height, id } = attributes;
const classes = clsx({
[`align${align}`]: align,
"is-resized": width || height
});
const image = /* @__PURE__ */ jsx(
"img",
{
src: url,
alt,
className: id ? `wp-image-${id}` : null,
width,
height
}
);
return /* @__PURE__ */ jsxs("figure", { className: classes, children: [
href ? /* @__PURE__ */ jsx("a", { href, children: image }) : image,
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(RichText.Content, { tagName: "figcaption", value: caption })
] });
}
};
var v4 = {
attributes: {
align: {
type: "string"
},
url: {
type: "string",
source: "attribute",
selector: "img",
attribute: "src"
},
alt: {
type: "string",
source: "attribute",
selector: "img",
attribute: "alt",
default: ""
},
caption: {
type: "string",
source: "html",
selector: "figcaption"
},
title: {
type: "string",
source: "attribute",
selector: "img",
attribute: "title"
},
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"
},
id: {
type: "number"
},
width: {
type: "number"
},
height: {
type: "number"
},
sizeSlug: {
type: "string"
},
linkDestination: {
type: "string"
},
linkTarget: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "target"
}
},
supports: {
anchor: true
},
save({ attributes }) {
const {
url,
alt,
caption,
align,
href,
rel,
linkClass,
width,
height,
id,
linkTarget,
sizeSlug,
title
} = attributes;
const newRel = !rel ? void 0 : rel;
const classes = clsx({
[`align${align}`]: align,
[`size-${sizeSlug}`]: sizeSlug,
"is-resized": width || height
});
const image = /* @__PURE__ */ jsx(
"img",
{
src: url,
alt,
className: id ? `wp-image-${id}` : null,
width,
height,
title
}
);
const figure = /* @__PURE__ */ jsxs(Fragment, { children: [
href ? /* @__PURE__ */ jsx(
"a",
{
className: linkClass,
href,
target: linkTarget,
rel: newRel,
children: image
}
) : image,
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(RichText.Content, { tagName: "figcaption", value: caption })
] });
if ("left" === align || "right" === align || "center" === align) {
return /* @__PURE__ */ jsx("div", { ...useBlockProps.save(), children: /* @__PURE__ */ jsx("figure", { className: classes, children: figure }) });
}
return /* @__PURE__ */ jsx("figure", { ...useBlockProps.save({ className: classes }), children: figure });
}
};
var v5 = {
attributes: {
align: {
type: "string"
},
url: {
type: "string",
source: "attribute",
selector: "img",
attribute: "src"
},
alt: {
type: "string",
source: "attribute",
selector: "img",
attribute: "alt",
default: ""
},
caption: {
type: "string",
source: "html",
selector: "figcaption"
},
title: {
type: "string",
source: "attribute",
selector: "img",
attribute: "title"
},
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"
},
id: {
type: "number"
},
width: {
type: "number"
},
height: {
type: "number"
},
sizeSlug: {
type: "string"
},
linkDestination: {
type: "string"
},
linkTarget: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "target"
}
},
supports: {
anchor: true,
color: {
__experimentalDuotone: "img",
text: false,
background: false
},
__experimentalBorder: {
radius: true,
__experimentalDefaultControls: {
radius: true
}
},
__experimentalStyle: {
spacing: {
margin: "0 0 1em 0"
}
}
},
save({ attributes }) {
const {
url,
alt,
caption,
align,
href,
rel,
linkClass,
width,
height,
id,
linkTarget,
sizeSlug,
title
} = attributes;
const newRel = !rel ? void 0 : rel;
const classes = clsx({
[`align${align}`]: align,
[`size-${sizeSlug}`]: sizeSlug,
"is-resized": width || height
});
const image = /* @__PURE__ */ jsx(
"img",
{
src: url,
alt,
className: id ? `wp-image-${id}` : null,
width,
height,
title
}
);
const figure = /* @__PURE__ */ jsxs(Fragment, { children: [
href ? /* @__PURE__ */ jsx(
"a",
{
className: linkClass,
href,
target: linkTarget,
rel: newRel,
children: image
}
) : image,
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(RichText.Content, { tagName: "figcaption", value: caption })
] });
return /* @__PURE__ */ jsx("figure", { ...useBlockProps.save({ className: classes }), children: figure });
}
};
var v6 = {
attributes: {
align: {
type: "string"
},
url: {
type: "string",
source: "attribute",
selector: "img",
attribute: "src",
role: "content"
},
alt: {
type: "string",
source: "attribute",
selector: "img",
attribute: "alt",
default: "",
role: "content"
},
caption: {
type: "string",
source: "html",
selector: "figcaption",
role: "content"
},
title: {
type: "string",
source: "attribute",
selector: "img",
attribute: "title",
role: "content"
},
href: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "href",
role: "content"
},
rel: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "rel"
},
linkClass: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "class"
},
id: {
type: "number",
role: "content"
},
width: {
type: "number"
},
height: {
type: "number"
},
aspectRatio: {
type: "string"
},
scale: {
type: "string"
},
sizeSlug: {
type: "string"
},
linkDestination: {
type: "string"
},
linkTarget: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "target"
}
},
supports: {
anchor: true,
color: {
text: false,
background: false
},
filter: {
duotone: true
},
__experimentalBorder: {
color: true,
radius: true,
width: true,
__experimentalSkipSerialization: true,
__experimentalDefaultControls: {
color: true,
radius: true,
width: true
}
}
},
migrate(attributes) {
const { height, width } = attributes;
return {
...attributes,
width: typeof width === "number" ? `${width}px` : width,
height: typeof height === "number" ? `${height}px` : height
};
},
save({ attributes }) {
const {
url,
alt,
caption,
align,
href,
rel,
linkClass,
width,
height,
aspectRatio,
scale,
id,
linkTarget,
sizeSlug,
title
} = attributes;
const newRel = !rel ? void 0 : rel;
const borderProps = getBorderClassesAndStyles(attributes);
const classes = clsx({
[`align${align}`]: align,
[`size-${sizeSlug}`]: sizeSlug,
"is-resized": width || height,
"has-custom-border": !!borderProps.className || borderProps.style && Object.keys(borderProps.style).length > 0
});
const imageClasses = clsx(borderProps.className, {
[`wp-image-${id}`]: !!id
});
const image = /* @__PURE__ */ jsx(
"img",
{
src: url,
alt,
className: imageClasses || void 0,
style: {
...borderProps.style,
aspectRatio,
objectFit: scale
},
width,
height,
title
}
);
const figure = /* @__PURE__ */ jsxs(Fragment, { children: [
href ? /* @__PURE__ */ jsx(
"a",
{
className: linkClass,
href,
target: linkTarget,
rel: newRel,
children: image
}
) : image,
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(
RichText.Content,
{
className: __experimentalGetElementClassName(
"caption"
),
tagName: "figcaption",
value: caption
}
)
] });
return /* @__PURE__ */ jsx("figure", { ...useBlockProps.save({ className: classes }), children: figure });
}
};
var v7 = {
attributes: {
align: {
type: "string"
},
url: {
type: "string",
source: "attribute",
selector: "img",
attribute: "src",
role: "content"
},
alt: {
type: "string",
source: "attribute",
selector: "img",
attribute: "alt",
default: "",
role: "content"
},
caption: {
type: "string",
source: "html",
selector: "figcaption",
role: "content"
},
title: {
type: "string",
source: "attribute",
selector: "img",
attribute: "title",
role: "content"
},
href: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "href",
role: "content"
},
rel: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "rel"
},
linkClass: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "class"
},
id: {
type: "number",
role: "content"
},
width: {
type: "number"
},
height: {
type: "number"
},
aspectRatio: {
type: "string"
},
scale: {
type: "string"
},
sizeSlug: {
type: "string"
},
linkDestination: {
type: "string"
},
linkTarget: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "target"
}
},
supports: {
anchor: true,
color: {
text: false,
background: false
},
filter: {
duotone: true
},
__experimentalBorder: {
color: true,
radius: true,
width: true,
__experimentalSkipSerialization: true,
__experimentalDefaultControls: {
color: true,
radius: true,
width: true
}
}
},
migrate({ width, height, ...attributes }) {
return {
...attributes,
width: `${width}px`,
height: `${height}px`
};
},
save({ attributes }) {
const {
url,
alt,
caption,
align,
href,
rel,
linkClass,
width,
height,
aspectRatio,
scale,
id,
linkTarget,
sizeSlug,
title
} = attributes;
const newRel = !rel ? void 0 : rel;
const borderProps = getBorderClassesAndStyles(attributes);
const classes = clsx({
[`align${align}`]: align,
[`size-${sizeSlug}`]: sizeSlug,
"is-resized": width || height,
"has-custom-border": !!borderProps.className || borderProps.style && Object.keys(borderProps.style).length > 0
});
const imageClasses = clsx(borderProps.className, {
[`wp-image-${id}`]: !!id
});
const image = /* @__PURE__ */ jsx(
"img",
{
src: url,
alt,
className: imageClasses || void 0,
style: {
...borderProps.style,
aspectRatio,
objectFit: scale,
width,
height
},
width,
height,
title
}
);
const figure = /* @__PURE__ */ jsxs(Fragment, { children: [
href ? /* @__PURE__ */ jsx(
"a",
{
className: linkClass,
href,
target: linkTarget,
rel: newRel,
children: image
}
) : image,
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(
RichText.Content,
{
className: __experimentalGetElementClassName(
"caption"
),
tagName: "figcaption",
value: caption
}
)
] });
return /* @__PURE__ */ jsx("figure", { ...useBlockProps.save({ className: classes }), children: figure });
}
};
var v8 = {
attributes: {
align: {
type: "string"
},
behaviors: {
type: "object"
},
url: {
type: "string",
source: "attribute",
selector: "img",
attribute: "src",
role: "content"
},
alt: {
type: "string",
source: "attribute",
selector: "img",
attribute: "alt",
default: "",
role: "content"
},
caption: {
type: "string",
source: "html",
selector: "figcaption",
role: "content"
},
title: {
type: "string",
source: "attribute",
selector: "img",
attribute: "title",
role: "content"
},
href: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "href",
role: "content"
},
rel: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "rel"
},
linkClass: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "class"
},
id: {
type: "number",
role: "content"
},
width: {
type: "string"
},
height: {
type: "string"
},
aspectRatio: {
type: "string"
},
scale: {
type: "string"
},
sizeSlug: {
type: "string"
},
linkDestination: {
type: "string"
},
linkTarget: {
type: "string",
source: "attribute",
selector: "figure > a",
attribute: "target"
}
},
supports: {
anchor: true,
color: {
text: false,
background: false
},
filter: {
duotone: true
},
__experimentalBorder: {
color: true,
radius: true,
width: true,
__experimentalSkipSerialization: true,
__experimentalDefaultControls: {
color: true,
radius: true,
width: true
}
}
},
migrate({ width, height, ...attributes }) {
if (!attributes.behaviors?.lightbox) {
return attributes;
}
const {
behaviors: {
lightbox: { enabled }
}
} = attributes;
const newAttributes = {
...attributes,
lightbox: {
enabled
}
};
delete newAttributes.behaviors;
return newAttributes;
},
isEligible(attributes) {
return !!attributes.behaviors;
},
save({ attributes }) {
const {
url,
alt,
caption,
align,
href,
rel,
linkClass,
width,
height,
aspectRatio,
scale,
id,
linkTarget,
sizeSlug,
title
} = attributes;
const newRel = !rel ? void 0 : rel;
const borderProps = getBorderClassesAndStyles(attributes);
const classes = clsx({
[`align${align}`]: align,
[`size-${sizeSlug}`]: sizeSlug,
"is-resized": width || height,
"has-custom-border": !!borderProps.className || borderProps.style && Object.keys(borderProps.style).length > 0
});
const imageClasses = clsx(borderProps.className, {
[`wp-image-${id}`]: !!id
});
const image = /* @__PURE__ */ jsx(
"img",
{
src: url,
alt,
className: imageClasses || void 0,
style: {
...borderProps.style,
aspectRatio,
objectFit: scale,
width,
height
},
title
}
);
const figure = /* @__PURE__ */ jsxs(Fragment, { children: [
href ? /* @__PURE__ */ jsx(
"a",
{
className: linkClass,
href,
target: linkTarget,
rel: newRel,
children: image
}
) : image,
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(
RichText.Content,
{
className: __experimentalGetElementClassName(
"caption"
),
tagName: "figcaption",
value: caption
}
)
] });
return /* @__PURE__ */ jsx("figure", { ...useBlockProps.save({ className: classes }), children: figure });
}
};
var deprecated_default = [v8, v7, v6, v5, v4, v3, v2, v1];
export {
deprecated_default as default
};
//# sourceMappingURL=deprecated.js.map