profile
viewpoint

ampproject/amp-wp 1559

Enable AMP on your WordPress site, the WordPress way.

google/web-stories-wp 173

Web Stories WordPress plugin

WP-API/wp-api-customize-endpoints 20

Legacy experimental WP REST API endpoints for the Customizer

xwp/wp-tide-test-plugin 6

Plugin for testing wp-tide scoring

miina/wcus18 4

Example Plugin for WCUS18 for Extending Gutenberg Core Blocks

westonruter/twentyseventeen-westonson 4

My child theme of Twenty Seventeen for testing.

xwp/progressive-wordpress 1

This Plugin adds progressive features to your WordPress site and converts it to a progressive web app

miina/gutenberg 0

Printing since 1440. Development hub for the editor focus in core. Beta plugin is available from the official WordPress repository.

push eventgoogle/web-stories-wp

Miina Sikk

commit sha 9f715490f21f1ef139194ca7afdabe815e5a6167

Add missing context values for tests.

view details

push time in an hour

push eventgoogle/web-stories-wp

Miina Sikk

commit sha 9e2abd0a46bf4b979b9e8e205dce2cfba718db34

Add unit test for page output.

view details

push time in an hour

push eventgoogle/web-stories-wp

Miina Sikk

commit sha 8cbf74e7f9f15f3a88f8c7d42b5a3cabb6a2f3a7

Start adding Karma tests.

view details

Miina Sikk

commit sha 6d668651f403e518d0cfa632408b50db98162580

Add more Karma tests.

view details

push time in 2 hours

push eventgoogle/web-stories-wp

Miina Sikk

commit sha 50f2451f72b3d1bc26e5888e8d79b90d122d05d1

Add unit tests.

view details

push time in 4 hours

push eventgoogle/web-stories-wp

Miina Sikk

commit sha 72ce7088007a2644bf6392ab0fcdb5cb1a5d04de

Add placeholder for Karma tests.

view details

Miina Sikk

commit sha 7a28f52ad33c79cc02cef1bf20ac5aa704ac041b

Add placeholder for Karma tests.

view details

push time in 5 hours

push eventgoogle/web-stories-wp

Miina Sikk

commit sha c75a330f3680738db6078aa0ff682e218c43344b

Rename params.

view details

Miina Sikk

commit sha 7330f60fe0a6b0397ad39e7f45b465cf21e837fe

Fix Page attachment + links logic for panel.

view details

push time in 5 hours

push eventgoogle/web-stories-wp

Miina Sikk

commit sha de5775e32cedc835b82b93baf7f4c441f580b8bd

Add attachment logic for single moveable.

view details

Miina Sikk

commit sha edbb00e446d52e6e687ea6997fb72638b021c2c3

Add logic for multi-selection moveable.

view details

Miina Sikk

commit sha 5aae0a783feb646e5172b9ed9c1fa9c5bb01bac6

Add tooltip for page attachment.

view details

Miina Sikk

commit sha 734670cee50a356585a2ece32e5bc4712ebbcd95

Add spacing for tooltip.

view details

push time in 8 hours

Pull request review commentgoogle/web-stories-wp

