Find file History
mtias and youknowriad Updates to the Font Size Picker (#9802)
* Rework font-size selection to improve clarity of options and the UI.

* Add label, relax margins, tighten help text for switch, fix color

This commit does a few things:

1. It makes the panel heading the same color as the down chevron.
2. It adds a label to the font size picker, grouping it all together
3. It tightens the margins between switch and contextual help text.
4. It relaxes the margins for base controls inside panels, to make them a bit lighter.

Together with #9784 it reduces the weight of panels in the sidebar.

* Tweak the reset button, make it disabled until a number is input.

* Fix reset clearing input value.

* Use different sizes for buttons and render.

* Convert font picker to a dropdown select showing real visual sizes.

- Add "huge" and "normal" variants.
- Normal equals a "reset".

* Remove unusued CSS code.

* FontSizePicker: a11y: Wrap with NavigableMenu

* e2e: Update to accommodate new font size picker

* Amend editor-modes test

* Accessibility improvements to the FontSizePicker component
Latest commit e5ed1b1 Oct 4, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information. Add components examples in files - Part 2 (#8338) Aug 8, 2018
index.js Updates to the Font Size Picker (#9802) Oct 4, 2018
style.scss Updates to the Font Size Picker (#9802) Oct 4, 2018


BaseControl component is used to generate labels and help text for components handling user inputs.


Render a BaseControl for a textarea input:

import { BaseControl } from '@wordpress/components';

const MyBaseControl = () => (
		help="Enter some text"


The component accepts the following props:


The id of the element to which labels and help text are being generated. That element should be passed as a child.

  • Type: String
  • Required: Yes


If this property is added, a label will be generated using label property as the content.

  • Type: String
  • Required: No


If this property is added, a help text will be generated using help property as the content.

  • Type: String
  • Required: No


The class that will be added with "components-base-control" to the classes of the wrapper div. If no className is passed only components-base-control is used.

  • Type: String
  • Required: No


The content to be displayed within the BaseControl.

  • Type: Element
  • Required: Yes