From f961832a7e88d156e5e4952c3aaba2dc3dfaf247 Mon Sep 17 00:00:00 2001 From: Jorge Date: Wed, 9 May 2018 11:55:01 +0100 Subject: [PATCH] Add FontSizePicker component and refactor paragraph block to use it. (#6618) This change makes font size UI generic and allows other blocks to take advantage of the same UI used in the paragraph. Other changes will follow that will abstract other font size logic from paragraph (not just the UI). Themes will also be able to configure the font sizes. The future changes will use this work. --- components/font-size-picker/README.md | 61 +++++++++++++ components/font-size-picker/index.js | 57 ++++++++++++ .../font-size-picker/style.scss | 4 +- components/index.js | 1 + core-blocks/paragraph/index.js | 89 ++++++++----------- 5 files changed, 158 insertions(+), 54 deletions(-) create mode 100644 components/font-size-picker/README.md create mode 100644 components/font-size-picker/index.js rename core-blocks/paragraph/editor.scss => components/font-size-picker/style.scss (65%) diff --git a/components/font-size-picker/README.md b/components/font-size-picker/README.md new file mode 100644 index 0000000000000..e3edbdf493911 --- /dev/null +++ b/components/font-size-picker/README.md @@ -0,0 +1,61 @@ +FontSizePicker +======== + +FontSizePicker is a React component that renders a UI that allows users to select a font size. +The component renders a series of buttons that allow the user to select predefined (common) font sizes and contains a range slider that enables the user to select custom font sizes (by choosing the value. + +## Usage + + +```jsx +import { Dropdown } from '@wordpress/components'; + +function MyFontSizePicker() { + return ( + + ); +} +``` + +## Props + +The component accepts the following props: + +### fontSizes + +An array of font size objects. The object should contain properties size, name, shortName. +The property "size" contains a number with the font size value. The "shortName" property includes a small label used in the buttons. Property "name" is used as the label when shortName is not provided. + +- Type: `Array` +- Required: No + +### fallbackFontSize + +In no value exists this prop contains the font size picker slider starting position. + +- Type: `Number` +- Required: No + +### value + +The current font size value. If a button value matches the font size value that button is pressed. RangeControl is rendered with this value. + +- Type: `Number` +- Required: No + +## onChange + +A function that receives the new font size value. +If onChange is called without any parameter, it should reset the value, attending to what reset means in that context, e.g., set the font size to undefined or set the font size a starting value. + +- Type: `function` +- Required: Yes + diff --git a/components/font-size-picker/index.js b/components/font-size-picker/index.js new file mode 100644 index 0000000000000..30f34ebb25cf1 --- /dev/null +++ b/components/font-size-picker/index.js @@ -0,0 +1,57 @@ +/** + * External dependencies + */ +import { map } from 'lodash'; + +/** + * WordPress dependencies + */ +import { Fragment } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import './style.scss'; +import Button from '../button'; +import ButtonGroup from '../button-group'; +import RangeControl from '../range-control'; + +export default function FontSizePicker( { fontSizes = [], fallbackFontSize, value, onChange } ) { + return ( + +
+ + { map( fontSizes, ( { name, size, shortName } ) => ( + + ) ) } + + +
+ + + ); +} diff --git a/core-blocks/paragraph/editor.scss b/components/font-size-picker/style.scss similarity index 65% rename from core-blocks/paragraph/editor.scss rename to components/font-size-picker/style.scss index a93686fa68e21..8a522831093dd 100644 --- a/core-blocks/paragraph/editor.scss +++ b/components/font-size-picker/style.scss @@ -1,10 +1,10 @@ -.blocks-font-size__main { +.components-font-size-picker__buttons { display: flex; justify-content: space-between; margin-bottom: 1em; } -.blocks-paragraph__custom-size-slider { +.components-font-size-picker__custom-input { .components-range-control__slider + .dashicon { width: 30px; height: 30px; diff --git a/components/index.js b/components/index.js index 2479b9a2c0ec9..3f76939bcfac2 100644 --- a/components/index.js +++ b/components/index.js @@ -18,6 +18,7 @@ export { default as Dropdown } from './dropdown'; export { default as DropdownMenu } from './dropdown-menu'; export { default as ExternalLink } from './external-link'; export { default as FocusableIframe } from './focusable-iframe'; +export { default as FontSizePicker } from './font-size-picker'; export { default as FormFileUpload } from './form-file-upload'; export { default as FormToggle } from './form-toggle'; export { default as FormTokenField } from './form-token-field'; diff --git a/core-blocks/paragraph/index.js b/core-blocks/paragraph/index.js index 6f8536dd19e6d..0ef4c76a82ba4 100644 --- a/core-blocks/paragraph/index.js +++ b/core-blocks/paragraph/index.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; -import { findKey, isFinite, map, omit } from 'lodash'; +import { isFinite, find, omit } from 'lodash'; /** * WordPress dependencies @@ -16,11 +16,9 @@ import { RawHTML, } from '@wordpress/element'; import { + FontSizePicker, PanelBody, - RangeControl, ToggleControl, - Button, - ButtonGroup, withFallbackStyles, } from '@wordpress/components'; import { @@ -38,7 +36,6 @@ import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks'; /** * Internal dependencies */ -import './editor.scss'; import './style.scss'; const { getComputedStyle } = window; @@ -55,12 +52,28 @@ const FallbackStyles = withFallbackStyles( ( node, ownProps ) => { }; } ); -const FONT_SIZES = { - small: 14, - regular: 16, - large: 36, - larger: 48, -}; +const FONT_SIZES = [ + { + name: 'small', + shortName: 'S', + size: 14, + }, + { + name: 'regular', + shortName: 'M', + size: 16, + }, + { + name: 'large', + shortName: 'L', + size: 36, + }, + { + name: 'larger', + shortName: 'XL', + size: 48, + }, +]; class ParagraphBlock extends Component { constructor() { @@ -97,7 +110,10 @@ class ParagraphBlock extends Component { getFontSize() { const { customFontSize, fontSize } = this.props.attributes; if ( fontSize ) { - return FONT_SIZES[ fontSize ]; + const fontSizeObj = find( FONT_SIZES, { name: fontSize } ); + if ( fontSizeObj ) { + return fontSizeObj.size; + } } if ( customFontSize ) { @@ -107,10 +123,10 @@ class ParagraphBlock extends Component { setFontSize( fontSizeValue ) { const { setAttributes } = this.props; - const thresholdFontSize = findKey( FONT_SIZES, ( size ) => size === fontSizeValue ); + const thresholdFontSize = find( FONT_SIZES, { size: fontSizeValue } ); if ( thresholdFontSize ) { setAttributes( { - fontSize: thresholdFontSize, + fontSize: thresholdFontSize.name, customFontSize: undefined, } ); return; @@ -159,42 +175,11 @@ class ParagraphBlock extends Component { -
- - { map( { - S: 'small', - M: 'regular', - L: 'large', - XL: 'larger', - }, ( size, label ) => ( - - ) ) } - - -
- this.setFontSize( value ) } - min={ 12 } - max={ 100 } - beforeIcon="editor-textcolor" - afterIcon="editor-textcolor" +