-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Post Date: Allow user to pick Site Default, a suggested date format, …
…or a custom date format (#39209) * Post Date: Allow user to pick Site Default, or a suggested date format * Update suggested formats to be more localizable * Add support for custom formats * Move is12Hour check to function * Distinguish between 'long' and 'full' like Apple does * Use a sample date in the dropdown so as to better illustrate the formats * Split out DateFormatControl and update the Comment Date block * Add basic tests for is12HourFormat * Fix markdown link formatting * Combine 'Format settings' and 'Link settings' into single 'Settings' panel * WIP * Use Default / Custom radio control Re-jig DateFormatControl into DateFormatPicker. Users now select either Default or Custom in a ratio control and, then, if they select Custom, they can select a suggested date format or enter a manual one. * Simplify suggested date formats * Use date and time formats from @wordpress/date as a fallback * Use 'Enter your own date format' * Explain what null means in the doc comment * Use ToggleControl for selecting a default date * Use __experimental like a coward * Move example of default format to new line * Fix 'Link to post' label
- Loading branch information
1 parent
1f07e88
commit 5921283
Showing
11 changed files
with
355 additions
and
83 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
packages/block-editor/src/components/date-format-picker/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| # DateFormatPicker | ||
|
|
||
| The `DateFormatPicker` component renders controls that let the user choose a | ||
| _date format_. That is, how they want their dates to be formatted. | ||
|
|
||
| A user can pick _Default_ to use the default date format (usually set at the | ||
| site level). | ||
|
|
||
| Otherwise, a user may choose a suggested date format or type in their own date | ||
| format by selecting _Custom_. | ||
|
|
||
| All date format strings should be in the format accepted by by the [`dateI18n` | ||
| function in | ||
| `@wordpress/date`](https://github.com/WordPress/gutenberg/tree/trunk/packages/date#datei18n). | ||
|
|
||
| ## Usage | ||
|
|
||
| ```jsx | ||
| import { DateFormatPicker } from '@wordpress/block-editor'; | ||
|
|
||
| const Example = () => { | ||
| const [ format, setFormat ] = useState( null ); | ||
| return ( | ||
| <DateFormatPicker | ||
| format={ format } | ||
| defaultFormat={ 'M j, Y' } | ||
| onChange={ ( nextFormat ) => | ||
| setFormat( nextFormat ); | ||
| } | ||
| /> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| ### `format` | ||
|
|
||
| The current date format selected by the user. If `null`, _Default_ is selected. | ||
|
|
||
| - Type: `string|null` | ||
| - Required: Yes | ||
|
|
||
| ### `defaultFormat` | ||
|
|
||
| The default format string. Used to show to the user what the date will look like | ||
| if _Default_ is selected. | ||
|
|
||
| - Type: `string` | ||
| - Required: Yes | ||
|
|
||
| ### `onChange` | ||
|
|
||
| Called when the user makes a selection, or when the user types in a date format. | ||
| `null` indicates that _Default_ is selected. | ||
|
|
||
| - Type: `( format: string|null ) => void` | ||
| - Required: Yes |
161 changes: 161 additions & 0 deletions
161
packages/block-editor/src/components/date-format-picker/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { uniq } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { _x, __ } from '@wordpress/i18n'; | ||
| import { dateI18n } from '@wordpress/date'; | ||
| import { useState, createInterpolateElement } from '@wordpress/element'; | ||
| import { | ||
| TextControl, | ||
| ExternalLink, | ||
| VisuallyHidden, | ||
| CustomSelectControl, | ||
| BaseControl, | ||
| ToggleControl, | ||
| } from '@wordpress/components'; | ||
|
|
||
| // So that we can illustrate the different formats in the dropdown properly, | ||
| // show a date that has a day greater than 12 and a month with more than three | ||
| // letters. Here we're using 2022-01-25 which is when WordPress 5.9 was | ||
| // released. | ||
| const EXAMPLE_DATE = new Date( 2022, 0, 25 ); | ||
|
|
||
| /** | ||
| * The `DateFormatPicker` component renders controls that let the user choose a | ||
| * _date format_. That is, how they want their dates to be formatted. | ||
| * | ||
| * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md | ||
| * | ||
| * @param {Object} props | ||
| * @param {string|null} props.format The selected date | ||
| * format. If | ||
| * `null`, | ||
| * _Default_ is | ||
| * selected. | ||
| * @param {string} props.defaultFormat The date format that | ||
| * will be used if the | ||
| * user selects | ||
| * 'Default'. | ||
| * @param {( format: string|null ) => void} props.onChange Called when a | ||
| * selection is | ||
| * made. If `null`, | ||
| * _Default_ is | ||
| * selected. | ||
| */ | ||
| export default function DateFormatPicker( { | ||
| format, | ||
| defaultFormat, | ||
| onChange, | ||
| } ) { | ||
| return ( | ||
| <fieldset className="block-editor-date-format-picker"> | ||
| <VisuallyHidden as="legend">{ __( 'Date format' ) }</VisuallyHidden> | ||
| <ToggleControl | ||
| label={ | ||
| <> | ||
| { __( 'Default format' ) } | ||
| <span className="block-editor-date-format-picker__default-format-toggle-control__hint"> | ||
| { dateI18n( defaultFormat, EXAMPLE_DATE ) } | ||
| </span> | ||
| </> | ||
| } | ||
| checked={ ! format } | ||
| onChange={ ( checked ) => | ||
| onChange( checked ? null : defaultFormat ) | ||
| } | ||
| /> | ||
| { format && ( | ||
| <NonDefaultControls format={ format } onChange={ onChange } /> | ||
| ) } | ||
| </fieldset> | ||
| ); | ||
| } | ||
|
|
||
| function NonDefaultControls( { format, onChange } ) { | ||
| // Suggest a short format, medium format, long format, and a standardised | ||
| // (YYYY-MM-DD) format. The short, medium, and long formats are localised as | ||
| // different languages have different ways of writing these. For example, 'F | ||
| // j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April | ||
| // 2022) in German (de). The resultant array is de-duplicated as some | ||
| // languages will use the same format string for short, medium, and long | ||
| // formats. | ||
| const suggestedFormats = uniq( [ | ||
| 'Y-m-d', | ||
| _x( 'n/j/Y', 'short date format' ), | ||
| _x( 'n/j/Y g:i A', 'short date format with time' ), | ||
| _x( 'M j, Y', 'medium date format' ), | ||
| _x( 'M j, Y g:i A', 'medium date format with time' ), | ||
| _x( 'F j, Y', 'long date format' ), | ||
| ] ); | ||
|
|
||
| const suggestedOptions = suggestedFormats.map( | ||
| ( suggestedFormat, index ) => ( { | ||
| key: `suggested-${ index }`, | ||
| name: dateI18n( suggestedFormat, EXAMPLE_DATE ), | ||
| format: suggestedFormat, | ||
| } ) | ||
| ); | ||
| const customOption = { | ||
| key: 'custom', | ||
| name: __( 'Custom' ), | ||
| className: | ||
| 'block-editor-date-format-picker__custom-format-select-control__custom-option', | ||
| __experimentalHint: __( 'Enter your own date format' ), | ||
| }; | ||
|
|
||
| const [ isCustom, setIsCustom ] = useState( | ||
| () => !! format && ! suggestedFormats.includes( format ) | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <BaseControl className="block-editor-date-format-picker__custom-format-select-control"> | ||
| <CustomSelectControl | ||
| label={ __( 'Choose a format' ) } | ||
| options={ [ ...suggestedOptions, customOption ] } | ||
| value={ | ||
| isCustom | ||
| ? customOption | ||
| : suggestedOptions.find( | ||
| ( option ) => option.format === format | ||
| ) ?? customOption | ||
| } | ||
| onChange={ ( { selectedItem } ) => { | ||
| if ( selectedItem === customOption ) { | ||
| setIsCustom( true ); | ||
| } else { | ||
| setIsCustom( false ); | ||
| onChange( selectedItem.format ); | ||
| } | ||
| } } | ||
| /> | ||
| </BaseControl> | ||
| { isCustom && ( | ||
| <TextControl | ||
| label={ __( 'Custom format' ) } | ||
| hideLabelFromVision | ||
| help={ createInterpolateElement( | ||
| __( | ||
| 'Enter a date or time <Link>format string</Link>.' | ||
| ), | ||
| { | ||
| Link: ( | ||
| <ExternalLink | ||
| href={ __( | ||
| 'https://wordpress.org/support/article/formatting-date-and-time/' | ||
| ) } | ||
| /> | ||
| ), | ||
| } | ||
| ) } | ||
| value={ format } | ||
| onChange={ ( value ) => onChange( value ) } | ||
| /> | ||
| ) } | ||
| </> | ||
| ); | ||
| } |
31 changes: 31 additions & 0 deletions
31
packages/block-editor/src/components/date-format-picker/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| .block-editor-date-format-picker { | ||
| margin-bottom: $grid-unit-20; | ||
| } | ||
|
|
||
| .block-editor-date-format-picker__default-format-toggle-control__hint { | ||
| color: $gray-700; | ||
| display: block; | ||
| } | ||
|
|
||
| .block-editor-date-format-picker__custom-format-select-control { | ||
| &.components-base-control { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .components-custom-select-control__button { | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| .block-editor-date-format-picker__custom-format-select-control__custom-option { | ||
| border-top: 1px solid $gray-300; | ||
|
|
||
| &.has-hint { | ||
| grid-template-columns: auto 30px; | ||
| } | ||
|
|
||
| .components-custom-select-control__item-hint { | ||
| grid-row: 2; | ||
| text-align: left; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.