Skip to content

Commit

Permalink
Global Styles: Add block-level Text Alignment UI (#61717)
Browse files Browse the repository at this point in the history 
* Global Styles: Add block-level Text Alignment UI

* Try another approach to hide textAlign UI

* Add backport-changelog

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
  • Loading branch information
@t-hamano @aaronrobertshaw
@ellatrix @colorful-tones
5 people authored May 31, 2024
1 parent 61afbd5 commit dfaad6d
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 3 deletions.
5 changes: 5 additions & 0 deletions backport-changelog/6.6/6590.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
https://github.com/WordPress/wordpress-develop/pull/6590

* https://github.com/WordPress/gutenberg/pull/59531
* https://github.com/WordPress/gutenberg/pull/61182
* https://github.com/WordPress/gutenberg/pull/61717
8 changes: 7 additions & 1 deletion packages/block-editor/src/components/global-styles/hooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ const VALID_SETTINGS = [
'typography.fontWeight',
'typography.letterSpacing',
'typography.lineHeight',
'typography.textAlign',
'typography.textColumns',
'typography.textDecoration',
'typography.textTransform',
Expand Down Expand Up @@ -378,8 +379,13 @@ export function useSettingsForBlockElement(
? updatedSettings.shadow
: false;

// Text alignment is only available for blocks.
if ( element ) {
updatedSettings.typography.textAlign = false;
}

return updatedSettings;
}, [ parentSettings, supportedStyles, supports ] );
}, [ parentSettings, supportedStyles, supports, element ] );
}

