@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 12.7 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/post-date/edit.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useEffect, useMemo, useState } from '@wordpress/element';\nimport {\n\tdateI18n,\n\thumanTimeDiff,\n\tgetSettings as getDateSettings,\n} from '@wordpress/date';\nimport {\n\tAlignmentControl,\n\tBlockControls,\n\tInspectorControls,\n\tstore as blockEditorStore,\n\tuseBlockProps,\n\tuseBlockEditingMode,\n\t__experimentalDateFormatPicker as DateFormatPicker,\n\t__experimentalPublishDateTimePicker as PublishDateTimePicker,\n} from '@wordpress/block-editor';\nimport {\n\tDropdown,\n\tToolbarGroup,\n\tToolbarButton,\n\tToggleControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport { pencil } from '@wordpress/icons';\nimport { DOWN } from '@wordpress/keycodes';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as blocksStore } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nexport default function PostDateEdit( {\n\tattributes,\n\tcontext: { postType: postTypeSlug, queryId },\n\tsetAttributes,\n\tname,\n} ) {\n\tconst { datetime, textAlign, format, isLink } = attributes;\n\tconst blockProps = useBlockProps( {\n\t\tclassName: clsx( {\n\t\t\t[ `has-text-align-${ textAlign }` ]: textAlign,\n\t\t} ),\n\t} );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps = useMemo(\n\t\t() => ( { anchor: popoverAnchor } ),\n\t\t[ popoverAnchor ]\n\t);\n\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// We need to set the datetime to a default value upon first loading\n\t// to discern the block from its legacy version (which would default\n\t// to the containing post's publish date).\n\tuseEffect( () => {\n\t\tif ( datetime === undefined ) {\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( { datetime: new Date() } );\n\t\t}\n\t}, [ datetime ] );\n\n\tconst isDescendentOfQueryLoop = Number.isFinite( queryId );\n\tconst dateSettings = getDateSettings();\n\n\tconst {\n\t\tpostType,\n\t\tsiteFormat = dateSettings.formats.date,\n\t\tsiteTimeFormat = dateSettings.formats.time,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getPostType, getEntityRecord } = select( coreStore );\n\t\t\tconst siteSettings = getEntityRecord( 'root', 'site' );\n\t\t\treturn {\n\t\t\t\tsiteFormat: siteSettings?.date_format,\n\t\t\t\tsiteTimeFormat: siteSettings?.time_format,\n\t\t\t\tpostType: postTypeSlug ? getPostType( postTypeSlug ) : null,\n\t\t\t};\n\t\t},\n\t\t[ postTypeSlug ]\n\t);\n\tconst activeBlockVariationName = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blocksStore ).getActiveBlockVariation( name, attributes )\n\t\t\t\t?.name,\n\t\t[ name, attributes ]\n\t);\n\n\tconst blockEditingMode = useBlockEditingMode();\n\n\tlet postDate = (\n\t\t<time dateTime={ dateI18n( 'c', datetime ) } ref={ setPopoverAnchor }>\n\t\t\t{ format === 'human-diff'\n\t\t\t\t? humanTimeDiff( datetime )\n\t\t\t\t: dateI18n( format || siteFormat, datetime ) }\n\t\t</time>\n\t);\n\n\tif ( isLink && datetime ) {\n\t\tpostDate = (\n\t\t\t<a\n\t\t\t\thref=\"#post-date-pseudo-link\"\n\t\t\t\tonClick={ ( event ) => event.preventDefault() }\n\t\t\t>\n\t\t\t\t{ postDate }\n\t\t\t</a>\n\t\t);\n\t}\n\treturn (\n\t\t<>\n\t\t\t{ ( blockEditingMode === 'default' ||\n\t\t\t\t! isDescendentOfQueryLoop ) && (\n\t\t\t\t<BlockControls group=\"block\">\n\t\t\t\t\t<AlignmentControl\n\t\t\t\t\t\tvalue={ textAlign }\n\t\t\t\t\t\tonChange={ ( nextAlign ) => {\n\t\t\t\t\t\t\tsetAttributes( { textAlign: nextAlign } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ activeBlockVariationName !== 'post-date-modified' &&\n\t\t\t\t\t\t( ! isDescendentOfQueryLoop ||\n\t\t\t\t\t\t\t! activeBlockVariationName ) && (\n\t\t\t\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t\t\t<PublishDateTimePicker\n\t\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\t\tactiveBlockVariationName ===\n\t\t\t\t\t\t\t\t\t\t\t\t'post-date'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Publish Date' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Date' )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tcurrentDate={ datetime }\n\t\t\t\t\t\t\t\t\t\t\tonChange={ ( newDatetime ) =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\t\t\t\tdatetime: newDatetime,\n\t\t\t\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tis12Hour={ is12HourFormat(\n\t\t\t\t\t\t\t\t\t\t\t\tsiteTimeFormat\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\t\t\t\tdateOrder={\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */\n\t\t\t\t\t\t\t\t\t\t\t\t_x( 'dmy', 'date order' )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\t\t\t\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t! isOpen &&\n\t\t\t\t\t\t\t\t\t\t\t\tevent.keyCode === DOWN\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ pencil }\n\t\t\t\t\t\t\t\t\t\t\t\ttitle={ __( 'Change Date' ) }\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToolbarGroup>\n\t\t\t\t\t\t) }\n\t\t\t\t</BlockControls>\n\t\t\t) }\n\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tdatetime: undefined,\n\t\t\t\t\t\t\tformat: undefined,\n\t\t\t\t\t\t\tisLink: false,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! format }\n\t\t\t\t\t\tlabel={ __( 'Date Format' ) }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { format: undefined } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<DateFormatPicker\n\t\t\t\t\t\t\tformat={ format }\n\t\t\t\t\t\t\tdefaultFormat={ siteFormat }\n\t\t\t\t\t\t\tonChange={ ( nextFormat ) =>\n\t\t\t\t\t\t\t\tsetAttributes( { format: nextFormat } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => isLink !== false }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tpostType?.labels.singular_name\n\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: Name of the post type e.g: \"post\".\n\t\t\t\t\t\t\t\t\t\t__( 'Link to %s' ),\n\t\t\t\t\t\t\t\t\t\tpostType.labels.singular_name.toLowerCase()\n\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t: __( 'Link to post' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonDeselect={ () => setAttributes( { isLink: false } ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tpostType?.labels.singular_name\n\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t// translators: %s: Name of the post type e.g: \"post\".\n\t\t\t\t\t\t\t\t\t\t\t__( 'Link to %s' ),\n\t\t\t\t\t\t\t\t\t\t\tpostType.labels.singular_name.toLowerCase()\n\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t: __( 'Link to post' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\t\t\tsetAttributes( { isLink: ! isLink } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tchecked={ isLink }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\n\t\t\t<div { ...blockProps }>{ postDate }</div>\n\t\t</>\n\t);\n}\n\nexport function is12HourFormat( format ) {\n\t// To know if the time format is a 12 hour time, look for any of the 12 hour\n\t// format characters: 'a', 'A', 'g', and 'h'. The character must be\n\t// unescaped, i.e. not preceded by a '\\'. Coincidentally, 'aAgh' is how I\n\t// feel when working with regular expressions.\n\t// https://www.php.net/manual/en/datetime.format.php\n\treturn /(?:^|[^\\\\])[aAgh]/.test( format );\n}\n"],
"mappings": "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",
"names": ["clsx", "blockEditorStore", "getDateSettings", "coreStore", "blocksStore", "PublishDateTimePicker", "ToolsPanel", "ToolsPanelItem", "DateFormatPicker"]
}