Button: Migrate to text-align block support #73732
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Contributor
There was a problem hiding this comment. I think we need to add a "migration hook" to the edit function (like we did in the paragraph block) for folks that toggle the old attributes dynamically use
Contributor
Author
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,7 +21,6 @@ export default function save( { attributes, className } ) { | |
| const { | ||
| tagName, | ||
| type, | ||
| fontSize, | ||
| linkTarget, | ||
| rel, | ||
|
|
@@ -46,7 +45,6 @@ export default function save( { attributes, className } ) { | |
| borderProps.className, | ||
| typographyProps.className, | ||
| { | ||
|
Member
There was a problem hiding this comment. This could be considered a breaking change if themes or extenders rely on this class.
Contributor
Author
There was a problem hiding this comment. The gutenberg/packages/block-editor/src/hooks/use-typography-props.js Lines 48 to 50 in 2dbaeb1 |
||
| // For backwards compatibility add style that isn't provided via | ||
| // block support. | ||
| 'no-border-radius': style?.border?.radius === 0, | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useEvent } from '@wordpress/compose'; | ||
| import { useEffect, useRef } from '@wordpress/element'; | ||
| import deprecated from '@wordpress/deprecated'; | ||
| import { useDispatch } from '@wordpress/data'; | ||
| import { store as blockEditorStore } from '@wordpress/block-editor'; | ||
|
|
||
| /** | ||
| * If a plugin is still using the old textAlign attribute, we need to migrate its value | ||
| * to the new style.typography.textAlign attribute. | ||
| * | ||
| * @param {Object} props Block props. | ||
| */ | ||
| export default function useDeprecatedTextAlign( props ) { | ||
| const { name, attributes, setAttributes } = props; | ||
| const { textAlign } = attributes; | ||
| const { __unstableMarkNextChangeAsNotPersistent } = | ||
| useDispatch( blockEditorStore ); | ||
| const updateStyleWithAlign = useEvent( () => { | ||
| deprecated( `textAlign attribute in ${ name }`, { | ||
| alternative: 'style.typography.textAlign', | ||
| since: '7.0', | ||
| } ); | ||
| __unstableMarkNextChangeAsNotPersistent(); | ||
| setAttributes( ( currentAttr ) => ( { | ||
| style: { | ||
| ...currentAttr.style, | ||
| typography: { | ||
| ...currentAttr.style?.typography, | ||
| textAlign, | ||
| }, | ||
| }, | ||
| } ) ); | ||
| } ); | ||
| const lastUpdatedAlignRef = useRef(); | ||
| useEffect( () => { | ||
| if ( textAlign === lastUpdatedAlignRef.current ) { | ||
| return; | ||
| } | ||
| lastUpdatedAlignRef.current = textAlign; | ||
| updateStyleWithAlign(); | ||
|
Member
There was a problem hiding this comment. You could use a new setter method for
Contributor
Author
There was a problem hiding this comment. Thank you! I tried to adjust it, how does this look? 8a32ace
Member
There was a problem hiding this comment. This is what I had in mind, though it's not a blocker; I just wanted to share. Example patch
diff --git a/packages/block-library/src/utils/deprecated-text-align-attributes.js b/packages/block-library/src/utils/deprecated-text-align-attributes.js
index 0daa1405bd..4dd591f987 100644
--- a/packages/block-library/src/utils/deprecated-text-align-attributes.js
+++ b/packages/block-library/src/utils/deprecated-text-align-attributes.js
@@ -1,7 +1,6 @@
/**
* WordPress dependencies
*/
-import { useEvent } from '@wordpress/compose';
import { useEffect, useRef } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';
import { useDispatch } from '@wordpress/data';
@@ -18,7 +17,12 @@ export default function useDeprecatedTextAlign( props ) {
const { textAlign } = attributes;
const { __unstableMarkNextChangeAsNotPersistent } =
useDispatch( blockEditorStore );
- const updateStyleWithAlign = useEvent( () => {
+ const lastUpdatedAlignRef = useRef();
+ useEffect( () => {
+ if ( textAlign === lastUpdatedAlignRef.current ) {
+ return;
+ }
+ lastUpdatedAlignRef.current = textAlign;
deprecated( `textAlign attribute in ${ name }`, {
alternative: 'style.typography.textAlign',
since: '7.0',
@@ -33,13 +37,10 @@ export default function useDeprecatedTextAlign( props ) {
},
},
} ) );
- } );
- const lastUpdatedAlignRef = useRef();
- useEffect( () => {
- if ( textAlign === lastUpdatedAlignRef.current ) {
- return;
- }
- lastUpdatedAlignRef.current = textAlign;
- updateStyleWithAlign();
- }, [ textAlign, updateStyleWithAlign ] );
+ }, [
+ __unstableMarkNextChangeAsNotPersistent,
+ name,
+ setAttributes,
+ textAlign,
+ ] );
} |
||
| }, [ textAlign, updateStyleWithAlign ] ); | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A lot of these deprecated versions will become unnecessary after #73116 so I think this is ok for now. and I do think there's a lot of benefits to this unification. (Global Styles support being the important one)