-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
What problem does this address?
Block variations support an isActive
property which can be either a function, or an array of strings (string[]
), documented here. tl;dr: Given a block instance, that variation is used to determine which variation is currently active: If isActive
is a function, it is given the block instance's attributes and the variation's attributes as arguments. It will return true
if the block instance matches the variation. The string[]
version of isActive
is thought of as a shorthand of the above, where all items in the array are attribute names that will be compared.
As documented here and here, it's possible that multiple variations' isActive
criteria match a given block instance, which can lead to the wrong variation being determined to be active.
There's a potential fix that solves this problem by choosing the matching variation with the highest specificity (i.e. number of items in the isActive
array), but that only works if all matching variations have isActive
arrays rather than functions.
One notable case where it's impossible to use an array for isActive
is when an attribute is an object, and only one of its properties must be compared to determine if its active, for example:
gutenberg/packages/block-library/src/query/variations.js
Lines 41 to 59 in fe40df6
attributes: { | |
namespace: 'core/posts-list', | |
query: { | |
perPage: 4, | |
pages: 1, | |
offset: 0, | |
postType: 'post', | |
order: 'desc', | |
orderBy: 'date', | |
author: '', | |
search: '', | |
sticky: 'exclude', | |
inherit: false, | |
}, | |
}, | |
scope: [ 'inserter' ], | |
isActive: ( { namespace, query } ) => { | |
return namespace === 'core/posts-list' && query.postType === 'post'; | |
}, |
What is your proposed solution?
If we allow dots as "property accessors" in isActive
array items, we wouldn't need to resort to isArray
functions in cases like the above. The example could instead be rewritten as
isActive: [ 'namespace', 'query.postType' ]