Product Block Editor: improve the process when creating a new attribute (#47518)
* introduce onAddNew() combobox property * use onAddNew prop to handle adding new attributes * changelog * update packs after mergining with trunk * move changelog file location * remove unneeded change
This commit is contained in:
parent
fcc421d550
commit
ff4422aff9
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: patch
|
||||||
|
Type: update
|
||||||
|
|
||||||
|
Product Block Editor: improve the process when creating a new attribute
|
|
@ -95,6 +95,7 @@ const AttributesComboboxControl: React.FC<
|
||||||
items = [],
|
items = [],
|
||||||
instanceNumber = 0,
|
instanceNumber = 0,
|
||||||
isLoading = false,
|
isLoading = false,
|
||||||
|
onAddNew,
|
||||||
onChange,
|
onChange,
|
||||||
} ) => {
|
} ) => {
|
||||||
const [ createNewAttributeOption, updateCreateNewAttributeOption ] =
|
const [ createNewAttributeOption, updateCreateNewAttributeOption ] =
|
||||||
|
@ -234,10 +235,7 @@ const AttributesComboboxControl: React.FC<
|
||||||
state: 'creating',
|
state: 'creating',
|
||||||
} );
|
} );
|
||||||
|
|
||||||
return onChange( {
|
return onAddNew?.( createNewAttributeOption.label );
|
||||||
id: -99,
|
|
||||||
name: createNewAttributeOption.label,
|
|
||||||
} );
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setAttributeSelected( true );
|
setAttributeSelected( true );
|
||||||
|
|
|
@ -30,6 +30,7 @@ export type AttributesComboboxControlComponent = {
|
||||||
disabledAttributeMessage?: string;
|
disabledAttributeMessage?: string;
|
||||||
createNewAttributesAsGlobal?: boolean;
|
createNewAttributesAsGlobal?: boolean;
|
||||||
|
|
||||||
|
onAddNew?: ( value: string ) => void;
|
||||||
onChange: ( value: AttributesComboboxControlItem ) => void;
|
onChange: ( value: AttributesComboboxControlItem ) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -36,6 +36,7 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
|
||||||
disabledAttributeMessage,
|
disabledAttributeMessage,
|
||||||
isLoadingAttributes,
|
isLoadingAttributes,
|
||||||
attributes,
|
attributes,
|
||||||
|
onNewAttributeAdd,
|
||||||
onAttributeSelect,
|
onAttributeSelect,
|
||||||
|
|
||||||
termLabel = undefined,
|
termLabel = undefined,
|
||||||
|
@ -211,6 +212,9 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
|
||||||
current={ attribute }
|
current={ attribute }
|
||||||
items={ filteredAttributes }
|
items={ filteredAttributes }
|
||||||
isLoading={ isLoadingAttributes }
|
isLoading={ isLoadingAttributes }
|
||||||
|
onAddNew={ ( newValue ) =>
|
||||||
|
onNewAttributeAdd?.( newValue, index )
|
||||||
|
}
|
||||||
onChange={ ( nextAttribute ) => {
|
onChange={ ( nextAttribute ) => {
|
||||||
if ( nextAttribute.id === attributeId ) {
|
if ( nextAttribute.id === attributeId ) {
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -252,39 +252,35 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
|
||||||
source: TRACKS_SOURCE,
|
source: TRACKS_SOURCE,
|
||||||
} );
|
} );
|
||||||
|
|
||||||
const attributeExists = nextAttribute.id !== -99;
|
return setValue(
|
||||||
|
`attributes[${ index }]`,
|
||||||
|
nextAttribute
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const fieldName = `attributes[${ index }]`;
|
/**
|
||||||
|
* Create a new attribute and fill the form field with it.
|
||||||
/*
|
* If the attribute is not global, create it locally.
|
||||||
* When the attribute exists,
|
*
|
||||||
* set the attribute values.
|
* @param {string} newAttributeName - The name of the new attribute.
|
||||||
*/
|
* @param {number} index - The index of the attribute in the form field.
|
||||||
if ( attributeExists ) {
|
* @return {void}
|
||||||
return setValue( fieldName, nextAttribute );
|
*/
|
||||||
}
|
function addNewAttribute(
|
||||||
|
newAttributeName: string,
|
||||||
/*
|
index: number
|
||||||
* When the attribute does not exist,
|
) {
|
||||||
* and it should not be created as a global attribute,
|
|
||||||
* only set the attribute values.
|
|
||||||
*/
|
|
||||||
if ( ! createNewAttributesAsGlobal ) {
|
if ( ! createNewAttributesAsGlobal ) {
|
||||||
return setValue( fieldName, {
|
return setValue( `attributes[${ index }]`, {
|
||||||
id: 0,
|
id: 0,
|
||||||
name: nextAttribute.name,
|
name: newAttributeName,
|
||||||
slug: nextAttribute.name,
|
slug: newAttributeName,
|
||||||
} );
|
} );
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* If the attribute does not exist,
|
|
||||||
* and it should be created as a global attribute,
|
|
||||||
* create the new attribute and set the attribute values.
|
|
||||||
*/
|
|
||||||
createProductAttribute(
|
createProductAttribute(
|
||||||
{
|
{
|
||||||
name: nextAttribute.name,
|
name: newAttributeName,
|
||||||
generate_slug: true,
|
generate_slug: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -292,7 +288,10 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
.then( ( newAttribute ) => {
|
.then( ( newAttribute ) => {
|
||||||
setValue( fieldName, newAttribute );
|
setValue(
|
||||||
|
`attributes[${ index }]`,
|
||||||
|
newAttribute
|
||||||
|
);
|
||||||
} )
|
} )
|
||||||
.catch( ( error ) => {
|
.catch( ( error ) => {
|
||||||
let message = __(
|
let message = __(
|
||||||
|
@ -415,6 +414,9 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
|
||||||
attributes={
|
attributes={
|
||||||
availableAttributes
|
availableAttributes
|
||||||
}
|
}
|
||||||
|
onNewAttributeAdd={
|
||||||
|
addNewAttribute
|
||||||
|
}
|
||||||
onAttributeSelect={
|
onAttributeSelect={
|
||||||
selectAttribute
|
selectAttribute
|
||||||
}
|
}
|
||||||
|
|
|
@ -70,6 +70,7 @@ export type AttributeTableRowProps = {
|
||||||
clearButtonDisabled?: boolean;
|
clearButtonDisabled?: boolean;
|
||||||
removeLabel: string;
|
removeLabel: string;
|
||||||
|
|
||||||
|
onNewAttributeAdd?: ( value: string, index: number ) => void;
|
||||||
onAttributeSelect: (
|
onAttributeSelect: (
|
||||||
attribute: AttributesComboboxControlItem,
|
attribute: AttributesComboboxControlItem,
|
||||||
index: number
|
index: number
|
||||||
|
|
|
@ -21172,7 +21172,7 @@ packages:
|
||||||
engines: {node: '>=18'}
|
engines: {node: '>=18'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
react: ^17.0.2
|
react: 18.2.0
|
||||||
|
|
||||||
react-number-format@4.9.3:
|
react-number-format@4.9.3:
|
||||||
resolution: {integrity: sha512-am1A1xYAbENuKJ+zpM7V+B1oRTSeOHYltqVKExznIVFweBzhLmOBmyb1DfIKjHo90E0bo1p3nzVJ2NgS5xh+sQ==}
|
resolution: {integrity: sha512-am1A1xYAbENuKJ+zpM7V+B1oRTSeOHYltqVKExznIVFweBzhLmOBmyb1DfIKjHo90E0bo1p3nzVJ2NgS5xh+sQ==}
|
||||||
|
@ -21373,7 +21373,7 @@ packages:
|
||||||
react-with-direction@1.4.0:
|
react-with-direction@1.4.0:
|
||||||
resolution: {integrity: sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==}
|
resolution: {integrity: sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
react: ^0.14 || ^15 || ^16
|
react: ^17.0.2
|
||||||
react-dom: ^0.14 || ^15 || ^16
|
react-dom: ^0.14 || ^15 || ^16
|
||||||
|
|
||||||
react-with-styles-interface-css@4.0.3:
|
react-with-styles-interface-css@4.0.3:
|
||||||
|
|
Loading…
Reference in New Issue