Automattic / Automattic/wp-calypso

FSE: Streamline the toggles in the block editor settings

Open
#61,313 0 comments 2 reactions 0 assignees View on GitHub
[Feature] Full Site Editor Feature Request Triaged
Dominant language
TypeScript
Stars
12.6k
Forks
2k
Avg merge
1d 17h
Merged PRs (30d)
552

Description

### What

There should be some consistency in the buttons used to toggle the options in the settings for Blocks.

There are three types of toggles:

![fse_testing_2](https://user-images.githubusercontent.com/84089207/154930112-5eaf79cc-c219-4318-945f-f2bae1bbef7c.jpg)

1. down chevron
2. plus sign
3. three vertical dots

### Why

It is not intuitive. How can a user visually know the reason for three different buttons, and given that this is new and being rolled out to customers that may be new to website building as well, the clearer things can be, the better. They should all symbolise the same thing: 'click for more options'. It is unnecessary to make a distinction if it is also unclear.

### How

All of them should be plus signs. I've edited the previous screenshot to the way that I suggest it should work instead.

![fse_testing_2-edited](https://user-images.githubusercontent.com/84089207/154932269-9cead2fc-2979-407c-9776-2bccf60c7cc5.jpg)
.

Contributor guide

Open the contributing guide

Research direction

Start by locating the block editor settings and inspecting the three toggle styles shown in the issue screenshots: down chevron, plus sign, and vertical dots. The work is done when each of these options uses a plus sign consistently; the issue does not name files or tests, so finding the relevant settings components is the first step.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.