Forms: Fix outline style label font size #43590

talldan · 2025-05-23T08:08:29Z

Fixes and issue I noticed while working on JETPACK-277

Note - this merges into #42890 rather than trunk.

Proposed changes:

If a user creates a form and uses the Outlined form style variation, they can no longer adjust the global styles font size of labels for any inputs that are focused, have a placeholder, or if the field is a Single/Multi choice field. This only happens in #42890, in trunk it works fine.

The issue is that we're attempting to use a font-size: 0.8em to scale the font to a smaller size when a field is focused, but this rule completely overrides the font-size applied by global styles. Block styles can also override the 0.8em, so have the opposite effect.

The fix I've taken is to move the font-size: 0.8em rule to a child element, so it correctly scales the inherited font size from any global/block styles that are set on the parent. In the editor there's already a child element that can serve this purpose. On the frontend, there is no element, so a new span has been added. This might be a good idea anyway, as it makes the markup more like the editor, although it's not an exact match.

As part of this, the PR also updates the scaling of the required text, which is usually 85% of the size of the label so that it works consistently.

With the font size moved to a different element, a new transition also has to be implemented for the font-size scaling, otherwise it looks jarring when clicking into or out of a field.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

p1747968046579529-slack-C02A76B714Z

Does this pull request change what data or activity we track or use?

No

Testing instructions:

Add a contact form
With the form selected, change to the 'Outlined' style variation in the block inspector
Select one of the inputs and type some placeholder text in
Go to Global Styles > Blocks > Label and change the font size to something noticabely different (e.g. XL or XXL)

Expected: The font size should visible change:

Before: The font size stayed the same:

…ive.

… not change.

github-actions · 2025-05-23T08:09:26Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the fix/outline-style-label-font-size branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fix/outline-style-label-font-size

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

talldan · 2025-05-23T08:09:29Z

projects/packages/forms/src/blocks/contact-form/editor.scss

@@ -809,7 +810,6 @@
 				position: relative;
 				top: 50%;
 				transform: translateY(-50%);
-				will-change: transform;


For most fields, transform actually doesn't change it stays at transform: translateY(-50%);, so I've removed this.

github-actions · 2025-05-23T08:09:47Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
🔴 Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
🔴 Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

🔴 Action required: Please add missing changelog entries for the following projects: projects/packages/forms

Use the Jetpack CLI tool to generate changelog entries by running the following command: jetpack changelog add.
Guidelines: /docs/writing-a-good-changelog-entry.md

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

jp-launch-control · 2025-05-23T08:17:56Z

Code Coverage Summary

No summary data is available for parent commit 85bb6ed, so cannot calculate coverage changes. 😴

If that commit is a feature branch rather than a trunk commit, this is expected. Otherwise, this should be updated once coverage for 85bb6ed is available.

Full summary · PHP report · JS report

ramonjd

Before	After

Works well for me. Tested with other styles an also custom font sizes.

* Fix text input-style field label font size when outlined style is active. * Remove scaling using variable * Fix scaling of multiple option fields when using outlined style * Tidy up styles * Wrap labels * Fix outlined label font size and animation * Fix animation by ensuring top is a valid value * Remove will-change: transform on frontend too. Transform usually does not change.

@cover

* Add base form field blocks Introduces foundational form field blocks: - jetpack/input - jetpack/label - jetpack/option - jetpack/options These blocks will be reused across all field types using inner blocks. * changelog * Fix issues with style syncing hook: - Prevents adding bulk changes when syncing blocks to the undo stack - Correctly determines the parent field block for option blocks to check if syncing is enabled - Correctly find all option blocks regardless of whether they are a field's direct child, e.g. consent, or nested within an options block e.g. single/multiple choice fields. * Prevent style syncing when blocks are reused in previews * Ensure label is editable after being emptied and placeholder shows * Opt out of block gap spacing for Options block This is an enhancement over trunk however the is some work required to make this actually work, especially given the shortcode rendering on the frontend. For the time being this support will explicitly be opted out of. It can be revisited when the benefit justifies the additional complexity and work. * Migrate form field blocks to use new base blocks Updates legacy form field blocks to use shared inner blocks: - jetpack/input - jetpack/label - jetpack/option - jetpack/options This commit also updates the registration of form blocks so the new shared blocks are available in the editor. * changelog * Fix CSS linting issues * Make select dropdown field's edit component more robust * First pass at updating form variations * Quick clean up of form variations * Pass required block toolbar control through to Option block for checkbox field * Clean up form field and inner block attributes * Remove lodash dependency from dropdown field edit component * Remove remaining lodash uses in new or updated form blocks * Remove TODO as Dropdown fields didn't use option styles * Fix default styling for Consent field option label * Clean up unrequired TODO item * Clean some more TODOs * Restore empty string defaults for input, option, and label blocks * Revert use sync style hook to previous version retaining undo stack fix * Fix typo Co-authored-by: Ramon <[email protected]> * Update form field style syncing (#43004) * Refactor and update form field syncing. - Use a parent react context provider as the source of truth instead of an arbitrary sibling block. - Perform a deep equality check before syncing to prevent against spurious updates. * When updating the block own attributes, mark the change as not persistent so that the user can undo * Prime the previousOwnAttributes value so that we avoid updating syncedAttributes unnecessarily * Update inline docs * Prime the synced attributes when they are initially unset * Fix syncing of styles across checkbox and consent options --------- Co-authored-by: Aaron Robertshaw <[email protected]> * Fix linting error in editor.scss * Attempt to fix warnings about PhanUndeclaredTypeParameter for WP_Block * Fix linting issue in class-contact-form.php * Forms: Prevent errors when synced attribute context is not available (#43027) * Forms: Fix error thrown in previews for synced form fields * Clean up * Rename the context type stuff * For html_entity_decode, use ENT_COMPAT since we only care about double quotes for the purposes of JSON decoding * Remove is_array and empty check as we now will always have at least one 'class' attribute on the extra_attrs array * Add transforms for new inner blocks based fields * Clean up standalone checkbox inner blocks template * Clean up dropdown field inner blocks template * Add example definitions for field block types * Allow default checked status for standalone option fields * Fix choice field deprecation edge case * Fix handling of required and width attributes for Textarea field. * Fix label block's placeholder fallbacks * Fix form undo redo issues (#43036) * Fix undo stack issue with useFormWrapper * Fix undo stack issue with text area * Fix undo stack issue with duplicated useFormWrapper * Fix undo stack issue with consent field block * Fix undoing after selecting a block variation causing multiple undo steps * Fix comment typos Co-authored-by: Aaron Robertshaw <[email protected]> * Remove `required` property from template This is now provided to the child block through context Co-authored-by: Aaron Robertshaw <[email protected]> --------- Co-authored-by: Aaron Robertshaw <[email protected]> * Forms: Add PHP unit tests for Migrate form fields to inner blocks JETPACK-262 (#43002) * inital commit - exploratory * do_shortcode * Add test_block_attributes_to_shortcode_attributes_with_styles * add more simple tests * remove unnecessary changes * changelog * LINTO! * Adding WP namespaces * test_gutenblock_render_field_checkbox * Add test for trim * Use optionsdata to presume that block_attributes_to_shortcode_attributes has taken place. Let's test that as a unit * Adding classes and styles in attributes. * block_attributes_to_shortcode_attributes tests * text field which has input and label * Phan complains about \DOMNode::getAttribute. Shut it up. * Try to quiet Phan again by passing a WP_Block instance * Attempt to fix a couple of the code coverage warnings * Try to fix namespace again * Try using the full namespace for the covers annotation instead of the relative name --------- Co-authored-by: Andrew Serong <[email protected]> * Clean up TODO as the important style for Outlined form style can not be avoided * Remove extraneous hook dependency * Remove useFormWrapper audit TODO - all fields use it * Remove TODOs already captured by issues * Remove unused ids from consent, checkbox, single choice and multiple choice fields (#43055) * Fix saving and display of dropdown field placeholder * Fix dropdown field placeholder default This commit also updates the dropdown field input's styles to make it easier to click when the placeholder has previously been cleared. * Fix style linting error * Form inner blocks: supplement existing PHP unit tests (#43076) * Enhance unit tests for Contact_Form_Block by adding support checks This commit updates the `test_register_child_blocks` method to include an optional parameter for expected block supports and introduces a new test method, `test_child_blocks_block_supports`, to verify the configuration of block supports for various Jetpack blocks. The data provider for the new test method is also added, ensuring comprehensive testing of block support attributes. * Add unit test for gutenblock_render_field_radio method This commit introduces a new test method, `test_gutenblock_gutenblock_render_field_radio`, to validate the rendering of the radio field block in the Contact Form Plugin. The test checks that the generated shortcode matches the expected output, ensuring proper functionality of the radio field block with various attributes and inner blocks. * changelog * remove duplicate tests. silly me! * Apply suggestions from code review Co-authored-by: Aaron Robertshaw <[email protected]> * syncing server block supports with frontend * try again --------- Co-authored-by: Aaron Robertshaw <[email protected]> * Allow default checked status for standalone option fields (#43077) * Fix date picker field incorrect classname (#43059) * Ensure jetpack-field__input classname applies to date picker input instead of jetpack-field__date * Remove explicit date type in appointment form variation * Specify the field type for the date field in the block template * Iron out inconsistency of date type for date picker inputs * Tied up text fields array --------- Co-authored-by: Aaron Robertshaw <[email protected]> * Revert "Remove deprecated covers annotations in line with #42902" This reverts commit 38791a8. Restoring these in case they were in place for coverage requirements. * Forms: move @Covers to class level in PHP unit tests (#43081) * Hoist @cover annotations to class level. * changelog * Fix field block examples (#43096) * Fix field block examples being altered by useFormWrapper useFormWrapper adds a form wrapper around any field that doesn't have one. It wasn't preserving the field's own inner blocks, which became visible in the block examples, where single or multiple choice fields have inner blocks but no wrapper. This PR ensures the inner blocks are preserved by calling getBlocks to get the inner blocks of the field and passing that as the inner blocks in the replaceBlocks call within useFormWrapper. * Small improvement to variable name * Add missing useEffect deps * Fix select/dropdown example * Switch e2e test close welcome guide code to use preferences * Forms: Fix display of label and option fallback values in transform previews JETPACK-278 (#43100) * Add fallback styles for dropdown block when css vars are not populated (#43101) * Add missed cleaned up label fallback handling * Fix rendering of legend as a label - Ensure block class is added to legend element - Add custom block classes and styles to legend - Tweak default style specificity so global styles can apply * Remove redundant array check to make linter happy. * Clean up dead code in shared JetpackFieldControls * Try to fix metadata in doc comments warning * Try updating PHP test attributes again, to hopefully please the linter * Forms: ensure custom CSS in global styles applies correctly to checkbox and radio wrappers (#43184) * Refactor class attribute handling in Contact_Form_Field - Trimmed type variable to ensure consistent class generation. - Added specific classes for 'checkbox-multiple' and 'radio' types. - Included TODOs for potential improvements and testing. * changelog * Add block styles for checkbox-multiple and radio fields - Registered new block styles for 'jetpack/field-checkbox-multiple' and 'jetpack/field-radio'. - Updated class handling in Contact_Form_Field to ensure proper application of styles. - Adjusted CSS selectors to reflect changes in class structure for button styles. * Enhance class handling for checkbox-multiple and radio fields - Updated Contact_Form_Field to apply block style classes to wrapper divs for checkbox-multiple and radio types. - Introduced a new method to extract block style classes from the class attribute. - Modified tests to validate the addition of block style classes in the rendering process. * Refactor block style registration for checkbox-multiple and radio fields - Consolidated block style registration for 'jetpack/field-checkbox-multiple' and 'jetpack/field-radio' into a single call. - Updated comments to clarify the purpose of style registration and future improvements. - Adjusted class handling in Contact_Form_Field to include new class naming conventions. * Refactor block style application for checkbox-multiple and radio fields - Streamlined the handling of block style classes for 'checkbox-multiple' and 'radio' types in Contact_Form_Field. - Improved code readability by consolidating conditional checks for block style class assignment. - Ensured consistent application of styles to wrapper divs for both field types. * Enhance radio field rendering tests and block style application - Added tests to validate rendering of radio fields with block style classes. - Improved handling of block style classes for radio fields in Contact_Form_Field to ensure consistent application. - Updated assertions in tests to reflect changes in class structure for radio fields. * Remove outdated changelog entry for migrating form fields to inner blocks with multiple wrapper styles * Enhance field wrapper class handling for contact form fields - Introduced 'fieldwrapperclasses' attribute to allow custom wrapper classes for form fields. - Updated rendering logic in Contact_Form_Field to utilize the new attribute for consistent styling. - Refactored tests to validate the addition of 'fieldwrapperclasses' for various field types, ensuring proper application of block styles. * Try fixing a linting issue with the DataProvider --------- Co-authored-by: Andrew Serong <[email protected]> * Add icons for input, label, option, and options blocks (#43270) * Form Global Styles: Update CSS specificity to 0-1-0 for default editor styles (excluding outlined style) (#43125) * Reduce specificity of text area styles to 0-1-0 * Update specificity of option block styles * Fix option input not scaling with font size for single/multiple choice fields * Fix font:inherit rule overriding global styles font family setting by reduce specificity * Add dead code comments * Forms: only apply `wp-` and `is-style-` classes to fields of new inner block types (#43268) * Only apply the block style classes to the field wrapper if the field is one of the new inner block types. * update tests * Refactor get_block_style_classes to return field wrapper classes and simplify class handling * Ensure there's no whitespace in unimgrated fields * Fix missing checkmark for single choice options on frontend (#43301) * Forms: Fix CSS specificity for compatibility with global styles on the frontend (#43299) * Fix consent field label css specificity preventing global typography styles * Fix checkbox/radio option font-weight css specificity preventing global styles * Remove empty line and duplicate classname * Fix mixed spaces/tabs indentation * Fix checkbox/radio input not scaling with font size for single/multiple options fields * Fix indentation * Fix button style multiple choice checkbox not receiving global styles font color due to css specificity * Fix single choice option not receiving text color due to styles not applying to correct element * Reinstate missing color style * Move option block style classnames to parent wrapper on frontend * Make option label font weight inherited from parent block wrapper, add some back compat for default css styles * Fix tests * Move option styles to parent block level element * Forms: remove color gradients block supports (#43427) * Forms: Update gradient property naming in contact form block and tests to ensure consistency * Forms: Update gradient property naming to 'gradients' for consistency in input and option blocks * Fix label typo --------- Co-authored-by: Andrew Serong <[email protected]> * [WIP] Forms: migrate Outlined form style for inner block based fields (#43327) * first commit * backend mania * Removing dividing two top of label. Can reinstate * fix number conversion * Match legacy form behaviour when deriving px values for CSS vars * color, typography * Adjust clip path to cater for 1px borders * Implement outline style support for form fields by integrating useFormStyleOutlineClassesAndStyles hook across various blocks. Update CSS variables and styles for outlined and animated form styles in the contact form backend and frontend components. * Cannot fix overlap right now * Trying to fix select, options, etc * desperately trying to assign the right values to css vars * get background working * path to syncing options * use lodash for merging * global styles specificity * Remove isSynced from hook and related code * Try only using hook on label * Inject CSS vars for input as well as label so that it can calculate correct padding * Call it a jetpack contact form notch width * Fix overflowing background when a narrow border-width is set * Fix input block placeholders not selectable/visible when outlined style is active * Fix animated style label and input offset * Animated style: fix label and input offset when using distinct border left style in editor * Fix trailing notch background color * Inputs should take border radius styles so they match the notched border. Fix global style derivation for borders * Fix incorrect block names Co-authored-by: Ramon <[email protected]> * Improve support for split border radii in outlined form style * Remove min width for notch * This commit syncs jetpack/options with jetpack/input * abstract get inner block hook * esc notched attrs * Check $legacy values before assignment * move css vars to inner elems * Apply the background to the notch elements again instead of the input to ensure border aligns with background. Remove the z-index rule so that the input/placeholder is visible and can be edited * Adding padding where there's a border Enhance contact form styles and structure by adding support for animated styles, adjusting border colors, and refining fieldset rendering logic. * Add filler notch element on frontend * Fix flex shrink/grow of notch elements with new filler notch element * Limit padding of inputs to support a wider range of border radii units This helps prevent situations where the calculated padding can end up being a huge number when units like % are used. 100% might make sense for a border radius, but that value used for a padding is huge. Cap the padding at 100px to match trunk's max border radius value. * Ensure dropdowns have same styles for input as other fields, DRY up * Updated rendering logic in the contact form fields to differentiate between outlined and animated styles. Introduced a new helper function to manage outlined style attributes and adjusted CSS to ensure proper styling for outlined fields. Cleaned up related code for clarity and maintainability. * Ensure default padding for outlined styles in inputs * Refactor contact form styles to ensure global styles can override default border and padding settings. Updated class logic for option groups to conditionally apply border styles based on attributes, enhancing flexibility and maintainability. * Account for split border radius when calculating css var on the frontend * Set a max width for any elements using --jetpack--contact-form--notch-width of 100px * Update tests with new shortcode attributes and styles for outline and options * Switch inputs and labels for the outlined and animated style so that label is above input * Remove background on inputs for outlined style, background is being applied to labels instead * Add filler notch element to match editor styles * Add max-width for trailing notch element * Fix border radius css var not picking up single values with a unit * Remove border radius and clip path on inputs for outlined style (border radius is applied on the label, clip path does nothing) * Update tests with new attributes and outline HTML * Default white background in the editor * Ensure the Button variation on the Multiple Choice (Checkbox) block inherits the current color from the option block. * Add background color support for outlined style in contact form inputs and update related tests * Fix outlined border radius for checkbox multiple * Fix css border-radius var calculation * Fix checkbox multiple radius for outlined style * Small tidy up * Enhance outline styles handling in contact form fields by adding form style parameter and refining border radius calculations. Update CSS to include z-index for animated labels. * Apply outlined border radius style to radio fields to match other fields * Remove spaces in inline styles * Select arrow position, default padding for has-background * Padding magic on the options in outlined * Add font size adjustment for legend in outlined contact form style * Fix position of legend and right padding for options * Remove export of constant * Combine is_outlined `if` statements for checkbox multiple * Combine is_outlined `if` statements for radio * Rename useFormStyleOutlineClassesAndStyles to useVariationStyleProperties * Only memoize based on changes to block type when merging global styles * Add documentation to useVariationStyleProperties * Small tidy up, rename a function and add docs * Remove commented out css declarations * Remove dead code. Context is unused. Anywhere. Go look if you don't believe me. --------- Co-authored-by: Daniel Richards <[email protected]> * Add esc_attr calls to render_radio_field (#43488) * Reinstate default padding where there's a border. Add option chaining to innerBlock look up as trunk forms won't have it. * Use correct block name in get_ouline_styles (#43489) * Forms: standardize animated variation style paddings (#43469) * Update padding for animated style * Fix updated function * Rename get_outline_styles * check borderradius * Calculate border widths with all sides via CSS vars * Fix text area top position * Reinstate default (trunk) padding for animated labels etc * Default value of null on border sizes * Remove dupe CSS * JS Doc :success: * Add legacy CSS var as default * Use the `borderwidth` field attribute as the legacy legacy border width value * Explain use of `borderwidth` value * Update projects/packages/forms/src/contact-form/class-contact-form-field.php Use var `$border_width_attribute` * Add bottom width CSS var to backend, and use border sides in the notched CSS * Remove styles that we're overriding * Switch from !empty to isset for legacy borderwidth attribute check * Do empty/zero check on legacy border widths --------- Co-authored-by: Daniel Richards <[email protected]> * Forms: Fix block instance border color not overriding global styles border color with outlined style active (on the frontend) (#43532) * Allow block instance border color to override global styles border color * Remove extra space in class name * Revert input + option syncing. Bad! * Forms: Fix typography input styles applying to labels when outline style is active (on frontend) (#43534) * Fix rogue typography attributes from input applying to label * Fix bad rebase * Update tests * For classic themes, do not destructure theme config objects that don't exist. * Forms: Fix custom classnames support in inner blocks migration (#43564) * Forms: fix custom class handling in contact form plugin (#43587) * Forms: Enhance class handling in contact form plugin and tests - Updated class handling in `class-contact-form-plugin.php` to filter empty block style classes. - Modified test cases in `Contact_Form_Plugin_Test.php` and `Contact_Form_Test.php` to include additional attributes and ensure proper class wrapping for various field types. - Improved assertions to validate class attributes in rendered output. * Make innerblocks optional. Just for linting * Forms: Fix outline style label font size (#43590) * Fix text input-style field label font size when outlined style is active. * Remove scaling using variable * Fix scaling of multiple option fields when using outlined style * Tidy up styles * Wrap labels * Fix outlined label font size and animation * Fix animation by ensuring top is a valid value * Remove will-change: transform on frontend too. Transform usually does not change. * Forms: fix inconsistent weights in outline style and terms labels (#43545) * Ensure that existing font-weight styles do not override block and global label styles. * Consent weights * Revert options positioning kram * Increase specificity to 0 1 0 for classic themes * Bump specificity of consent label * Bump specificity * Forms: Fix animated style label font scaling (#43615) * Fix animated style label font size in editor * Add span wrapper around label text * Update animated label styles on frontend * Size and animation adjustments for required text * Fix label animating when selected in editor if using the animated form style variation and no placeholder is set * Forms Fix animated label centered positioning (#43635) * Fix animated label vertical centering when using uneven borders in the input * Remove unused cass var * Forms: Remove options text color support (#43612) * Remove text color support for jetpack/options, since frontend does not replicate the markup of the editor and so style parity cannot be achieved * Try to fix tests * Whoops, wrong flag * One more time --------- Co-authored-by: Andrew Serong <[email protected]> * Forms: options block layout tweaks (#43531) * Refactor contact form styles and rendering logic to enhance alignment and maintainability. Update CSS for radio and checkbox options to use consistent alignment, and streamline fieldset and div class attributes by removing unnecessary prefixes. Improve handling of border styles and attributes for outlined forms, ensuring compatibility with global styles. * Try baseline for the options * Revert changes to "fix" option alignment * Revert option alignment v2 * Add classes to tests * Reinstate tweaks for option positioning * Apply wp-block-jetpack-option class in the attribute migration method * Use em instead of rem. Remove unnecessary tweaks * Border support for classic themes * Ensure radio inputs don't warp in classic themes. Update options description * Force opinionated dimensions on the options inputs * wp-block-jetpack-option was not being applied to inner options blocks * Forms: update padding for jetpack options in contact form to conform with trunk (#43634) * consolidate legends * Remove styles that are inconsistent with existing trunk spacing. (frontend) * Remove padding in editor * editor * The feature branch has different markup for .wp-block-jetpack-options so we need to target the fieldset using different selectors * comments * Fix date field label suffix font size for outlined/animated styles * Fix option input color not inherited in editor * Forms: Update border radius and width handling in deprecateFieldStyles function (#43653) * Attempt to fix warnings about PhanUndeclaredTypeParameter for WP_Block * Forms: Update border radius and width handling in deprecateFieldStyles function * Ensure border radius and width are correctly set to 'undefined' only when they are not provided or are null, allowing for proper handling of zero values. * Coerce lineheight to str * REvert - bad rebase * Update class-contact-form-plugin.php My IDE auto formatted this --------- Co-authored-by: Andrew Serong <[email protected]> * Remove duplicated styles * Form: fix default fallbacks for unmigrated forms (#43676) * Outlined multi option backgrounds defaults * Don't concat the label and option styles for consent and single option in unmigrated forms * PHPCS warning - Use statements are not alphabetically sorted (MediaWiki.Classes.UnsortedUseStatements.UnsortedUse * Forms: tame select arrow positioning (#43674) * initial commit - adding extra markup to the select rendering and fixing positioning of labels * uncommenting * Remove default select border * Update select field rendering to include a wrapper div with the correct class structure for improved styling and consistency in tests. * Update contact form styles to inherit text color and adjust z-index for select wrapper elements * Only run `getAttribute` on select wrapper if there is one * Reinstate padding change * phan me * phanos * whitespace * Ensure that animated labels sit above active input elements. * Forms: account for missing placeholder when transforming input fields to select dropdown and fix z-index (#43721) * Enhance select field transformation by adding default placeholder for input block. Update contact form plugin to correctly reference placeholder attribute. Adjust z-index values in CSS for improved label positioning. * Update z-index values in contact form CSS for improved label positioning and remove redundant styles for outlined fields. * Complete CSS comment * Refactor select field transformation to set placeholder attribute directly from attributes. Remove redundant placeholder handling in inner block creation. * Revert createTextFieldInnerBlocks * Revert experiment. Add default placeholder for select in createTextFieldInnerBlocks * Don't mutate the attributes object * Don't spread optional chaining just in case * Update contact form styles to prevent color overrides by global styles. Add 'color: unset !important;' to both editor.scss and grunion.css for consistent input appearance. (#43737) * Fix consent field spacing between checkbox and label (#43743) * Update context types to use kebab casing (#43740) * Forms: Fix required form field validation for options blocks in the inner blocks refactor (#43738) * Update accessible form selectors for single/multiple choice fields (#43760) * Forms: refactor placeholder handling for outlined and styled forms (#43759) * Forms: Refactor placeholder handling in contact form fields * Simplify placeholder logic to ensure consistent rendering of input fields. * Remove unnecessary conditionals for placeholder assignment and improve code clarity. * Forms: Update contact form styles and placeholder handling * Adjusted placeholder logic to ensure it only renders when a value is present, improving input field consistency. * Updated the contact form stylesheet to include a version query string for better cache management. * Commented out specific CSS rules to prevent unintended side effects related to placeholder visibility in outlined and animated label styles. * Remove other :not(:placeholder-shown) styles * Remove multiple changelogs for branches that were never merged to trunk --------- Co-authored-by: Ramon <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: Andrew Serong <[email protected]> Co-authored-by: Ramon <[email protected]>

talldan added 8 commits May 23, 2025 15:56

Fix text input-style field label font size when outlined style is act…

47958d4

…ive.

Remove scaling using variable

7ca066e

Fix scaling of multiple option fields when using outlined style

a156a9e

Tidy up styles

8b172a1

Wrap labels

7dd7264

Fix outlined label font size and animation

705c253

Fix animation by ensuring top is a valid value

505e0eb

Remove will-change: transform on frontend too. Transform usually does…

Loading
Loading status checks…

24de610

… not change.

talldan requested review from ramonjd and andrewserong May 23, 2025 08:08

talldan self-assigned this May 23, 2025

talldan added [Type] Bug [Feature] Contact Form [Block] Contact Form [Package] Forms [Feature] Forms Blocks Bug labels May 23, 2025

talldan commented May 23, 2025

View reviewed changes

github-actions bot added the [Status] Needs Author Reply label May 23, 2025

ramonjd approved these changes May 26, 2025

View reviewed changes

talldan merged commit 351e625 into update/migrate-form-fields-to-inner-blocks May 26, 2025
62 of 65 checks passed

talldan deleted the fix/outline-style-label-font-size branch May 26, 2025 05:27

github-actions bot removed the [Status] Needs Author Reply label May 26, 2025

talldan mentioned this pull request May 26, 2025

Forms: Fix animated style label font scaling #43615

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Forms: Fix outline style label font size #43590

Forms: Fix outline style label font size #43590

talldan commented May 23, 2025

Uh oh!

github-actions bot commented May 23, 2025 •

edited

Loading

Uh oh!

talldan May 23, 2025

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

jp-launch-control bot commented May 23, 2025

Uh oh!

ramonjd left a comment

Uh oh!

Uh oh!

Forms: Fix outline style label font size #43590

Forms: Fix outline style label font size #43590

Conversation

talldan commented May 23, 2025

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Uh oh!

Uh oh!

github-actions bot commented May 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

talldan May 23, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

jp-launch-control bot commented May 23, 2025

Code Coverage Summary

Uh oh!

ramonjd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented May 23, 2025 •

edited

Loading