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

Block Library: Implement Post block and Post blocks editing. #19572

Closed
wants to merge 12 commits into from

Conversation

epiqueras
Copy link
Contributor

@epiqueras epiqueras commented Jan 10, 2020

Closes #19685

Description

This PR adds a new Post block for setting a specific post context in a block subtree.

Currently, the post is selected by ID. In the future, we should implement a Combobox post searching input.

To test this, it also implements editing modes in the Post Content and Post Title blocks. I.e. when provided a post context, these blocks now allow you to edit the post's content and title respectively.

The question remains of how to approach server-side rendering here. I propose we enhance do_blocks to support reading parent block attributes in a React Context like manner. That way things like Post Content blocks can opt-out of reading from the post loop if they detect they are nested under a Post block with an explicit post context.

How has this been tested?

  • Inserted a Post block in a template.
  • Set a known post ID.
  • Inserted Post Content and Post Title blocks at the top level in the template.
  • Verified placeholders were shown.
  • Moved blocks inside the Post block.
  • Verified content and title editing were now possible.

Screenshots

gif

(We need to improve the dropzone logic there.)

Types of Changes

New Feature: The Post Content and Title blocks now support editing post content and titles.
New Feature: There is a new Post block for rendering specific posts.

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. .

function PostPreview() {
const [ blocks ] = useEntityBlockEditor( 'postType', 'post' );
return (
<div className="wp-block-post__placeholder-preview">
Copy link
Contributor

Choose a reason for hiding this comment

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

Two accessibility-related questions:

  1. Is this a preview similar to a full post preview one can invoke from the top toolbar? If so, this would need a role="document" so screen readers that invoke a virtual reading mode can be sure to get this even if the surrounding controls would normally cause it to be in focus/direct interaction mode.
  2. Should this be tabable via the keyboard? If so, it would also need tabindex="0" or a similar mechanism to make it focusable so keyboard users can reach it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

  1. No.
  2. No.

It's a small preview of the post with the input's current ID.

@epiqueras
Copy link
Contributor Author

@WordPress/gutenberg-core We should review this soon.

"category": "layout",
"context": {
"postType": "core/post",
"postId": "core/post"
Copy link
Contributor

Choose a reason for hiding this comment

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

Again, I don't think we should target blocks explicitly here instead of should have "context names". What happens if I want to build an alternative post block with an alternative UI to select posts.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You filter the children you want to support.

@mtias
Copy link
Member

mtias commented Feb 18, 2020

Should the introduction of the "post" block be making all the other "post-" blocks children of it?

@epiqueras
Copy link
Contributor Author

No, I would advise against that, see #19685 (comment) and the rest of the thread on that point.

@mtias
Copy link
Member

mtias commented Feb 18, 2020

I'm not sure that's talking about the same thing. I don't mean parent as "provider of context" but in terms of reducing proliferation of blocks in the global inserter by restricting insertion to the inner blocks of the parent (parent: blockName) like Columns > Column.

@epiqueras
Copy link
Contributor Author

Oh yeah, we can use the values of the children's context object to filter under what blocks they should be insertable under.

@ockham
Copy link
Contributor

ockham commented Feb 25, 2020

Going to rebase.

@ockham
Copy link
Contributor

ockham commented Feb 25, 2020

Ooh, the context-related changes to lib/compat.php aren't for the faint of heart, especially after gutenberg_provide_render_callback_with_block_object was removed in #19991 😅

@ockham
Copy link
Contributor

ockham commented Feb 25, 2020

I think I'll have to leave this rebase to you @epiqueras, since you clearly have a better idea of how you want block contexts to work, and how to carry the changes from gutenberg_provide_render_callback_with_block_object over to a filter or something like that 😬

@epiqueras
Copy link
Contributor Author

We don't need to rebase everything to review it.

@mcsf
Copy link
Contributor

mcsf commented Mar 6, 2020

We don't need to rebase everything to review it.

Would be great to rebase this now, @epiqueras.

@epiqueras epiqueras force-pushed the add/post-content-block-editing branch from 1101065 to afbe57b Compare March 6, 2020 11:31
@epiqueras
Copy link
Contributor Author

Done

@epiqueras epiqueras force-pushed the add/post-content-block-editing branch from afbe57b to 0e7843c Compare March 6, 2020 11:53
@github-actions
Copy link

github-actions bot commented Mar 6, 2020

Size Change: +965 B (0%)

Total Size: 890 kB

Filename Size Change
build/annotations/index.js 3.41 kB +2 B (0%)
build/api-fetch/index.js 3.8 kB +8 B (0%)
build/block-directory/index.js 6.03 kB +3 B (0%)
build/block-editor/index.js 102 kB +425 B (0%)
build/block-library/editor-rtl.css 7.24 kB +25 B (0%)
build/block-library/editor.css 7.25 kB +24 B (0%)
build/block-library/index.js 111 kB +377 B (0%)
build/components/index.js 195 kB +2 B (0%)
build/core-data/index.js 10.7 kB +18 B (0%)
build/data-controls/index.js 1.04 kB +1 B
build/data/index.js 8.23 kB -1 B
build/edit-post/index.js 92.9 kB +3 B (0%)
build/edit-site/index.js 10.1 kB +8 B (0%)
build/edit-widgets/index.js 7.19 kB +11 B (0%)
build/editor/index.js 42.9 kB +54 B (0%)
build/element/index.js 4.44 kB -1 B
build/format-library/index.js 6.96 kB +7 B (0%)
build/keyboard-shortcuts/index.js 2.3 kB -1 B
build/primitives/index.js 1.5 kB -1 B
build/rich-text/index.js 14.5 kB -3 B (0%)
build/server-side-render/index.js 2.55 kB +4 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/style-rtl.css 10.2 kB 0 B
build/block-editor/style.css 10.2 kB 0 B
build/block-library/style-rtl.css 7.53 kB 0 B
build/block-library/style.css 7.54 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.5 kB 0 B
build/components/style-rtl.css 16.6 kB 0 B
build/components/style.css 16.5 kB 0 B
build/compose/index.js 6.21 kB 0 B
build/date/index.js 5.36 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.05 kB 0 B
build/edit-navigation/index.js 2.71 kB 0 B
build/edit-navigation/style-rtl.css 239 B 0 B
build/edit-navigation/style.css 241 B 0 B
build/edit-post/style-rtl.css 12.3 kB 0 B
build/edit-post/style.css 12.3 kB 0 B
build/edit-site/style-rtl.css 5.02 kB 0 B
build/edit-site/style.css 5.02 kB 0 B
build/edit-widgets/style-rtl.css 3.74 kB 0 B
build/edit-widgets/style.css 3.73 kB 0 B
build/editor/editor-styles-rtl.css 400 B 0 B
build/editor/editor-styles.css 402 B 0 B
build/editor/style-rtl.css 3.49 kB 0 B
build/editor/style.css 3.49 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 1.93 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keycodes/index.js 1.7 kB 0 B
build/list-reusable-blocks/index.js 2.99 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 4.84 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.01 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.01 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@aduth
Copy link
Member

aduth commented Mar 25, 2020

Regarding #19572 (comment), to me it feels like the "Post" block would ideally never be surfaced to the end-user through the UI. For the purposes of testing this pull request, making it available helps. Ultimately, I'd imagine at the least we'd want { "supports": { "inserter": false } }. For real application, considering a use-case like "Post List", each entry in that post list could insert their own wrapping post block transparently to the user.

@aduth aduth force-pushed the add/post-content-block-editing branch from 0e7843c to 5238269 Compare March 25, 2020 14:35
@aduth
Copy link
Member

aduth commented Apr 17, 2020

Superseded by #21467

Related follow-up tasks which may be able to draw from this pull request as reference:

@aduth aduth closed this Apr 17, 2020
@aduth aduth deleted the add/post-content-block-editing branch April 17, 2020 19:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Server Side Rendering Parent Attributes Context
7 participants