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

Show theme, plugin or author in Added By column with appropriate icon or avatar #36763

Merged
merged 16 commits into from
Nov 29, 2021

Conversation

talldan
Copy link
Contributor

@talldan talldan commented Nov 23, 2021

Description

This is the start of improving the 'Added by' column in the Templates / Template Parts listing, as described in this comment - #36597 (comment)

There are associated REST API changes that improve how this works - WordPress/wordpress-develop#1937. This comment explains the differences with and without those changes - #36763 (comment).

How has this been tested?

Because template parts and templates currently don't support 'author' the easiest way to test this will be by viewing a list of posts instead of templates:

  1. Navigate to http://localhost:8888/wp-admin/themes.php?page=gutenberg-edit-site&postType=post
  2. Confirm the 'Added by' column shows avatar and user name like this:

Screenshot 2021-11-23 at 3 22 16 pm

Customization

  1. Visit the template or template parts page
  2. The added by column should show something like this:

Screenshot 2021-11-23 at 3 24 57 pm

3. Customize the template part and return to the page to view it. It should show a blue dot and a tooltip indicating it's customized.

Template parts created from scratch

  1. Visit the template or template parts page
  2. Click Add New
  3. Save and return to the template or template part page
  4. The site will show that this template was added by the site:

Screenshot 2021-11-25 at 6 43 56 pm

