@wordpress/block-library
Version:
Block library for the WordPress editor.
318 lines (314 loc) • 10.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _primitives = require("@wordpress/primitives");
var _data = require("@wordpress/data");
var _lockUnlock = require("../lock-unlock");
var _controls = _interopRequireDefault(require("./controls"));
var _constants = require("./constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
useSpacingSizes
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
const ResizableSpacer = ({
orientation,
onResizeStart,
onResize,
onResizeStop,
isSelected,
isResizing,
setIsResizing,
...props
}) => {
const getCurrentSize = elt => {
return orientation === 'horizontal' ? elt.clientWidth : elt.clientHeight;
};
const getNextVal = elt => {
return `${getCurrentSize(elt)}px`;
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ResizableBox, {
className: (0, _clsx.default)('block-library-spacer__resize-container', {
'resize-horizontal': orientation === 'horizontal',
'is-resizing': isResizing,
'is-selected': isSelected
}),
onResizeStart: (_event, _direction, elt) => {
const nextVal = getNextVal(elt);
onResizeStart(nextVal);
onResize(nextVal);
},
onResize: (_event, _direction, elt) => {
onResize(getNextVal(elt));
if (!isResizing) {
setIsResizing(true);
}
},
onResizeStop: (_event, _direction, elt) => {
const nextVal = getCurrentSize(elt);
onResizeStop(`${nextVal}px`);
setIsResizing(false);
},
__experimentalShowTooltip: true,
__experimentalTooltipProps: {
axis: orientation === 'horizontal' ? 'x' : 'y',
position: 'corner',
isVisible: isResizing
},
showHandle: isSelected,
...props
});
};
const SpacerEdit = ({
attributes,
isSelected,
setAttributes,
toggleSelection,
context,
__unstableParentLayout: parentLayout,
className
}) => {
const disableCustomSpacingSizes = (0, _data.useSelect)(select => {
const editorSettings = select(_blockEditor.store).getSettings();
return editorSettings?.disableCustomSpacingSizes;
});
const {
orientation
} = context;
const {
orientation: parentOrientation,
type,
default: {
type: defaultType
} = {}
} = parentLayout || {};
// Check if the spacer is inside a flex container.
const isFlexLayout = type === 'flex' || !type && defaultType === 'flex';
// If the spacer is inside a flex container, it should either inherit the orientation
// of the parent or use the flex default orientation.
const inheritedOrientation = !parentOrientation && isFlexLayout ? 'horizontal' : parentOrientation || orientation;
const {
height,
width,
style: blockStyle = {}
} = attributes;
const {
layout = {}
} = blockStyle;
const {
selfStretch,
flexSize
} = layout;
const spacingSizes = useSpacingSizes();
const [isResizing, setIsResizing] = (0, _element.useState)(false);
const [temporaryHeight, setTemporaryHeight] = (0, _element.useState)(null);
const [temporaryWidth, setTemporaryWidth] = (0, _element.useState)(null);
const onResizeStart = () => toggleSelection(false);
const onResizeStop = () => toggleSelection(true);
const {
__unstableMarkNextChangeAsNotPersistent
} = (0, _data.useDispatch)(_blockEditor.store);
const handleOnVerticalResizeStop = newHeight => {
onResizeStop();
if (isFlexLayout) {
setAttributes({
style: {
...blockStyle,
layout: {
...layout,
flexSize: newHeight,
selfStretch: 'fixed'
}
}
});
}
setAttributes({
height: newHeight
});
setTemporaryHeight(null);
};
const handleOnHorizontalResizeStop = newWidth => {
onResizeStop();
if (isFlexLayout) {
setAttributes({
style: {
...blockStyle,
layout: {
...layout,
flexSize: newWidth,
selfStretch: 'fixed'
}
}
});
}
setAttributes({
width: newWidth
});
setTemporaryWidth(null);
};
const getHeightForVerticalBlocks = () => {
if (isFlexLayout) {
return undefined;
}
return temporaryHeight || (0, _blockEditor.getSpacingPresetCssVar)(height) || undefined;
};
const getWidthForHorizontalBlocks = () => {
if (isFlexLayout) {
return undefined;
}
return temporaryWidth || (0, _blockEditor.getSpacingPresetCssVar)(width) || undefined;
};
const sizeConditionalOnOrientation = inheritedOrientation === 'horizontal' ? temporaryWidth || flexSize : temporaryHeight || flexSize;
const style = {
height: inheritedOrientation === 'horizontal' ? 24 : getHeightForVerticalBlocks(),
width: inheritedOrientation === 'horizontal' ? getWidthForHorizontalBlocks() : undefined,
// In vertical flex containers, the spacer shrinks to nothing without a minimum width.
minWidth: inheritedOrientation === 'vertical' && isFlexLayout ? 48 : undefined,
// Add flex-basis so temporary sizes are respected.
flexBasis: isFlexLayout ? sizeConditionalOnOrientation : undefined,
// Remove flex-grow when resizing.
flexGrow: isFlexLayout && isResizing ? 0 : undefined
};
const resizableBoxWithOrientation = blockOrientation => {
if (blockOrientation === 'horizontal') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableSpacer, {
minWidth: _constants.MIN_SPACER_SIZE,
enable: {
top: false,
right: true,
bottom: false,
left: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false
},
orientation: blockOrientation,
onResizeStart: onResizeStart,
onResize: setTemporaryWidth,
onResizeStop: handleOnHorizontalResizeStop,
isSelected: isSelected,
isResizing: isResizing,
setIsResizing: setIsResizing
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableSpacer, {
minHeight: _constants.MIN_SPACER_SIZE,
enable: {
top: false,
right: false,
bottom: true,
left: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false
},
orientation: blockOrientation,
onResizeStart: onResizeStart,
onResize: setTemporaryHeight,
onResizeStop: handleOnVerticalResizeStop,
isSelected: isSelected,
isResizing: isResizing,
setIsResizing: setIsResizing
})
});
};
(0, _element.useEffect)(() => {
// To avoid interfering with undo/redo operations any changes in this
// effect must not make history and should be preceded by
// `__unstableMarkNextChangeAsNotPersistent()`.
const setAttributesCovertly = nextAttributes => {
__unstableMarkNextChangeAsNotPersistent();
setAttributes(nextAttributes);
};
if (isFlexLayout && selfStretch !== 'fill' && selfStretch !== 'fit' && flexSize === undefined) {
if (inheritedOrientation === 'horizontal') {
// If spacer is moving from a vertical container to a horizontal container,
// it might not have width but have height instead.
const newSize = (0, _blockEditor.getCustomValueFromPreset)(width, spacingSizes) || (0, _blockEditor.getCustomValueFromPreset)(height, spacingSizes) || '100px';
setAttributesCovertly({
width: '0px',
style: {
...blockStyle,
layout: {
...layout,
flexSize: newSize,
selfStretch: 'fixed'
}
}
});
} else {
const newSize = (0, _blockEditor.getCustomValueFromPreset)(height, spacingSizes) || (0, _blockEditor.getCustomValueFromPreset)(width, spacingSizes) || '100px';
setAttributesCovertly({
height: '0px',
style: {
...blockStyle,
layout: {
...layout,
flexSize: newSize,
selfStretch: 'fixed'
}
}
});
}
} else if (isFlexLayout && (selfStretch === 'fill' || selfStretch === 'fit')) {
setAttributesCovertly(inheritedOrientation === 'horizontal' ? {
width: undefined
} : {
height: undefined
});
} else if (!isFlexLayout && (selfStretch || flexSize)) {
setAttributesCovertly({
...(inheritedOrientation === 'horizontal' ? {
width: flexSize
} : {
height: flexSize
}),
style: {
...blockStyle,
layout: {
...layout,
flexSize: undefined,
selfStretch: undefined
}
}
});
}
}, [blockStyle, flexSize, height, inheritedOrientation, isFlexLayout, layout, selfStretch, setAttributes, spacingSizes, width, __unstableMarkNextChangeAsNotPersistent]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.View, {
...(0, _blockEditor.useBlockProps)({
style,
className: (0, _clsx.default)(className, {
'custom-sizes-disabled': disableCustomSpacingSizes
})
}),
children: resizableBoxWithOrientation(inheritedOrientation)
}), !isFlexLayout && /*#__PURE__*/(0, _jsxRuntime.jsx)(_controls.default, {
setAttributes: setAttributes,
height: temporaryHeight || height,
width: temporaryWidth || width,
orientation: inheritedOrientation,
isResizing: isResizing
})]
});
};
var _default = exports.default = SpacerEdit;
//# sourceMappingURL=edit.js.map