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.

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

Allow setting Letter case and Decoration to 'None' and add Letter case to Global Styles #44067

Merged
Merged
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -6,14 +6,16 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
} from '@wordpress/components';
import { formatStrikethrough, formatUnderline } from '@wordpress/icons';
import { BaseControl, Button } from '@wordpress/components';
import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';

const TEXT_DECORATIONS = [
{
name: __( 'None' ),
value: 'none',
icon: reset,
},
{
name: __( 'Underline' ),
value: 'underline',
@@ -40,30 +42,36 @@ export default function TextDecorationControl( {
value,
onChange,
className,
...props
} ) {
return (
<ToggleGroupControl
{ ...props }
<fieldset
className={ classnames(
'block-editor-text-decoration-control',
className
) }
__experimentalIsBorderless
label={ __( 'Decoration' ) }
value={ value }
onChange={ onChange }
>
{ TEXT_DECORATIONS.map( ( textDecoration ) => {
return (
<ToggleGroupControlOptionIcon
key={ textDecoration.value }
value={ textDecoration.value }
icon={ textDecoration.icon }
label={ textDecoration.name }
/>
);
} ) }
</ToggleGroupControl>
<BaseControl.VisualLabel as="legend">
{ __( 'Decoration' ) }
</BaseControl.VisualLabel>
<div className="block-editor-text-decoration-control__buttons">
{ TEXT_DECORATIONS.map( ( textDecoration ) => {
return (
<Button
key={ textDecoration.value }
icon={ textDecoration.icon }
label={ textDecoration.name }
isPressed={ textDecoration.value === value }
onClick={ () => {
onChange(
textDecoration.value === value
? undefined
: textDecoration.value
);
} }
/>
);
} ) }
</div>
</fieldset>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.block-editor-text-decoration-control {
border: 0;
margin: 0;
padding: 0;

.block-editor-text-decoration-control__buttons {
// 4px of padding makes the row 40px high, same as an input.
padding: $grid-unit-05 0;
display: flex;
}

.components-button.has-icon {
height: $grid-unit-40;
margin-right: $grid-unit-05;
min-width: $grid-unit-40;
padding: 0;
}
}
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
} from '@wordpress/components';
import { BaseControl, Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
reset,
formatCapitalize,
formatLowercase,
formatUppercase,
} from '@wordpress/icons';

const TEXT_TRANSFORMS = [
{
name: __( 'None' ),
value: 'none',
icon: reset,
},
{
name: __( 'Uppercase' ),
value: 'uppercase',
@@ -36,32 +41,43 @@ const TEXT_TRANSFORMS = [
/**
* Control to facilitate text transform selections.
*
* @param {Object} props Component props.
* @param {string} props.value Currently selected text transform.
* @param {Function} props.onChange Handles change in text transform selection.
* @param {Object} props Component props.
* @param {string} props.className Class name to add to the control.
* @param {string} props.value Currently selected text transform.
* @param {Function} props.onChange Handles change in text transform selection.
*
* @return {WPElement} Text transform control.
*/
export default function TextTransformControl( { value, onChange, ...props } ) {
export default function TextTransformControl( { className, value, onChange } ) {
return (
<ToggleGroupControl
{ ...props }
className="block-editor-text-transform-control"
__experimentalIsBorderless
label={ __( 'Letter case' ) }
value={ value }
onChange={ onChange }
<fieldset
className={ classnames(
'block-editor-text-transform-control',
className
) }
>
{ TEXT_TRANSFORMS.map( ( textTransform ) => {
return (
<ToggleGroupControlOptionIcon
key={ textTransform.value }
value={ textTransform.value }
icon={ textTransform.icon }
label={ textTransform.name }
/>
);
} ) }
</ToggleGroupControl>
<BaseControl.VisualLabel as="legend">
{ __( 'Letter case' ) }
</BaseControl.VisualLabel>
<div className="block-editor-text-transform-control__buttons">
{ TEXT_TRANSFORMS.map( ( textTransform ) => {
return (
<Button
key={ textTransform.value }
icon={ textTransform.icon }
label={ textTransform.name }
isPressed={ textTransform.value === value }
onClick={ () => {
onChange(
textTransform.value === value
? undefined
: textTransform.value
);
} }
/>
);
} ) }
</div>
</fieldset>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.block-editor-text-transform-control {
border: 0;
margin: 0;
padding: 0;

.block-editor-text-transform-control__buttons {
// 4px of padding makes the row 40px high, same as an input.
padding: $grid-unit-05 0;
display: flex;
}

.components-button.has-icon {
height: $grid-unit-40;
margin-right: $grid-unit-05;
min-width: $grid-unit-40;
padding: 0;
}
}
27 changes: 13 additions & 14 deletions packages/block-editor/src/hooks/typography.js
Original file line number Diff line number Diff line change
@@ -189,6 +189,19 @@ export function TypographyPanel( props ) {
<LineHeightEdit { ...props } />
</ToolsPanelItem>
) }
{ ! isLetterSpacingDisabled && (
<ToolsPanelItem
className="single-column"
hasValue={ () => hasLetterSpacingValue( props ) }
label={ __( 'Letter spacing' ) }
onDeselect={ () => resetLetterSpacing( props ) }
isShownByDefault={ defaultControls?.letterSpacing }
resetAllFilter={ createResetAllFilter( 'letterSpacing' ) }
panelId={ clientId }
>
<LetterSpacingEdit { ...props } />
</ToolsPanelItem>
) }
{ ! isTextDecorationDisabled && (
<ToolsPanelItem
className="single-column"
@@ -204,7 +217,6 @@ export function TypographyPanel( props ) {
) }
{ ! isTextTransformDisabled && (
<ToolsPanelItem
className="single-column"
hasValue={ () => hasTextTransformValue( props ) }
/* translators: Ensure translation is distinct from "Font size" */
label={ __( 'Letter case' ) }
@@ -216,19 +228,6 @@ export function TypographyPanel( props ) {
<TextTransformEdit { ...props } />
</ToolsPanelItem>
) }
{ ! isLetterSpacingDisabled && (
<ToolsPanelItem
className="single-column"
hasValue={ () => hasLetterSpacingValue( props ) }
label={ __( 'Letter spacing' ) }
onDeselect={ () => resetLetterSpacing( props ) }
isShownByDefault={ defaultControls?.letterSpacing }
resetAllFilter={ createResetAllFilter( 'letterSpacing' ) }
panelId={ clientId }
>
<LetterSpacingEdit { ...props } />
</ToolsPanelItem>
) }
</InspectorControls>
);
}
2 changes: 2 additions & 0 deletions packages/block-editor/src/style.scss
Original file line number Diff line number Diff line change
@@ -46,6 +46,8 @@
@import "./components/responsive-block-control/style.scss";
@import "./components/rich-text/style.scss";
@import "./components/skip-to-selected-block/style.scss";
@import "./components/text-decoration-control/style.scss";
@import "./components/text-transform-control/style.scss";
@import "./components/tool-selector/style.scss";
@import "./components/url-input/style.scss";
@import "./components/url-popover/style.scss";
1 change: 0 additions & 1 deletion packages/edit-site/src/components/global-styles/hooks.js
Original file line number Diff line number Diff line change
@@ -168,7 +168,6 @@ const ROOT_BLOCK_SUPPORTS = [
'fontWeight',
'lineHeight',
'textDecoration',
'textTransform',
'padding',
'contentSize',
'wideSize',
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import {
__experimentalFontFamilyControl as FontFamilyControl,
__experimentalFontAppearanceControl as FontAppearanceControl,
__experimentalLetterSpacingControl as LetterSpacingControl,
__experimentalTextTransformControl as TextTransformControl,
} from '@wordpress/block-editor';
import {
PanelBody,
@@ -65,6 +66,18 @@ function useHasLetterSpacingControl( name, element ) {
return supports.includes( 'letterSpacing' );
}

function useHasTextTransformControl( name, element ) {
const setting = useSetting( 'typography.textTransform', name )[ 0 ];
if ( ! setting ) {
return false;
}
if ( ! name && element === 'heading' ) {
return true;
}
const supports = getSupportedGlobalStylesPanels( name );
return supports.includes( 'textTransform' );
}

export default function TypographyPanel( { name, element } ) {
const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
const supports = getSupportedGlobalStylesPanels( name );
@@ -89,6 +102,7 @@ export default function TypographyPanel( { name, element } ) {
const hasLineHeightEnabled = useHasLineHeightControl( name );
const hasAppearanceControl = useHasAppearanceControl( name );
const hasLetterSpacingControl = useHasLetterSpacingControl( name, element );
const hasTextTransformControl = useHasTextTransformControl( name, element );

/* Disable font size controls when the option to style all headings is selected. */
let hasFontSizeEnabled = supports.includes( 'fontSize' );
@@ -121,6 +135,10 @@ export default function TypographyPanel( { name, element } ) {
prefix + 'typography.letterSpacing',
name
);
const [ textTransform, setTextTransform ] = useStyle(
prefix + 'typography.textTransform',
name
);
const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
const [ color ] = useStyle( prefix + 'color.text', name );
@@ -252,6 +270,18 @@ export default function TypographyPanel( { name, element } ) {
__unstableInputWidth="auto"
/>
) }
{ hasTextTransformControl && (
<div className="edit-site-typography-panel__full-width-control">
<TextTransformControl
value={ textTransform }
onChange={ setTextTransform }
showNone
isBlock
size="__unstable-large"
__nextHasNoMarginBottom
/>
</div>
) }
</Grid>
</PanelBody>
);