-
Notifications You must be signed in to change notification settings -
Fork 4k
New issue
Edit/create shadows in global styles
#60706
Conversation
madhusudhand
commented Apr 12, 2024
•
edited
Loading
edited
What?
![image](https://private-user-images.githubusercontent.com/1935113/327420087-1c9a6a9a-0e13-4f95-860e-87618df72ed3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk1NzYwMTksIm5iZiI6MTcxOTU3NTcxOSwicGF0aCI6Ii8xOTM1MTEzLzMyNzQyMDA4Ny0xYzlhNmE5YS0wZTEzLTRmOTUtODYwZS04NzYxOGRmNzJlZDMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjhUMTE1NTE5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Yzg1ZGNmNWNjZjNlYjI0ZTIwYWVkNmFmMDA4NjRhZWFjN2UxNThlOTExZjQ3ZGZlNjYzZjNiNmY2NGZjZDJlMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.rOV14z07VWSp7rGdTGL6v32fDFrUneV6A79Axzn2Rjo)
![image](https://private-user-images.githubusercontent.com/1935113/327419667-0381da3e-60b4-4758-9f6f-a6e26c7482e6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk1NzYwMTksIm5iZiI6MTcxOTU3NTcxOSwicGF0aCI6Ii8xOTM1MTEzLzMyNzQxOTY2Ny0wMzgxZGEzZS02MGI0LTQ3NTgtOWY2Zi1hNmUyNmM3NDgyZTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjhUMTE1NTE5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YmYxNGU3ZTQ1YjkyZTM4YjkyNzA5ODQwODU4OTJkMThmZDBlMTJjMjlmYTc4Yjg3MTNmM2E2YjMzYjExZjZhNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.B_k0-iEa_iqIZUc0rj0VMaG9CO_mDSH7KVGAng4bmlc)
![image](https://private-user-images.githubusercontent.com/1935113/327419928-c002f1c2-1b39-4188-8fc6-432cd2e9fcee.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk1NzYwMTksIm5iZiI6MTcxOTU3NTcxOSwicGF0aCI6Ii8xOTM1MTEzLzMyNzQxOTkyOC1jMDAyZjFjMi0xYjM5LTQxODgtOGZjNi00MzJjZDJlOWZjZWUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjhUMTE1NTE5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YjAxNWQyZmExM2E5NDYzMDIwZDIxYmUyYWQxMTRkMTlmYTdjMWRjOTc3ZmJlM2YzNmJmZDhiZjFjOTliM2I3YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.aeyT-hZ6ySQ06qw6NlmSQD9HxAfmrSeSqekPwbWfIZc)
Testing instructions
-
Find newly added item shadows in global styles panel -
Click to land on shadows panel, it should show list of core , theme and custom shadows. -
If there are not theme or custom shadows, it should show a placeholder label. -
Select a shadow to land on preview screen
-
In the preview screen, click on Drop shadow to invoke editor, change lengths, color, inset etc.. and preview should update instantly. -
Click + to add new shadow layer. -
click - to remove a shadow layer. (this is available when there are at least 2 layers) -
Save the edits.
Subtasks
-
Show list of default , theme and custom shadows. -
Preview shadow -
Update a shadow (editor panel) -
Add a shadow -
Delete a shadow -
Duplicate a shadow -
Rename a shadow (how about slug??, also handle conflicts) -
add or delete a shadow layer (in second screen)
Related issues:
|
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
8d1ae96
fd8d6e8
|
|
60c40f3
dabd706
|
|
|
|
---|---|
![]() |
![]() |
-
For the color selection ColorPalette core component is used and it comes the the above layout, and differs from the suggested one. x,y position square is not implemented yet in the first iteration. as it requires a new component and needs to be tested for acceptability, it shall be implemented in the next iteration.
Preview
|
|
---|---|
![]() |
![]() |
Shadow options
![image](https://private-user-images.githubusercontent.com/1935113/327434043-39de1ec7-0ede-46ae-824c-5289a32e2ed2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk1NzYwMTksIm5iZiI6MTcxOTU3NTcxOSwicGF0aCI6Ii8xOTM1MTEzLzMyNzQzNDA0My0zOWRlMWVjNy0wZWRlLTQ2YWUtODI0Yy01Mjg5YTMyZTJlZDIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjhUMTE1NTE5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MWE2ZjlkN2YwYjU0NmFjN2I3YmM2Mzg1OWI4NjNmYWM3NThiMzMyMjJiMzhlMmM2NGM4N2I4YzY3ZDgxMWNhYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.ie8rFOSUC8hq3eB9ZCef4pBCMwlyK2tlv-VtiVgM_mY)
Shadow item labeling
![image](https://private-user-images.githubusercontent.com/1935113/327434832-72a72681-b247-4b9a-bad9-8870e37967a9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk1NzYwMTksIm5iZiI6MTcxOTU3NTcxOSwicGF0aCI6Ii8xOTM1MTEzLzMyNzQzNDgzMi03MmE3MjY4MS1iMjQ3LTRiOWEtYmFkOS04ODcwZTM3OTY3YTkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjhUMTE1NTE5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTM4NGJhNWNmODhiM2VlOWUzMDMwZDJmNDExYTQ1YzllODZkMmQ1NjM4N2ZiNGZjMTM2OWU2ZGZkMWE2MzgwNyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.F2FC4oTNK73tmMmqV9auIXvN8uMiT9O5I_v67ViFHss)
Shadows panel copy
![image](https://private-user-images.githubusercontent.com/1935113/327428367-90c4b6c4-b8e5-4062-b14d-cbfaa8824746.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk1NzYwMTksIm5iZiI6MTcxOTU3NTcxOSwicGF0aCI6Ii8xOTM1MTEzLzMyNzQyODM2Ny05MGM0YjZjNC1iOGU1LTQwNjItYjE0ZC1jYmZhYTg4MjQ3NDYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjhUMTE1NTE5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODMxNWMzNTdjNTNhYTc5ZGM3NDdjNzY1MDAyZmYzZTg4Y2Q1N2M4MzAzNDc1YTFiMTcwZDc5ZmFkZWFiYjFhOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.QEP5xdfCm80QK4gbP6psjElAMFipWlSDfXIA3fK6nJU)
|
|
![]() ![]()
|
|
|
|
|
|
|
|
packages/edit-site/src/components/global-styles/shadows-edit-panel.js
Outdated
Show resolved
Hide resolved
|
packages/edit-site/src/components/global-styles/shadows-panel.js
Outdated
Show resolved
Hide resolved
packages/edit-site/src/components/global-styles/shadows-panel.js
Outdated
Show resolved
Hide resolved
Choose a reason for hiding this comment
0cfc4bc
44a72d0
|
* add shadows panel in global styles * add shadows editor view * add color edit popover * refine ui between default and custom shadows * update shadows UI to match new designs * add unit tests * Try different approach to parsing shadow strings * add more unit tests and improve util functions * update shadows edit panel * fix unit conversion issues and other ui improvements * add shadow rename and delete functions * address design feedback * add option to reset default and theme shadows * add custom shadows in block styles * remove local state and use momoize * fix lint issue * move reset option from shadows panel to shadow edit panel * split shadow dropdown button into two buttons * fix item height to 40px * validate invalid shadow strings * update spacing * delete comments --------- Co-authored-by: Aaron Robertshaw <60436221+ aaronrobertshaw@users.noreply.github.com >
* add shadows panel in global styles * add shadows editor view * add color edit popover * refine ui between default and custom shadows * update shadows UI to match new designs * add unit tests * Try different approach to parsing shadow strings * add more unit tests and improve util functions * update shadows edit panel * fix unit conversion issues and other ui improvements * add shadow rename and delete functions * address design feedback * add option to reset default and theme shadows * add custom shadows in block styles * remove local state and use momoize * fix lint issue * move reset option from shadows panel to shadow edit panel * split shadow dropdown button into two buttons * fix item height to 40px * validate invalid shadow strings * update spacing * delete comments --------- Co-authored-by: Aaron Robertshaw <60436221+ aaronrobertshaw@users.noreply.github.com >