@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
93 lines (91 loc) • 2.92 kB
JavaScript
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { TextControl, RadioControl, __experimentalVStack as VStack } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { useSelect, useDispatch } from '@wordpress/data';
import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import { VISIBILITY_OPTIONS } from './utils';
import { store as editorStore } from '../../store';
/**
* Allows users to set the visibility of a post.
*
* @param {Object} props The component props.
* @param {Function} props.onClose Function to call when the popover is closed.
* @return {React.ReactNode} The rendered component.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function PostVisibility({
onClose
}) {
const instanceId = useInstanceId(PostVisibility);
const {
status,
visibility,
password
} = useSelect(select => ({
status: select(editorStore).getEditedPostAttribute('status'),
visibility: select(editorStore).getEditedPostVisibility(),
password: select(editorStore).getEditedPostAttribute('password')
}));
const {
editPost
} = useDispatch(editorStore);
const [hasPassword, setHasPassword] = useState(!!password);
function updateVisibility(value) {
const nextValues = {
public: {
status: visibility === 'private' ? 'draft' : status,
password: ''
},
private: {
status: 'private',
password: ''
},
password: {
status: visibility === 'private' ? 'draft' : status,
password: password || ''
}
};
editPost(nextValues[value]);
setHasPassword(value === 'password');
}
const updatePassword = value => {
editPost({
password: value
});
};
return /*#__PURE__*/_jsxs("div", {
className: "editor-post-visibility",
children: [/*#__PURE__*/_jsx(InspectorPopoverHeader, {
title: __('Visibility'),
help: __('Control how this post is viewed.'),
onClose: onClose
}), /*#__PURE__*/_jsxs(VStack, {
spacing: 4,
children: [/*#__PURE__*/_jsx(RadioControl, {
label: __('Visibility'),
hideLabelFromVision: true,
options: VISIBILITY_OPTIONS,
selected: hasPassword ? 'password' : visibility,
onChange: updateVisibility
}), hasPassword && /*#__PURE__*/_jsx(TextControl, {
label: __('Password'),
onChange: updatePassword,
value: password,
placeholder: __('Use a secure password'),
type: "text",
id: `editor-post-visibility__password-input-${instanceId}`,
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
maxLength: 255
})]
})]
});
}
//# sourceMappingURL=index.js.map