[WIP] Fixing a number of a11y problems with design panel components

 export default styled.input.attrs(({ min, max, step, value, onChange }) => ({   &::-ms-thumb {     ${rangeThumb}   }++  &:focus {+    &::-webkit-slider-thumb {+      ${focusedRangeThumb}+    }++    &::-moz-range-thumb {+      ${focusedRangeThumb}+    }++    &::-ms-thumb {+      ${focusedRangeThumb}+    }+  } `;++function RangeInput({ minorStep, majorStep, handleChange, value, ...rest }) {

Oh, right, I was only focusing on the keyboard part and didn't even think about the mouse while reviewing.

barklund

comment created time in a day

push eventgoogle/web-stories-wp

Miina Sikk

commit sha 0c0f5f1737db79c47a51599ec273726e8cf917db

Add detecting existing elements in attachment area.

view details

Miina Sikk

commit sha 1a2cccb54ec7bd5d1637a4833d0563b9fa5454ae

Add links detection for Attachment panel.

view details

push time in a day

issue openedgoogle/web-stories-wp

Refactor SingleSelectionMoveable and MultiSelectionMoveable

Feature Description

SingleSelectionMoveable and MultiSelectionMoveable are currently two files constantly growing, both around 400 lines per file. This makes managing the files more difficult over time. Additionally, these two files could share some logic and potentially some utils, e.g. the snapping attributes could be shared.

We should refactor the two files to:

  • Split it to smaller parts to make it more manageable
  • Reuse logic between the two files where possible <!-- A clear and concise description of what the problem is and what you want to happen. -->

Alternatives Considered

<!-- A clear and concise description of any alternative solutions or features you've considered. -->

Additional Context

<!-- Add any other context or screenshots about the feature request. -->


Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

<!-- One or more bullet points for acceptance criteria. -->

Implementation Brief

<!-- One or more bullet points for how to technically implement the feature. -->

created time in a day

issue commentgoogle/web-stories-wp

Page Attachments - linked content

@samitron7 Some additional details to confirm: In case of multi-selection where only one of the elements is a link and being dragged -- is the tooltip still shown the same way even though there are other elements in the multi-selection as well? Does then only the element with link snap back to the original position or all the selected elements?

jauyong

comment created time in a day

push eventgoogle/web-stories-wp

Pascal Birchler

commit sha 0d94101d61f751f30070a45d8d874926f7955e93

Exclude web-stories.php from coverage

view details

Pascal Birchler

commit sha 099ffd30d2d2d82f41bc51d93d84bbf998ef5a8a

Exclude uninstall.php from coverage

view details

Pascal Birchler

commit sha 41ab3f9b87a3355d7ffd353ca0c663ef9e4fd703

Move templates to folders

view details

Pascal Birchler

commit sha 99c88b9ea89c08493e11ba06fe04e48ff11edede

Exclude templates folder from coverage

view details

Pascal Birchler

commit sha 872cf995480f12e62d702aa9976ca615844ddf02

Update codecov config

view details

Pascal Birchler

commit sha f23f7ac62d352b381dec0a214e2dee2036d5b595

Merge branch 'master' into fix/328-exclude-from-coverage

view details

Pascal Birchler

commit sha 68510b8e18ccedee5e84f25eba17ab07541c40f8

Add tests for Updater class

view details

Pascal Birchler

commit sha 0887bc296be8539358318364daaf83b79a653962

Lint fixes

view details

Pascal Birchler

commit sha 241408426d7d22a7a6e289443852bfdd7c80e302

Add more assertions

view details

Pascal Birchler

commit sha a5f39dc1c913ac5bce020ce4605b9ce97b4132cc

Multisite test

view details

Miina Sikk

commit sha 919743038e69e38e98771995162dd5ba793abf96

Fix color presets opacity detection.

view details

Brittany Feenstra

commit sha 3c6916621e6a75bd352e29e59f185a5cbdc61cc0

updating template descriptions and adding i18n wrapper

view details

Clinton Volzke

commit sha 48b58b5210f3c8b46d328372c70b4d5c68b654c0

Pull out common reducer.js logic to media/common

view details

Clinton Volzke

commit sha f06f691899e742d4e3c8c04278f0cd4a0f3ec7d4

Rename local media 'pagingNum' to 'pageToken' for consistency between media3p and local

view details

imgbot[bot]

commit sha c482727e69ea544733945282659439925dd8a91f

[ImgBot] Optimize images (#2816) *Total -- 6,377.13kb -> 5,908.27kb (7.35%) /assets/images/templates/fitness/fitness_page7_circle-border.png -- 1.63kb -> 1.28kb (21.77%) /assets/images/templates/beauty/beauty_page1_bg-alt.png -- 345.38kb -> 286.99kb (16.91%) /assets/images/templates/fitness/fitness_page1_logo-generic.png -- 0.90kb -> 0.75kb (16.03%) /assets/images/templates/wellbeing/wellbeing_page10_image4.png -- 23.20kb -> 19.88kb (14.31%) /assets/images/templates/fitness/fitness_page1_bg-red.png -- 521.25kb -> 467.61kb (10.29%) /assets/images/templates/beauty/beauty_page1_logo-generic.png -- 0.81kb -> 0.73kb (9.4%) /assets/images/templates/travel/travel_icon_logo.png -- 0.81kb -> 0.73kb (9.4%) /assets/images/templates/diy/diy_page7_bg.jpg -- 719.06kb -> 655.54kb (8.83%) /assets/images/templates/fitness/fitness_page5_bg-no-logo.png -- 1,852.81kb -> 1,721.54kb (7.08%) /assets/images/templates/fitness/fitness_page7_bg-red.png -- 1,650.97kb -> 1,543.14kb (6.53%) /assets/images/templates/fitness/fitness_page4_bg-red.png -- 379.41kb -> 355.64kb (6.26%) /assets/images/templates/fashion/fashion_page5_handbag-alt.png -- 253.69kb -> 239.34kb (5.66%) /assets/images/templates/wellbeing/wellbeing_icon_logo.png -- 0.79kb -> 0.75kb (4.7%) /assets/images/templates/cooking/cooking_icon_logo.png -- 0.79kb -> 0.75kb (4.7%) /assets/images/templates/beauty/beauty_page9_story2.jpg -- 149.96kb -> 143.68kb (4.19%) /assets/images/templates/entertainment/ent_icon_wraparound.png -- 9.98kb -> 9.63kb (3.48%) /assets/images/templates/fashion/fashion_page1_logo-generic.png -- 0.75kb -> 0.73kb (2.21%) /assets/images/templates/entertainment/ent_page8_image3.jpg -- 11.75kb -> 11.60kb (1.32%) /assets/images/templates/fitness/fitness_page6_watch-no-logo.png -- 450.45kb -> 445.20kb (1.17%) /assets/images/templates/entertainment/ent_icon_musicnote.png -- 2.74kb -> 2.73kb (0.5%) Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com> Co-authored-by: ImgBotApp <ImgBotHelp@gmail.com> Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Wassim Gharbi

commit sha 08875e1a23261aafabefaadce2fd1c990a1ef436

Media: Use different cursor on the image editor indicating panning (#2754)

view details

dependabot-preview[bot]

commit sha ddadf95f9c435847a60b452cc1d22a69ff8a7bfa

Bump @storybook/addon-docs from 6.0.0-beta.36 to 6.0.0-beta.37 (#2836) Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha ad23e99163f0197acb8759086ded44f5190588e6

Bump markdownlint-cli from 0.23.1 to 0.23.2 (#2837) Bumps [markdownlint-cli](https://github.com/igorshubovych/markdownlint-cli) from 0.23.1 to 0.23.2. - [Release notes](https://github.com/igorshubovych/markdownlint-cli/releases) - [Commits](https://github.com/igorshubovych/markdownlint-cli/compare/v0.23.1...v0.23.2) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha dcea05fc6e9676602a87d495f78fd9aab0d0daa2

Bump puppeteer from 4.0.0 to 4.0.1 (#2842) Bumps [puppeteer](https://github.com/puppeteer/puppeteer) from 4.0.0 to 4.0.1. - [Release notes](https://github.com/puppeteer/puppeteer/releases) - [Commits](https://github.com/puppeteer/puppeteer/compare/v4.0.0...v4.0.1) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 4e9f0607ed147c55dc8ae6eb92f85fd74e5687b5

Bump @testing-library/dom from 7.18.1 to 7.19.0 (#2799) Bumps [@testing-library/dom](https://github.com/testing-library/dom-testing-library) from 7.18.1 to 7.19.0. - [Release notes](https://github.com/testing-library/dom-testing-library/releases) - [Changelog](https://github.com/testing-library/dom-testing-library/blob/master/CHANGELOG.md) - [Commits](https://github.com/testing-library/dom-testing-library/compare/v7.18.1...v7.19.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

push time in a day

push eventgoogle/web-stories-wp

Pascal Birchler

commit sha 0d94101d61f751f30070a45d8d874926f7955e93

Exclude web-stories.php from coverage

view details

Pascal Birchler

commit sha 099ffd30d2d2d82f41bc51d93d84bbf998ef5a8a

Exclude uninstall.php from coverage

view details

Pascal Birchler

commit sha 41ab3f9b87a3355d7ffd353ca0c663ef9e4fd703

Move templates to folders

view details

Pascal Birchler

commit sha 99c88b9ea89c08493e11ba06fe04e48ff11edede

Exclude templates folder from coverage

view details

Pascal Birchler

commit sha 872cf995480f12e62d702aa9976ca615844ddf02

Update codecov config

view details

Pascal Birchler

commit sha f23f7ac62d352b381dec0a214e2dee2036d5b595

Merge branch 'master' into fix/328-exclude-from-coverage

view details

Pascal Birchler

commit sha 68510b8e18ccedee5e84f25eba17ab07541c40f8

Add tests for Updater class

view details

Pascal Birchler

commit sha 0887bc296be8539358318364daaf83b79a653962

Lint fixes

view details

Pascal Birchler

commit sha 241408426d7d22a7a6e289443852bfdd7c80e302

Add more assertions

view details

Pascal Birchler

commit sha a5f39dc1c913ac5bce020ce4605b9ce97b4132cc

Multisite test

view details

Miina Sikk

commit sha 919743038e69e38e98771995162dd5ba793abf96

Fix color presets opacity detection.

view details

Brittany Feenstra

commit sha 3c6916621e6a75bd352e29e59f185a5cbdc61cc0

updating template descriptions and adding i18n wrapper

view details

Clinton Volzke

commit sha 48b58b5210f3c8b46d328372c70b4d5c68b654c0

Pull out common reducer.js logic to media/common

view details

Clinton Volzke

commit sha f06f691899e742d4e3c8c04278f0cd4a0f3ec7d4

Rename local media 'pagingNum' to 'pageToken' for consistency between media3p and local

view details

imgbot[bot]

commit sha c482727e69ea544733945282659439925dd8a91f

[ImgBot] Optimize images (#2816) *Total -- 6,377.13kb -> 5,908.27kb (7.35%) /assets/images/templates/fitness/fitness_page7_circle-border.png -- 1.63kb -> 1.28kb (21.77%) /assets/images/templates/beauty/beauty_page1_bg-alt.png -- 345.38kb -> 286.99kb (16.91%) /assets/images/templates/fitness/fitness_page1_logo-generic.png -- 0.90kb -> 0.75kb (16.03%) /assets/images/templates/wellbeing/wellbeing_page10_image4.png -- 23.20kb -> 19.88kb (14.31%) /assets/images/templates/fitness/fitness_page1_bg-red.png -- 521.25kb -> 467.61kb (10.29%) /assets/images/templates/beauty/beauty_page1_logo-generic.png -- 0.81kb -> 0.73kb (9.4%) /assets/images/templates/travel/travel_icon_logo.png -- 0.81kb -> 0.73kb (9.4%) /assets/images/templates/diy/diy_page7_bg.jpg -- 719.06kb -> 655.54kb (8.83%) /assets/images/templates/fitness/fitness_page5_bg-no-logo.png -- 1,852.81kb -> 1,721.54kb (7.08%) /assets/images/templates/fitness/fitness_page7_bg-red.png -- 1,650.97kb -> 1,543.14kb (6.53%) /assets/images/templates/fitness/fitness_page4_bg-red.png -- 379.41kb -> 355.64kb (6.26%) /assets/images/templates/fashion/fashion_page5_handbag-alt.png -- 253.69kb -> 239.34kb (5.66%) /assets/images/templates/wellbeing/wellbeing_icon_logo.png -- 0.79kb -> 0.75kb (4.7%) /assets/images/templates/cooking/cooking_icon_logo.png -- 0.79kb -> 0.75kb (4.7%) /assets/images/templates/beauty/beauty_page9_story2.jpg -- 149.96kb -> 143.68kb (4.19%) /assets/images/templates/entertainment/ent_icon_wraparound.png -- 9.98kb -> 9.63kb (3.48%) /assets/images/templates/fashion/fashion_page1_logo-generic.png -- 0.75kb -> 0.73kb (2.21%) /assets/images/templates/entertainment/ent_page8_image3.jpg -- 11.75kb -> 11.60kb (1.32%) /assets/images/templates/fitness/fitness_page6_watch-no-logo.png -- 450.45kb -> 445.20kb (1.17%) /assets/images/templates/entertainment/ent_icon_musicnote.png -- 2.74kb -> 2.73kb (0.5%) Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com> Co-authored-by: ImgBotApp <ImgBotHelp@gmail.com> Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Wassim Gharbi

commit sha 08875e1a23261aafabefaadce2fd1c990a1ef436

Media: Use different cursor on the image editor indicating panning (#2754)

view details

dependabot-preview[bot]

commit sha ddadf95f9c435847a60b452cc1d22a69ff8a7bfa

Bump @storybook/addon-docs from 6.0.0-beta.36 to 6.0.0-beta.37 (#2836) Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha ad23e99163f0197acb8759086ded44f5190588e6

Bump markdownlint-cli from 0.23.1 to 0.23.2 (#2837) Bumps [markdownlint-cli](https://github.com/igorshubovych/markdownlint-cli) from 0.23.1 to 0.23.2. - [Release notes](https://github.com/igorshubovych/markdownlint-cli/releases) - [Commits](https://github.com/igorshubovych/markdownlint-cli/compare/v0.23.1...v0.23.2) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha dcea05fc6e9676602a87d495f78fd9aab0d0daa2

Bump puppeteer from 4.0.0 to 4.0.1 (#2842) Bumps [puppeteer](https://github.com/puppeteer/puppeteer) from 4.0.0 to 4.0.1. - [Release notes](https://github.com/puppeteer/puppeteer/releases) - [Commits](https://github.com/puppeteer/puppeteer/compare/v4.0.0...v4.0.1) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 4e9f0607ed147c55dc8ae6eb92f85fd74e5687b5

Bump @testing-library/dom from 7.18.1 to 7.19.0 (#2799) Bumps [@testing-library/dom](https://github.com/testing-library/dom-testing-library) from 7.18.1 to 7.19.0. - [Release notes](https://github.com/testing-library/dom-testing-library/releases) - [Changelog](https://github.com/testing-library/dom-testing-library/blob/master/CHANGELOG.md) - [Commits](https://github.com/testing-library/dom-testing-library/compare/v7.18.1...v7.19.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

push time in a day

push eventgoogle/web-stories-wp

Clinton Volzke

commit sha 48b58b5210f3c8b46d328372c70b4d5c68b654c0

Pull out common reducer.js logic to media/common

view details

Clinton Volzke

commit sha f06f691899e742d4e3c8c04278f0cd4a0f3ec7d4

Rename local media 'pagingNum' to 'pageToken' for consistency between media3p and local

view details

Miina Sikk

commit sha ce7063dd8bf9f6208323526f235dd428964307f0

Fix detecting contenteditable.

view details

Miina Sikk

commit sha 94749f50fc014381576b4f4a0077cbc89c5b5cd6

Merge remote-tracking branch 'origin/master' into fix/1953-copy-paste-into-text

view details

Jonny Harris

commit sha 0c30de32746b94c6414ce51080c8c62263d8f029

Add tests for Discovery class (#2850) Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Jonny Harris

commit sha 219c19d5029241453255d86090fb906d60353fe3

Add tests for Story_Post_Type class (#2857) Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Jonny Harris

commit sha b1a4a7bb491c01f9f6473bcaee4afa17216e51f4

Admin class: add tests (#2849) Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Pascal Birchler

commit sha 5b0c79d8a04ec738467e932031afd27820aa6237

Use Percy to take snapshots in E2E tests (#2532)

view details

dependabot-preview[bot]

commit sha 647f642192c4a632c6750f8e16bb7408592c0fde

Bump @storybook/addon-backgrounds from 6.0.0-beta.37 to 6.0.0-beta.38 (#2875)

view details

Miina Sikk

commit sha a9bb362467e1efa4798484b9a68cd9459e46dc29

Fix typo.

view details

Miina

commit sha f1d99869b5422ef449b3f82e9268a3160bf2a000

Merge pull request #2905 from google/fix/label-typo Fix aria-label typo ("Dupliccate" -> "Duplicate")

view details

dependabot-preview[bot]

commit sha 8cbc5d0e2a0f8168403fc207eb51462c4e62fe21

Bump @storybook/client-logger from 6.0.0-beta.37 to 6.0.0-beta.38 (#2896)

view details

dependabot-preview[bot]

commit sha 5bb8c9be0fa0618fed8633a6bb56e8a54d2c863b

Bump source-map-loader from 1.0.0 to 1.0.1 (#2897)

view details

dependabot-preview[bot]

commit sha 1c7c49d8d7366d445224bc8054c9dd58a348fb68

Bump eslint-plugin-react from 7.20.2 to 7.20.3 (#2902)

view details

dependabot-preview[bot]

commit sha d438c243c3c3852e92b135f9a8d7c219b5791617

Bump @storybook/addon-viewport from 6.0.0-beta.36 to 6.0.0-beta.38 (#2901) Bumps [@storybook/addon-viewport](https://github.com/storybookjs/storybook/tree/HEAD/addons/viewport) from 6.0.0-beta.36 to 6.0.0-beta.38. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.38/addons/viewport) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 258f98a68592690fa8e2487cfcf929489c074061

Bump @babel/cli from 7.10.3 to 7.10.4 (#2859) Bumps [@babel/cli](https://github.com/babel/babel/tree/HEAD/packages/babel-cli) from 7.10.3 to 7.10.4. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.10.4/packages/babel-cli) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 6f618c6f68c38f045930f34b5c0c940b822966de

Bump @storybook/addon-docs from 6.0.0-beta.37 to 6.0.0-beta.38 (#2899)

view details

dependabot-preview[bot]

commit sha f2616f26bb3c7ce9b5df5f1c8d4a989cf75c80bd

Bump @storybook/react from 6.0.0-beta.37 to 6.0.0-beta.38 (#2900) Bumps [@storybook/react](https://github.com/storybookjs/storybook/tree/HEAD/app/react) from 6.0.0-beta.37 to 6.0.0-beta.38. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.38/app/react) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

Carlos Kelly

commit sha ae1929d455aefc9dcccd497c5adcc22ba46b3394

Added dark mode for font picker.

view details

Brittany Feenstra

commit sha 5aebf5cf801d7ba5ecca7e18df27f7a824c03e6a

removing unnecessary showOVerflow prop. The box shadow for the popup component no longer requires this.

view details

push time in a day

Pull request review commentgoogle/web-stories-wp

[WIP] Fixing a number of a11y problems with design panel components

 function Switch({ value, disabled, onChange, onLabel, offLabel }) {     },     [onChange]   );+  const ref = useRef();+  useKeyDownEffect(+    ref,+    ['space', 'enter', 'left', 'right'],

Is it expected that if the value is already on the "right" then clicking right will still toggle it? Thoughts?

barklund

comment created time in a day

Pull request review commentgoogle/web-stories-wp

[WIP] Fixing a number of a11y problems with design panel components

 const Collapse = styled.button`   } `; +function Toggle({ children, toggle, ...rest }) {+  // We unfortunately have to manually assign this listener, as it would be default behaviour+  // if it wasn't for our listener further up the stack interpreting enter as "enter edit mode"

I wonder if instead, the "enter edit mode" could be adjusted so that it would be ignored when relevant input is in focus. E.g. in a similar way as isEditableTarget or nativeCopyPasteExpected are working. Thoughts?

barklund

comment created time in a day

pull request commentgoogle/web-stories-wp

[WIP] Fixing a number of a11y problems with design panel components

There are various console errors, it's still WIP, assuming that's expected currently?

A few more notes from testing:

  • The color presets don't seem to be functional for text element currently, getting this error: Screenshot 2020-07-06 at 11 41 55

  • The focus isn't visible when the color preset is white -- is this expected?

barklund

comment created time in a day

Pull request review commentgoogle/web-stories-wp

[WIP] Fixing a number of a11y problems with design panel components

 export default styled.input.attrs(({ min, max, step, value, onChange }) => ({   &::-ms-thumb {     ${rangeThumb}   }++  &:focus {+    &::-webkit-slider-thumb {+      ${focusedRangeThumb}+    }++    &::-moz-range-thumb {+      ${focusedRangeThumb}+    }++    &::-ms-thumb {+      ${focusedRangeThumb}+    }+  } `;++function RangeInput({ minorStep, majorStep, handleChange, value, ...rest }) {

The majorStep is basically the default step, is that correct? The naming feels a bit odd as if there would be no option to do a "normal" step -- it's always either minor or major. WDYT if it would be just step and minorStep? Or perhaps alternatively just leave a comment for clarity that majorStep is the default step?

barklund

comment created time in a day

Pull request review commentgoogle/web-stories-wp

[WIP] Fixing a number of a11y problems with design panel components

 function PresetsHeader({   const hasPresets = colors.length > 0;    const getActions = () => {-    return !isEditMode ? (+    return (

Same question here, was DRY the main reason for combining the two buttons into one, or also accessibility-related?

barklund

comment created time in a day

Pull request review commentgoogle/web-stories-wp

[WIP] Fixing a number of a11y problems with design panel components

 function PresetsHeader({   const hasPresets = colors.length > 0;    const getActions = () => {-    return !isEditMode ? (+    return (       <>         {hasPresets && (-          <EditModeButton+          <Button+            Icon={EditMode}             onClick={(evt) => {               evt.stopPropagation();-              setIsEditMode(true);+              setIsEditMode(!isEditMode);             }}-            aria-label={__('Edit presets', 'web-stories')}+            aria-label={+              isEditMode+                ? __('Exit edit mode', 'web-stories')+                : __('Edit presets', 'web-stories')+            }+            isEditMode={isEditMode}+          >+            {isEditMode ? __('Exit', 'web-stories') : <EditPencil />}+          </Button>+        )}+        {!isEditMode && (+          <Button+            Icon={AddColorPresetButton}+            onClick={handleAddColorPreset}+            aria-label={__('Add preset', 'web-stories')}           >-            <EditPencil />-          </EditModeButton>+            <AddPage />

AddPage? Let's rename to something more accurate?

barklund

comment created time in a day

Pull request review commentgoogle/web-stories-wp

[WIP] Fixing a number of a11y problems with design panel components

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import PropTypes from 'prop-types';+import { useCallback } from 'react';+import styled from 'styled-components';++/**+ * WordPress dependencies+ */+import { __, _x } from '@wordpress/i18n';++/**+ * Internal dependencies+ */+import clamp from '../../../utils/clamp';+import { Label, Row, Numeric, Toggle, usePresubmitHandler } from '../../form';+import { Lock, Unlock } from '../../../icons';+import { useCommonObjectValue } from '../utils';++const DEFAULT_PADDING = { horizontal: 0, vertical: 0, locked: true };++const MIN_MAX = {+  PADDING: {+    MIN: 0,+    MAX: 300,+  },+};++const BoxedNumeric = styled(Numeric)`+  padding: 6px 6px;+  border-radius: 4px;++  ${({ stretch }) => stretch && `flex-basis: auto;`}+`;++const Space = styled.div`+  flex: 0 0 10px;+`;++function PaddingControls({ selectedElements, pushUpdateForObject }) {+  const padding = useCommonObjectValue(+    selectedElements,+    'padding',+    DEFAULT_PADDING+  );++  // Only if true for all selected elements, will the toggle be true+  // (Note that this behavior is different from aspect lock ratio)+  const lockPadding = padding.locked === true;++  const handleChange = useCallback(+    (newPadding, submit = false) => {+      pushUpdateForObject('padding', newPadding, DEFAULT_PADDING, submit);+    },+    [pushUpdateForObject]+  );++  usePresubmitHandler(+    ({ padding: { horizontal, vertical, ...rest } }) => ({+      padding: {+        ...rest,+        horizontal: clamp(horizontal, MIN_MAX.PADDING),+        vertical: clamp(vertical, MIN_MAX.PADDING),+      },+    }),+    []+  );++  const firstInputProperties = lockPadding

Curious, what was the reason for combining the padding files? DRY? Or accessibility reasons, too? It's reducing the readability a bit but perhaps the benefits have more weight.

barklund

comment created time in a day

Pull request review commentgoogle/web-stories-wp

[WIP] Fixing a number of a11y problems with design panel components

 export default styled.input.attrs(({ min, max, step, value, onChange }) => ({   &::-ms-thumb {     ${rangeThumb}   }++  &:focus {+    &::-webkit-slider-thumb {+      ${focusedRangeThumb}+    }++    &::-moz-range-thumb {+      ${focusedRangeThumb}+    }++    &::-ms-thumb {+      ${focusedRangeThumb}+    }+  } `;++function RangeInput({ minorStep, majorStep, handleChange, value, ...rest }) {+  const ref = useRef();+  const update = useCallback(

Is this respecting the min-max values?

barklund

comment created time in a day

Pull request review commentgoogle/web-stories-wp

[WIP] Fixing a number of a11y problems with design panel components

 const Helper = styled.div`  function RadioGroup({ onChange, value: selectedValue, options }) {   const radioGroupId = useMemo(() => uuidv4(), []);++  // We need manual arrow key navigation here, as we have a global listener for those keys+  // preventing default functionality.

Maybe we should instead just remove radio from the NON_EDITABLE_INPUT_TYPES? This would allow the default behavior which would make sense in case of radios. WDYT?

barklund

comment created time in a day

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Inline selection', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {

Nit: here as well "formatting" -> "no formatting"

barklund

comment created time in a day

issue commentgoogle/web-stories-wp

Changing font family can result in "multiple" for font weight

@miina "Multiple" is a bug. To be clear, no input field for a single selected element should ever have a "multiple" value. Multiple only appears when you select multiple elements that share a similar attribute like color, opactiy..etc.

@samitron7 Yes, this is a bug issue, reported to address the problem to ensure that "multiple" wouldn't appear unexpectedly. Will update the "Expected behavior" to mention that "no input field for a single selected element should ever have a "multiple" value".

miina

comment created time in a day

issue commentgoogle/web-stories-wp

Copy Paste Text into Text Box is Creating new Text Box

Hmm, I thought that moving to UAT would reopen the issue automatically, wasn't it so before? Or perhaps it only does this is moving the issue directly to UAT whereas in this case, it happened via the PR. Will know for the next time, sorry!

jauyong

comment created time in 6 days

push eventgoogle/web-stories-wp

Miina Sikk

commit sha ce7063dd8bf9f6208323526f235dd428964307f0

Fix detecting contenteditable.

view details

Miina Sikk

commit sha 94749f50fc014381576b4f4a0077cbc89c5b5cd6

Merge remote-tracking branch 'origin/master' into fix/1953-copy-paste-into-text

view details

Miina

commit sha 31036558a1caef98e0d6ff4efc0d69277d983d0f

Merge pull request #2892 from google/fix/1953-copy-paste-into-text Fix detecting contenteditable for copy-paste

view details

push time in 6 days

delete branch google/web-stories-wp

delete branch : fix/1953-copy-paste-into-text

delete time in 6 days

PR merged google/web-stories-wp

Reviewers
Fix detecting contenteditable for copy-paste Elements: Text Group: Copy/Paste Type: Bug cla: yes

Summary

Fixes the behavior where a new text element is created when pasting into an existing text element.

<!-- A brief description of what this PR does. -->

Relevant Technical Choices

<!-- Please describe your changes. -->

To-do

<!-- A list of things that need to be addressed in this PR or follow-up changes. -->

User-facing changes

Pasting into a text element now pastes the text inside it instead of creating a new element <!-- Please describe your changes. -->

Testing Instructions

I

  1. Add a Text element and go to edit mode.
  2. Select part of the text, copy it.
  3. Now paste the copied text into the same text element in edit mode.
  4. Verify that the text was pasted as expected into the text element.

II

  1. Copy some sentence from a text editor (or from anywhere else)
  2. Add a text element and go to edit mode.
  3. Paste the text into the element.
  4. Verify that the text was pasted inside the text element and new element was not created.

III

  1. Copy some sentence from a text editor (or from anywhere else)
  2. Select the Page
  3. Paste
  4. Verify that a new text element with the copied text was created.

IV

  1. Add a text element
  2. Copy the element without going into edit mode
  3. Now paste it
  4. Verify that a new duplicate element was created.

V

  1. Add a text element
  2. Copy the element without going into edit mode
  3. Add a new text element and go to edit mode
  4. Paste
  5. Verify that the content of the first text element was pasted into the new element edit mode instead of creating a new element (markup does not have to prevail).

<!-- How can the changes in this PR be verified? Relevant for QA and user acceptance testing. -->


<!-- Please reference the issue(s) this PR addresses. -->

Fixes #1953

+9 -2

2 comments

2 changed files

miina

pr closed time in 6 days

issue closedgoogle/web-stories-wp

Copy Paste Text into Text Box is Creating new Text Box

Bug Description

If you copy from and paste to the same text element, a new text element is created with the copied text.

Similarly If you copy text from text box 1 and paste it into text box 2, a new text element is created with the copied text.

Related: #1605

Expected Behaviour

text should be pasted, not text box

Steps to Reproduce

  1. have text in your clipboard

  2. paste into a text box while in edit mode

  3. have two text boxes

  4. copy a word from one text box

  5. enter edit mode of the other text box and paste that word

  6. see new text box created

Screenshots

https://docs.google.com/presentation/d/1ZiZWrmLiX40rt3n_1LMSGJxYWI-xsWFsS9bkzdbRIV8/edit?ts=5ec3ef17#slide=id.g7830109f71_0_67

Additional Context

<!-- Please complete the following information. -->

  • Plugin Version:
  • Operating System:
  • Browser:

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

<!-- One or more bullet points for acceptance criteria. -->

Implementation Brief

<!-- One or more bullet points for how to technically implement the feature. -->

closed time in 6 days

jauyong

issue commentgoogle/web-stories-wp

Page Attachments - linked content

SGTM!

jauyong

comment created time in 6 days

pull request commentgoogle/web-stories-wp

[WIP] Fixing a number of a11y problems with design panel components

@barklund The document panel seems to be crashing on this PR.

Also, assuming the fixes should go for the Document panel as well? Based on the issues it seems so, however, the PR mentions only "design panel components". Thoughts?

barklund

comment created time in 6 days

PR merged google/web-stories-wp

Fix aria-label typo ("Dupliccate" -> "Duplicate") cla: yes

Summary

Changes "Dupliccate" to "Duplicate" <!-- A brief description of what this PR does. -->

Relevant Technical Choices

<!-- Please describe your changes. -->

To-do

<!-- A list of things that need to be addressed in this PR or follow-up changes. -->

User-facing changes

N/A <!-- Please describe your changes. -->

Testing Instructions

N/A <!-- How can the changes in this PR be verified? Relevant for QA and user acceptance testing. -->


<!-- Please reference the issue(s) this PR addresses. -->

Fixes #

+1 -1

2 comments

1 changed file

miina

pr closed time in 6 days

delete branch google/web-stories-wp

delete branch : fix/label-typo

delete time in 6 days

push eventgoogle/web-stories-wp

Miina Sikk

commit sha a9bb362467e1efa4798484b9a68cd9459e46dc29

Fix typo.

view details

Miina

commit sha f1d99869b5422ef449b3f82e9268a3160bf2a000

Merge pull request #2905 from google/fix/label-typo Fix aria-label typo ("Dupliccate" -> "Duplicate")

view details

push time in 6 days

issue commentgoogle/web-stories-wp

Enable the new Font Picker

@barklund or @miina - do one of you want to own adding Karma tests and documentation to the font update since it's in the editor?

Sure, once the relevant issues have been merged 👍

carlos-kelly

comment created time in 6 days

push eventgoogle/web-stories-wp

dependabot-preview[bot]

commit sha bfe42c584c1e10db822cff19367d0c945ecb67a7

Bump @storybook/client-api from 6.0.0-beta.37 to 6.0.0-beta.38 (#2874)

view details

dependabot-preview[bot]

commit sha 83b885d6711e3f7833109898949c3bacf6a9ff50

Bump eslint-plugin-react-hooks from 4.0.4 to 4.0.5 (#2852)

view details

dependabot-preview[bot]

commit sha 0b85e76c5333feac1ce25ab5ef29897308665844

Bump @storybook/addon-actions from 6.0.0-beta.37 to 6.0.0-beta.38 (#2876) Bumps [@storybook/addon-actions](https://github.com/storybookjs/storybook/tree/HEAD/addons/actions) from 6.0.0-beta.37 to 6.0.0-beta.38. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.38/addons/actions) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

Wassim Gharbi

commit sha 4471a28409ef75115768095004c8c67e0943fc92

Add 'Enter' key as a trigger to enter edit mode (#2753)

view details

Pascal Birchler

commit sha c3eebd6e5d27d912814befaa64c8cf7027afce18

Update patch for eslint-plugin-react-hooks

view details

Marcin Pietruszka

commit sha 61def8934602d7f59f6a367e21d5d98f1d03df1d

Style Presets: fix color swatch styling on Firefox (#2865) Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Dima Voytenko

commit sha e1ccd09ae0a2274302ca283566812c26362faab0

Karma: use a single webpack bundle for all tests (#2887) Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Miina Sikk

commit sha ded969f7cb8b93998f81183bb78cec0ebd7b8846

Merge remote-tracking branch 'origin/master' into fix/1955-used-fonts

view details

push time in 6 days

Pull request review commentgoogle/web-stories-wp

Text edit mode + Moveable resizing/rotation

 function PageMenu() {           <WithTooltip title={__('Duplicate page', 'web-stories')}>             <Icon               onClick={handleDuplicatePage}-              aria-label={__('Dupliccate Page', 'web-stories')}+              aria-label={__('Duplicate Page', 'web-stories')}

Added: https://github.com/google/web-stories-wp/pull/2905

miina

comment created time in 6 days

PR opened google/web-stories-wp

Reviewers
Fix aria-label typo ("Dupliccate" -> "Duplicate")

Summary

Changes "Dupliccate" to "Duplicate" <!-- A brief description of what this PR does. -->

Relevant Technical Choices

<!-- Please describe your changes. -->

To-do

<!-- A list of things that need to be addressed in this PR or follow-up changes. -->

User-facing changes

N/A <!-- Please describe your changes. -->

Testing Instructions

N/A <!-- How can the changes in this PR be verified? Relevant for QA and user acceptance testing. -->


<!-- Please reference the issue(s) this PR addresses. -->

Fixes #

+1 -1

0 comment

1 changed file

pr created time in 6 days

create barnchgoogle/web-stories-wp

branch : fix/label-typo

created branch time in 6 days

PR opened google/web-stories-wp

Reviewers
Remove redundant showOverflow from Popup usages.

Summary

Removes using showOverflow in Popups -- it was removed in #2306 but accidentally left in for some Popup usages.

<!-- A brief description of what this PR does. -->

Relevant Technical Choices

<!-- Please describe your changes. -->

To-do

<!-- A list of things that need to be addressed in this PR or follow-up changes. -->

User-facing changes

N/A <!-- Please describe your changes. -->

Testing Instructions

N/A <!-- How can the changes in this PR be verified? Relevant for QA and user acceptance testing. -->


<!-- Please reference the issue(s) this PR addresses. -->

Fixes #

+0 -2

0 comment

2 changed files

pr created time in 6 days

create barnchgoogle/web-stories-wp

branch : fix/remove-redundant-attribute

created branch time in 6 days

push eventgoogle/web-stories-wp

dependabot-preview[bot]

commit sha bfe42c584c1e10db822cff19367d0c945ecb67a7

Bump @storybook/client-api from 6.0.0-beta.37 to 6.0.0-beta.38 (#2874)

view details

dependabot-preview[bot]

commit sha 83b885d6711e3f7833109898949c3bacf6a9ff50

Bump eslint-plugin-react-hooks from 4.0.4 to 4.0.5 (#2852)

view details

dependabot-preview[bot]

commit sha 0b85e76c5333feac1ce25ab5ef29897308665844

Bump @storybook/addon-actions from 6.0.0-beta.37 to 6.0.0-beta.38 (#2876) Bumps [@storybook/addon-actions](https://github.com/storybookjs/storybook/tree/HEAD/addons/actions) from 6.0.0-beta.37 to 6.0.0-beta.38. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.38/addons/actions) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

Wassim Gharbi

commit sha 4471a28409ef75115768095004c8c67e0943fc92

Add 'Enter' key as a trigger to enter edit mode (#2753)

view details

Pascal Birchler

commit sha c3eebd6e5d27d912814befaa64c8cf7027afce18

Update patch for eslint-plugin-react-hooks

view details

Marcin Pietruszka

commit sha 61def8934602d7f59f6a367e21d5d98f1d03df1d

Style Presets: fix color swatch styling on Firefox (#2865) Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Dima Voytenko

commit sha e1ccd09ae0a2274302ca283566812c26362faab0

Karma: use a single webpack bundle for all tests (#2887) Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Miina Sikk

commit sha 94749f50fc014381576b4f4a0077cbc89c5b5cd6

Merge remote-tracking branch 'origin/master' into fix/1953-copy-paste-into-text

view details

push time in 6 days

issue closedgoogle/web-stories-wp

Lasso not selecting all the elements seen in the lasso box

Bug Description

Lasso selection doesn't always seem to include all the elements to the selection as expected, some element, specifically near the upper edge are left out. <!-- Please describe clearly and concisely what the bug is. -->

Expected Behaviour

Lasso selection should include all the elements that stay visually in the lasso selection area. <!-- Please describe clearly and concisely what the expected behaviour should be. -->

Steps to Reproduce

  1. Add a few elements
  2. Select the elements with lasso selection so that the elements near the upper edge of the lasso box would be quite close to the edge.
  3. See the elements being left out of selection. <!-- Please provide detailed steps on how to reproduce the bug. -->

Screenshots

lasso

<!-- If applicable, please add screenshots to help explain your problem. Bonus points for videos! -->


Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

QA Instructions

closed time in 6 days

miina

issue commentgoogle/web-stories-wp

Lasso not selecting all the elements seen in the lasso box

Started looking into this but I'm actually not able to reproduce it anymore -- suspecting it got fixed at the same time as #1787

There is still an issue with lasso + rotated elements, however, there's a separate issue for that: https://github.com/google/web-stories-wp/issues/1481

Closing this issue as fixed.

cc @bmattb

miina

comment created time in 6 days

PR opened google/web-stories-wp

Fix detecting contenteditable for copy-paste

Summary

Fixes the behavior where a new text element is created when pasting into an existing text element.

<!-- A brief description of what this PR does. -->

Relevant Technical Choices

<!-- Please describe your changes. -->

To-do

<!-- A list of things that need to be addressed in this PR or follow-up changes. -->

User-facing changes

Pasting into a text element now pastes the text inside it instead of creating a new element <!-- Please describe your changes. -->

Testing Instructions

I

  1. Add a Text element and go to edit mode.
  2. Select part of the text, copy it.
  3. Now paste the copied text into the same text element in edit mode.
  4. Verify that the text was pasted as expected into the text element.

II

  1. Copy some sentence from a text editor (or from anywhere else)
  2. Add a text element and go to edit mode.
  3. Paste the text into the element.
  4. Verify that the text was pasted inside the text element and new element was not created.

Verify that pasting into the Page still creates a new element: III

  1. Copy some sentence from a text editor (or from anywhere else)
  2. Select the Page
  3. Paste
  4. Verify that a new text element with the copied text was created.

IV

  1. Add a text element
  2. Copy the element without going into edit mode
  3. Now paste it
  4. Verify that a new duplicate element was created.

<!-- How can the changes in this PR be verified? Relevant for QA and user acceptance testing. -->


<!-- Please reference the issue(s) this PR addresses. -->

Fixes #1953

+9 -2

0 comment

2 changed files

pr created time in 6 days

create barnchgoogle/web-stories-wp

branch : fix/1953-copy-paste-into-text

created branch time in 6 days

push eventgoogle/web-stories-wp

Diego Varese

commit sha d8146da406fe1cef2f16a6b61467c18db28a23ec

Remove fetch.js and use window.fetch instead

view details

Clinton Volzke

commit sha e2ab1072d462242f7eb16adede694e98d59da874

Remove useMediaReducer folder and move reducer to media/local/reducer.js.

view details

Clinton Volzke

commit sha 2c258edd459e8f6dbe07b05921cbe4463c07fdaa

Create media3p reducer folder structure

view details

dependabot-preview[bot]

commit sha 92a7f739fbace3027ae7de6da3a00f65b86f1edb

Bump uuid from 8.1.0 to 8.2.0 (#2697) Bumps [uuid](https://github.com/uuidjs/uuid) from 8.1.0 to 8.2.0. - [Release notes](https://github.com/uuidjs/uuid/releases) - [Changelog](https://github.com/uuidjs/uuid/blob/master/CHANGELOG.md) - [Commits](https://github.com/uuidjs/uuid/compare/v8.1.0...v8.2.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 5175d66d344c048303ba826e28fc7e2a71f0f024

Bump @storybook/addon-viewport from 6.0.0-beta.34 to 6.0.0-beta.36 (#2720) Bumps [@storybook/addon-viewport](https://github.com/storybookjs/storybook/tree/HEAD/addons/viewport) from 6.0.0-beta.34 to 6.0.0-beta.36. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.36/addons/viewport) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

Diego Varese

commit sha 9d7391b600acff65955ee658ab3247019231669d

remove extra mockImplementation.

view details

dependabot-preview[bot]

commit sha 4d2677eff014f27117d05e75624f00040b9a8a03

Bump @storybook/addon-backgrounds from 6.0.0-beta.33 to 6.0.0-beta.36 (#2723) Bumps [@storybook/addon-backgrounds](https://github.com/storybookjs/storybook/tree/HEAD/addons/backgrounds) from 6.0.0-beta.33 to 6.0.0-beta.36. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.36/addons/backgrounds) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha bc5c3e093bc66aad57f97eed12eb3b36b797c54d

Bump @storybook/addon-a11y from 6.0.0-beta.34 to 6.0.0-beta.36 (#2726)

view details

dependabot-preview[bot]

commit sha 086c5978508ac624cf612c0a603fa175e55ed544

Bump @storybook/addon-knobs from 6.0.0-beta.31 to 6.0.0-beta.36 (#2721)

view details

dependabot-preview[bot]

commit sha 081122c789c48e7e80de9e119943510f87f380b1

Bump @storybook/client-api from 6.0.0-beta.33 to 6.0.0-beta.36 (#2719)

view details

dependabot-preview[bot]

commit sha fd2a4cb010caddb6aa3f12e53661d4d8c22761e1

Bump @storybook/addon-storysource from 6.0.0-beta.33 to 6.0.0-beta.36 (#2727)

view details

dependabot-preview[bot]

commit sha 4d1c7634ea1cd075685b09563cc0764d22ec263e

Bump @testing-library/react from 10.4.2 to 10.4.3 (#2729)

view details

Pascal Birchler

commit sha ec47deba7f301142422b3b62ccaa027b26f800ea

Small UI refinements (#2620)

view details

dependabot-preview[bot]

commit sha bc5b422691bf3d89a56e98a78d5312bfb5092392

Bump @wordpress/dependency-extraction-webpack-plugin from 2.7.0 to 2.8.0 (#2741) Bumps [@wordpress/dependency-extraction-webpack-plugin](https://github.com/WordPress/gutenberg/tree/HEAD/packages/dependency-extraction-webpack-plugin) from 2.7.0 to 2.8.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/packages/dependency-extraction-webpack-plugin/CHANGELOG.md) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/dependency-extraction-webpack-plugin@2.8.0/packages/dependency-extraction-webpack-plugin) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha ceb5979bc5d0c2f7fdded4f9768760af46e04a97

Bump @wordpress/components from 9.8.0 to 9.9.0 (#2736) Bumps [@wordpress/components](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components) from 9.8.0 to 9.9.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/changelog.txt) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/components@9.9.0/packages/components) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 7f6f3939d05ab4f8119855d7870338d2fd776e6c

Bump @wordpress/element from 2.14.0 to 2.15.0 (#2737) Bumps [@wordpress/element](https://github.com/WordPress/gutenberg/tree/HEAD/packages/element) from 2.14.0 to 2.15.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/packages/element/CHANGELOG.md) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/element@2.15.0/packages/element) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha bb4e5f38a59fcae48ed1024a6b2a340698e60615

Bump @wordpress/api-fetch from 3.17.0 to 3.18.0 (#2738) Bumps [@wordpress/api-fetch](https://github.com/WordPress/gutenberg/tree/HEAD/packages/api-fetch) from 3.17.0 to 3.18.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/changelog.txt) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/api-fetch@3.18.0/packages/api-fetch) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha fbb40f98b9cd900686b925a116326ef2e6c36c43

Bump @storybook/addon-docs from 6.0.0-beta.34 to 6.0.0-beta.36 (#2743) Bumps [@storybook/addon-docs](https://github.com/storybookjs/storybook/tree/HEAD/addons/docs) from 6.0.0-beta.34 to 6.0.0-beta.36. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.36/addons/docs) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 568da58e3089d019e929a0434ec310ce6b5eabc0

Bump @storybook/client-logger from 6.0.0-beta.34 to 6.0.0-beta.36 (#2735)

view details

dependabot-preview[bot]

commit sha a61f693c3da3b4da1c17537e2058418afa4d99ed

Bump @testing-library/dom from 7.17.0 to 7.18.0 (#2739) Bumps [@testing-library/dom](https://github.com/testing-library/dom-testing-library) from 7.17.0 to 7.18.0. - [Release notes](https://github.com/testing-library/dom-testing-library/releases) - [Changelog](https://github.com/testing-library/dom-testing-library/blob/master/CHANGELOG.md) - [Commits](https://github.com/testing-library/dom-testing-library/compare/v7.17.0...v7.18.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

push time in 6 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in multiple text fields', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      selectBothTextFields,+      selectTextField,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add text box + extra+      await addInitialText(true);+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should both have the correct initial text and formatting', () => {+      // Get content of first textfield+      expect(getTextContent(0)).toBe('Fill in some text');+      // Get content of second textfield+      expect(getTextContent(1)).toBe('Number #2');+    });++    it('should apply formatting correctly for identically styled text fields', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Select both text fields+      await selectBothTextFields();++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle all styles+      await data.fixture.events.click(italic.button);

I know it's not an inline style, however, it's related -- e.g. to font weights. If you think it's not related to how the font weights are overwritten in case of different font families, then let's ignore.

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in a single text field', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    it('should apply formatting correctly for single-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle italic and underline+      await data.fixture.events.click(italic.button);+      await data.fixture.events.click(underline.button);++      // Set font weight (should also toggle bold, as "Black" is >700)+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));++      // Set letter spacing+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Set color using hex input+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      expect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('50%');+      expect(fontColor.hex.value).toBe('FF00FF');++      // Assume text content to match expectation+      const actual = getTextContent();+      const css = [+        'font-weight: 900',+        'font-style: italic',+        'text-decoration: underline',+        'color: #f0f',+        'letter-spacing: 0.5em',+      ].join('; ');+      const expected = `<span style="${css}">Fill in some text</span>`;+      expect(actual).toBe(expected);+    });++    it('should apply formatting correctly for multi-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // First enter edit mode, select something, style it with all styles and exit edit mode+      await data.fixture.events.keyboard.press('Enter');+      await setSelection(5, 7);+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      await data.fixture.events.keyboard.press('Escape');+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');

Okay, it's just that it's possible to change the opacity for the selected part only directly from the opacity input, leaving the rest of the text as is with the same color. It seemed to be worthwhile testing here as well.

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in a single text field', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    it('should apply formatting correctly for single-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle italic and underline+      await data.fixture.events.click(italic.button);+      await data.fixture.events.click(underline.button);++      // Set font weight (should also toggle bold, as "Black" is >700)+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));++      // Set letter spacing+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Set color using hex input+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      expect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('50%');+      expect(fontColor.hex.value).toBe('FF00FF');++      // Assume text content to match expectation+      const actual = getTextContent();+      const css = [+        'font-weight: 900',+        'font-style: italic',+        'text-decoration: underline',+        'color: #f0f',+        'letter-spacing: 0.5em',+      ].join('; ');+      const expected = `<span style="${css}">Fill in some text</span>`;+      expect(actual).toBe(expected);+    });++    it('should apply formatting correctly for multi-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // First enter edit mode, select something, style it with all styles and exit edit mode+      await data.fixture.events.keyboard.press('Enter');+      await setSelection(5, 7);+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });

Would this change with #2085 then (since it should select all with the first click in the inputs)?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in a single text field', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    it('should apply formatting correctly for single-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');

Should this also test the line-height since it seems to be testing general text style changes and not only inline style?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in multiple text fields', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      selectBothTextFields,

Would this helpers make more sense as general helpers? E.g. addTextFields([{'text1'},{'text2']]) and selectTextFields() or selectTextFields(2) or sth like that? Or are these helpers usable for these tests only? Perhaps it's fine in this context though, just feels a bit unusual by name.

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in multiple text fields', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      selectBothTextFields,+      selectTextField,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add text box + extra+      await addInitialText(true);+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should both have the correct initial text and formatting', () => {+      // Get content of first textfield+      expect(getTextContent(0)).toBe('Fill in some text');+      // Get content of second textfield+      expect(getTextContent(1)).toBe('Number #2');+    });++    it('should apply formatting correctly for identically styled text fields', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Select both text fields+      await selectBothTextFields();++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle all styles+      await data.fixture.events.click(italic.button);+      await data.fixture.events.click(underline.button);+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      await data.fixture.events.keyboard.press('Escape');+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      await data.fixture.events.keyboard.press('Escape');++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      expect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('50%');+      expect(fontColor.hex.value).toBe('FF00FF');++      // Assume text contents to match expectation+      const css = [+        'font-weight: 900',+        'font-style: italic',+        'text-decoration: underline',+        'color: #f0f',+        'letter-spacing: 0.5em',+      ].join('; ');+      const getExpected = (content) => `<span style="${css}">${content}</span>`;+      expect(getTextContent(0)).toBe(getExpected('Fill in some text'));+      expect(getTextContent(1)).toBe(getExpected('Number #2'));+    });++    it('should apply formatting correctly for multi-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Edit formatting for second text field+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      await data.fixture.events.keyboard.press('Escape');+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      await data.fixture.events.keyboard.press('Escape');+      await data.fixture.events.click(italic.button);+      await data.fixture.events.click(underline.button);+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));

Again, it would be nice to test if the font families differ between the two text elements. Maybe the line heights as well? Not sure if it's tested somewhere else?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in multiple text fields', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      selectBothTextFields,+      selectTextField,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add text box + extra+      await addInitialText(true);+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should both have the correct initial text and formatting', () => {+      // Get content of first textfield+      expect(getTextContent(0)).toBe('Fill in some text');+      // Get content of second textfield+      expect(getTextContent(1)).toBe('Number #2');+    });++    it('should apply formatting correctly for identically styled text fields', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Select both text fields+      await selectBothTextFields();++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle all styles+      await data.fixture.events.click(italic.button);+      await data.fixture.events.click(underline.button);+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      await data.fixture.events.keyboard.press('Escape');+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      await data.fixture.events.keyboard.press('Escape');++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      expect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('50%');+      expect(fontColor.hex.value).toBe('FF00FF');++      // Assume text contents to match expectation+      const css = [+        'font-weight: 900',+        'font-style: italic',+        'text-decoration: underline',+        'color: #f0f',+        'letter-spacing: 0.5em',+      ].join('; ');+      const getExpected = (content) => `<span style="${css}">${content}</span>`;+      expect(getTextContent(0)).toBe(getExpected('Fill in some text'));+      expect(getTextContent(1)).toBe(getExpected('Number #2'));+    });++    it('should apply formatting correctly for multi-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Edit formatting for second text field

The second since the text element added as the second is automatically selected?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Inline style override', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    describe('when cursor is placed after second character', () => {+      beforeEach(async () => {+        // Enter edit-mode+        await data.fixture.events.keyboard.press('Enter');

Maybe move entering to edit mode to beforeEach upper since that seems to be used in every test, below as well? Below it's done per test. Not a huge difference though.

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Inline style override', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    describe('when cursor is placed after second character', () => {+      beforeEach(async () => {+        // Enter edit-mode+        await data.fixture.events.keyboard.press('Enter');++        // Place cursor at start and them move to after second character+        await setSelection(2, 2);+      });++      it('should have correct formatting when pressing mod+b for bold, then inserting text', async () => {+        // Verify that bold is untoggled in design panel+        const { bold } = data.fixture.editor.inspector.designPanel.textStyle;+        expect(bold.checked).toBe(false);++        // Toggle bold by keyboard command+        await data.fixture.events.keyboard.shortcut('mod+b');++        // Verify that bold is now toggled on+        expect(bold.checked).toBe(true);++        // Type "foo"+        await data.fixture.events.keyboard.type('foo');++        // Exit edit-mode+        await data.fixture.events.keyboard.press('Escape');++        // Expect correct result+        const actual = getTextContent();+        const expected =+          'Fi<span style="font-weight: 700">foo</span>ll in some text';+        expect(actual).toBe(expected);+      });++      it('should have correct formatting when pressing bold toggle, then inserting text', async () => {+        // Verify that bold is untoggled in design panel+        const { bold } = data.fixture.editor.inspector.designPanel.textStyle;+        expect(bold.checked).toBe(false);++        // Toggle bold by button+        await data.fixture.events.click(bold.button);++        // Verify that bold is now toggled on+        expect(bold.checked).toBe(true);++        // Type "foo"+        await data.fixture.events.keyboard.type('foo');++        // Exit edit-mode+        await data.fixture.events.keyboard.press('Escape');++        // Expect correct result+        const actual = getTextContent();+        const expected =+          'Fi<span style="font-weight: 700">foo</span>ll in some text';+        expect(actual).toBe(expected);+      });++      it('should have correct formatting when pressing underline toggle, then mod+i, then inserting text', async () => {+        // Verify that italic and underline are untoggled in design panel+        const {+          italic,+          underline,+        } = data.fixture.editor.inspector.designPanel.textStyle;+        expect(italic.checked).toBe(false);+        expect(underline.checked).toBe(false);++        // Toggle underline by click, then italic by shortcut+        await data.fixture.events.click(underline.button);+        await data.fixture.events.keyboard.shortcut('mod+i');++        // Verify that italic and underline are now toggled on+        expect(italic.checked).toBe(true);+        expect(underline.checked).toBe(true);++        // Type "foo"+        await data.fixture.events.keyboard.type('foo');++        // Exit edit-mode+        await data.fixture.events.keyboard.press('Escape');++        // Expect correct result+        const actual = getTextContent();+        const expected =+          'Fi<span style="font-style: italic; text-decoration: underline">foo</span>ll in some text';+        expect(actual).toBe(expected);+      });++      // Disable reason: This doesn't work due to bug #1606:+      // https://github.com/google/web-stories-wp/issues/1606+      // eslint-disable-next-line jasmine/no-disabled-tests+      xit('should have correct formatting when pressing mod+i, then underline toggle, then inserting text', async () => {+        // Verify that italic and underline are untoggled in design panel+        const {+          italic,+          underline,+        } = data.fixture.editor.inspector.designPanel.textStyle;+        expect(italic.checked).toBe(false);+        expect(underline.checked).toBe(false);++        // Toggle italic by shortcut and then underline by click+        await data.fixture.events.keyboard.shortcut('mod+i');+        await data.fixture.events.click(underline.button);++        // Verify that italic and underline are now toggled on+        expect(italic.checked).toBe(true);+        expect(underline.checked).toBe(true);++        // Type "foo"+        await data.fixture.events.keyboard.type('foo');++        // Exit edit-mode+        await data.fixture.events.keyboard.press('Escape');++        // Expect correct result+        const actual = getTextContent();+        const expected =+          'Fi<span style="font-style: italic; text-decoration: underline">foo</span>ll in some text';+        expect(actual).toBe(expected);+      });++      it('should have correct formatting when selecting font weight, then inserting text', async () => {+        // Verify that bold is untoggled in design panel+        const {+          fontWeight,+        } = data.fixture.editor.inspector.designPanel.textStyle;+        expect(fontWeight.value).toBe('Regular');++        // Open dropdown and select "Black"+        await data.fixture.events.click(fontWeight.select);+        await data.fixture.events.click(fontWeight.option('Black'));++        // Wait for focus to return to text+        await richTextHasFocus();++        // Verify that bold is now toggled on+        expect(fontWeight.value).toBe('Black');++        // Type "foo"+        await data.fixture.events.keyboard.type('foo');++        // Exit edit-mode+        await data.fixture.events.keyboard.press('Escape');++        // Expect correct result+        const actual = getTextContent();+        const expected =+          'Fi<span style="font-weight: 900">foo</span>ll in some text';+        expect(actual).toBe(expected);+      });+    });++    it('should have correct formatting when already italic, then inline removing italic and adding bold, then inserting text', async () => {+      // Enter edit-mode+      await data.fixture.events.keyboard.press('Enter');++      // Toggle italic for entire selection+      await data.fixture.events.keyboard.shortcut('mod+i');++      // Place cursor at start and then move to after second character+      await setSelection(2, 2);++      const {+        italic,+        bold,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Verify that italic is toggled, bold is not+      expect(italic.checked).toBe(true);+      expect(bold.checked).toBe(false);++      // (Un)toggle italic by button and then toggle bold by shortcut+      // (also here the reverse would not work due to #1606 mentioned above)+      await data.fixture.events.click(italic.button);+      await data.fixture.events.keyboard.shortcut('mod+b');++      // Verify that toggles are reversed+      expect(italic.checked).toBe(false);+      expect(bold.checked).toBe(true);++      // Type "foo"+      await data.fixture.events.keyboard.type('foo');++      // Exit edit-mode+      await data.fixture.events.keyboard.press('Escape');++      // Expect correct result+      const actual = getTextContent();+      const expected =+        '<span style="font-style: italic">Fi</span><span style="font-weight: 700">foo</span><span style="font-style: italic">ll in some text</span>';+      expect(actual).toBe(expected);+    });++    it('should keep formatting when all text is replaced', async () => {+      // Enter edit-mode+      await data.fixture.events.keyboard.press('Enter');++      // Make it all bold while selected+      await data.fixture.events.keyboard.shortcut('mod+b');++      // Replace text while entire text is selected+      await data.fixture.events.keyboard.type('A new text');++      // Exit edit-mode+      await data.fixture.events.keyboard.press('Escape');++      const actual = getTextContent();+      const expected = '<span style="font-weight: 700">A new text</span>';+      expect(actual).toBe(expected);+    });++    it('should keep formatting when all text is removed, then replaced', async () => {+      // Enter edit-mode+      await data.fixture.events.keyboard.press('Enter');++      // Make it all bold while selected+      await data.fixture.events.keyboard.shortcut('mod+b');++      // Delete existing text by pressing backspace, then add new text+      await data.fixture.events.keyboard.shortcut('Backspace');+      await data.fixture.events.keyboard.type('Even more text');++      // Exit edit-mode+      await data.fixture.events.keyboard.press('Escape');++      const actual = getTextContent();+      const expected = '<span style="font-weight: 700">Even more text</span>';+      expect(actual).toBe(expected);

Maybe also add a test for when some part of the text has one font-weight, and then this part of the text is removed and then new text added to the same place.

E.g. With formatting: "Fill in new text", selection is on "in" -> Backspace -> type "Something". -- to verify the "Something" should have bold but no italic?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in multiple text fields', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      selectBothTextFields,+      selectTextField,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add text box + extra+      await addInitialText(true);+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should both have the correct initial text and formatting', () => {+      // Get content of first textfield+      expect(getTextContent(0)).toBe('Fill in some text');+      // Get content of second textfield+      expect(getTextContent(1)).toBe('Number #2');+    });++    it('should apply formatting correctly for identically styled text fields', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Select both text fields+      await selectBothTextFields();++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle all styles+      await data.fixture.events.click(italic.button);

Would be nice to use a different font family somewhere as well.

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Inline selection', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    it('should apply inline formats correctly for both single style and multiple styles', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Enter edit-mode+      await data.fixture.events.keyboard.press('Enter');++      // Select character 5 and 6 (the word "in" in "Fill in some text")+      await setSelection(5, 7);++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle italic and underline - wait for autofocus to return+      await data.fixture.events.click(italic.button);+      await richTextHasFocus();+      await data.fixture.events.click(underline.button);+      await richTextHasFocus();++      // Set font weight (should also toggle bold, as "Black" is >700)+      // - wait for autofocus to return+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));+      await richTextHasFocus();++      // Set letter spacing+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Set color using hex input+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');+      // */++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      expect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('50%');+      expect(fontColor.hex.value).toBe('FF00FF');++      // Move selection to characters 6-9 (partially overlapping new styles and no styles)+      await setSelection(6, 9);++      // Verify that the toggles are off (as to be expected with mixed styles)+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);++      // Expect font weight, letter spacing and font color to be "multiple"+      expect(fontWeight.value).toBe('(multiple)');+      expect(letterSpacing.value).toBe('');+      expect(letterSpacing.placeholder).toBe('multiple');+      expect(fontColor.output).toBe('Multiple');++      // Now toggle all toggles, and set new color and letter spacing+      await data.fixture.events.click(italic.button);+      await richTextHasFocus();+      await data.fixture.events.click(underline.button);+      await richTextHasFocus();+      await data.fixture.events.click(bold.button);+      await richTextHasFocus();++      // We have to open the color picker, as there's no direct hex input when "multiple"+      await data.fixture.events.click(fontColor.button);+      waitFor(() => fontColor.picker);+      await data.fixture.events.click(fontColor.picker.hexButton);+      await data.fixture.events.keyboard.type('00FF00');++      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('100');+      await data.fixture.events.keyboard.press('Escape');++      // Verify all styles again+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      // Note that entire selection is made black, because some part was black, when bold was pressedexpect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('100%');+      expect(fontColor.hex.value).toBe('00FF00');++      // Exit edit-mode+      await data.fixture.events.keyboard.press('Escape');++      // Assume text content to match expectation+      const actual = getTextContent();+      const firstCSS = [+        'font-weight: 900',+        'font-style: italic',+        'text-decoration: underline',+        'color: #f0f',+        'letter-spacing: 0.5em',+      ].join('; ');+      const secondCSS = [+        'font-weight: 900',+        'font-style: italic',+        'text-decoration: underline',+        'color: #0f0',+        'letter-spacing: 1em',+      ].join('; ');+      const expected = `Fill <span style="${firstCSS}">i</span><span style="${secondCSS}">n</span><span style="${secondCSS}"> s</span>ome text`;+      expect(actual).toBe(expected);+    });++    it('should apply inline formats using shortcuts', async () => {+      const {+        bold,+        italic,+        underline,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Enter edit-mode+      await data.fixture.events.keyboard.press('Enter');++      // Select character 5 and 6 (the word "in" in "Fill in some text")+      await setSelection(5, 7);++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);++      // Toggle italic, underline and bold using shortcut+      await data.fixture.events.keyboard.shortcut('mod+u');+      await data.fixture.events.keyboard.shortcut('mod+i');+      await data.fixture.events.keyboard.shortcut('mod+b');++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);++      // Exit edit-mode+      await data.fixture.events.keyboard.press('Escape');++      // Assume text content to match expectation+      const actual = getTextContent();+      const firstCSS = [+        'font-weight: 700',+        'font-style: italic',+        'text-decoration: underline',+      ].join('; ');+      const expected = `Fill <span style="${firstCSS}">in</span> some text`;+      expect(actual).toBe(expected);+    });++    describe('when there is a mix of font weights', () => {+      beforeEach(async () => {+        const {+          fontWeight,+        } = data.fixture.editor.inspector.designPanel.textStyle;++        // Enter edit-mode+        await data.fixture.editor.canvas.waitFocusedWithin();+        await data.fixture.events.keyboard.press('Enter');++        const selectFontWeight = async (weight) => {+          await data.fixture.events.click(fontWeight.select);+          await data.fixture.events.click(fontWeight.option(weight));+          await richTextHasFocus();+        };++        // Select first character and make it black (900)+        await setSelection(0, 1);+        await selectFontWeight('Black');++        // Select second character and make it bold (700)+        await setSelection(1, 2);+        await selectFontWeight('Bold');+      });++      it('should make black+bold selection non-bold when toggling', async () => {+        const {+          bold,+          fontWeight,+        } = data.fixture.editor.inspector.designPanel.textStyle;++        // Select first two characters (900 and 700)+        await setSelection(0, 2);++        // Check that bold toggle is on but font weight is "multiple"+        expect(bold.checked).toBe(true);+        expect(fontWeight.value).toBe('(multiple)');++        // Toggle it by pressing the bold button+        await data.fixture.events.click(bold.button);++        // Verify bold is now off and font weight is Regular+        expect(bold.checked).toBe(false);+        expect(fontWeight.value).toBe('Regular');++        // Exit edit-mode+        await data.fixture.events.keyboard.press('Escape');++        // Assume text content to now be formatting-free+        const actual = getTextContent();+        const expected = `Fill in some text`;+        expect(actual).toBe(expected);+      });++      it('should make bold+regular selection bold when toggling', async () => {+        const {+          bold,+          fontWeight,+        } = data.fixture.editor.inspector.designPanel.textStyle;++        // Select second and third characters (700 and 400)+        await setSelection(1, 3);++        // Check that bold toggle is off but font weight is "multiple"+        expect(bold.checked).toBe(false);+        expect(fontWeight.value).toBe('(multiple)');++        // Toggle it by pressing the bold button+        await data.fixture.events.click(bold.button);++        // Verify bold is now on and font weight is Bold+        expect(bold.checked).toBe(true);+        expect(fontWeight.value).toBe('Bold');++        // Exit edit-mode+        await data.fixture.events.keyboard.press('Escape');++        // Assume text content to be correctly formatted+        const actual = getTextContent();+        const expected = `<span style="font-weight: 900">F</span><span style="font-weight: 700">il</span>l in some text`;+        expect(actual).toBe(expected);+      });++      it('should make black+bold+regular selection black when toggling', async () => {+        const {+          bold,+          fontWeight,+        } = data.fixture.editor.inspector.designPanel.textStyle;++        // Select first three characters (900, 700 and 400)+        await setSelection(0, 3);++        // Check that bold toggle is off but font weight is "multiple"+        expect(bold.checked).toBe(false);+        expect(fontWeight.value).toBe('(multiple)');++        // Toggle it by pressing the bold button+        await data.fixture.events.click(bold.button);++        // Verify bold is now on and font weight is Black+        expect(bold.checked).toBe(true);+        expect(fontWeight.value).toBe('Black');++        // Exit edit-mode+        await data.fixture.events.keyboard.press('Escape');++        // Assume text content to be correctly formatted+        const actual = getTextContent();+        const expected = `<span style="font-weight: 900">Fil</span>l in some text`;+        expect(actual).toBe(expected);+      });+    });++    it('should apply global formats (here line height) even when a selection is present', async () => {+      // Expect line height to be default "Roboto"+      const getDisplayTextStyles = () => {+        const displayNode = data.fixture.editor.canvas.displayLayer.display(+          data.textId+        ).node;+        const paragraph = displayNode.querySelector('p');+        return window.getComputedStyle(paragraph);+      };+      const initialLineHeight = parseFloat(getDisplayTextStyles().lineHeight);++      const {+        lineHeight,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Enter edit-mode+      await data.fixture.events.keyboard.press('Enter');++      // Select something+      await setSelection(5, 7);++      // Change line height to 5+      await data.fixture.events.click(lineHeight, { clickCount: 3 });+      await data.fixture.events.keyboard.type('5');+      await data.fixture.events.keyboard.press('Escape');++      // Exit edit-mode+      await data.fixture.events.keyboard.press('Escape');++      // Expect text content to be unchanged+      expect(getTextContent()).toBe('Fill in some text');++      // Expect line height to have changed+      expect(getDisplayTextStyles().lineHeight).not.toBe(initialLineHeight);

Any reason for not checking the specific chosen line-height value?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in a single text field', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');

Or does the "correct formatting" = "no formatting"?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Inline selection', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    it('should apply inline formats correctly for both single style and multiple styles', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Enter edit-mode+      await data.fixture.events.keyboard.press('Enter');++      // Select character 5 and 6 (the word "in" in "Fill in some text")+      await setSelection(5, 7);++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle italic and underline - wait for autofocus to return+      await data.fixture.events.click(italic.button);+      await richTextHasFocus();+      await data.fixture.events.click(underline.button);+      await richTextHasFocus();++      // Set font weight (should also toggle bold, as "Black" is >700)+      // - wait for autofocus to return+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));+      await richTextHasFocus();++      // Set letter spacing+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Set color using hex input+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');+      // */++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      expect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('50%');+      expect(fontColor.hex.value).toBe('FF00FF');++      // Move selection to characters 6-9 (partially overlapping new styles and no styles)+      await setSelection(6, 9);++      // Verify that the toggles are off (as to be expected with mixed styles)+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);++      // Expect font weight, letter spacing and font color to be "multiple"+      expect(fontWeight.value).toBe('(multiple)');

Although there seem to be 3 different values in these 4 lines of code, as I can see now 🤔

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Inline selection', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    it('should apply inline formats correctly for both single style and multiple styles', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Enter edit-mode+      await data.fixture.events.keyboard.press('Enter');++      // Select character 5 and 6 (the word "in" in "Fill in some text")+      await setSelection(5, 7);++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle italic and underline - wait for autofocus to return+      await data.fixture.events.click(italic.button);+      await richTextHasFocus();+      await data.fixture.events.click(underline.button);+      await richTextHasFocus();++      // Set font weight (should also toggle bold, as "Black" is >700)+      // - wait for autofocus to return+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));+      await richTextHasFocus();++      // Set letter spacing+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Set color using hex input+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');+      // */++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      expect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('50%');+      expect(fontColor.hex.value).toBe('FF00FF');++      // Move selection to characters 6-9 (partially overlapping new styles and no styles)+      await setSelection(6, 9);++      // Verify that the toggles are off (as to be expected with mixed styles)+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);++      // Expect font weight, letter spacing and font color to be "multiple"+      expect(fontWeight.value).toBe('(multiple)');+      expect(letterSpacing.value).toBe('');+      expect(letterSpacing.placeholder).toBe('multiple');+      expect(fontColor.output).toBe('Multiple');++      // Now toggle all toggles, and set new color and letter spacing+      await data.fixture.events.click(italic.button);+      await richTextHasFocus();+      await data.fixture.events.click(underline.button);+      await richTextHasFocus();+      await data.fixture.events.click(bold.button);+      await richTextHasFocus();++      // We have to open the color picker, as there's no direct hex input when "multiple"+      await data.fixture.events.click(fontColor.button);+      waitFor(() => fontColor.picker);+      await data.fixture.events.click(fontColor.picker.hexButton);+      await data.fixture.events.keyboard.type('00FF00');++      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('100');+      await data.fixture.events.keyboard.press('Escape');++      // Verify all styles again+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      // Note that entire selection is made black, because some part was black, when bold was pressedexpect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('100%');+      expect(fontColor.hex.value).toBe('00FF00');++      // Exit edit-mode+      await data.fixture.events.keyboard.press('Escape');++      // Assume text content to match expectation+      const actual = getTextContent();+      const firstCSS = [+        'font-weight: 900',+        'font-style: italic',+        'text-decoration: underline',+        'color: #f0f',+        'letter-spacing: 0.5em',+      ].join('; ');+      const secondCSS = [+        'font-weight: 900',+        'font-style: italic',+        'text-decoration: underline',+        'color: #0f0',+        'letter-spacing: 1em',+      ].join('; ');+      const expected = `Fill <span style="${firstCSS}">i</span><span style="${secondCSS}">n</span><span style="${secondCSS}"> s</span>ome text`;+      expect(actual).toBe(expected);+    });++    it('should apply inline formats using shortcuts', async () => {+      const {+        bold,+        italic,+        underline,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Enter edit-mode+      await data.fixture.events.keyboard.press('Enter');++      // Select character 5 and 6 (the word "in" in "Fill in some text")+      await setSelection(5, 7);++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);++      // Toggle italic, underline and bold using shortcut+      await data.fixture.events.keyboard.shortcut('mod+u');+      await data.fixture.events.keyboard.shortcut('mod+i');+      await data.fixture.events.keyboard.shortcut('mod+b');++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);++      // Exit edit-mode+      await data.fixture.events.keyboard.press('Escape');++      // Assume text content to match expectation+      const actual = getTextContent();+      const firstCSS = [+        'font-weight: 700',+        'font-style: italic',+        'text-decoration: underline',+      ].join('; ');+      const expected = `Fill <span style="${firstCSS}">in</span> some text`;+      expect(actual).toBe(expected);+    });++    describe('when there is a mix of font weights', () => {+      beforeEach(async () => {+        const {+          fontWeight,+        } = data.fixture.editor.inspector.designPanel.textStyle;++        // Enter edit-mode+        await data.fixture.editor.canvas.waitFocusedWithin();+        await data.fixture.events.keyboard.press('Enter');++        const selectFontWeight = async (weight) => {+          await data.fixture.events.click(fontWeight.select);+          await data.fixture.events.click(fontWeight.option(weight));+          await richTextHasFocus();+        };++        // Select first character and make it black (900)+        await setSelection(0, 1);+        await selectFontWeight('Black');++        // Select second character and make it bold (700)+        await setSelection(1, 2);+        await selectFontWeight('Bold');+      });++      it('should make black+bold selection non-bold when toggling', async () => {+        const {+          bold,+          fontWeight,+        } = data.fixture.editor.inspector.designPanel.textStyle;++        // Select first two characters (900 and 700)+        await setSelection(0, 2);++        // Check that bold toggle is on but font weight is "multiple"+        expect(bold.checked).toBe(true);+        expect(fontWeight.value).toBe('(multiple)');++        // Toggle it by pressing the bold button+        await data.fixture.events.click(bold.button);++        // Verify bold is now off and font weight is Regular+        expect(bold.checked).toBe(false);+        expect(fontWeight.value).toBe('Regular');++        // Exit edit-mode+        await data.fixture.events.keyboard.press('Escape');++        // Assume text content to now be formatting-free+        const actual = getTextContent();+        const expected = `Fill in some text`;+        expect(actual).toBe(expected);+      });++      it('should make bold+regular selection bold when toggling', async () => {+        const {+          bold,+          fontWeight,+        } = data.fixture.editor.inspector.designPanel.textStyle;++        // Select second and third characters (700 and 400)+        await setSelection(1, 3);++        // Check that bold toggle is off but font weight is "multiple"+        expect(bold.checked).toBe(false);+        expect(fontWeight.value).toBe('(multiple)');++        // Toggle it by pressing the bold button+        await data.fixture.events.click(bold.button);++        // Verify bold is now on and font weight is Bold+        expect(bold.checked).toBe(true);+        expect(fontWeight.value).toBe('Bold');++        // Exit edit-mode+        await data.fixture.events.keyboard.press('Escape');++        // Assume text content to be correctly formatted+        const actual = getTextContent();+        const expected = `<span style="font-weight: 900">F</span><span style="font-weight: 700">il</span>l in some text`;+        expect(actual).toBe(expected);+      });++      it('should make black+bold+regular selection black when toggling', async () => {+        const {+          bold,+          fontWeight,+        } = data.fixture.editor.inspector.designPanel.textStyle;++        // Select first three characters (900, 700 and 400)+        await setSelection(0, 3);++        // Check that bold toggle is off but font weight is "multiple"+        expect(bold.checked).toBe(false);+        expect(fontWeight.value).toBe('(multiple)');++        // Toggle it by pressing the bold button+        await data.fixture.events.click(bold.button);++        // Verify bold is now on and font weight is Black+        expect(bold.checked).toBe(true);+        expect(fontWeight.value).toBe('Black');++        // Exit edit-mode+        await data.fixture.events.keyboard.press('Escape');++        // Assume text content to be correctly formatted+        const actual = getTextContent();+        const expected = `<span style="font-weight: 900">Fil</span>l in some text`;+        expect(actual).toBe(expected);+      });+    });++    it('should apply global formats (here line height) even when a selection is present', async () => {+      // Expect line height to be default "Roboto"

Not sure I understand this comment -- is this correct?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Inline selection', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    it('should apply inline formats correctly for both single style and multiple styles', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Enter edit-mode+      await data.fixture.events.keyboard.press('Enter');++      // Select character 5 and 6 (the word "in" in "Fill in some text")+      await setSelection(5, 7);++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle italic and underline - wait for autofocus to return+      await data.fixture.events.click(italic.button);+      await richTextHasFocus();+      await data.fixture.events.click(underline.button);+      await richTextHasFocus();++      // Set font weight (should also toggle bold, as "Black" is >700)+      // - wait for autofocus to return+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));+      await richTextHasFocus();++      // Set letter spacing+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Set color using hex input+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');+      // */++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      expect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('50%');+      expect(fontColor.hex.value).toBe('FF00FF');++      // Move selection to characters 6-9 (partially overlapping new styles and no styles)+      await setSelection(6, 9);++      // Verify that the toggles are off (as to be expected with mixed styles)+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);++      // Expect font weight, letter spacing and font color to be "multiple"+      expect(fontWeight.value).toBe('(multiple)');

Might be nice to create a constant for the multiple value since it will change in #2088.

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in a single text field', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    it('should apply formatting correctly for single-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle italic and underline+      await data.fixture.events.click(italic.button);+      await data.fixture.events.click(underline.button);++      // Set font weight (should also toggle bold, as "Black" is >700)+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));++      // Set letter spacing+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Set color using hex input+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      expect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('50%');+      expect(fontColor.hex.value).toBe('FF00FF');++      // Assume text content to match expectation+      const actual = getTextContent();+      const css = [+        'font-weight: 900',+        'font-style: italic',+        'text-decoration: underline',+        'color: #f0f',+        'letter-spacing: 0.5em',+      ].join('; ');+      const expected = `<span style="${css}">Fill in some text</span>`;+      expect(actual).toBe(expected);+    });++    it('should apply formatting correctly for multi-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // First enter edit mode, select something, style it with all styles and exit edit mode+      await data.fixture.events.keyboard.press('Enter');+      await setSelection(5, 7);+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });

Ah, I suppose it's for selecting the existing text in the input since currently it's not automatically doing it on the first click everywhere?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in a single text field', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    it('should apply formatting correctly for single-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle italic and underline+      await data.fixture.events.click(italic.button);+      await data.fixture.events.click(underline.button);++      // Set font weight (should also toggle bold, as "Black" is >700)+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));++      // Set letter spacing+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Set color using hex input+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      expect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('50%');+      expect(fontColor.hex.value).toBe('FF00FF');++      // Assume text content to match expectation+      const actual = getTextContent();+      const css = [+        'font-weight: 900',+        'font-style: italic',+        'text-decoration: underline',+        'color: #f0f',+        'letter-spacing: 0.5em',+      ].join('; ');+      const expected = `<span style="${css}">Fill in some text</span>`;+      expect(actual).toBe(expected);+    });++    it('should apply formatting correctly for multi-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // First enter edit mode, select something, style it with all styles and exit edit mode+      await data.fixture.events.keyboard.press('Enter');+      await setSelection(5, 7);+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      await data.fixture.events.keyboard.press('Escape');+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');

Perhaps add opacity as well?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in a single text field', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    it('should apply formatting correctly for single-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle italic and underline+      await data.fixture.events.click(italic.button);+      await data.fixture.events.click(underline.button);++      // Set font weight (should also toggle bold, as "Black" is >700)+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));++      // Set letter spacing+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Set color using hex input+      await data.fixture.events.click(fontColor.hex, { clickCount: 3 });+      await data.fixture.events.keyboard.type('FF00FF');+      // Press escape to leave input field (does not leave edit-mode)+      await data.fixture.events.keyboard.press('Escape');++      // Verify all styles, now expected to be updated+      expect(bold.checked).toBe(true);+      expect(italic.checked).toBe(true);+      expect(underline.checked).toBe(true);+      expect(fontWeight.value).toBe('Black');+      expect(letterSpacing.value).toBe('50%');+      expect(fontColor.hex.value).toBe('FF00FF');++      // Assume text content to match expectation+      const actual = getTextContent();+      const css = [+        'font-weight: 900',+        'font-style: italic',+        'text-decoration: underline',+        'color: #f0f',+        'letter-spacing: 0.5em',+      ].join('; ');+      const expected = `<span style="${css}">Fill in some text</span>`;+      expect(actual).toBe(expected);+    });++    it('should apply formatting correctly for multi-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // First enter edit mode, select something, style it with all styles and exit edit mode+      await data.fixture.events.keyboard.press('Enter');+      await setSelection(5, 7);+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });

Why 3, the click count?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in a single text field', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');+    });++    it('should apply formatting correctly for single-style text field', async () => {+      const {+        bold,+        italic,+        underline,+        fontWeight,+        letterSpacing,+        fontColor,+      } = data.fixture.editor.inspector.designPanel.textStyle;++      // Check all styles are default+      expect(bold.checked).toBe(false);+      expect(italic.checked).toBe(false);+      expect(underline.checked).toBe(false);+      expect(fontWeight.value).toBe('Regular');+      expect(letterSpacing.value).toBe('0%');+      expect(fontColor.hex.value).toBe('000000');++      // Toggle italic and underline+      await data.fixture.events.click(italic.button);+      await data.fixture.events.click(underline.button);++      // Set font weight (should also toggle bold, as "Black" is >700)+      await data.fixture.events.click(fontWeight.select);+      await data.fixture.events.click(fontWeight.option('Black'));++      // Set letter spacing+      await data.fixture.events.click(letterSpacing, { clickCount: 3 });+      await data.fixture.events.keyboard.type('50');+      // Press escape to leave input field (does not leave edit-mode)

Hmm, I'm probably missing something but where does it enter the edit-mode? Is it in the edit mode here at all? Or is it automatically entering the edit mode with addInitialText?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { waitFor } from '@testing-library/react';++/**+ * Internal dependencies+ */+import { Fixture } from '../../../karma';+import { initHelpers } from './_utils';++describe('CUJ: Editor Can Style Text', () => {+  describe('Action: Styling text in a single text field', () => {+    const data = {};++    const {+      getTextContent,+      addInitialText,+      setSelection,+      richTextHasFocus,+    } = initHelpers(data);++    beforeEach(async () => {+      data.fixture = new Fixture();+      await data.fixture.render();++      // Add a text box+      await addInitialText();+    });++    afterEach(() => {+      data.fixture.restore();+    });++    it('should have the correct initial text and formatting', () => {+      expect(getTextContent()).toBe('Fill in some text');

'should have the correct initial text and formatting' => looks like this is only checking for the correct initial text. Should it check for the default formatting as well? Or remove the and formatting?

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * Internal dependencies+ */+import { Toggle, Select, Color } from '../common';+import { AbstractPanel } from './abstractPanel';++/**+ * The text style panel containing inputs, toggles, dropdowns and other form elements+ * to view and manipulate the style of one or more currently selected text elements.+ */+export class TextStyle extends AbstractPanel {+  constructor(node, path) {+    super(node, path);+  }++  get bold() {+    return this._get(+      this.getByRole('checkbox', { name: /Toggle: bold/ }),+      'bold',+      Toggle+    );+  }++  get italic() {+    return this._get(+      this.getByRole('checkbox', { name: /Toggle: italic/ }),+      'italic',+      Toggle+    );+  }++  get underline() {+    return this._get(+      this.getByRole('checkbox', { name: /Toggle: underline/ }),+      'underline',+      Toggle+    );+  }++  get fontWeight() {+    return this._get(+      this.getByRole('button', { name: /Font weight/ }),+      'fontWeight',+      Select+    );+  }++  get letterSpacing() {+    return this.getByRole('textbox', { name: /Letter-spacing/ });+  }++  get lineHeight() {+    return this.getByRole('textbox', { name: /Line-height/ });+  }++  get fontColor() {+    return this._get(+      this.getByRole('region', { name: /Color input: Text/ }),+      'fontColor',+      Color+    );+  }++  get fontFamily() {+    return this._get(+      this.getByRole('button', { name: /Font family/ }),

Q: Will the logic implemented in this PR be valid for the new font picker as well once it gets merged? If not, might be good to leave a note/reference to #2418 once this gets merged.

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Text edit mode + Moveable resizing/rotation

 function SingleSelectionMovable({ selectedElement, targetEl, pushEvent }) {         if (isResizingFromCorner !== newResizingMode) {           setIsResizingFromCorner(newResizingMode);         }+        if (isEditMode) {+          setActionHappening(true);

Using isAnythingTransforming now.

miina

comment created time in 7 days

push eventgoogle/web-stories-wp

Miina Sikk

commit sha 5f568617919a997f87cb3cc2227db63a074c2881

Use combined refs.

view details

push time in 7 days

push eventgoogle/web-stories-wp

Mariano Martinez III

commit sha cfa40a921257cb68cdb9c64a6837174a24db52e4

Dashboard: Applied design updates to Entertainment template

view details

Mariano Martinez III

commit sha da49f8bddc1639533e85d7961f5ed4caacd5c018

Fixed text animation

view details

Mariano Martinez III

commit sha 6b403b507c340693f7a8724efee22a9d64092689

Fixed some typos

view details

Mariano Martinez III

commit sha eab8e65698e5be310cf305a445966ce6198991ea

Fixed style issues

view details

Mariano Martinez III

commit sha 3a569badce0d40483c004be6ec4381fede75238b

Fixed images

view details

Mariano Martinez III

commit sha fd8d7263df34bfe637973a084ce4af67ccef51ac

Dashboard: Applied design updates to Cooking template

view details

Mariano Martinez III

commit sha da775a28fecaafe01319209ca7d94f430a17a2ae

Fixed alignment issues

view details

Mariano Martinez III

commit sha 3cf58e0db24c07fc32d1f08a0e2bbe2c45703aaa

Updated versions

view details

Clinton Volzke

commit sha 0bddd5e1cf9d98027f70dbe1043941b1f47f6cc8

Add useLocalMedia() hook that returns useMedia().local

view details

Clinton Volzke

commit sha ba8205346cdde384b3cdbcbbb9ae7fbb16fa4e9d

Merge branch 'master' into task/2610-add-useLocalMedia

view details

Clinton Volzke

commit sha 53e9e76d174bba7f84b3ba7e9c5ac283369f6bd4

Remove excess 'External Dependencies' comment (#2806)

view details

Jonny Harris

commit sha cfa51ffbb03a85dd5bd7ce627d886fa6684ac6cc

Update icon for stories (#2744) Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Pascal Birchler

commit sha f62d1c21f1282ac3056b56113058996ed0ba9092

Update copy-cdn-files command

view details

github-actions[bot]

commit sha 86a07f8c3d9fce38d4b94423edef36c2973d58aa

Update list of Google Fonts (#2807) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

view details

Pascal Birchler

commit sha 780b5cf84b869ed3492bcc925aff824a56eeab64

1.0.0-alpha.10

view details

Pascal Birchler

commit sha 2f5ede782f66bbc68311e7f7e344ca5252ef9737

Post-1.0.0-alpha.10

view details

Miina Sikk

commit sha 3c990d2dda7c240cd749c8a4634317fd1a3e4955

Use isAnythingTransforming.

view details

Mariano Martinez III

commit sha 0db3206f973d416c89677be569f2e3b3191015d9

Merge pull request #2603 from google/task/apply-916-entertainment Dashboard: Applied design updates to Entertainment template

view details

Mariano Martinez III

commit sha 363c9bd95f43638a426eab5a689b7c0950e04e54

Merge pull request #2684 from google/task/apply-916-cooking Dashboard: Applied design updates to Cooking template

view details

Brittany Feenstra

commit sha fbd6d8f644283311e6a43e62e78b88cb4f7b9599

update stories per request to 24 per page to reduce load time. Separate constants for per page request counts for users and stories. We need all the users to get proper display for stories, we do not need all the stories. 24 should be a happy medium for users with huge monitors and the average laptop or tablet user.

view details

push time in 7 days

push eventgoogle/web-stories-wp

Miina Sikk

commit sha f88db05816fa60dbd6db8eea97352adba950fb2f

Improve default value handling.

view details

push time in 7 days

push eventgoogle/web-stories-wp

Miina Sikk

commit sha 7371e5e449644d1df181b9b4ce387612be73fed9

Adjust comment.

view details

push time in 7 days

push eventgoogle/web-stories-wp

Miina Sikk

commit sha 41989366609d4600c7f16ff6f3f4790fe496c6b6

Add default suffix.

view details

Miina Sikk

commit sha 40d252a4bba29a6d1cab42ce52b9c1fc3a913874

Improve the default text logic.

view details

push time in 7 days

push eventgoogle/web-stories-wp

Miina Sikk

commit sha be940832e948a50b9bf7f952240af6ed575f42cc

Update to default CTA if removed.

view details

push time in 7 days

PR opened google/web-stories-wp

[WIP] Page Attachment as linked content

Summary

Adds the Page Attachment features as linked content. <!-- A brief description of what this PR does. -->

Relevant Technical Choices

<!-- Please describe your changes. -->

To-do

  • [ ] The whole Guidelines part -- needs confirmation

  • [ ] UX adjustments for the editor

  • [ ] Tests

<!-- A list of things that need to be addressed in this PR or follow-up changes. -->

User-facing changes

There is a new Page Attachment panel which the user can add while Page/background is selected. The moment when the user adds a URL, the Page Attachment gets added. <!-- Please describe your changes. -->

Testing Instructions

I

  1. Open a Page
  2. Add a URL to the Page Attachment
  3. Verify that if you add incorrect URL format, a warning is displayed

II

  1. Open a Page
  2. Add a URL to the Page Attachment
  3. Verify that "Learn more" appears in the bottom of the page
  4. Change the "Learn more" to something else.
  5. Verify that it also changed on the Page.
  6. Verify that removing the CTA Text will restore the default "Learn more"
  7. Verify that the Page Attachment is also displayed in the Front-end and with the correct CTA Text. <!-- How can the changes in this PR be verified? Relevant for QA and user acceptance testing. -->

<!-- Please reference the issue(s) this PR addresses. -->

Fixes #254

+247 -1

0 comment

5 changed files

pr created time in 7 days

create barnchgoogle/web-stories-wp

branch : add/254-page-attachment

created branch time in 7 days

push eventgoogle/web-stories-wp

Miina Sikk

commit sha 919743038e69e38e98771995162dd5ba793abf96

Fix color presets opacity detection.

view details

Miina

commit sha 7ce5524ec23275606e20e3c5278ebbb62eb0653f

Merge pull request #2813 from google/fix/2811-color-presets Color Presets: Fix opacity detection

view details

push time in 7 days

delete branch google/web-stories-wp

delete branch : fix/2811-color-presets

delete time in 7 days

PR merged google/web-stories-wp

Reviewers
Color Presets: Fix opacity detection Type: Bug cla: yes

Summary

Fixes a bug where having opacity 0 is considered not having opacity. <!-- A brief description of what this PR does. -->

Relevant Technical Choices

<!-- Please describe your changes. -->

To-do

<!-- A list of things that need to be addressed in this PR or follow-up changes. -->

User-facing changes

<!-- Please describe your changes. -->

Testing Instructions

  1. Add a color preset from Shape which has gradient where the opacity of one of the stops is 0.
  2. Select the Page
  3. Verify that this color preset can't be used for the background. <!-- How can the changes in this PR be verified? Relevant for QA and user acceptance testing. -->

<!-- Please reference the issue(s) this PR addresses. -->

Fixes #2811

+16 -7

2 comments

2 changed files

miina

pr closed time in 7 days

issue closedgoogle/web-stories-wp

Page presets: Linear gradient should be disabled for a Page

Bug Description

Bug from UAT for #2585

Currently, it is possible to assign some presets with gradient + opacity to Page background. <!-- A clear and concise description of what the bug is. -->

Expected Behaviour

Presets with opacity should not be allowed for Page background. <!-- Please describe clearly and concisely what the expected behaviour should be. -->

Steps to Reproduce

See https://github.com/google/web-stories-wp/issues/2585#issuecomment-651207162 <!-- Please provide detailed steps on how to reproduce the bug. -->

  1. Remove all the color swatches in the saved colors section
  2. Add a shape and apply a gradient to it. Add to color preset
  3. Select the page bg and click on the new color with opacity. You'll see that you can add that color to the page

Screenshots

<!-- If applicable, please add screenshots to help explain your problem. Bonus points for videos! -->

Additional Context

<!-- Please complete the following information. -->

  • Plugin Version:
  • Operating System:
  • Browser:

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

<!-- One or more bullet points for acceptance criteria. -->

Implementation Brief

<!-- One or more bullet points for how to technically implement the feature. -->

closed time in 7 days

miina

Pull request review commentgoogle/web-stories-wp

Workspace: Dark UI for Font Picker

 function FontPicker({ onChange, lightMode = false, placeholder, value }) {         <FontPickerTitle>{value || placeholder}</FontPickerTitle>         <DropDownIcon />       </FontPickerSelect>-      <Popup anchor={ref} isOpen={isOpen} fillWidth={DEFAULT_WIDTH}>+      <Popup+        showOverflow

Looks like these should be removed from everywhere since this attribute was removed in #2306 @wassgha -- assuming the showOverflow usage for Popup can be removed from the code everywhere and was left in accidentally, can you confirm?

carlos-kelly

comment created time in 7 days

issue closedgoogle/web-stories-wp

Allow user to input text to newly added text element

Feature Description

Newly added text element should be in a highlighted state so that the user can immediately start to type. Figma

Related: #830 #1608


Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

  1. After a text element is newly added, it should be in focus so that the creator can start typing

Implementation Brief

<!-- One or more bullet points for how to technically implement the feature. -->

closed time in 7 days

jauyong

issue commentgoogle/web-stories-wp

Allow user to input text to newly added text element

This issue should be resolved, it was done in #1608 as works as expected, closing as such.

cc @barklund @bmattb

jauyong

comment created time in 7 days

issue commentgoogle/web-stories-wp

Removing Background sometimes removes Media Asset

@jauyong Could you confirm it's still an issue? There have been quite a lot of changes to the background meanwhile, it's very likely this was fixed, too.

jauyong

comment created time in 7 days

issue commentgoogle/web-stories-wp

Video Available For Use On Page Before Fully Uploaded

@merapi Did #2730 fix this as well?

csossi

comment created time in 7 days

issue closedgoogle/web-stories-wp

Selection handlers should take precedence over page actions

Bug Description

Follow-up issue for #2042

See comment: https://github.com/google/web-stories-wp/issues/2042#issuecomment-643923137

When an element is rotated outside of the page such that the handles are on top of any of the page actions of the left and right nav buttons, the selection box handles should take precedence. Currently that is not the case: image

Figma flow here

Expected Behaviour

<!-- Please describe clearly and concisely what the expected behaviour should be. -->

The selection box handles should take precedence.

Additional Context

<!-- Please complete the following information. -->

  • Plugin Version:
  • Operating System:
  • Browser:

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

<!-- One or more bullet points for acceptance criteria. -->

Implementation Brief

<!-- One or more bullet points for how to technically implement the feature. -->

closed time in 8 days

o-fernandez

issue commentgoogle/web-stories-wp

Selection handlers should take precedence over page actions

Thanks for the information, created a new issue and closing this: https://github.com/google/web-stories-wp/issues/2814

o-fernandez

comment created time in 8 days

issue openedgoogle/web-stories-wp

Selection handlers should take precedence over page navigation arrows

Bug Description

Currently, when selection handlers are at the same location as the page navigation and the handler is clicked, the navigation action is triggered. <!-- A clear and concise description of what the bug is. -->

Expected Behaviour

Selection handlers should take precedence over page navigation arrows <!-- Please describe clearly and concisely what the expected behaviour should be. -->

Steps to Reproduce

  1. Add an element
  2. Resize it so that its resize handlers are in the same place as the page navigation
  3. Try resizing now
  4. See the page navigating instead <!-- Please provide detailed steps on how to reproduce the bug. -->

Screenshots

<!-- If applicable, please add screenshots to help explain your problem. Bonus points for videos! -->

Additional Context

Follow-up to https://github.com/google/web-stories-wp/issues/2463, see also https://github.com/google/web-stories-wp/issues/2463#issuecomment-651275296 <!-- Please complete the following information. -->

  • Plugin Version:
  • Operating System:
  • Browser:

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

<!-- One or more bullet points for acceptance criteria. -->

Implementation Brief

<!-- One or more bullet points for how to technically implement the feature. -->

created time in 8 days

issue closedgoogle/web-stories-wp

Color Presets: Text, Shape, Page should all share the same color presets

Bug Description

Currently, the Text color presets are separated from the shape and page presets. <!-- A clear and concise description of what the bug is. -->

Expected Behaviour

  • Text, Shape, Page should share the same color presets
  • When a preset includes gradient, it's grayed out and with a tooltip explaining that Text color can't have gradient.
  • Text presets are for the text only, not for the Text background. <!-- Please describe clearly and concisely what the expected behaviour should be. -->

Steps to Reproduce

  1. Add a text element and a shape.
  2. Click on the shape, add a preset.
  3. Now click on the text -- the preset added via shape is not visible. <!-- Please provide detailed steps on how to reproduce the bug. -->

Screenshots

<!-- If applicable, please add screenshots to help explain your problem. Bonus points for videos! -->

Additional Context

<!-- Please complete the following information. -->

  • Plugin Version:
  • Operating System:
  • Browser:

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

<!-- One or more bullet points for acceptance criteria. -->

Implementation Brief

<!-- One or more bullet points for how to technically implement the feature. -->

closed time in 8 days

miina

issue commentgoogle/web-stories-wp

Color Presets: Text, Shape, Page should all share the same color presets

Yes, I should have done it myself after creating a new ticket.

New ticket: #2811

Closing to follow up in the new issue.

miina

comment created time in 8 days

PR opened google/web-stories-wp

Fix color presets opacity detection.

Summary

Fixes a bug where having opacity 0 is considered not having opacity. <!-- A brief description of what this PR does. -->

Relevant Technical Choices

<!-- Please describe your changes. -->

To-do

<!-- A list of things that need to be addressed in this PR or follow-up changes. -->

User-facing changes

<!-- Please describe your changes. -->

Testing Instructions

  1. Add a color preset from Shape which has gradient where the opacity of one of the stops is 0.
  2. Select the Page
  3. Verify that this color preset can't be used for the background. <!-- How can the changes in this PR be verified? Relevant for QA and user acceptance testing. -->

<!-- Please reference the issue(s) this PR addresses. -->

Fixes #2811

+16 -7

0 comment

2 changed files

pr created time in 8 days

create barnchgoogle/web-stories-wp

branch : fix/2811-color-presets

created branch time in 8 days

issue openedgoogle/web-stories-wp

Page presets: Linear gradient should be disabled for a Page

Bug Description

Bug from UAT for #2585

Currently, it is possible to assign some presets with gradient + opacity to Page background. <!-- A clear and concise description of what the bug is. -->

Expected Behaviour

Presets with opacity should not be allowed for Page background. <!-- Please describe clearly and concisely what the expected behaviour should be. -->

Steps to Reproduce

See https://github.com/google/web-stories-wp/issues/2585#issuecomment-651207162 <!-- Please provide detailed steps on how to reproduce the bug. -->

  1. Remove all the color swatches in the saved colors section
  2. Add a shape and apply a gradient to it. Add to color preset
  3. Select the page bg and click on the new color with opacity. You'll see that you can add that color to the page

Screenshots

<!-- If applicable, please add screenshots to help explain your problem. Bonus points for videos! -->

Additional Context

<!-- Please complete the following information. -->

  • Plugin Version:
  • Operating System:
  • Browser:

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

<!-- One or more bullet points for acceptance criteria. -->

Implementation Brief

<!-- One or more bullet points for how to technically implement the feature. -->

created time in 8 days

issue commentgoogle/web-stories-wp

Text element: Edit mode background not extending with new lines

@samitron7 The removal will be done in #2040, this is still currently relevant but soon won't be anymore. Probably we can close this issue though (since it has been merged for quite some time already anyway but it will change again). Thoughts?

miina

comment created time in 8 days

issue commentgoogle/web-stories-wp

Color Presets: Text, Shape, Page should all share the same color presets

Thank you, can reproduce now, will create a new issue for it for beta.

miina

comment created time in 8 days

push eventgoogle/web-stories-wp

Miina Sikk

commit sha a6127b125c84ee702af18d5d87fa832ea4f74642

useTransform on edit text wrapper to fill it in with background color.

view details

push time in 8 days

PR closed google/web-stories-wp

[TEST] Text edit mode + resizing/rotation cla: yes

Summary

Not ready for review!!! <!-- A brief description of what this PR does. -->

Relevant Technical Choices

<!-- Please describe your changes. -->

To-do

  • [x] Blocking: Confirm if Text edit mode should display visible overflow as the media edit mode, or not

<!-- A list of things that need to be addressed in this PR or follow-up changes. -->

User-facing changes

<!-- Please describe your changes. -->

Testing Instructions

<!-- How can the changes in this PR be verified? Relevant for QA and user acceptance testing. -->


<!-- Please reference the issue(s) this PR addresses. -->

Fixes #

+87 -42

6 comments

5 changed files

miina

pr closed time in 8 days

pull request commentgoogle/web-stories-wp

[TEST] Text edit mode + resizing/rotation

Closing in favor of #2699

miina

comment created time in 8 days

more