export function useColorsPerOrigin( settings ) {
Expand Down
40 changes: 40 additions & 0 deletions packages/block-editor/src/components/global-styles/typography-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import FontFamilyControl from '../font-family';
import FontAppearanceControl from '../font-appearance-control';
import LineHeightControl from '../line-height-control';
import LetterSpacingControl from '../letter-spacing-control';
import TextAlignmentControl from '../text-alignment-control';
import TextTransformControl from '../text-transform-control';
import TextDecorationControl from '../text-decoration-control';
import WritingModeControl from '../writing-mode-control';
Expand All @@ -31,6 +32,7 @@ export function useHasTypographyPanel( settings ) {
const hasLineHeight = useHasLineHeightControl( settings );
const hasFontAppearance = useHasAppearanceControl( settings );
const hasLetterSpacing = useHasLetterSpacingControl( settings );
const hasTextAlign = useHasTextAlignmentControl( settings );
const hasTextTransform = useHasTextTransformControl( settings );
const hasTextDecoration = useHasTextDecorationControl( settings );
const hasWritingMode = useHasWritingModeControl( settings );
Expand All @@ -42,6 +44,7 @@ export function useHasTypographyPanel( settings ) {
hasLineHeight ||
hasFontAppearance ||
hasLetterSpacing ||
hasTextAlign ||
hasTextTransform ||
hasFontSize ||
hasTextDecoration ||
Expand Down Expand Up @@ -92,6 +95,10 @@ function useHasTextTransformControl( settings ) {
return settings?.typography?.textTransform;
}

function useHasTextAlignmentControl( settings ) {
return settings?.typography?.textAlign;
}

function useHasTextDecorationControl( settings ) {
return settings?.typography?.textDecoration;
}
Expand Down Expand Up @@ -151,6 +158,7 @@ const DEFAULT_CONTROLS = {
fontAppearance: true,
lineHeight: true,
letterSpacing: true,
textAlign: true,
textTransform: true,
textDecoration: true,
writingMode: true,
Expand Down Expand Up @@ -339,6 +347,22 @@ export default function TypographyPanel( {
const hasWritingMode = () => !! value?.typography?.writingMode;
const resetWritingMode = () => setWritingMode( undefined );

// Text Alignment
const hasTextAlignmentControl = useHasTextAlignmentControl( settings );

const textAlign = decodeValue( inheritedValue?.typography?.textAlign );
const setTextAlign = ( newValue ) => {
onChange(
setImmutably(
value,
[ 'typography', 'textAlign' ],
newValue || undefined
)
);
};
const hasTextAlign = () => !! value?.typography?.textAlign;
const resetTextAlign = () => setTextAlign( undefined );

const resetAllFilter = useCallback( ( previousValue ) => {
return {
...previousValue,
Expand Down Expand Up @@ -519,6 +543,22 @@ export default function TypographyPanel( {
/>
</ToolsPanelItem>
) }
{ hasTextAlignmentControl && (
<ToolsPanelItem
label={ __( 'Text alignment' ) }
hasValue={ hasTextAlign }
onDeselect={ resetTextAlign }
isShownByDefault={ defaultControls.textAlign }
panelId={ panelId }
>
<TextAlignmentControl
value={ textAlign }
onChange={ setTextAlign }
size="__unstable-large"
__nextHasNoMarginBottom
/>
</ToolsPanelItem>
) }
</Wrapper>
);
}
10 changes: 9 additions & 1 deletion packages/block-editor/src/hooks/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,15 @@ function BlockStyleControls( {
clientId,
name,
setAttributes,
settings,
settings: {
...settings,
typography: {
...settings.typography,
// The text alignment UI for individual blocks is rendered in
// the block toolbar, so disable it here.
textAlign: false,
},
},
};
if ( blockEditingMode !== 'default' ) {
return null;
Expand Down
7 changes: 6 additions & 1 deletion phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -503,6 +503,11 @@ public function test_get_stylesheet() {
),
),
),
'core/media-text' => array(
'typography' => array(
'textAlign' => 'center',
),
),
'core/post-date' => array(
'color' => array(
'text' => '#123456',
Expand Down Expand Up @@ -547,7 +552,7 @@ public function test_get_stylesheet() {
);

$variables = ':root{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-size--small: 14px;--wp--preset--font-size--big: 41px;--wp--preset--font-family--arial: Arial, serif;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
$styles = static::$base_styles . ':root :where(body){color: var(--wp--preset--color--grey);}:root :where(a:where(:not(.wp-element-button))){background-color: #333;color: #111;}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}:root :where(.wp-block-cover){min-height: unset;aspect-ratio: 16/9;}:root :where(.wp-block-group){background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;}:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: #111;}:root :where(.wp-block-heading){color: #123456;}:root :where(.wp-block-heading a:where(:not(.wp-element-button))){background-color: #333;color: #111;font-size: 60px;}:root :where(.wp-block-post-date){color: #123456;}:root :where(.wp-block-post-date a:where(:not(.wp-element-button))){background-color: #777;color: #555;}:root :where(.wp-block-post-excerpt){column-count: 2;}:root :where(.wp-block-image){margin-bottom: 30px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}:root :where(.wp-block-image img, .wp-block-image .components-placeholder){filter: var(--wp--preset--duotone--custom-duotone);}';
$styles = static::$base_styles . ':root :where(body){color: var(--wp--preset--color--grey);}:root :where(a:where(:not(.wp-element-button))){background-color: #333;color: #111;}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}:root :where(.wp-block-cover){min-height: unset;aspect-ratio: 16/9;}:root :where(.wp-block-group){background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;}:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: #111;}:root :where(.wp-block-heading){color: #123456;}:root :where(.wp-block-heading a:where(:not(.wp-element-button))){background-color: #333;color: #111;font-size: 60px;}:root :where(.wp-block-media-text){text-align: center;}:root :where(.wp-block-post-date){color: #123456;}:root :where(.wp-block-post-date a:where(:not(.wp-element-button))){background-color: #777;color: #555;}:root :where(.wp-block-post-excerpt){column-count: 2;}:root :where(.wp-block-image){margin-bottom: 30px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}:root :where(.wp-block-image img, .wp-block-image .components-placeholder){filter: var(--wp--preset--duotone--custom-duotone);}';
$presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-big-font-size{font-size: var(--wp--preset--font-size--big) !important;}.has-arial-font-family{font-family: var(--wp--preset--font-family--arial) !important;}';
$all = $variables . $styles . $presets;

Expand Down

1 comment on commit dfaad6d

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in dfaad6d.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9316675303
📝 Reported issues:

Please sign in to comment.