diff --git a/projects/packages/forms/changelog/fix-form-style-variations-in-editor b/projects/packages/forms/changelog/fix-form-style-variations-in-editor new file mode 100644 index 0000000000000..c418f606c6bb4 --- /dev/null +++ b/projects/packages/forms/changelog/fix-form-style-variations-in-editor @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Forms: Fix block style variations not showing in the editor. diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 80deddb8c5246..d506b5bc8dc98 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -711,13 +711,13 @@ } } - &.is-style-outlined, &.is-style-animated { + .is-style-outlined &, .is-style-animated & { .jetpack-field { position: relative; } } - &.is-style-outlined { + .is-style-outlined & { .block-editor-block-list__block:not([contenteditable]):focus:after { top: -10px; left: -10px; @@ -728,7 +728,7 @@ .jetpack-field { --notch-width: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius)); margin-top: 8px; - display: flex; + box-sizing: border-box; .notched-label { position: absolute; @@ -869,7 +869,7 @@ } } - &.is-style-animated { + .is-style-animated & { .jetpack-field { --left-offset: calc(var(--jetpack--contact-form--input-padding-left, 16px) + var(--jetpack--contact-form--border-size)); --label-left: max(var(--left-offset), var(--jetpack--contact-form--border-radius)); diff --git a/projects/plugins/jetpack/changelog/fix-form-style-variations-in-editor b/projects/plugins/jetpack/changelog/fix-form-style-variations-in-editor new file mode 100644 index 0000000000000..dc5b714d1d601 --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-form-style-variations-in-editor @@ -0,0 +1,4 @@ +Significance: patch +Type: bugfix + +Forms: Fix block style variations not showing in the editor.