@wordpress/editor/build-module/components/post-url/panel.js

Enhanced block editor for WordPress posts.

/**
 * WordPress dependencies
 */
import { useMemo, useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { Dropdown, Button, ExternalLink } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { safeDecodeURIComponent } from '@wordpress/url';
import { store as coreStore } from '@wordpress/core-data';

/**
 * Internal dependencies
 */
import PostURLCheck from './check';
import PostURL from './index';
import PostPanelRow from '../post-panel-row';
import { store as editorStore } from '../../store';

/**
 * Renders the `PostURLPanel` component.
 *
 * @return {React.ReactNode} The rendered PostURLPanel component.
 */
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function PostURLPanel() {
  const {
    isFrontPage
  } = useSelect(select => {
    const {
      getCurrentPostId
    } = select(editorStore);
    const {
      getEditedEntityRecord,
      canUser
    } = select(coreStore);
    const siteSettings = canUser('read', {
      kind: 'root',
      name: 'site'
    }) ? getEditedEntityRecord('root', 'site') : undefined;
    const _id = getCurrentPostId();
    return {
      isFrontPage: siteSettings?.page_on_front === _id
    };
  }, []);
  // Use internal state instead of a ref to make sure that the component
  // re-renders when the popover's anchor updates.
  const [popoverAnchor, setPopoverAnchor] = useState(null);
  // Memoize popoverProps to avoid returning a new object every time.
  const popoverProps = useMemo(() => ({
    // Anchor the popover to the middle of the entire row so that it doesn't
    // move around when the label changes.
    anchor: popoverAnchor,
    placement: 'left-start',
    offset: 36,
    shift: true
  }), [popoverAnchor]);
  const label = isFrontPage ? __('Link') : __('Slug');
  return /*#__PURE__*/_jsx(PostURLCheck, {
    children: /*#__PURE__*/_jsxs(PostPanelRow, {
      label: label,
      ref: setPopoverAnchor,
      children: [!isFrontPage && /*#__PURE__*/_jsx(Dropdown, {
        popoverProps: popoverProps,
        className: "editor-post-url__panel-dropdown",
        contentClassName: "editor-post-url__panel-dialog",
        focusOnMount: true,
        renderToggle: ({
          isOpen,
          onToggle
        }) => /*#__PURE__*/_jsx(PostURLToggle, {
          isOpen: isOpen,
          onClick: onToggle
        }),
        renderContent: ({
          onClose
        }) => /*#__PURE__*/_jsx(PostURL, {
          onClose: onClose
        })
      }), isFrontPage && /*#__PURE__*/_jsx(FrontPageLink, {})]
    })
  });
}
function PostURLToggle({
  isOpen,
  onClick
}) {
  const {
    slug
  } = useSelect(select => {
    return {
      slug: select(editorStore).getEditedPostSlug()
    };
  }, []);
  const decodedSlug = safeDecodeURIComponent(slug);
  return /*#__PURE__*/_jsx(Button, {
    size: "compact",
    className: "editor-post-url__panel-toggle",
    variant: "tertiary",
    "aria-expanded": isOpen,
    "aria-label":
    // translators: %s: Current post link.
    sprintf(__('Change link: %s'), decodedSlug),
    onClick: onClick,
    children: /*#__PURE__*/_jsx(_Fragment, {
      children: decodedSlug
    })
  });
}
function FrontPageLink() {
  const {
    postLink
  } = useSelect(select => {
    const {
      getCurrentPost
    } = select(editorStore);
    return {
      postLink: getCurrentPost()?.link
    };
  }, []);
  return /*#__PURE__*/_jsx(ExternalLink, {
    className: "editor-post-url__front-page-link",
    href: postLink,
    target: "_blank",
    children: postLink
  });
}
//# sourceMappingURL=panel.js.map