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.

Sign up for GitHub

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

Disable drop cap control if text is aligned #42326

Merged
merged 8 commits into from
Sep 29, 2022
Merged

Disable drop cap control if text is aligned #42326

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c6ceb18
Disable drop cap control if text is aligned
carolinan Jul 11, 2022
8de2486
Try rtl support
carolinan Jul 12, 2022
9149f52
Update deprecation to manage block validation errors. Update RTL CSS.
carolinan Jul 14, 2022
0121bdf
Uncheck the option when it is disabled
carolinan Jul 27, 2022
ea5ad40
Use a function for the alignment check that disables the drop cap.
carolinan Jul 27, 2022
0fdf7e9
Merge branch 'trunk' into update/aligned-text-drop-crap
carolinan Sep 20, 2022
c3d62b6
Update deprecated.js
carolinan Sep 20, 2022
83f3237
Update help text when drop cap is disabled
carolinan Sep 20, 2022
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
36 changes: 36 additions & 0 deletions packages/block-library/src/paragraph/deprecated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,11 @@ import {
getColorClassName,
getFontSizeClass,
RichText,
useBlockProps,
} from '@wordpress/block-editor';

import { isRTL } from '@wordpress/i18n';

const supports = {
className: false,
};
Expand Down Expand Up @@ -85,6 +88,39 @@ const migrateCustomColorsAndFontSizes = ( attributes ) => {
};

const deprecated = [
// Version without drop cap on aligned text.
{
supports,
attributes: {
...omit( blockAttributes, [ 'style' ] ),
customTextColor: {
type: 'string',
},
customBackgroundColor: {
type: 'string',
},
customFontSize: {
type: 'number',
},
},
save( { attributes } ) {
const { align, content, dropCap, direction } = attributes;
const className = classnames( {
'has-drop-cap':
align === ( isRTL() ? 'left' : 'right' ) ||
align === 'center'
? false
: dropCap,
[ `has-text-align-${ align }` ]: align,
} );

return (
<p { ...useBlockProps.save( { className, dir: direction } ) }>
<RichText.Content value={ content } />
</p>
);
},
},
{
supports,
attributes: {
Expand Down
28 changes: 21 additions & 7 deletions packages/block-library/src/paragraph/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,26 @@ function ParagraphBlock( {
const blockProps = useBlockProps( {
ref: useOnEnter( { clientId, content } ),
className: classnames( {
'has-drop-cap': dropCap,
'has-drop-cap':
align === ( isRTL() ? 'left' : 'right' ) || align === 'center'
aristath marked this conversation as resolved.
Show resolved Hide resolved
? false
: dropCap,
[ `has-text-align-${ align }` ]: align,
} ),
style: { direction },
} );

let helpText;
if ( align === ( isRTL() ? 'left' : 'right' ) || align === 'center' ) {
helpText = __( 'Aligned text can not have a drop cap.' );
// This attribute change also makes sure that the option is toggled off, not only disabled.
setAttributes( { dropCap: undefined } );
carolinan marked this conversation as resolved.
Show resolved Hide resolved
} else if ( dropCap ) {
helpText = __( 'Showing large initial letter.' );
} else {
helpText = __( 'Toggle to show a large initial letter.' );
}

return (
<>
<BlockControls group="block">
Expand Down Expand Up @@ -103,12 +117,12 @@ function ParagraphBlock( {
onChange={ () =>
setAttributes( { dropCap: ! dropCap } )
}
help={
dropCap
? __( 'Showing large initial letter.' )
: __(
'Toggle to show a large initial letter.'
)
help={ helpText }
disabled={
align === ( isRTL() ? 'left' : 'right' ) ||
align === 'center'
? true
: false
}
/>
</ToolsPanelItem>
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/paragraph/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,15 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { RichText, useBlockProps } from '@wordpress/block-editor';
import { isRTL } from '@wordpress/i18n';

export default function save( { attributes } ) {
const { align, content, dropCap, direction } = attributes;
const className = classnames( {
'has-drop-cap': dropCap,
'has-drop-cap':
align === ( isRTL() ? 'left' : 'right' ) || align === 'center'
? false
: dropCap,
[ `has-text-align-${ align }` ]: align,
} );

Expand Down
5 changes: 4 additions & 1 deletion packages/block-library/src/paragraph/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
// cannot be set around it, caret position calculation fails in Chrome, and
// typing at the end of the paragraph doesn't work.
.has-drop-cap:not(:focus)::first-letter {
float: left;
font-size: 8.4em;
line-height: 0.68;
font-weight: 100;
Expand All @@ -28,6 +27,10 @@
font-style: normal;
}

body.rtl .has-drop-cap:not(:focus)::first-letter {
margin-left: 0.1em;
}

// Prevent the dropcap from breaking out of the box when a background is applied.
p.has-drop-cap.has-background {
overflow: hidden;
Expand Down