Skip to content

Block Support: Add text transform block support using CSS variables #26060

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

Merged
apeatling merged 8 commits into from
Nov 3, 2020
Merged

Block Support: Add text transform block support using CSS variables #26060

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
75605bc
Add text transform block support
aaronrobertshaw Oct 13, 2020
2c2b141
Add config for block preset classes
aaronrobertshaw Oct 14, 2020
a20ff2f
Update text transform controls
aaronrobertshaw Oct 16, 2020
fe63bfd
Fix PHPCS errors
aaronrobertshaw Oct 16, 2020
0b6fd63
Allow for text transform controls alongside decoration
aaronrobertshaw Oct 21, 2020
23967b1
Add new icons for text transforms
aaronrobertshaw Oct 22, 2020
c35f246
Switch to only opting in for navigation block
aaronrobertshaw Oct 22, 2020
f2a56ab
Fix return value regression after resolving merge conflict
aaronrobertshaw Oct 30, 2020
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
Prev Previous commit
Next Next commit
Add new icons for text transforms
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Oct 30, 2020
commit 23967b1227a0bf00144dd6ef941f0405ed572266
12 changes: 8 additions & 4 deletions packages/block-editor/src/components/text-transform-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
*/
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
formatCapitalize,
formatLowercase,
formatUppercase,
} from '@wordpress/icons';

/**
* Control to facilitate text transform selections.
Expand Down Expand Up @@ -46,9 +51,9 @@ export default function TextTransformControl( {
// Text transform icons to use.
// Icons still to be created/designed.
const icons = {
capitalize: undefined,
lowercase: undefined,
uppercase: undefined,
capitalize: formatCapitalize,
lowercase: formatLowercase,
uppercase: formatUppercase,
};

return (
Expand All @@ -60,7 +65,6 @@ export default function TextTransformControl( {
<Button
key={ presetTransform.slug }
icon={ icons[ presetTransform.slug ] }
iconSize={ 24 }
isSmall
isPressed={ textTransform === presetTransform.slug }
onClick={ () =>
Expand Down
3 changes: 3 additions & 0 deletions packages/icons/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export { default as file } from './library/file';
export { default as flipHorizontal } from './library/flip-horizontal';
export { default as flipVertical } from './library/flip-vertical';
export { default as formatBold } from './library/format-bold';
export { default as formatCapitalize } from './library/format-capitalize';
export { default as formatIndent } from './library/format-indent';
export { default as formatIndentRTL } from './library/format-indent-rtl';
export { default as formatItalic } from './library/format-italic';
Expand All @@ -68,10 +69,12 @@ export { default as formatListBulletsRTL } from './library/format-list-bullets-r
export { default as formatListNumbered } from './library/format-list-numbered';
export { default as formatListNumberedRTL } from './library/format-list-numbered-rtl';
export { default as formatLtr } from './library/format-ltr';
export { default as formatLowercase } from './library/format-lowercase';
export { default as formatOutdent } from './library/format-outdent';
export { default as formatOutdentRTL } from './library/format-outdent-rtl';
export { default as formatRtl } from './library/format-rtl';
export { default as formatStrikethrough } from './library/format-strikethrough';
export { default as formatUppercase } from './library/format-uppercase';
export { default as fullscreen } from './library/fullscreen';
export { default as gallery } from './library/gallery';
export { default as globe } from './library/globe';
Expand Down
12 changes: 12 additions & 0 deletions packages/icons/src/library/format-capitalize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';

const formatCapitalize = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<Path d="M7.1 6.8L3.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H7.1zm-.8 6.8L8 8.9l1.7 4.7H6.3zm14.5-1.5c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2 .1.8-.2 1.4-.6 2z" />
</SVG>
);

export default formatCapitalize;
12 changes: 12 additions & 0 deletions packages/icons/src/library/format-lowercase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';

const formatLowercase = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<Path d="M10.8 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.1-.4-.3-.9-.4-1.6-.4-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.3 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.5.1-.7 0-.8-.1zM9.1 16c-.2.3-.5.6-.9.8-.4.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.5-3.9c-.3-.6-.7-1.1-1.2-1.5-.5-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1 0-.6-.2-1.3-.5-1.9zm-1.6 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.5-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z" />
</SVG>
);

export default formatLowercase;
12 changes: 12 additions & 0 deletions packages/icons/src/library/format-uppercase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';

const formatUppercase = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<Path d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z" />
</SVG>
);

export default formatUppercase;