@wordpress/block-library
Version:
Block library for the WordPress editor.
111 lines (105 loc) • 3.72 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Gallery = void 0;
var _reactNative = require("react-native");
var _shared = require("./shared");
var _galleryStyles = _interopRequireDefault(require("./gallery-styles.scss"));
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _element = require("@wordpress/element");
var _reactNativeBridge = require("@wordpress/react-native-bridge");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _viewport = require("@wordpress/viewport");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* Internal dependencies
*/
/**
* WordPress dependencies
*/
const TILE_SPACING = 8;
// we must limit displayed columns since readable content max-width is 580px
const MAX_DISPLAYED_COLUMNS = 4;
const MAX_DISPLAYED_COLUMNS_NARROW = 2;
const Gallery = props => {
const [isCaptionSelected, setIsCaptionSelected] = (0, _element.useState)(false);
const [resizeObserver, sizes] = (0, _compose.useResizeObserver)();
const [maxWidth, setMaxWidth] = (0, _element.useState)(0);
(0, _element.useEffect)(_reactNativeBridge.mediaUploadSync, []);
const {
mediaPlaceholder,
attributes,
images,
isNarrow,
onBlur,
insertBlocksAfter,
clientId
} = props;
(0, _element.useEffect)(() => {
const {
width
} = sizes || {};
if (width) {
setMaxWidth(width);
}
}, [sizes]);
const {
align,
columns = (0, _shared.defaultColumnsNumber)(images.length)
} = attributes;
const displayedColumns = Math.min(columns, isNarrow ? MAX_DISPLAYED_COLUMNS_NARROW : MAX_DISPLAYED_COLUMNS);
const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)({}, {
contentResizeMode: 'stretch',
orientation: 'horizontal',
renderAppender: false,
numColumns: displayedColumns,
marginHorizontal: TILE_SPACING,
marginVertical: TILE_SPACING,
layout: {
type: 'default',
alignments: []
},
gridProperties: {
numColumns: displayedColumns
},
parentWidth: maxWidth + 2 * TILE_SPACING
});
const focusGalleryCaption = () => {
if (!isCaptionSelected) {
setIsCaptionSelected(true);
}
};
const isFullWidth = align === _components.WIDE_ALIGNMENTS.alignments.full;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: isFullWidth && _galleryStyles.default.fullWidth,
children: [resizeObserver, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
...innerBlocksProps
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [isFullWidth && _galleryStyles.default.fullWidth, _galleryStyles.default.galleryAppender],
children: mediaPlaceholder
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockCaption, {
clientId: clientId,
isSelected: isCaptionSelected,
accessible: true,
accessibilityLabelCreator: caption => _blockEditor.RichText.isEmpty(caption) ? /* translators: accessibility text. Empty gallery caption. */
'Gallery caption. Empty' : (0, _i18n.sprintf)(/* translators: accessibility text. %s: gallery caption. */
(0, _i18n.__)('Gallery caption. %s'), caption),
onFocus: focusGalleryCaption,
onBlur: onBlur // Always assign onBlur as props.
,
insertBlocksAfter: insertBlocksAfter
})]
});
};
exports.Gallery = Gallery;
var _default = exports.default = (0, _viewport.withViewportMatch)({
isNarrow: '< small'
})(Gallery);
//# sourceMappingURL=gallery.native.js.map