@wordpress/block-library
Version:
Block library for the WordPress editor.
956 lines (955 loc) • 23.3 kB
JavaScript
// packages/block-library/src/gallery/deprecated.js
import clsx from "clsx";
import {
RichText,
useBlockProps,
useInnerBlocksProps
} from "@wordpress/block-editor";
import { createBlock } from "@wordpress/blocks";
import {
LINK_DESTINATION_ATTACHMENT,
LINK_DESTINATION_MEDIA,
LINK_DESTINATION_NONE
} from "./constants";
import { jsx, jsxs } from "react/jsx-runtime";
var DEPRECATED_LINK_DESTINATION_MEDIA = "file";
var DEPRECATED_LINK_DESTINATION_ATTACHMENT = "post";
function defaultColumnsNumberV1(attributes) {
return Math.min(3, attributes?.images?.length);
}
function getHrefAndDestination(image, destination) {
switch (destination) {
case DEPRECATED_LINK_DESTINATION_MEDIA:
return {
href: image?.source_url || image?.url,
linkDestination: LINK_DESTINATION_MEDIA
};
case DEPRECATED_LINK_DESTINATION_ATTACHMENT:
return {
href: image?.link,
linkDestination: LINK_DESTINATION_ATTACHMENT
};
case LINK_DESTINATION_MEDIA:
return {
href: image?.source_url || image?.url,
linkDestination: LINK_DESTINATION_MEDIA
};
case LINK_DESTINATION_ATTACHMENT:
return {
href: image?.link,
linkDestination: LINK_DESTINATION_ATTACHMENT
};
case LINK_DESTINATION_NONE:
return {
href: void 0,
linkDestination: LINK_DESTINATION_NONE
};
}
return {};
}
function runV2Migration(attributes) {
let linkTo = attributes.linkTo ? attributes.linkTo : "none";
if (linkTo === "post") {
linkTo = "attachment";
} else if (linkTo === "file") {
linkTo = "media";
}
const imageBlocks = attributes.images.map((image) => {
return getImageBlock(image, attributes.sizeSlug, linkTo);
});
const { images, ids, ...restAttributes } = attributes;
return [
{
...restAttributes,
linkTo,
allowResize: false
},
imageBlocks
];
}
function getImageBlock(image, sizeSlug, linkTo) {
return createBlock("core/image", {
...image.id && { id: parseInt(image.id) },
url: image.url,
alt: image.alt,
caption: image.caption,
sizeSlug,
...getHrefAndDestination(image, linkTo)
});
}
var v7 = {
attributes: {
images: {
type: "array",
default: [],
source: "query",
selector: ".blocks-gallery-item",
query: {
url: {
type: "string",
source: "attribute",
selector: "img",
attribute: "src"
},
fullUrl: {
type: "string",
source: "attribute",
selector: "img",
attribute: "data-full-url"
},
link: {
type: "string",
source: "attribute",
selector: "img",
attribute: "data-link"
},
alt: {
type: "string",
source: "attribute",
selector: "img",
attribute: "alt",
default: ""
},
id: {
type: "string",
source: "attribute",
selector: "img",
attribute: "data-id"
},
caption: {
type: "string",
source: "html",
selector: ".blocks-gallery-item__caption"
}
}
},
ids: {
type: "array",
items: {
type: "number"
},
default: []
},
shortCodeTransforms: {
type: "array",
default: [],
items: {
type: "object"
}
},
columns: {
type: "number",
minimum: 1,
maximum: 8
},
caption: {
type: "string",
source: "html",
selector: ".blocks-gallery-caption"
},
imageCrop: {
type: "boolean",
default: true
},
fixedHeight: {
type: "boolean",
default: true
},
linkTarget: {
type: "string"
},
linkTo: {
type: "string"
},
sizeSlug: {
type: "string",
default: "large"
},
allowResize: {
type: "boolean",
default: false
}
},
save({ attributes }) {
const { caption, columns, imageCrop } = attributes;
const className = clsx("has-nested-images", {
[`columns-${columns}`]: columns !== void 0,
[`columns-default`]: columns === void 0,
"is-cropped": imageCrop
});
const blockProps = useBlockProps.save({ className });
const innerBlocksProps = useInnerBlocksProps.save(blockProps);
return /* @__PURE__ */ jsxs("figure", { ...innerBlocksProps, children: [
innerBlocksProps.children,
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(
RichText.Content,
{
tagName: "figcaption",
className: "blocks-gallery-caption",
value: caption
}
)
] });
}
};
var v6 = {
attributes: {
images: {
type: "array",
default: [],
source: "query",
selector: ".blocks-gallery-item",
query: {
url: {
type: "string",
source: "attribute",
selector: "img",
attribute: "src"
},
fullUrl: {
type: "string",
source: "attribute",
selector: "img",
attribute: "data-full-url"
},
link: {
type: "string",
source: "attribute",
selector: "img",
attribute: "data-link"
},
alt: {
type: "string",
source: "attribute",
selector: "img",
attribute: "alt",
default: ""
},
id: {
type: "string",
source: "attribute",
selector: "img",
attribute: "data-id"
},
caption: {
type: "string",
source: "html",
selector: ".blocks-gallery-item__caption"
}
}
},
ids: {
type: "array",
items: {
type: "number"
},
default: []
},
columns: {
type: "number",
minimum: 1,
maximum: 8
},
caption: {
type: "string",
source: "html",
selector: ".blocks-gallery-caption"
},
imageCrop: {
type: "boolean",
default: true
},
fixedHeight: {
type: "boolean",
default: true
},
linkTo: {
type: "string"
},
sizeSlug: {
type: "string",
default: "large"
}
},
supports: {
anchor: true,
align: true
},
save({ attributes }) {
const {
images,
columns = defaultColumnsNumberV1(attributes),
imageCrop,
caption,
linkTo
} = attributes;
const className = `columns-${columns} ${imageCrop ? "is-cropped" : ""}`;
return /* @__PURE__ */ jsxs("figure", { ...useBlockProps.save({ className }), children: [
/* @__PURE__ */ jsx("ul", { className: "blocks-gallery-grid", children: images.map((image) => {
let href;
switch (linkTo) {
case DEPRECATED_LINK_DESTINATION_MEDIA:
href = image.fullUrl || image.url;
break;
case DEPRECATED_LINK_DESTINATION_ATTACHMENT:
href = image.link;
break;
}
const img = /* @__PURE__ */ jsx(
"img",
{
src: image.url,
alt: image.alt,
"data-id": image.id,
"data-full-url": image.fullUrl,
"data-link": image.link,
className: image.id ? `wp-image-${image.id}` : null
}
);
return /* @__PURE__ */ jsx(
"li",
{
className: "blocks-gallery-item",
children: /* @__PURE__ */ jsxs("figure", { children: [
href ? /* @__PURE__ */ jsx("a", { href, children: img }) : img,
!RichText.isEmpty(image.caption) && /* @__PURE__ */ jsx(
RichText.Content,
{
tagName: "figcaption",
className: "blocks-gallery-item__caption",
value: image.caption
}
)
] })
},
image.id || image.url
);
}) }),
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(
RichText.Content,
{
tagName: "figcaption",
className: "blocks-gallery-caption",
value: caption
}
)
] });
},
migrate(attributes) {
return runV2Migration(attributes);
}
};
var v5 = {
attributes: {
images: {
type: "array",
default: [],
source: "query",
selector: ".blocks-gallery-item",
query: {
url: {
type: "string",
source: "attribute",
selector: "img",
attribute: "src"
},
fullUrl: {
type: "string",
source: "attribute",
selector: "img",
attribute: "data-full-url"
},
link: {
type: "string",
source: "attribute",
selector: "img",
attribute: "data-link"
},
alt: {
type: "string",
source: "attribute",
selector: "img",
attribute: "alt",
default: ""
},
id: {
type: "string",
source: "attribute",
selector: "img",
attribute: "data-id"
},
caption: {
type: "string",
source: "html",
selector: ".blocks-gallery-item__caption"
}
}
},
ids: {
type: "array",
items: {
type: "number"
},
default: []
},
columns: {
type: "number",
minimum: 1,
maximum: 8
},
caption: {
type: "string",
source: "html",
selector: ".blocks-gallery-caption"
},
imageCrop: {
type: "boolean",
default: true
},
linkTo: {
type: "string",
default: "none"
},
sizeSlug: {
type: "string",
default: "large"
}
},
supports: {
align: true
},
isEligible({ linkTo }) {
return !linkTo || linkTo === "attachment" || linkTo === "media";
},
migrate(attributes) {
return runV2Migration(attributes);
},
save({ attributes }) {
const {
images,
columns = defaultColumnsNumberV1(attributes),
imageCrop,
caption,
linkTo
} = attributes;
return /* @__PURE__ */ jsxs(
"figure",
{
className: `columns-${columns} ${imageCrop ? "is-cropped" : ""}`,
children: [
/* @__PURE__ */ jsx("ul", { className: "blocks-gallery-grid", children: images.map((image) => {
let href;
switch (linkTo) {
case "media":
href = image.fullUrl || image.url;
break;
case "attachment":
href = image.link;
break;
}
const img = /* @__PURE__ */ jsx(
"img",
{
src: image.url,
alt: image.alt,
"data-id": image.id,
"data-full-url": image.fullUrl,
"data-link": image.link,
className: image.id ? `wp-image-${image.id}` : null
}
);
return /* @__PURE__ */ jsx(
"li",
{
className: "blocks-gallery-item",
children: /* @__PURE__ */ jsxs("figure", { children: [
href ? /* @__PURE__ */ jsx("a", { href, children: img }) : img,
!RichText.isEmpty(image.caption) && /* @__PURE__ */ jsx(
RichText.Content,
{
tagName: "figcaption",
className: "blocks-gallery-item__caption",
value: image.caption
}
)
] })
},
image.id || image.url
);
}) }),
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(
RichText.Content,
{
tagName: "figcaption",
className: "blocks-gallery-caption",
value: caption
}
)
]
}
);
}
};
var v4 = {
attributes: {
images: {
type: "array",
default: [],
source: "query",
selector: ".blocks-gallery-item",
query: {
url: {
source: "attribute",
selector: "img",
attribute: "src"
},
fullUrl: {
source: "attribute",
selector: "img",
attribute: "data-full-url"
},
link: {
source: "attribute",
selector: "img",
attribute: "data-link"
},
alt: {
source: "attribute",
selector: "img",
attribute: "alt",
default: ""
},
id: {
source: "attribute",
selector: "img",
attribute: "data-id"
},
caption: {
type: "string",
source: "html",
selector: ".blocks-gallery-item__caption"
}
}
},
ids: {
type: "array",
default: []
},
columns: {
type: "number"
},
caption: {
type: "string",
source: "html",
selector: ".blocks-gallery-caption"
},
imageCrop: {
type: "boolean",
default: true
},
linkTo: {
type: "string",
default: "none"
}
},
supports: {
align: true
},
isEligible({ ids }) {
return ids && ids.some((id) => typeof id === "string");
},
migrate(attributes) {
return runV2Migration(attributes);
},
save({ attributes }) {
const {
images,
columns = defaultColumnsNumberV1(attributes),
imageCrop,
caption,
linkTo
} = attributes;
return /* @__PURE__ */ jsxs(
"figure",
{
className: `columns-${columns} ${imageCrop ? "is-cropped" : ""}`,
children: [
/* @__PURE__ */ jsx("ul", { className: "blocks-gallery-grid", children: images.map((image) => {
let href;
switch (linkTo) {
case "media":
href = image.fullUrl || image.url;
break;
case "attachment":
href = image.link;
break;
}
const img = /* @__PURE__ */ jsx(
"img",
{
src: image.url,
alt: image.alt,
"data-id": image.id,
"data-full-url": image.fullUrl,
"data-link": image.link,
className: image.id ? `wp-image-${image.id}` : null
}
);
return /* @__PURE__ */ jsx(
"li",
{
className: "blocks-gallery-item",
children: /* @__PURE__ */ jsxs("figure", { children: [
href ? /* @__PURE__ */ jsx("a", { href, children: img }) : img,
!RichText.isEmpty(image.caption) && /* @__PURE__ */ jsx(
RichText.Content,
{
tagName: "figcaption",
className: "blocks-gallery-item__caption",
value: image.caption
}
)
] })
},
image.id || image.url
);
}) }),
!RichText.isEmpty(caption) && /* @__PURE__ */ jsx(
RichText.Content,
{
tagName: "figcaption",
className: "blocks-gallery-caption",
value: caption
}
)
]
}
);
}
};
var v3 = {
attributes: {
images: {
type: "array",
default: [],
source: "query",
selector: "ul.wp-block-gallery .blocks-gallery-item",
query: {
url: {
source: "attribute",
selector: "img",
attribute: "src"
},
fullUrl: {
source: "attribute",
selector: "img",
attribute: "data-full-url"
},
alt: {
source: "attribute",
selector: "img",
attribute: "alt",
default: ""
},
id: {
source: "attribute",
selector: "img",
attribute: "data-id"
},
link: {
source: "attribute",
selector: "img",
attribute: "data-link"
},
caption: {
type: "string",
source: "html",
selector: "figcaption"
}
}
},
ids: {
type: "array",
default: []
},
columns: {
type: "number"
},
imageCrop: {
type: "boolean",
default: true
},
linkTo: {
type: "string",
default: "none"
}
},
supports: {
align: true
},
save({ attributes }) {
const {
images,
columns = defaultColumnsNumberV1(attributes),
imageCrop,
linkTo
} = attributes;
return /* @__PURE__ */ jsx(
"ul",
{
className: `columns-${columns} ${imageCrop ? "is-cropped" : ""}`,
children: images.map((image) => {
let href;
switch (linkTo) {
case "media":
href = image.fullUrl || image.url;
break;
case "attachment":
href = image.link;
break;
}
const img = /* @__PURE__ */ jsx(
"img",
{
src: image.url,
alt: image.alt,
"data-id": image.id,
"data-full-url": image.fullUrl,
"data-link": image.link,
className: image.id ? `wp-image-${image.id}` : null
}
);
return /* @__PURE__ */ jsx(
"li",
{
className: "blocks-gallery-item",
children: /* @__PURE__ */ jsxs("figure", { children: [
href ? /* @__PURE__ */ jsx("a", { href, children: img }) : img,
image.caption && image.caption.length > 0 && /* @__PURE__ */ jsx(
RichText.Content,
{
tagName: "figcaption",
value: image.caption
}
)
] })
},
image.id || image.url
);
})
}
);
},
migrate(attributes) {
return runV2Migration(attributes);
}
};
var v2 = {
attributes: {
images: {
type: "array",
default: [],
source: "query",
selector: "ul.wp-block-gallery .blocks-gallery-item",
query: {
url: {
source: "attribute",
selector: "img",
attribute: "src"
},
alt: {
source: "attribute",
selector: "img",
attribute: "alt",
default: ""
},
id: {
source: "attribute",
selector: "img",
attribute: "data-id"
},
link: {
source: "attribute",
selector: "img",
attribute: "data-link"
},
caption: {
type: "string",
source: "html",
selector: "figcaption"
}
}
},
columns: {
type: "number"
},
imageCrop: {
type: "boolean",
default: true
},
linkTo: {
type: "string",
default: "none"
}
},
isEligible({ images, ids }) {
return images && images.length > 0 && (!ids && images || ids && images && ids.length !== images.length || images.some((id, index) => {
if (!id && ids[index] !== null) {
return true;
}
return parseInt(id, 10) !== ids[index];
}));
},
migrate(attributes) {
return runV2Migration(attributes);
},
supports: {
align: true
},
save({ attributes }) {
const {
images,
columns = defaultColumnsNumberV1(attributes),
imageCrop,
linkTo
} = attributes;
return /* @__PURE__ */ jsx(
"ul",
{
className: `columns-${columns} ${imageCrop ? "is-cropped" : ""}`,
children: images.map((image) => {
let href;
switch (linkTo) {
case "media":
href = image.url;
break;
case "attachment":
href = image.link;
break;
}
const img = /* @__PURE__ */ jsx(
"img",
{
src: image.url,
alt: image.alt,
"data-id": image.id,
"data-link": image.link,
className: image.id ? `wp-image-${image.id}` : null
}
);
return /* @__PURE__ */ jsx(
"li",
{
className: "blocks-gallery-item",
children: /* @__PURE__ */ jsxs("figure", { children: [
href ? /* @__PURE__ */ jsx("a", { href, children: img }) : img,
image.caption && image.caption.length > 0 && /* @__PURE__ */ jsx(
RichText.Content,
{
tagName: "figcaption",
value: image.caption
}
)
] })
},
image.id || image.url
);
})
}
);
}
};
var v1 = {
attributes: {
images: {
type: "array",
default: [],
source: "query",
selector: "div.wp-block-gallery figure.blocks-gallery-image img",
query: {
url: {
source: "attribute",
attribute: "src"
},
alt: {
source: "attribute",
attribute: "alt",
default: ""
},
id: {
source: "attribute",
attribute: "data-id"
}
}
},
columns: {
type: "number"
},
imageCrop: {
type: "boolean",
default: true
},
linkTo: {
type: "string",
default: "none"
},
align: {
type: "string",
default: "none"
}
},
supports: {
align: true
},
save({ attributes }) {
const {
images,
columns = defaultColumnsNumberV1(attributes),
align,
imageCrop,
linkTo
} = attributes;
const className = clsx(`columns-${columns}`, {
alignnone: align === "none",
"is-cropped": imageCrop
});
return /* @__PURE__ */ jsx("div", { className, children: images.map((image) => {
let href;
switch (linkTo) {
case "media":
href = image.url;
break;
case "attachment":
href = image.link;
break;
}
const img = /* @__PURE__ */ jsx(
"img",
{
src: image.url,
alt: image.alt,
"data-id": image.id
}
);
return /* @__PURE__ */ jsx(
"figure",
{
className: "blocks-gallery-image",
children: href ? /* @__PURE__ */ jsx("a", { href, children: img }) : img
},
image.id || image.url
);
}) });
},
migrate(attributes) {
return runV2Migration(attributes);
}
};
var deprecated_default = [v7, v6, v5, v4, v3, v2, v1];
export {
deprecated_default as default,
defaultColumnsNumberV1,
getHrefAndDestination,
getImageBlock
};
//# sourceMappingURL=deprecated.js.map