Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Post: add backdate warning #25569

Closed
wants to merge 6 commits into from
Closed

Post: add backdate warning #25569

wants to merge 6 commits into from

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Sep 23, 2020

Description

Adds a notice to posts when the "scheduled" publish date is in the past.

Addresses #13230.

How has this been tested?

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Sep 23, 2020

Size Change: +230 B (0%)

Total Size: 1.17 MB

Filename Size Change
build/edit-post/index.js 306 kB +13 B (0%)
build/edit-post/style-rtl.css 6.26 kB +19 B (0%)
build/edit-post/style.css 6.24 kB +18 B (0%)
build/editor/index.js 45.6 kB +132 B (0%)
build/editor/style-rtl.css 3.83 kB +24 B (0%)
build/editor/style.css 3.82 kB +24 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.52 kB 0 B
build/api-fetch/index.js 3.34 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 8.53 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 128 kB 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.56 kB 0 B
build/block-library/editor.css 8.56 kB 0 B
build/block-library/index.js 135 kB 0 B
build/block-library/style-rtl.css 7.6 kB 0 B
build/block-library/style.css 7.59 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.5 kB 0 B
build/components/index.js 167 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 9.42 kB 0 B
build/core-data/index.js 12 kB 0 B
build/data-controls/index.js 1.27 kB 0 B
build/data/index.js 8.43 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/index.js 10.4 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-site/index.js 19.7 kB 0 B
build/edit-site/style-rtl.css 3.3 kB 0 B
build/edit-site/style.css 3.3 kB 0 B
build/edit-widgets/index.js 17.5 kB 0 B
build/edit-widgets/style-rtl.css 2.8 kB 0 B
build/edit-widgets/style.css 2.8 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.49 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.55 kB 0 B
build/is-shallow-equal/index.js 709 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.27 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.44 kB 0 B
build/primitives/index.js 1.34 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.7 kB 0 B
build/server-side-render/index.js 2.61 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@kjellr
Copy link
Contributor

kjellr commented Sep 23, 2020

This is looking great! I pushed a quick spacing adjustment. Here are current screenshots:

Screen Shot 2020-09-23 at 11 40 59 AM

Screen Shot 2020-09-23 at 11 40 48 AM


For that second one, I wish we could hide the border above the notice, but my brain is blocked thinking of a way to do that with CSS. 🤔

Two other quick bugs:

  • I saw this notice appearing when I opened up any old post, but I think it should appear only if the post is in draft mode, correct?
  • I noticed that the empty panel is appearing when the date is set to "Immediately". This should be hidden.

@kjellr kjellr added [Feature] Saving Related to saving functionality [Type] Enhancement A suggestion for improvement. labels Sep 23, 2020
@ellatrix
Copy link
Member Author

I guess we can just use a class?

@ellatrix
Copy link
Member Author

@kjellr Like this?

Screenshot 2020-09-23 at 18 55 04

@kjellr
Copy link
Contributor

kjellr commented Sep 23, 2020

Yes, exactly!

@ellatrix
Copy link
Member Author

I guess it would be nice if somehow it could be part of the button. Not sure what makes most sense in this case.

@ellatrix
Copy link
Member Author

Without hover:

Screenshot 2020-09-23 at 18 57 11

@ellatrix ellatrix added the Needs Design Feedback Needs general design feedback. label Sep 23, 2020
@ZebulanStanphill ZebulanStanphill added the Needs Accessibility Feedback Need input from accessibility label Sep 23, 2020
@kjellr
Copy link
Contributor

kjellr commented Sep 23, 2020

That looks great, thanks. I pushed a tiny update to adjust the top spacing to match other panels:

Default Hovered
Screen Shot 2020-09-23 at 2 33 31 PM Screen Shot 2020-09-23 at 2 35 04 PM

@ZebulanStanphill
Copy link
Member

We shouldn't be adding this as a separate section from the main Post Schedule section, as semantically that makes no sense. It also can't be part of the accordion's button text since that would mess up the (already not ideal) semantics/a11y. (The "Publish: PUBLISH DATE" label is not the right kind of button label. It should just be "Publish date" or something like that.)

The correct way to show this kind of information (both the current publish date and any important warning notice) would be through a summary that is separate from the button+heading of the accordion, but still part of the accordion, and shown when the accordion is collapsed.

Luckily, I've already implemented this in #25170, so I'd suggest checking out that PR and helping it get merged. Without the summary prop API, I think the best we can do is put the warning inside the main content of the accordion, which would risk users not even realizing its there if they don't open the accordion.

Copy link
Contributor

@afercia afercia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Totally agree this info shouldn't be part of the panel button, as it would break the accordion semantics and accessibility: this is an info that is extraneous to the button's purpose. Also, as mentioned by @ZebulanStanphill, the Visibility and Publish panels accessibility is finally going to be fixed in #25170 and #24024 and this extraneous info would break that attempt.

Regarding the notice, seems to me this message is important enough to interrupt the user's flow (and interrupt whatever a screen reader is announcing in that moment) so I'd consider to make the speak() message assertive. I think this can be done by passing a politeness="assertive" propo to the Notice.

From a visual perspective, worth noting the first notice will appear behind the datepicker and it will be almost entirely hidden. Users would need to first close the datepicker to be able to see the notice:

Screenshot 2020-09-24 at 12 17 02

This is more a design thing but I thought to note it anyways.

Base automatically changed from master to trunk March 1, 2021 15:44
@ellatrix ellatrix closed this Oct 17, 2022
@ellatrix ellatrix deleted the try/post-backdate branch October 17, 2022 08:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Saving Related to saving functionality Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants