@wordpress/block-library
Version:
Block library for the WordPress editor.
266 lines (241 loc) • 11.3 kB
JavaScript
/**
* WordPress dependencies
*/
import { createBlock } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from './shared';
import cleanEmptyObject from '../utils/clean-empty-object';
const transforms = {
from: [{
type: 'block',
blocks: ['core/image'],
transform: _ref => {
var _style$color;
let {
caption,
url,
alt,
align,
id,
anchor,
style
} = _ref;
return createBlock('core/cover', {
dimRatio: 50,
url,
alt,
align,
id,
anchor,
style: {
color: {
duotone: style === null || style === void 0 ? void 0 : (_style$color = style.color) === null || _style$color === void 0 ? void 0 : _style$color.duotone
}
}
}, [createBlock('core/paragraph', {
content: caption,
fontSize: 'large',
align: 'center'
})]);
}
}, {
type: 'block',
blocks: ['core/video'],
transform: _ref2 => {
let {
caption,
src,
align,
id,
anchor
} = _ref2;
return createBlock('core/cover', {
dimRatio: 50,
url: src,
align,
id,
backgroundType: VIDEO_BACKGROUND_TYPE,
anchor
}, [createBlock('core/paragraph', {
content: caption,
fontSize: 'large',
align: 'center'
})]);
}
}, {
type: 'block',
blocks: ['core/group'],
transform: (attributes, innerBlocks) => {
var _innerBlocks$, _style$color2, _style$color3, _style$color4, _style$color5;
const {
align,
anchor,
backgroundColor,
gradient,
style
} = attributes; // If the Group block being transformed has a Cover block as its
// only child return that Cover block.
if ((innerBlocks === null || innerBlocks === void 0 ? void 0 : innerBlocks.length) === 1 && ((_innerBlocks$ = innerBlocks[0]) === null || _innerBlocks$ === void 0 ? void 0 : _innerBlocks$.name) === 'core/cover') {
return createBlock('core/cover', innerBlocks[0].attributes, innerBlocks[0].innerBlocks);
} // If no background or gradient color is provided, default to 50% opacity.
// This matches the styling of a Cover block with a background image,
// in the state where a background image has been removed.
const dimRatio = backgroundColor || gradient || style !== null && style !== void 0 && (_style$color2 = style.color) !== null && _style$color2 !== void 0 && _style$color2.background || style !== null && style !== void 0 && (_style$color3 = style.color) !== null && _style$color3 !== void 0 && _style$color3.gradient ? undefined : 50; // Move the background or gradient color to the parent Cover block.
const parentAttributes = {
align,
anchor,
dimRatio,
overlayColor: backgroundColor,
customOverlayColor: style === null || style === void 0 ? void 0 : (_style$color4 = style.color) === null || _style$color4 === void 0 ? void 0 : _style$color4.background,
gradient,
customGradient: style === null || style === void 0 ? void 0 : (_style$color5 = style.color) === null || _style$color5 === void 0 ? void 0 : _style$color5.gradient
};
const attributesWithoutBackgroundColors = { ...attributes,
backgroundColor: undefined,
gradient: undefined,
style: cleanEmptyObject({ ...(attributes === null || attributes === void 0 ? void 0 : attributes.style),
color: style !== null && style !== void 0 && style.color ? { ...(style === null || style === void 0 ? void 0 : style.color),
background: undefined,
gradient: undefined
} : undefined
})
}; // Preserve the block by nesting it within the Cover block,
// instead of converting the Group block directly to the Cover block.
return createBlock('core/cover', parentAttributes, [createBlock('core/group', attributesWithoutBackgroundColors, innerBlocks)]);
}
}],
to: [{
type: 'block',
blocks: ['core/image'],
isMatch: _ref3 => {
let {
backgroundType,
url,
overlayColor,
customOverlayColor,
gradient,
customGradient
} = _ref3;
if (url) {
// If a url exists the transform could happen if that URL represents an image background.
return backgroundType === IMAGE_BACKGROUND_TYPE;
} // If a url is not set the transform could happen if the cover has no background color or gradient;
return !overlayColor && !customOverlayColor && !gradient && !customGradient;
},
transform: _ref4 => {
var _style$color6;
let {
title,
url,
alt,
align,
id,
anchor,
style
} = _ref4;
return createBlock('core/image', {
caption: title,
url,
alt,
align,
id,
anchor,
style: {
color: {
duotone: style === null || style === void 0 ? void 0 : (_style$color6 = style.color) === null || _style$color6 === void 0 ? void 0 : _style$color6.duotone
}
}
});
}
}, {
type: 'block',
blocks: ['core/video'],
isMatch: _ref5 => {
let {
backgroundType,
url,
overlayColor,
customOverlayColor,
gradient,
customGradient
} = _ref5;
if (url) {
// If a url exists the transform could happen if that URL represents a video background.
return backgroundType === VIDEO_BACKGROUND_TYPE;
} // If a url is not set the transform could happen if the cover has no background color or gradient;
return !overlayColor && !customOverlayColor && !gradient && !customGradient;
},
transform: _ref6 => {
let {
title,
url,
align,
id,
anchor
} = _ref6;
return createBlock('core/video', {
caption: title,
src: url,
id,
align,
anchor
});
}
}, {
type: 'block',
blocks: ['core/group'],
isMatch: _ref7 => {
let {
url,
useFeaturedImage
} = _ref7;
// If the Cover block uses background media, skip this transform,
// and instead use the Group block's default transform.
if (url || useFeaturedImage) {
return false;
}
return true;
},
transform: (attributes, innerBlocks) => {
var _attributes$style, _attributes$style2, _innerBlocks$2;
// Convert Cover overlay colors to comparable Group background colors.
const transformedColorAttributes = {
backgroundColor: attributes === null || attributes === void 0 ? void 0 : attributes.overlayColor,
gradient: attributes === null || attributes === void 0 ? void 0 : attributes.gradient,
style: cleanEmptyObject({ ...(attributes === null || attributes === void 0 ? void 0 : attributes.style),
color: attributes !== null && attributes !== void 0 && attributes.customOverlayColor || attributes !== null && attributes !== void 0 && attributes.customGradient || attributes !== null && attributes !== void 0 && (_attributes$style = attributes.style) !== null && _attributes$style !== void 0 && _attributes$style.color ? {
background: attributes === null || attributes === void 0 ? void 0 : attributes.customOverlayColor,
gradient: attributes === null || attributes === void 0 ? void 0 : attributes.customGradient,
...(attributes === null || attributes === void 0 ? void 0 : (_attributes$style2 = attributes.style) === null || _attributes$style2 === void 0 ? void 0 : _attributes$style2.color)
} : undefined
})
}; // If the Cover block contains only a single Group block as a direct child,
// then attempt to merge the Cover's background colors with the child Group block,
// and remove the Cover block as the wrapper.
if ((innerBlocks === null || innerBlocks === void 0 ? void 0 : innerBlocks.length) === 1 && ((_innerBlocks$2 = innerBlocks[0]) === null || _innerBlocks$2 === void 0 ? void 0 : _innerBlocks$2.name) === 'core/group') {
var _groupAttributes$styl, _groupAttributes$styl2, _groupAttributes$styl3, _groupAttributes$styl4, _transformedColorAttr, _groupAttributes$styl5, _transformedColorAttr2, _groupAttributes$styl6, _innerBlocks$4;
const groupAttributes = cleanEmptyObject(innerBlocks[0].attributes || {}); // If the Group block contains any kind of background color or gradient,
// skip merging Cover background colors, and preserve the Group block's colors.
if (groupAttributes !== null && groupAttributes !== void 0 && groupAttributes.backgroundColor || groupAttributes !== null && groupAttributes !== void 0 && groupAttributes.gradient || groupAttributes !== null && groupAttributes !== void 0 && (_groupAttributes$styl = groupAttributes.style) !== null && _groupAttributes$styl !== void 0 && (_groupAttributes$styl2 = _groupAttributes$styl.color) !== null && _groupAttributes$styl2 !== void 0 && _groupAttributes$styl2.background || groupAttributes !== null && groupAttributes !== void 0 && (_groupAttributes$styl3 = groupAttributes.style) !== null && _groupAttributes$styl3 !== void 0 && (_groupAttributes$styl4 = _groupAttributes$styl3.color) !== null && _groupAttributes$styl4 !== void 0 && _groupAttributes$styl4.gradient) {
var _innerBlocks$3;
return createBlock('core/group', groupAttributes, (_innerBlocks$3 = innerBlocks[0]) === null || _innerBlocks$3 === void 0 ? void 0 : _innerBlocks$3.innerBlocks);
}
return createBlock('core/group', { ...transformedColorAttributes,
...groupAttributes,
style: cleanEmptyObject({ ...(groupAttributes === null || groupAttributes === void 0 ? void 0 : groupAttributes.style),
color: transformedColorAttributes !== null && transformedColorAttributes !== void 0 && (_transformedColorAttr = transformedColorAttributes.style) !== null && _transformedColorAttr !== void 0 && _transformedColorAttr.color || groupAttributes !== null && groupAttributes !== void 0 && (_groupAttributes$styl5 = groupAttributes.style) !== null && _groupAttributes$styl5 !== void 0 && _groupAttributes$styl5.color ? { ...(transformedColorAttributes === null || transformedColorAttributes === void 0 ? void 0 : (_transformedColorAttr2 = transformedColorAttributes.style) === null || _transformedColorAttr2 === void 0 ? void 0 : _transformedColorAttr2.color),
...(groupAttributes === null || groupAttributes === void 0 ? void 0 : (_groupAttributes$styl6 = groupAttributes.style) === null || _groupAttributes$styl6 === void 0 ? void 0 : _groupAttributes$styl6.color)
} : undefined
})
}, (_innerBlocks$4 = innerBlocks[0]) === null || _innerBlocks$4 === void 0 ? void 0 : _innerBlocks$4.innerBlocks);
} // In all other cases, transform the Cover block directly to a Group block.
return createBlock('core/group', { ...attributes,
...transformedColorAttributes
}, innerBlocks);
}
}]
};
export default transforms;
//# sourceMappingURL=transforms.js.map