Inline text formatting

.github/workflows/continuous-deployment.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: '${{ steps.nvm.outputs.NVMRC }}'
 
       - name: Setup npm cache
         uses: pat-s/always-upload-cache@v1.1.4

assets/src/edit-story/components/colorPicker/colorPicker.js

@@ -33,6 +33,7 @@ import { __ } from '@wordpress/i18n';
 import { PatternPropType } from '../../types';
 import { useKeyDownEffect } from '../keyboard';
 import useFocusOut from '../../utils/useFocusOut';
+import createSolid from '../../utils/createSolid';
 import CurrentColorPicker from './currentColorPicker';
 import GradientPicker from './gradientPicker';
 import Header from './header';
@@ -102,6 +103,9 @@ function ColorPicker({
   useEffect(() => {
     if (color) {
       load(color);
+    } else {
+      // If no color given, load solid black
+      load(createSolid(0, 0, 0));
     }
   }, [color, load]);
 

assets/src/edit-story/components/form/color/color.js

@@ -64,7 +64,7 @@ function ColorInput({
 }
 
 ColorInput.propTypes = {
-  value: PatternPropType,
+  value: PropTypes.oneOfType([PatternPropType, PropTypes.string]),
   hasGradient: PropTypes.bool,
   hasOpacity: PropTypes.bool,
   onChange: PropTypes.func.isRequired,

assets/src/edit-story/components/form/color/colorPreview.js

@@ -172,7 +172,7 @@ function ColorPreview({
         <VisualPreview role="status" style={previewStyle} {...buttonProps} />
         <TextualInput
           aria-label={`${inputLabel}: ${label}`}
-          value={hexInputValue}
+          value={hexInputValue ?? ''}
           onChange={handleInputChange}
           onBlur={handleInputBlur}
         />

assets/src/edit-story/components/form/color/opacityPreview.js

@@ -31,6 +31,7 @@ import { _x, __ } from '@wordpress/i18n';
  */
 import { PatternPropType } from '../../../types';
 import useFocusAndSelect from '../../../utils/useFocusAndSelect';
+import { MULTIPLE_VALUE } from '../';
 import getPreviewText from './getPreviewText';
 import getPreviewOpacity from './getPreviewOpacity';
 import ColorBox from './colorBox';
@@ -47,7 +48,8 @@ const Input = styled(ColorBox).attrs({
 `;
 
 function OpacityPreview({ value, onChange }) {
-  const hasPreviewText = Boolean(getPreviewText(value));
+  const hasPreviewText =
+    value !== MULTIPLE_VALUE && Boolean(getPreviewText(value));
   const postfix = _x('%', 'Percentage', 'web-stories');
   const [inputValue, setInputValue] = useState('');
   const ref = useRef();
@@ -91,7 +93,7 @@ function OpacityPreview({ value, onChange }) {
 }
 
 OpacityPreview.propTypes = {
-  value: PatternPropType,
+  value: PropTypes.oneOfType([PatternPropType, PropTypes.string]),
   onChange: PropTypes.func.isRequired,
 };
 

assets/src/edit-story/components/library/panes/text/textPane.js

@@ -42,9 +42,11 @@ const PRESETS = [
   {
     id: 'heading',
     title: __('Heading', 'web-stories'),
-    content: __('Heading', 'web-stories'),
+    content: `<span style="font-weight: 700">${__(
+      'Heading',
+      'web-stories'
+    )}</span>`,
     fontSize: dataFontEm(2),
-    fontWeight: 700,
     font: {
       family: 'Open Sans',
       service: 'fonts.google.com',
@@ -53,9 +55,11 @@ const PRESETS = [
   {
     id: 'subheading',
     title: __('Subheading', 'web-stories'),
-    content: __('Subheading', 'web-stories'),
+    content: `<span style="font-weight: 600">${__(
+      'Subheading',
+      'web-stories'
+    )}</span>`,
     fontSize: dataFontEm(1.5),
-    fontWeight: 600,
     font: {
       family: 'Open Sans',
       service: 'fonts.google.com',
@@ -69,7 +73,6 @@ const PRESETS = [
       'web-stories'
     ),
     fontSize: dataFontEm(1.1),
-    fontWeight: 400,
     font: {
       family: 'Roboto',
       service: 'fonts.google.com',

assets/src/edit-story/components/panels/stylePreset/panel.js

@@ -17,14 +17,16 @@
 /**
  * External dependencies
  */
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useRef, useEffect, useState } from 'react';
 
 /**
  * Internal dependencies
  */
 import { useStory } from '../../../app/story';
 import stripHTML from '../../../utils/stripHTML';
-import { Panel } from './../panel';
+import objectWithout from '../../../utils/objectWithout';
+import { Panel } from '../panel';
+import useRichTextFormatting from '../textStyle/useRichTextFormatting';
 import { getShapePresets, getTextPresets } from './utils';
 import PresetsHeader from './header';
 import Presets from './presets';
@@ -119,24 +121,46 @@ function StylePresetPanel() {
     ]
   );
 
+  const extraPropsToAdd = useRef(null);
+  const miniPushUpdate = useCallback(
+    (updater) => {
+      updateElementsById({
+        elementIds: selectedElementIds,
+        properties: (oldProps) => ({
+          ...updater(oldProps),
+          ...extraPropsToAdd.current,
+        }),
+      });
+      extraPropsToAdd.current = null;
+    },
+    [selectedElementIds, updateElementsById]
+  );
+
+  const {
+    handlers: { handleSetColor },
+  } = useRichTextFormatting(selectedElements, miniPushUpdate);
+
   const handleApplyPreset = useCallback(
     (preset) => {
       if (isText) {
         // @todo Determine this in a better way.
         // Only style presets have background text mode set.
         const isStylePreset = preset.backgroundTextMode !== undefined;
-        updateElementsById({
-          elementIds: selectedElementIds,
-          properties: isStylePreset ? { ...preset } : { color: preset },
-        });
+        if (isStylePreset) {
+          extraPropsToAdd.current = objectWithout(preset, ['color']);
+          handleSetColor(preset.color);
+        } else {
+          extraPropsToAdd.current = null;
+          handleSetColor(preset);
+        }
       } else {
         updateElementsById({
           elementIds: selectedElementIds,
           properties: { backgroundColor: preset },
         });
       }
     },
-    [isText, selectedElementIds, updateElementsById]
+    [isText, handleSetColor, selectedElementIds, updateElementsById]
   );
 
   const colorPresets = isText ? textColors : fillColors;

assets/src/edit-story/components/panels/stylePreset/test/panel.js

@@ -28,6 +28,7 @@ import { BACKGROUND_TEXT_MODE } from '../../../../constants';
 import { getShapePresets, getTextPresets } from '../utils';
 import { renderWithTheme } from '../../../../testUtils';
 import { TEXT_ELEMENT_DEFAULT_FONT } from '../../../../app/font/defaultFonts';
+
 jest.mock('../utils');
 
 function setupPanel(extraStylePresets, extraStateProps) {
@@ -91,7 +92,6 @@ describe('Panels/StylePreset', () => {
     },
   };
   const STYLE_PRESET = {
-    color: TEST_COLOR_2,
     backgroundTextMode: BACKGROUND_TEXT_MODE.FILL,
     backgroundColor: TEST_COLOR,
   };
@@ -149,13 +149,13 @@ describe('Panels/StylePreset', () => {
       expect(newEditButton).toBeDefined();
     });
 
-    it('should add a text color preset', () => {
+    it('should add a text color preset if other text styles are default or missing', () => {
       const extraStateProps = {
         selectedElements: [
           {
             id: '1',
             type: 'text',
-            color: [TEST_COLOR_2],
+            content: '<span style="color: rgba(2, 2, 2)">Content</span>',
             backgroundTextMode: BACKGROUND_TEXT_MODE.NONE,
             font: TEXT_ELEMENT_DEFAULT_FONT,
           },
@@ -193,6 +193,7 @@ describe('Panels/StylePreset', () => {
           {
             id: '1',
             type: 'text',
+            content: '<span style="color: rgba(2, 2, 2)">Content</span>',
             ...STYLE_PRESET,
           },
         ],
@@ -204,7 +205,7 @@ describe('Panels/StylePreset', () => {
 
       getTextPresets.mockImplementation(() => {
         return {
-          textStyles: [STYLE_PRESET],
+          textStyles: [{ color: TEST_COLOR_2, ...STYLE_PRESET }],
         };
       });
 
@@ -217,7 +218,7 @@ describe('Panels/StylePreset', () => {
           stylePresets: {
             textColors: [],
             fillColors: [],
-            textStyles: [STYLE_PRESET],
+            textStyles: [{ color: TEST_COLOR_2, ...STYLE_PRESET }],
           },
         },
       });
@@ -365,10 +366,17 @@ describe('Panels/StylePreset', () => {
       expect(updateElementsById).toHaveBeenCalledTimes(1);
       expect(updateElementsById).toHaveBeenCalledWith({
         elementIds: ['1'],
-        properties: {
-          color: TEST_COLOR,
-        },
+        properties: expect.any(Function),
       });
+      const updaterFunction = updateElementsById.mock.calls[0][0].properties;
+      const partiallyBlueContent = {
+        content: 'Hello <span style="color: blue">World</span>',
+      };
+      const updatedContent = updaterFunction(partiallyBlueContent);
+      const expectedContent = {
+        content: '<span style="color: #010101">Hello World</span>',
+      };
+      expect(updatedContent).toStrictEqual(expectedContent);
     });
   });
 });

assets/src/edit-story/components/panels/stylePreset/test/utils.js

@@ -24,6 +24,7 @@ import {
   getTextPresets,
 } from '../utils';
 import { BACKGROUND_TEXT_MODE } from '../../../../constants';
+import objectWithout from '../../../../utils/objectWithout';
 import { TEXT_ELEMENT_DEFAULT_FONT } from '../../../../app/font/defaultFonts';
 
 describe('Panels/StylePreset/utils', () => {
@@ -164,12 +165,13 @@ describe('Panels/StylePreset/utils', () => {
           vertical: 0,
           horizontal: 0,
         },
-        color: TEST_COLOR,
+        content: '<span style="color: rgb(1,1,1)">Content</span>',
       },
       {
         type: 'text',
         x: 30,
-        ...stylePreset,
+        content: '<span style="color: rgb(2,2,2)">Content</span>',
+        ...objectWithout(stylePreset, ['color']),
       },
     ];
     const stylePresets = {
@@ -185,6 +187,64 @@ describe('Panels/StylePreset/utils', () => {
     expect(presets).toStrictEqual(expected);
   });
 
+  it('should ignore text color presets for multi-color text fields', () => {
+    const elements = [
+      {
+        type: 'text',
+        backgroundTextMode: BACKGROUND_TEXT_MODE.NONE,
+        font: TEXT_ELEMENT_DEFAULT_FONT,
+        content:
+          '<span style="color: rgb(1,1,1)">O</span><span style="color: rgb(2,1,1)">K</span>',
+      },
+    ];
+    const stylePresets = {
+      textStyles: [],
+      textColors: [],
+      fillColors: [],
+    };
+    const expected = {
+      textColors: [],
+      textStyles: [],
+    };
+    const presets = getTextPresets(elements, stylePresets);
+    expect(presets).toStrictEqual(expected);
+  });
+
+  it('should use black color when adding text style preset for multi-color text fields', () => {
+    const stylePreset = {
+      ...STYLE_PRESET,
+      font: {
+        family: 'Foo',
+        fallbacks: ['Bar'],
+      },
+    };
+    const elements = [
+      {
+        type: 'text',
+        x: 30,
+        content:
+          '<span style="color: rgb(1,1,1)">O</span><span style="color: rgb(2,1,1)">K</span>',
+        ...objectWithout(stylePreset, ['color']),
+      },
+    ];
+    const stylePresets = {
+      textStyles: [],
+      textColors: [],
+      fillColors: [],
+    };
+    const expected = {
+      textColors: [],
+      textStyles: [
+        {
+          ...stylePreset,
+          color: { color: { r: 0, g: 0, b: 0 } },
+        },
+      ],
+    };
+    const presets = getTextPresets(elements, stylePresets);
+    expect(presets).toStrictEqual(expected);
+  });
+
   it('should not consider existing presets as new', () => {
     const stylePreset = {
       ...STYLE_PRESET,
@@ -199,7 +259,7 @@ describe('Panels/StylePreset/utils', () => {
         backgroundTextMode: BACKGROUND_TEXT_MODE.NONE,
         font: TEXT_ELEMENT_DEFAULT_FONT,
         foo: 'bar',
-        color: TEST_COLOR,
+        content: '<span style="color: rgb(1,1,1)">Content</span>',
         padding: {
           vertical: 0,
           horizontal: 0,
@@ -208,7 +268,8 @@ describe('Panels/StylePreset/utils', () => {
       {
         type: 'text',
         x: 30,
-        ...stylePreset,
+        content: '<span style="color: rgb(2,2,2)">Content</span>',
+        ...objectWithout(stylePreset, ['color']),
       },
     ];
     const stylePresets = {