@wordpress/block-library
Version:
Block library for the WordPress editor.
142 lines (141 loc) • 4.16 kB
JavaScript
// packages/block-library/src/accordion-item/edit.js
import { __ } from "@wordpress/i18n";
import {
useBlockProps,
useInnerBlocksProps,
InspectorControls,
store as blockEditorStore
} from "@wordpress/block-editor";
import { useDispatch, useSelect } from "@wordpress/data";
import { useEffect } from "@wordpress/element";
import {
ToggleControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import clsx from "clsx";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function Edit({
attributes,
clientId,
setAttributes,
context
}) {
const { openByDefault } = attributes;
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const { isSelected, getBlockOrder } = useSelect(
(select) => {
const {
isBlockSelected,
hasSelectedInnerBlock,
getBlockOrder: getBlockOrderSelector
} = select(blockEditorStore);
return {
isSelected: isBlockSelected(clientId) || hasSelectedInnerBlock(clientId, true),
getBlockOrder: getBlockOrderSelector
};
},
[clientId]
);
const contentBlockClientId = getBlockOrder(clientId)[1];
const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
useEffect(() => {
if (contentBlockClientId) {
__unstableMarkNextChangeAsNotPersistent();
updateBlockAttributes(contentBlockClientId, {
isSelected
});
}
}, [
isSelected,
contentBlockClientId,
__unstableMarkNextChangeAsNotPersistent,
updateBlockAttributes
]);
const blockProps = useBlockProps({
className: clsx({
"is-open": openByDefault || isSelected
})
});
const headingLevel = context && context["core/accordion-heading-level"];
const innerBlocksProps = useInnerBlocksProps(blockProps, {
template: [
[
"core/accordion-heading",
headingLevel ? { level: headingLevel } : {}
],
[
"core/accordion-panel",
{
openByDefault
}
]
],
templateLock: "all",
directInsert: true,
templateInsertUpdatesSelection: true
});
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx(
ToolsPanel,
{
label: __("Settings"),
resetAll: () => {
setAttributes({ openByDefault: false });
if (contentBlockClientId) {
updateBlockAttributes(contentBlockClientId, {
openByDefault: false
});
}
},
dropdownMenuProps,
children: /* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Open by default"),
isShownByDefault: true,
hasValue: () => !!openByDefault,
onDeselect: () => {
setAttributes({ openByDefault: false });
if (contentBlockClientId) {
updateBlockAttributes(contentBlockClientId, {
openByDefault: false
});
}
},
children: /* @__PURE__ */ jsx(
ToggleControl,
{
label: __("Open by default"),
__nextHasNoMarginBottom: true,
onChange: (value) => {
setAttributes({
openByDefault: value
});
if (contentBlockClientId) {
updateBlockAttributes(
contentBlockClientId,
{
openByDefault: value
}
);
}
},
checked: openByDefault,
help: __(
"Accordion content will be displayed by default."
)
}
)
}
)
}
) }, "setting"),
/* @__PURE__ */ jsx("div", { ...innerBlocksProps })
] });
}
export {
Edit as default
};
//# sourceMappingURL=edit.js.map