From e386e8599460630c56ddea982bf780b3971065bc Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 30 Jan 2024 10:59:59 -0500 Subject: [PATCH 01/15] Styles --- .../styles/focal-point-picker-style.ts | 35 +++++++++++++------ .../styles/focal-point-style.ts | 21 +++++++---- 2 files changed, 38 insertions(+), 18 deletions(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index 3df6d1bc6eafb..c4b98428636cd 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -9,7 +9,7 @@ import styled from '@emotion/styled'; */ import { Flex } from '../../flex'; import UnitControl from '../../unit-control'; -import { COLORS } from '../../utils'; +import { COLORS, CONFIG } from '../../utils'; import type { FocalPointPickerControlsProps } from '../types'; import { INITIAL_BOUNDS } from '../utils'; @@ -21,16 +21,28 @@ export const MediaWrapper = styled.div` export const MediaContainer = styled.div` align-items: center; - box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 ); + border-radius: ${ CONFIG.radiusBlockUi }; cursor: pointer; - display: inline-flex; + display: flex; justify-content: center; margin: auto; position: relative; height: 100%; + &:after { + bottom: 0; + box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); + content: ''; + left: 0px; + position: absolute; + position: absolute; + right: 0px; + top: 0px; + } + img, video { + border-radius: ${ CONFIG.radiusBlockUi }; box-sizing: border-box; display: block; height: auto; @@ -45,6 +57,7 @@ export const MediaContainer = styled.div` export const MediaPlaceholder = styled.div` background: ${ COLORS.gray[ 100 ] }; + border-radius: ${ CONFIG.radiusBlockUi }; box-sizing: border-box; height: ${ INITIAL_BOUNDS.height }px; max-width: 280px; @@ -91,7 +104,7 @@ export const GridView = styled.div` position: absolute; top: 50%; transform: translate3d( -50%, -50%, 0 ); - transition: opacity 120ms linear; + transition: opacity 100ms linear; z-index: 1; opacity: ${ ( { showOverlay }: { showOverlay?: boolean } ) => @@ -99,21 +112,21 @@ export const GridView = styled.div` `; export const GridLine = styled.div` - background: white; - box-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 ); + background: rgba( 255, 255, 255, 0.4 ); + backdrop-filter: blur( 16px ) saturate( 200% ); position: absolute; - opacity: 0.4; + opacity: 1; transform: translateZ( 0 ); `; export const GridLineX = styled( GridLine )` height: 1px; - left: 0; - right: 0; + left: 1px; + right: 1px; `; export const GridLineY = styled( GridLine )` width: 1px; - top: 0; - bottom: 0; + top: 1px; + bottom: 1px; `; diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-style.ts index 201924ec6f6c6..54a53ace7fd77 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-style.ts @@ -6,18 +6,25 @@ import styled from '@emotion/styled'; export const PointerCircle = styled.div` background-color: transparent; cursor: grab; - height: 48px; - margin: -24px 0 0 -24px; + height: 40px; + margin: -20px 0 0 -20px; position: absolute; user-select: none; - width: 48px; + width: 40px; will-change: transform; z-index: 10000; - background: rgba( 255, 255, 255, 0.6 ); + background: rgba( 255, 255, 255, 0.3 ); + border: 1px solid rgba( 255, 255, 255, 0.3 ); border-radius: 50%; - backdrop-filter: blur( 4px ); - box-shadow: rgb( 0 0 0 / 20% ) 0px 0px 10px; + backdrop-filter: blur( 16px ) saturate( 180% ); + box-shadow: rgb( 0 0 0 / 8% ) 0px 0px 8px; + transition: transform 100ms linear; ${ ( { isDragging }: { isDragging: boolean } ) => - isDragging && 'cursor: grabbing;' } + isDragging && + ` + box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 10px; + transform: scale( 1.1 ); + cursor: grabbing; + ` } `; From 71c11f552bf7de9ed7889a55587e664c4cd8ddb7 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 30 Jan 2024 11:03:49 -0500 Subject: [PATCH 02/15] Update focal-point-picker-style.ts --- .../src/focal-point-picker/styles/focal-point-picker-style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index c4b98428636cd..38127a085cdd0 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -30,7 +30,7 @@ export const MediaContainer = styled.div` height: 100%; &:after { - bottom: 0; + bottom: 0px; box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); content: ''; left: 0px; From c8058201f95af4bb7fb7c0d792811604755df823 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 30 Jan 2024 11:44:12 -0500 Subject: [PATCH 03/15] Update focal-point-style.ts --- .../src/focal-point-picker/styles/focal-point-style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-style.ts index 54a53ace7fd77..d603bfe7bb58b 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-style.ts @@ -13,7 +13,7 @@ export const PointerCircle = styled.div` width: 40px; will-change: transform; z-index: 10000; - background: rgba( 255, 255, 255, 0.3 ); + background: rgba( 255, 255, 255, 0.4 ); border: 1px solid rgba( 255, 255, 255, 0.3 ); border-radius: 50%; backdrop-filter: blur( 16px ) saturate( 180% ); From e4ee0d84e5375a9b95f7901de08643d8342c384c Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 5 Feb 2024 10:35:06 -0500 Subject: [PATCH 04/15] add reduceMotion --- .../src/focal-point-picker/styles/focal-point-style.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-style.ts index d603bfe7bb58b..94c7859a07933 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-style.ts @@ -3,6 +3,11 @@ */ import styled from '@emotion/styled'; +/** + * Internal dependencies + */ +import { reduceMotion } from '../../utils'; + export const PointerCircle = styled.div` background-color: transparent; cursor: grab; @@ -19,6 +24,7 @@ export const PointerCircle = styled.div` backdrop-filter: blur( 16px ) saturate( 180% ); box-shadow: rgb( 0 0 0 / 8% ) 0px 0px 8px; transition: transform 100ms linear; + ${ reduceMotion( 'transition' ) } ${ ( { isDragging }: { isDragging: boolean } ) => isDragging && From 13bc32959aa67b6ae559168c35dd698abd3cccae Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 5 Feb 2024 10:37:00 -0500 Subject: [PATCH 05/15] remove unused opacity --- .../src/focal-point-picker/styles/focal-point-picker-style.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index 38127a085cdd0..c3dd8f0436335 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -115,7 +115,6 @@ export const GridLine = styled.div` background: rgba( 255, 255, 255, 0.4 ); backdrop-filter: blur( 16px ) saturate( 200% ); position: absolute; - opacity: 1; transform: translateZ( 0 ); `; From e334ba73a81fa1df4b6601e2f06be4bc158ee127 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 5 Feb 2024 10:38:08 -0500 Subject: [PATCH 06/15] add reduceMotion --- .../src/focal-point-picker/styles/focal-point-picker-style.ts | 4 +++- .../src/focal-point-picker/styles/focal-point-style.ts | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index c3dd8f0436335..b3bdb11660ce3 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -9,7 +9,7 @@ import styled from '@emotion/styled'; */ import { Flex } from '../../flex'; import UnitControl from '../../unit-control'; -import { COLORS, CONFIG } from '../../utils'; +import { COLORS, CONFIG, reduceMotion } from '../../utils'; import type { FocalPointPickerControlsProps } from '../types'; import { INITIAL_BOUNDS } from '../utils'; @@ -107,6 +107,8 @@ export const GridView = styled.div` transition: opacity 100ms linear; z-index: 1; + ${ reduceMotion( 'transition' ) } + opacity: ${ ( { showOverlay }: { showOverlay?: boolean } ) => showOverlay ? 1 : 0 }; `; diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-style.ts index 94c7859a07933..a11a11aedd156 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-style.ts @@ -24,6 +24,7 @@ export const PointerCircle = styled.div` backdrop-filter: blur( 16px ) saturate( 180% ); box-shadow: rgb( 0 0 0 / 8% ) 0px 0px 8px; transition: transform 100ms linear; + ${ reduceMotion( 'transition' ) } ${ ( { isDragging }: { isDragging: boolean } ) => From 97f3dbafaf1cc0e6e570614900a6b616914016fe Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 5 Feb 2024 10:41:22 -0500 Subject: [PATCH 07/15] border radius fix --- .../src/focal-point-picker/styles/focal-point-picker-style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index b3bdb11660ce3..fd3049beca78d 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -31,6 +31,7 @@ export const MediaContainer = styled.div` &:after { bottom: 0px; + border-radius: inherit; box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); content: ''; left: 0px; @@ -42,7 +43,7 @@ export const MediaContainer = styled.div` img, video { - border-radius: ${ CONFIG.radiusBlockUi }; + border-radius: inherit; box-sizing: border-box; display: block; height: auto; From 026e8e6053ba180d32fbd159d82c490cdb69d602 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 5 Feb 2024 10:41:34 -0500 Subject: [PATCH 08/15] Update focal-point-picker-style.ts --- .../src/focal-point-picker/styles/focal-point-picker-style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index fd3049beca78d..d663f870d604c 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -30,8 +30,8 @@ export const MediaContainer = styled.div` height: 100%; &:after { - bottom: 0px; border-radius: inherit; + bottom: 0px; box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); content: ''; left: 0px; From 89e0e6ba34a185897e8736ab56acef7f496d91a0 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 5 Feb 2024 10:43:52 -0500 Subject: [PATCH 09/15] border-radius-inherit --- .../src/focal-point-picker/styles/focal-point-picker-style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index d663f870d604c..b6bf5549d3103 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -58,7 +58,7 @@ export const MediaContainer = styled.div` export const MediaPlaceholder = styled.div` background: ${ COLORS.gray[ 100 ] }; - border-radius: ${ CONFIG.radiusBlockUi }; + border-radius: inherit; box-sizing: border-box; height: ${ INITIAL_BOUNDS.height }px; max-width: 280px; From 1b477c6e0f4e4ca114a06b3b4868f4899b6a2612 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 5 Feb 2024 10:45:16 -0500 Subject: [PATCH 10/15] pointer-events-none --- .../src/focal-point-picker/styles/focal-point-picker-style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index b6bf5549d3103..beb528bcf34c7 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -35,7 +35,7 @@ export const MediaContainer = styled.div` box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); content: ''; left: 0px; - position: absolute; + pointer-events: none; position: absolute; right: 0px; top: 0px; From cbfc0ef70a0d9b563752edcba8423fd9c36b74a6 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 5 Feb 2024 14:13:19 -0500 Subject: [PATCH 11/15] inline-flex flex fix --- .../src/focal-point-picker/styles/focal-point-picker-style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index beb528bcf34c7..893f5b2ebd7ef 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -15,6 +15,7 @@ import { INITIAL_BOUNDS } from '../utils'; export const MediaWrapper = styled.div` background-color: transparent; + display: flex; text-align: center; width: 100%; `; @@ -23,7 +24,7 @@ export const MediaContainer = styled.div` align-items: center; border-radius: ${ CONFIG.radiusBlockUi }; cursor: pointer; - display: flex; + display: inline-flex; justify-content: center; margin: auto; position: relative; From aa58c13e50355887893fe928e3a47955a2c589d4 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 5 Feb 2024 14:15:34 -0500 Subject: [PATCH 12/15] Update CHANGELOG.md --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 65ed149e34c21..d22f313d24810 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,8 +3,8 @@ ## Unreleased ### Enhancements - - `ConfirmDialog`: Add `__next40pxDefaultSize` to buttons ([#58421](https://github.com/WordPress/gutenberg/pull/58421)). +- `FocalPointPicker`: Apply modern styling ([#58459](https://github.com/WordPress/gutenberg/pull/58459)). ### Bug Fix From 5003e4295a6b0e758b0876727ba1a108b02c5b09 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 6 Feb 2024 14:32:26 -0500 Subject: [PATCH 13/15] 0px -> 0 --- .../focal-point-picker/styles/focal-point-picker-style.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index 893f5b2ebd7ef..720b64d8c2323 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -32,14 +32,14 @@ export const MediaContainer = styled.div` &:after { border-radius: inherit; - bottom: 0px; + bottom: 0; box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); content: ''; - left: 0px; + left: 0; pointer-events: none; position: absolute; - right: 0px; - top: 0px; + right: 0; + top: 0; } img, From a27697c9506a53e1937a397ba7478fa825bd57f2 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 6 Feb 2024 14:36:47 -0500 Subject: [PATCH 14/15] Adjust colors --- .../src/focal-point-picker/styles/focal-point-style.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-style.ts index a11a11aedd156..5ee0c01c42dd6 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-style.ts @@ -19,10 +19,10 @@ export const PointerCircle = styled.div` will-change: transform; z-index: 10000; background: rgba( 255, 255, 255, 0.4 ); - border: 1px solid rgba( 255, 255, 255, 0.3 ); + border: 1px solid rgba( 255, 255, 255, 0.4 ); border-radius: 50%; backdrop-filter: blur( 16px ) saturate( 180% ); - box-shadow: rgb( 0 0 0 / 8% ) 0px 0px 8px; + box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 8px; transition: transform 100ms linear; ${ reduceMotion( 'transition' ) } @@ -30,7 +30,7 @@ export const PointerCircle = styled.div` ${ ( { isDragging }: { isDragging: boolean } ) => isDragging && ` - box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 10px; + box-shadow: rgb( 0 0 0 / 12% ) 0px 0px 10px; transform: scale( 1.1 ); cursor: grabbing; ` } From 9e3319f4eb84db13356f12460dd478ea8be9c3ea Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 7 Feb 2024 09:49:39 -0500 Subject: [PATCH 15/15] Use 180% saturation, like everywhere else --- .../src/focal-point-picker/styles/focal-point-picker-style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index 720b64d8c2323..3ff8223e05e05 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -117,7 +117,7 @@ export const GridView = styled.div` export const GridLine = styled.div` background: rgba( 255, 255, 255, 0.4 ); - backdrop-filter: blur( 16px ) saturate( 200% ); + backdrop-filter: blur( 16px ) saturate( 180% ); position: absolute; transform: translateZ( 0 ); `;