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.

Sign up for GitHub

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

Jump to bottom

Terms List block: Add Categories-specific variation #65434

Merged
merged 4 commits into from
Sep 18, 2024
Merged

Terms List block: Add Categories-specific variation #65434

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
534ace0
Terms List block: Add Categories-specific variation
ockham Sep 18, 2024
cd379f7
Make Terms List the default variation
ockham Sep 18, 2024
6a8c539
Add explanatory comment
ockham Sep 18, 2024
9f70db6
Keep Categories in the dropdown
ockham Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 23 additions & 16 deletions packages/block-library/src/categories/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,11 @@ export default function CategoriesEdit( {
'taxonomy'
);

const taxonomies = allTaxonomies?.filter( ( t ) => t.visibility.public );
const taxonomies = allTaxonomies?.filter(
( t ) =>
t.visibility.public &&
( taxonomySlug === 'category' ) === ( t.slug === 'category' )
Copy link
Member

Choose a reason for hiding this comment

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

What is the risk if the `category is listed here? When switching a choice a different block variation would get selected but otherwise it should remain seamless for the user.

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, @fabiankaegy also suggested that over here. I'll quote my reply here for convenience:

TBH, that would feel inconsistent to me in terms of UX; I think it would be somewhat surprising to the user if selecting "Categories" as the taxonomy from that dropdown gets special treatment, while all other taxonomies don't 😕

dropdown-includes everything

I'm open to revisiting this. It's something I'd like to get feedback from designers on, though.

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've tentatively applied this change in 9f70db6. We can revert, depending on the feedback we get.

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've updated the screencast in the PR description accordingly.

Here's the previous one (with Categories removed from the dropdown)

separate-categories-variation

);

const taxonomy = taxonomies?.find( ( t ) => t.slug === taxonomySlug );

Expand Down Expand Up @@ -185,21 +189,24 @@ export default function CategoriesEdit( {
<TagName { ...blockProps }>
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
{ Array.isArray( taxonomies ) && (
<SelectControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Taxonomy' ) }
options={ taxonomies.map( ( t ) => ( {
label: t.name,
value: t.slug,
} ) ) }
value={ taxonomySlug }
onChange={ ( selectedTaxonomy ) =>
setAttributes( { taxonomy: selectedTaxonomy } )
}
/>
) }
{ taxonomySlug !== 'category' && // For back-compat, the Category taxonomy has its own block variation.
Array.isArray( taxonomies ) && (
<SelectControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Taxonomy' ) }
options={ taxonomies.map( ( t ) => ( {
label: t.name,
value: t.slug,
} ) ) }
value={ taxonomySlug }
onChange={ ( selectedTaxonomy ) =>
setAttributes( {
taxonomy: selectedTaxonomy,
} )
}
/>
) }
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display as dropdown' ) }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/categories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { category as icon } from '@wordpress/icons';
import initBlock from '../utils/init-block';
import metadata from './block.json';
import edit from './edit';
import variations from './variations';

const { name } = metadata;

Expand All @@ -18,6 +19,7 @@ export const settings = {
icon,
example: {},
edit,
variations,
};

export const init = () => initBlock( { name, metadata, settings } );
36 changes: 36 additions & 0 deletions packages/block-library/src/categories/variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { category as icon } from '@wordpress/icons';

const variations = [
{
name: 'terms',
title: __( 'Terms List' ),
icon,
attributes: {
Copy link
Member

Choose a reason for hiding this comment

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

If you add isDefault: true to this variation, then it will resolve the issue with double entries in the inserter. That should make it quite a compelling solution to the problem I like how you handled the Categories vs the rest case.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah! TIL 😅

Copy link
Member

Choose a reason for hiding this comment

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

Maybe the name for the property should be phrased differently, but the intent is to have a simple way to change the default version of the block in the UI through the variation, instead of using WP filters.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done in cd379f7 (and 6a8c539).

// We need to set an attribute here that will be set when inserting the block.
// We cannot leave this empty, as that would be interpreted as the default value,
// which is `category` -- for which we're defining a distinct variation below,
// for backwards compatibility reasons.
// The logical fallback is thus the only other built-in and public taxonomy: Tags.
taxonomy: 'post_tag',
},
isActive: ( blockAttributes ) =>
// This variation is used for any taxonomy other than `category`.
blockAttributes.taxonomy !== 'category',
},
{
name: 'categories',
title: __( 'Categories List' ),
description: __( 'Display a list of all categories.' ),
icon,
attributes: {
taxonomy: 'category',
},
isActive: [ 'taxonomy' ],
},
];

export default variations;
Loading