5. If you have the core REST API changes checked out and built (https://github.com/WordPress/wordpress-develop/pull/1937), and repeat these steps, the author should be shown like it does for posts:

Screenshot 2021-11-23 at 3 22 16 pm

Types of changes

Enhancement

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • 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 (please manually search all *.native.js files for terms that need renaming or removal).

@talldan talldan added [Type] Enhancement A suggestion for improvement. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Nov 23, 2021
@talldan talldan self-assigned this Nov 23, 2021
Comment on lines 118 to 208
.edit-site-list-added-by__icon {
display: flex;
align-items: center;
justify-content: center;
width: $grid-unit-40;
height: $grid-unit-40;
background: $gray-800;
border-radius: 100%;

svg {
fill: $white;
}
}

.edit-site-list-added-by__avatar {
width: $grid-unit-40;
height: $grid-unit-40;
border-radius: 100%;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jameskoster Would be great to get an early check on these styles. Feel free to push a commit or comment with any adjustments you want to make.

Copy link
Contributor

Choose a reason for hiding this comment

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

Styles looking good so far. I did notice that customised theme templates are displaying strangely, but assume you're still working on that?

Screenshot 2021-11-23 at 10 24 40

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, I noticed it's a bit glitchy when loading the image too. I'll look at improving 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.

This should be fixed now.

@github-actions
Copy link

github-actions bot commented Nov 23, 2021

Size Change: +994 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/block-editor/index.min.js 139 kB +13 B (0%)
build/core-data/index.min.js 13.2 kB +21 B (0%)
build/edit-site/index.min.js 33.8 kB +635 B (+2%)
build/edit-site/style-rtl.css 6.67 kB +165 B (+3%)
build/edit-site/style.css 6.66 kB +160 B (+2%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 960 B
build/admin-manifest/index.min.js 1.1 kB
build/annotations/index.min.js 2.75 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.28 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/style-rtl.css 14.4 kB
build/block-editor/style.css 14.4 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 470 B
build/block-library/blocks/button/editor.css 470 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 134 B
build/block-library/blocks/code/theme.css 134 B
build/block-library/blocks/columns/editor-rtl.css 206 B
build/block-library/blocks/columns/editor.css 205 B
build/block-library/blocks/columns/style-rtl.css 503 B
build/block-library/blocks/columns/style.css 502 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB
build/block-library/blocks/cover/style.css 1.22 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 976 B
build/block-library/blocks/gallery/editor.css 980 B
build/block-library/blocks/gallery/style-rtl.css 1.62 kB
build/block-library/blocks/gallery/style.css 1.62 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 159 B
build/block-library/blocks/group/editor.css 159 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 507 B
build/block-library/blocks/image/style.css 511 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 649 B
build/block-library/blocks/navigation-link/editor.css 650 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/view.min.js 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.89 kB
build/block-library/blocks/navigation/editor.css 1.89 kB
build/block-library/blocks/navigation/style-rtl.css 1.66 kB
build/block-library/blocks/navigation/style.css 1.65 kB
build/block-library/blocks/navigation/view.min.js 2.74 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 172 B
build/block-library/blocks/page-list/style.css 172 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/style-rtl.css 444 B
build/block-library/blocks/post-comments-form/style.css 444 B
build/block-library/blocks/post-comments/style-rtl.css 492 B
build/block-library/blocks/post-comments/style.css 493 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 391 B
build/block-library/blocks/post-template/style.css 392 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 378 B
build/block-library/blocks/pullquote/style.css 378 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 262 B
build/block-library/blocks/query-pagination/editor.css 255 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 245 B
build/block-library/blocks/separator/style.css 245 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 772 B
build/block-library/blocks/site-logo/editor.css 772 B
build/block-library/blocks/site-logo/style-rtl.css 165 B
build/block-library/blocks/site-logo/style.css 165 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 670 B
build/block-library/blocks/social-links/editor.css 669 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB
build/block-library/blocks/social-links/style.css 1.32 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 560 B
build/block-library/blocks/template-part/editor.css 559 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 569 B
build/block-library/blocks/video/editor.css 570 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 815 B
build/block-library/common.css 812 B
build/block-library/editor-rtl.css 9.81 kB
build/block-library/editor.css 9.81 kB
build/block-library/index.min.js 162 kB
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/style-rtl.css 10.5 kB
build/block-library/style.css 10.5 kB
build/block-library/theme-rtl.css 672 B
build/block-library/theme.css 677 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 46.3 kB
build/components/index.min.js 214 kB
build/components/style-rtl.css 15.3 kB
build/components/style.css 15.3 kB
build/compose/index.min.js 10.9 kB
build/customize-widgets/index.min.js 11.4 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 631 B
build/data/index.min.js 7.47 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 485 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.5 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/index.min.js 29.6 kB
build/edit-post/style-rtl.css 7.1 kB
build/edit-post/style.css 7.09 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.18 kB
build/edit-widgets/style.css 4.18 kB
build/editor/index.min.js 37.8 kB
build/editor/style-rtl.css 3.78 kB
build/editor/style.css 3.77 kB
build/element/index.min.js 3.29 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 6.57 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.63 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.71 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.8 kB
build/keycodes/index.min.js 1.39 kB
build/list-reusable-blocks/index.min.js 1.86 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 925 B
build/nux/index.min.js 2.08 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.84 kB
build/primitives/index.min.js 924 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.65 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11 kB
build/server-side-render/index.min.js 1.57 kB
build/shortcode/index.min.js 1.49 kB
build/token-list/index.min.js 639 B
build/url/index.min.js 1.9 kB
build/viewport/index.min.js 1.05 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.15 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

Comment on lines 79 to 178
// Fallback for any custom template already created without an assigned
// author.
if (
! template.has_theme_file &&
template.source === 'custom' &&
! template.author
) {
return (
<HStack alignment="left">
<div className="edit-site-list-added-by__icon">
<Icon icon={ customizedByUserIcon } />
</div>
<span>Customized by user</span>
</HStack>
);
}
Copy link
Contributor Author

@talldan talldan Nov 23, 2021

Choose a reason for hiding this comment

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

Currently this is what displays for any templates that were customized but don't have an author:
Screenshot 2021-11-23 at 3 49 20 pm

I think even if we add author support to templates and template parts, there will still be some that have been created by Gutenberg plugin users up until now that won't have an author, so we need to handle this case.

@jameskoster Maybe the best option in this situation would be to show the theme icon and name, but still with the blue customized dot?

Copy link
Contributor

Choose a reason for hiding this comment

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

Currently this is what displays for any templates that were customized but don't have an author:

The important thing to communicate here is that the template was created from scratch. In lieu of a specific author, perhaps we could just say it was added by the site, and use the site logo as the graphic?

Screenshot 2021-11-23 at 10 22 26

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Managed to make that work 👍
Screenshot 2021-11-25 at 6 43 56 pm

@talldan
Copy link
Contributor Author

talldan commented Nov 24, 2021

I have a core patch for adding author support to template and template parts - WordPress/wordpress-develop#1937.

With that checked out and this checked out it should be possible to create templates or template parts, when viewing them on the listing screen the author should show up in the Added By column.

Copy link
Member

@noisysocks noisysocks left a comment

Choose a reason for hiding this comment

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

Looks really good so far 🙂

packages/core-data/src/entities.js Show resolved Hide resolved
@talldan talldan force-pushed the update/added-by-in-templates-list branch from a815bbc to 6d9c718 Compare November 25, 2021 09:32
@talldan talldan added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 25, 2021
@talldan talldan marked this pull request as ready for review November 25, 2021 11:14
@talldan
Copy link
Contributor Author

talldan commented Nov 25, 2021

This should be in a fairly good state now for more testing and feedback.

@jameskoster
Copy link
Contributor

Hmm, I'm seeing some unexpected behavior.

  1. The delete action is appearing for theme-supplied templates, and the clear customisations action has disappeared.
  2. All my templates are listed as custom (added by a user), this is not the case.
  3. In the "Add new" interface, it is possible to add some templates, but not others.

Screenshot 2021-11-25 at 12 33 05

@talldan talldan force-pushed the update/added-by-in-templates-list branch from 9da9eea to dc91102 Compare November 26, 2021 02:00
@talldan
Copy link
Contributor Author

talldan commented Nov 26, 2021

@jameskoster That's unusual, I haven't changed anything related to how that delete action works.

I can't reproduce the issue you're having, my page still looks as expected.

edit: It may have been related to a problem in trunk, there were some unrelated unit test failures that now seem to be ok after I rebased this branch, so I guess something was broken and then fixed. This is how it looks for me:
Screenshot 2021-11-26 at 9 59 31 am

@talldan talldan force-pushed the update/added-by-in-templates-list branch from dc91102 to 397b0a6 Compare November 26, 2021 05:25
@talldan talldan force-pushed the update/added-by-in-templates-list branch from 397b0a6 to e8a881a Compare November 26, 2021 05:26
@talldan
Copy link
Contributor Author

talldan commented Nov 26, 2021

The REST API changes are at risk of not landing in time for 5.9, so I've separated out the REST API changes from this PR (#36896 now contains them). It then becomes a pure UI change.

I've already made it so that it gracefully handles the existing template data as much as possible:

  • For templates created from scratch, the site details are shown in the added by column if there's no author
  • For theme provided templates, they should now show theme details and the blue dot when customized
  • For plugin provided templates, they should show plugin details. When customized we don't know that they were provided by a plugin without the associated REST API changes, so this is the only part that's buggy. They'll show the blue dot, but switch to showing the theme icon.

@@ -13,6 +13,12 @@ function gutenberg_register_template_part_post_type() {
return;
}

// If the post type has already been registered (by WordPress core), skip
// registration.
if ( post_type_exists( 'wp_template_part' ) ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I split this and the similar change in templates.php out into a separate PR (#36898), but it's still needed here to be able to test alongside the WP core changes.

Copy link
Member

Choose a reason for hiding this comment

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

This change breaks the site editor for WP 5.8. I also see unexpected behavior that James mentioned (#36763 (comment)) if I access the list page directly.

I think the reason is the difference between REST controllers, and since we have to support 5.8, it might be better to remove this check. What do you think?

Screenshot

CleanShot 2021-11-26 at 11 37 41

This comment was marked as duplicate.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I also see unexpected behavior that James mentioned (#36763 (comment)) if I access the list page directly.

Do you see that only in 5.8?

I think we should consider updating the Gutenberg version of the REST API. Maybe we can also add a version check as part of this if statement.

Copy link
Member

Choose a reason for hiding this comment

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

If I remove post type exists checks everything works correctly. The endpoint in WP 5.8 only supports user-created templates.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ok, I've reverted this for now, will move the conversation over to #36898.

It does make it difficult to test this with the associated REST changes, best thing is to revert it back again if you want to do that.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I also see unexpected behavior that James mentioned (#36763 (comment)) if I access the list page directly.

I also haven't been able to repro this at all, not even in 5.8. Any additional details would be great.

Copy link
Member

Choose a reason for hiding this comment

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

Were you able to reproduce Site Editor failure on 5.8? I will try to provide additional details.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, I did reproduce that. Hopefully it's not a problem now that I've reverted the commit. Thanks for testing it 👍

@talldan
Copy link
Contributor Author

talldan commented Nov 26, 2021

Test that this works for templates or template parts added by plugins

Still not sure how to do this, but based on the way plugin templates are described to work, it shouldn't be an issue.

The name and icon currently only show after a delay (the info needs to be loaded). Look into preload this data and/or fetching it up front before displaying the table.

I'll move preloading into a separate PR, it isn't straightforward and I don't want to make this more complicated than it already is.

kevin940726 and others added 14 commits November 29, 2021 09:23
* Add success and error snackbars to the list page

* Fix Unit Test error

* Apply 'is-navigation-open' to interface skeleton

* Fix NavigationToggle unit test

* Apply suggestions from code review

Co-authored-by: Robert Anderson <robert@noisysocks.com>

* Use deleting

* Remove snackbars for creation

* Add notices for reverting

* Fix test

* Add getLastEntityDeleteError

* Add comment

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
@talldan talldan force-pushed the update/added-by-in-templates-list branch from e7c055f to fdde4c8 Compare November 29, 2021 01:25
return () => {
node.removeEventListener( 'load', onLoad );
};
}, [] );
Copy link
Member

Choose a reason for hiding this comment

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

onLoad should be in the dependencies. I'm not sure why we need this? Couldn't we just use onLoad attribute on <img>?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point! I'll update it.

@talldan talldan merged commit 812fa1b into trunk Nov 29, 2021
@talldan talldan deleted the update/added-by-in-templates-list branch November 29, 2021 03:43
@github-actions github-actions bot added this to the Gutenberg 12.1 milestone Nov 29, 2021
@noisysocks noisysocks removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 29, 2021
noisysocks added a commit that referenced this pull request Nov 29, 2021
… or avatar (#36763)

* Show theme, plugin or author in Added By column with appropriate icon or avatar

* Add success and error snackbars to the templates list page (#36808)

* Add success and error snackbars to the list page

* Fix Unit Test error

* Apply 'is-navigation-open' to interface skeleton

* Fix NavigationToggle unit test

* Apply suggestions from code review

Co-authored-by: Robert Anderson <robert@noisysocks.com>

* Use deleting

* Remove snackbars for creation

* Add notices for reverting

* Fix test

* Add getLastEntityDeleteError

* Add comment

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>

* Show theme, plugin or author in Added By column with appropriate icon or avatar

* Fix plugin name rendering

* Add blue dot for customize templates

* Add tooltip and tidy up logic

* Fallback to showin slug

* Handle missing author by showing template as a customized theme template

* Fallback to site name and logo

* Make the avatars load in a fancy way

* Avoid icon stretch on narrow viewports

* Fix dodgy rebase

* Use core version of template and template part post types and REST endpoints

* Revert "Use core version of template and template part post types and REST endpoints"

This reverts commit 6b40260.

* Rename to AddedBy

* Use onLoad

Co-authored-by: Kai Hao <kevin830726@gmail.com>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
@talldan
Copy link
Contributor Author

talldan commented Dec 3, 2021

@paaljoachim I didn't reply to this at the time, but I appreciate the testing.

With the test that I did I was not able to see the user name or the user gravatar.

Previously, templates and template parts didn't support any author data being saved. For that to happen and for it to work a separate change had to land in WordPress core. Your tests would have required a version of WordPress core with that change patched in for the author to display.

One of the things you mentioned (the first point) is a bug, so I've made an issue for that - #37086

@paaljoachim
Copy link
Contributor

Thanks Dan!

The current Gutenberg plugin now shows the Added by and user Gravatar.
I will add a comment to #37086

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants