Add time format with client side date parsing #415

adamwoodnz · 2023-07-18T04:04:23Z

Closes #413

This is an alternative approach to the server side implementation in #414

Pros:

date description parsing is done at the time of applying the format, rather than on page load on the server
no filtering of the_content

Cons:

if the date to be parsed by the format needs to be changed, or the post date is changed, the time format needs to be toggled off and on again to re-parse the changed date

UPDATE:
If the time description changes, the format will now be removed so that it can be reapplied and parsed.

…g scripts

…enqueuing scripts" This reverts commit a5244fd.

…nt on toggle

tellyworth

Looks fine to me. I've only reviewed the code, not tested.

mu-plugins/blocks/time/index.php

tellyworth · 2023-07-24T05:48:15Z

mu-plugins/blocks/time/src/convert_times.js

+			const linkElement = document.createElement( 'a' );
+			linkElement.setAttribute(
+				'href',
+				`https://www.timeanddate.com/worldclock/fixedtime.html?iso=${ datetimeISO }`


Just noting for future possibilities: should we consider replacing timeanddate.com?

mu-plugins/blocks/time/src/index.js

ryelle

The editor side looks great, but it's not working on the frontend, and I think something's off with how the time is converted. I entered "Wednesday July 12 2023 at 15:00 EDT", but the datetime attribute is using the UTC value plus the timezone (2023-07-12T19:00:00-04:00).

mu-plugins/blocks/time/src/convert_times.js

Co-authored-by: Kelly Dwan <ryelle@users.noreply.github.com>

adamwoodnz · 2023-07-24T23:12:00Z

I entered "Wednesday July 12 2023 at 15:00 EDT", but the datetime attribute is using the UTC value plus the timezone (2023-07-12T19:00:00-04:00).

Hmm I hadn't tested with anything other than strings with UTC, as that's what I'd seen in posts. I'll take a look, ideally we could support more than that.

mu-plugins/blocks/time/src/index.js

adamwoodnz · 2023-07-25T04:50:17Z

For some reason this isn't working in my sandbox. The editor script loads and the format appears to be applied (inspecting the element in the editor shows the format), but when I save and load the frontend there is no format applied, and if I reload the editor the format is gone too. It's as if it's being stripped by some tag filter... @ryelle @tellyworth any ideas?

ryelle · 2023-07-25T14:51:00Z

It's as if it's being stripped by some tag filter...

Ahh, I don't see time in the $allowedposttags list, so I think it is being stripped out. It's not a problem on single sites because those allow unfiltered_html for admins/editors. I think you can add time with the wp_kses_allowed_html filter.

adamwoodnz · 2023-07-25T22:53:04Z

I think you can add time with the wp_kses_allowed_html filter

Thanks @ryelle this seems to work well

ryelle · 2023-07-26T21:52:25Z

Front end view works now. I tried a few different formats, some copied from make/core, and it all worked well 👍🏻

I know you mentioned you can't reparse an updated date, but is it possible to auto-clear the format when the content changes? I think that's going to be confusing. I tried editing the day in a date and it turned into this:

Editor	Frontend

adamwoodnz · 2023-07-27T00:55:44Z

Front end view works now. I tried a few different formats, some copied from make/core, and it all worked well 👍🏻

🎉

is it possible to auto-clear the format when the content changes?

Nice idea, I'll give it a try

mu-plugins/blocks/time/postcss/style.pcss

adamwoodnz · 2023-08-02T00:26:41Z

is it possible to auto-clear the format when the content changes?

@ryelle I've implemented this now, please try again.

StevenDufresne · 2023-08-07T00:35:08Z

I don't know if this is a valid use case, but I got some weird behavior:

Successfully create a date,
Change UTC to GMT to simulate a user error
Notice you get double dates.

adamwoodnz · 2023-08-21T05:12:55Z

I got some weird behavior

Thanks for this testing. This is intermittent for me. I did manage to repro once, but after refreshing I can't repro again. I think we can merge and monitor.

Use inline styles in editor and remove on frontend Handle post date being undefined and parse dates based on current time

composer.json

adamwoodnz added 15 commits July 11, 2023 17:23

Add wporg/time block

93160a3

Remove debug

ff37454

Stop parsing content if empty

be048ab

Remove usage of register_block_type as this isn't a block

8c87c3f

Fix phpcs errors

f8058d6

Enqueue frontend script if required rather than rendering inline

f82d9c6

Change to semantic elements for time on frontend

e6eb98b

Fix transform_times bail out logic

c3f936f

Use Gutenberg non block example approach for registering and enqueuin…

018f389

…g scripts

Remove unused helper

0dd43dc

Fix bail out logic for no time elements

8eb9242

Revert "Use Gutenberg non block example approach for registering and …

11329c5

…enqueuing scripts" This reverts commit a5244fd.

Use Moment to parse the date description and add it to the time eleme…

eb1c15c

…nt on toggle

Replace php dom manipulation with js

1fa0b11

Update descriptions to specify input format

19e6e62

adamwoodnz mentioned this pull request Jul 18, 2023

Add wporg/time block #414

Closed

adamwoodnz requested review from ryelle and tellyworth July 18, 2023 04:06

adamwoodnz added 2 commits July 18, 2023 16:21

Update docs

be3f4f7

Skip parsing if format is being deactivated

10a3340

adamwoodnz force-pushed the try/413-try-moment-time-format branch from 16b8857 to 10a3340 Compare July 18, 2023 04:24

adamwoodnz self-assigned this Jul 18, 2023

adamwoodnz added the [Block] New Block label Jul 18, 2023

adamwoodnz added 2 commits July 21, 2023 17:01

Replace Moment usage with locutus

78d8732

Keep time element within link

8b595e8

tellyworth approved these changes Jul 24, 2023

View reviewed changes

ryelle reviewed Jul 24, 2023

View reviewed changes

mu-plugins/blocks/time/src/convert_times.js Outdated Show resolved Hide resolved

mu-plugins/blocks/time/src/convert_times.js Outdated Show resolved Hide resolved

adamwoodnz and others added 2 commits July 25, 2023 11:03

Use wp_script_add_data to output view script in footer

98cfec0

Co-authored-by: Kelly Dwan <ryelle@users.noreply.github.com>

Rename view script

56efe04

Fix regex to allow negative time offsets

33a49c7

adamwoodnz commented Jul 25, 2023

View reviewed changes

mu-plugins/blocks/time/src/index.js Show resolved Hide resolved

adamwoodnz added 3 commits July 26, 2023 10:40

Allow time tags in post content

3046990

Execute the view script once all resources have loaded

ff22ba4

Update descriptions

e8884af

adamwoodnz added 4 commits August 1, 2023 11:47

Style the time formatted strings

af2572a

Add block attribute config

2ff4962

Remove the format if the time description is changed

2b34bd6

Handle multiple times in the selected block

82d9b2c

adamwoodnz force-pushed the try/413-try-moment-time-format branch from 96088e5 to 82d9b2c Compare August 1, 2023 23:51

Use dotted style for the underline

4304601

adamwoodnz commented Aug 2, 2023

View reviewed changes

mu-plugins/blocks/time/postcss/style.pcss Outdated Show resolved Hide resolved

adamwoodnz requested a review from ryelle August 2, 2023 00:26

adamwoodnz added 2 commits August 22, 2023 11:47

Add partial support for the Site Editor

ea1dad6

Use inline styles in editor and remove on frontend Handle post date being undefined and parse dates based on current time

Update yoast/phpunit-polyfills to satisfy CI

b3a0b0e

adamwoodnz commented Aug 22, 2023

View reviewed changes

composer.json Show resolved Hide resolved

Fix editor styles in Safari

fa16768

adamwoodnz merged commit 4ddc904 into trunk Aug 22, 2023
2 checks passed

adamwoodnz deleted the try/413-try-moment-time-format branch August 22, 2023 02:30

adamwoodnz added [Format] Time Related to the Time format and removed [Block] New Block labels Aug 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add time format with client side date parsing #415

Add time format with client side date parsing #415

adamwoodnz commented Jul 18, 2023 •

edited

Loading

tellyworth left a comment

tellyworth Jul 24, 2023

ryelle left a comment

adamwoodnz commented Jul 24, 2023

adamwoodnz commented Jul 25, 2023

ryelle commented Jul 25, 2023

adamwoodnz commented Jul 25, 2023

ryelle commented Jul 26, 2023

adamwoodnz commented Jul 27, 2023 •

edited

Loading

adamwoodnz commented Aug 2, 2023

StevenDufresne commented Aug 7, 2023

adamwoodnz commented Aug 21, 2023

Add time format with client side date parsing #415

Add time format with client side date parsing #415

Conversation

adamwoodnz commented Jul 18, 2023 • edited Loading

tellyworth left a comment

Choose a reason for hiding this comment

tellyworth Jul 24, 2023

Choose a reason for hiding this comment

ryelle left a comment

Choose a reason for hiding this comment

adamwoodnz commented Jul 24, 2023

adamwoodnz commented Jul 25, 2023

ryelle commented Jul 25, 2023

adamwoodnz commented Jul 25, 2023

ryelle commented Jul 26, 2023

adamwoodnz commented Jul 27, 2023 • edited Loading

adamwoodnz commented Aug 2, 2023

StevenDufresne commented Aug 7, 2023

adamwoodnz commented Aug 21, 2023

adamwoodnz commented Jul 18, 2023 •

edited

Loading

adamwoodnz commented Jul 27, 2023 •

edited

Loading