Heading block controls: show buttons to set heading size #74
Labels
[Type] Task
Issues or PRs that have been broken down into an individual action to take
Comments
karmatosed
added
the
[Type] Question
|
This is addressed in the mockups. Relabelling the ticket to serve as a design task, hope that's okay ❤️ |
jasmussen
added
Design
[Type] Enhancement
jasmussen
changed the title
|
The current mockups provide block level controls to change the type/size of heading, with "Heading" still being a single block:
Every level of heading, 1-6, are shown here so you can in only two clicks set the size of a heading (click block, click size). Alternate ideas explored included up/down arrows to bump or reduce the size of a heading, but these would require multiple clicks. But the H1/H2/H3 ... buttons aren't very inviting, and feel very "techy". Is there a better way to solve this? A better icon design? Can we show 6 levels of sizes in six different icons? Should we only show sizes 1-3 (with sized icons) and show the rest in a dropdown? Input welcome! |
|
Here's a quick idea for showing fewer options, but with an arrow to expand to more:
And this video shows an idea to show a preview of the heading size (or whatever style) rather than a generic H1 icon:
|
|
So in the spirit of exploration, here's a crazy idea:
The icons are a little fuzzy and unpolished, but this embraces the fact that H2 and H3 are technically separate blocks (as opposed to how we've seen it so far as a Heading block with the size being the defining difference). Basically you pick the size of you heading here. Or you pick text, or quote or whatever it needs to be. The formatting toolbar is then contextual to the type. |
|
Here's a more basic one, which is more akin to Shauns version above:
|
|
Closing in favor of #313 |
omarreiss
pushed a commit
that referenced
this issue
Jun 26, 2018
* Jest preset: Add default jest preset for WordPress developmnent * Jest preset: Use path to jest preset relative to root directory
gziolo
pushed a commit
that referenced
this issue
Jul 9, 2018
* camelCase for readme variable names * update hook and `vendor/plugin/function` wording, removing `Name` * complte namespace shortening to `vendor/plugin/function` * Publish - @wordpress/a11y@0.1.0-beta.2 - @wordpress/dom-ready@0.1.0-beta.2 - @wordpress/hooks@0.1.0-beta.0 - @wordpress/url@0.1.0-beta.2 * add publishConfig->access:public for hooks * Publish - @wordpress/hooks@0.1.0-beta.1 * correctly enable dashes in regexes in validateNamespace * Export a hooks function enabling adding hooks via composition * test hooks can be instantiated * Run test on objects instead of globally * correct data return for Hooks * Rework the Hooks object, use a local HOOKS instead of global * use object based hooks throughout testing * remove unused global HOOKS * remove some logging * remove extra parts from namespace in tests * remov vendor/plugin prefix requirement for namespaces * update docs * Add a test for “Can add filters with dashes in namespaces” * a11y: Apply .screen-reader-text styles to container * a11y: Update tests per updated style Questionable value of the test assertions, which are specific to the implementation and not the expected intent of the test case * update readme, add some tests * switch naming to `createHooks` and correct tests * remove extraneous single quotes * remove the HOOKS global abstraction * update test beforeEach cleanup to match new object structure * use export defaults * Clean up readme for new approach * url - add built files * hooks - add built files * dom-ready - add built files * a11y - add built files * remove build filders from gitignore * Publish - @wordpress/a11y@0.1.0-beta.3 - @wordpress/dom-ready@0.1.0-beta.3 - @wordpress/hooks@0.1.0-beta.2 - @wordpress/url@0.1.0-beta.3 * re-ignore build files; didn’t resolve publishing issue * Simplify dom-ready package.json, add a license field * Publish - @wordpress/a11y@0.1.0-beta.4 - @wordpress/dom-ready@0.1.0-beta.4 - @wordpress/hooks@0.1.0-beta.3 * Update readmes to include `@next` in npm install line Since our packages are still in pre-release, the @next tag is required to install the latest published version. We can remove this instruction once the packages are past pre-release. * Publish - @wordpress/a11y@0.1.0-beta.5 - @wordpress/dom-ready@0.1.0-beta.5 - @wordpress/hooks@0.1.0-beta.4 - @wordpress/url@0.1.0-beta.4 * remove the built files which were added by mistake * Publish - @wordpress/a11y@0.1.0-beta.6 - @wordpress/dom-ready@0.1.0-beta.6 - @wordpress/hooks@0.1.0-beta.5 - @wordpress/url@0.1.0-beta.5 * Hooks: Update hooks public API to make it possible to apply to wp.hooks directly (#45) * Development: Improve onboarding experience for new contributors (#46) * Update screen-reader-text CSS. * Hooks: Allow slashes in the namespace (#47) * Hooks: Allow slashes in the namespace * Hooks: Add test ensuring backlash is not allowed inside namespace * Publish - @wordpress/a11y@1.0.0 - @wordpress/hooks@1.0.0 * a11y & hooks: remove ‘@next’ from install instructions * tag a11y and hooks at 1.0.1 * Trigger actions when adding or removing hooks * add tests for expected hookAdded and hookRemoved events * these are hooks not hoods (typo) * Tests: Refactor tests to use Jest mocks * Standardize format of package.json files (#54) * Add tests for addFilter/removeFilter * whitespace * Docs update for hooks added/removed events * Hooks: Final touches for the add/remove actions * Publish - @wordpress/a11y@1.0.2 - @wordpress/dom-ready@0.1.0-beta.7 - @wordpress/hooks@1.1.0 - @wordpress/url@0.1.0-beta.6 * Update Lerna and Jest to the latest version (#56) * Implement autop package * Port PHP wpautop faithfully to JS * docs: Update Lerna docs to use `npx` * Update license in `package.json` to adhere to SPDX v3.0 specification * Update license in `package.json` to adhere to SPDX v3.0 specification * Enforce using the latest LTS version (8.x) of Node and up * Move node version check to prebuild run script * Remove superfluous `a` and use full Node.js name * Jest-console: Add new package with console object matchers for Jest * Jest-console: Add package documentation * Jest-console: Integrate test matchers with packages repository * Jest-console: Fix typos in README file * Jest-console: Whitelist folders published to npm * Update install instruction in README files that use beta releases (#63) * Publish - @wordpress/a11y@1.0.3 - @wordpress/autop@1.0.1 - @wordpress/dom-ready@1.0.0 - @wordpress/hooks@1.1.1 - @wordpress/jest-console@1.0.0 - @wordpress/url@1.0.0 * chore: Update `.editorconfig` to match WordPress' upstream * chore: Use tabs for indentaion in `lerna.json` * chore: Use tabs for indentaion in _root_ `package.json` and `package-lock.json` files * chore: Use tabs for indentaion in _url_ package `package.json` and `package-lock.json` files * chore: Use tabs for indentaion in _jest-console_ package `package.json` and `package-lock.json` files * chore: Use tabs for indentaion in _hooks_ package `package.json` and add missing `package-lock.json` file * chore: Use tabs for indentaion in _dom-ready_ package `package.json` and `package-lock.json` files * chore: Use tabs for indentaion in _autop_ package `package.json` and `package-lock.json` files * chore: Use tabs for indentaion in _a11y_ package `package.json` and `package-lock.json` files * chore: Update _autop_ `package.json` fields * Babel-preset-default: Add new package containing the default Babel configuration (#66) * Publish (#67) - @wordpress/a11y@1.0.4 - @wordpress/autop@1.0.2 - @wordpress/babel-preset-default@1.0.1-0 - @wordpress/dom-ready@1.0.1 - @wordpress/hooks@1.1.2 - @wordpress/jest-console@1.0.1 - @wordpress/url@1.0.1 * Scripts: New scripts package containing test command (#62) * Scripts: initial commit with scripts package containing test command * Publish - @wordpress/scripts@1.0.1-0 * Scripts: Minor changes before publishing to npm * Publish - @wordpress/a11y@1.0.5 - @wordpress/autop@1.0.3 - @wordpress/babel-preset-default@1.0.0 - @wordpress/dom-ready@1.0.2 - @wordpress/hooks@1.1.3 - @wordpress/jest-console@1.0.2 - @wordpress/scripts@1.0.0 - @wordpress/url@1.0.2 * feat: Add `@wordpress/browserslist-config` package * docs: fix spelling in CHANGELOG.md and consistent formatting * chore: remove `browserslist` from `peerDependencies` * tests(browserslist-config): refactor test per coding standards * Packages: Make sure dependencies are properly exposed for external usage (#71) * Publish - @wordpress/babel-preset-default@1.0.1 - @wordpress/browserslist-config@2.0.0 - @wordpress/jest-console@1.0.3 - @wordpress/scripts@1.0.1 * Babel-preset-default: Makre sure transform runtime plugin is not loaded in test env (#73) * Publish - @wordpress/babel-preset-default@1.0.2 * 📦 NEW: Update Lerna to 2.8.0 * chore: use tabs for indentation in `lerna.json` * build: use `browserslist-config-wordpress` Browserslist shared config (#68) * build: use `browserslist-config-wordpress` Browserslist shared config * chore(babel-preset-default): switch to `@wordpress/browserslist-config` * chore: fix merge conflict * chore: regenerate `package-lock.json` * Browserslit config: Add devDependency in the root repository * Babel preset default: Add missing spaces around square brackets * Jest preset: Add default jest preset for WordPress development (#74) * Jest preset: Add default jest preset for WordPress developmnent * Jest preset: Use path to jest preset relative to root directory * Publish - @wordpress/babel-preset-default@1.0.3 - @wordpress/jest-preset-default@1.0.0 - @wordpress/scripts@1.0.2 * Tests: Fix wrongly configured dependencies for Jest preset (#75) * Publish - @wordpress/jest-preset-default@1.0.1 * Dependencies: Update Jest preset dependencies version (#76) * Build: Symlink all child packages instead of using versions published to npm (#77) * docs: add link to browserslist usage examples docs (#80) * docs: update browserslist readme example usage * docs (browserslist): Link to external configuration examples * Update README.md * chore(browserslist): update Browserslist to v3.0.0 * chore(browserslist): update Browserslist to v3.1.0 * Publish - @wordpress/babel-preset-default@1.1.0 - @wordpress/browserslist-config@2.1.0 - @wordpress/jest-console@1.0.4 - @wordpress/jest-preset-default@1.0.2 * chore: update Lerna to 2.9.0 * Build: Use node script to symlink local npm dependencies (#79) * Build: Use node script to symlink local npm dependencies * Chore: Update symlink-or-copy to v1.2.0 * Chore: Added npm-run-all to simplify npm scripts * docs: ❤️ Code is Poetry * docs: use canonical _Code is Poetry_ image and center image using HTML Props @rmccue. * Scripts: Provide the default configuration for the `test` command (#83) * Scripts: Provide the default configuration for the `test` command It is used in the case when the project does not have a config for Jest or Babel * Scripts: Add tests for utils to ensure they work properly * Add back end-of-file new line * fix(scripts): rename script from `test-unit` to `test-unit-js` (#86) * Chore: Update Jest dependencies (#87) * Publish - @wordpress/a11y@1.0.6 - @wordpress/autop@1.0.4 - @wordpress/babel-preset-default@1.1.1 - @wordpress/browserslist-config@2.1.1 - @wordpress/dom-ready@1.0.3 - @wordpress/hooks@1.1.4 - @wordpress/jest-console@1.0.5 - @wordpress/jest-preset-default@1.0.3 - @wordpress/scripts@1.1.0 - @wordpress/url@1.0.3 * chore: remove `package-lock.json` files, lockfiles for apps, but not for packages * chore: add `package-lock.json` to `gitignore` * chore: add `package-lock=false` in new `.npmrc` files for each package * chore: add `"npmClientArgs": ["--no-package-lock"]` to Lerna `bootstrap` command See lerna/lerna#1235 (comment) * Remove Lerna `npmClientArgs` option * Hooks: Avoid validating namespace in runHooks Unnecessary because a hook cannot be registered with an invalid hook name, so it would not pass the subsequent condition to check that a hookset with corresponding name exists. * Hooks: Use null prototype object with truthy access https://jsperf.com/object-create-null-vs-hasownproperty * Hooks: Simplify return first arg logic Even if we don't intend to return value, no harm in assigning to args[ 0 ] * Hooks: Assign hooks current initial value in creation * Hooks: Avoid initializing hook history if not run * Hooks: Add baseline benchmark * Publish - @wordpress/a11y@1.0.7 - @wordpress/autop@1.0.5 - @wordpress/babel-preset-default@1.1.2 - @wordpress/browserslist-config@2.1.2 - @wordpress/dom-ready@1.0.4 - @wordpress/hooks@1.1.5 - @wordpress/jest-console@1.0.6 - @wordpress/jest-preset-default@1.0.4 - @wordpress/scripts@1.1.1 - @wordpress/url@1.0.4 * Wrap filename in backticks * Package: Add `@wordpress/custom-templated-path-webpack-plugin` package * chore: add` jest-preset` keyword to `jest-preset-default` * Hooks: Fix undefined arguments on consecutive action callbacks * Hooks: Correct CHANGELOG version to 1.1.6 * Publish - @wordpress/hooks@1.1.6 - @wordpress/jest-preset-default@1.0.5 - @wordpress/scripts@1.1.2 * Custom Templated Path Plugin: Remove debugging statement from tests 😬 * docs: updated handbook URL * docs: update the Browserslist example repo URL (#98) * WordPress i18n package: Initial commit (#96) * docs(i18n): Standardize `README.md` format * Publish - @wordpress/babel-plugin-makepot@1.0.0 - @wordpress/babel-preset-default@1.1.3 - @wordpress/browserslist-config@2.1.3 - @wordpress/custom-templated-path-webpack-plugin@1.0.1 - @wordpress/i18n@1.0.0 - @wordpress/scripts@1.1.3 * return a boolean from `hasHook` not the hook count * simplify logic * update tests to expect booleans from hasFilter/Action * Clean up docs and return * Add `publish:check` script to run `lerna updated` * babel-preset-default: Remove babel-plugin-lodash (#109) * Publish - @wordpress/babel-preset-default@1.2.0 - @wordpress/hooks@1.1.7 - @wordpress/scripts@1.1.4 * i18n: Support accumulatively registering additional locale data for domain (#105) * allow for setting additional locale data for a domain accumulatively * woops wrong object reference * add test for accumulation of localeData * repackage additional tests * use more performant “in” check instead of lodash `_.has` * use hasOwnProperty instead of in * fix formatting for code style * fix formatting * use Object.assign instead of lodash.merge * add new plural strings to tests * simplify merging * indent, indent * i18n: Fix indentation * i18n: Memoize dcnpgettext (#101) * i18n: Memoize dcnpgettext * i18n: Export dcnpgettext inline * Publish - @wordpress/i18n@1.1.0 * Add WordCounter package (#10) * Adding WordCounter package * Simplifying test syntax * export the count as default * Creating a simpler API * Refactor into a single function export * Modification based on review notes * Complete refactor based on suggestions from @omarreiss * Remove conditional check * Moving each function into a new file. Exporting an object so we can use a single settings property and make the calls a little more sane * Only importing the lodash method we need * Using flow to chain the matchWords/matchCharacters inner function calls * Adding readme * Addressing some feedback on the PR * Move to a simplier API * Updates the README to match API changes * Updates per review by @youknowriad * Adds missing dockblock param * Spacing issues * Adds correct docblocks and fixes some whitespace issues * Adding some whitespace as per review comment * Add prependHTTP() to @wordpress/url (#112) * Publish - @wordpress/url@1.1.0 - @wordpress/wordcount@1.0.0 * Add a publishConfig setting to wordcount's package.json, and fix the indenting. (#114) * Improve the publishing process documentation and error checking (#115) * Add package: @wordpress/is-shallow-equal (#110) * Add package: @wordpress/is-shallow-equal * Ignore benchmark for codecov No need to affect the codecoverage stats with a benchmarking script * Define benchmark dependencies as devDependencies Otherwise considered a proper required dependency from perspective of consuming project * Add test for arrays being completely equal (#117) * Add test for arrays being completely equal It's a nearly useless test, but it does get is-shallow-equal to 100% test coverage See https://codecov.io/gh/WordPress/packages/src/master/packages/is-shallow-equal/index.js#L48 for the one piece of code not currently tested. * fix spacing * add test for object copies * is-shallow-equal: Fall back to strict equality for non-object-like (#116) * Ensure inverse argument order has same test result * is-shallow-equal: Fall back to strict equality for non-object-like * is-shallow-equal: De-snark README.md * is-shallow-equal: Add changelog entry for 1.0.1 * wordcount: Add changelog entry for 1.0.1 * Publish - @wordpress/is-shallow-equal@1.0.1 - @wordpress/wordcount@1.0.1 * Improve hooks docs (#121) * Add a missing `p` in the docs remove -> removep (#120) * Fix/wordcount whitespace only error (#123) * Addresses error thrown when the results of matchWord or matchCharacters returns null. Includes test for the case * Changes as per @tofumatt * Going full ternary * is-shallow-equal: Use implicit index.js for main entry (#124) * Add autop@1.0.5 CHANGELOG entry * Add hooks@1.1.7 CHANGELOG entry * Add is-shallow-equal@1.0.2 CHANGELOG entry * Add wordcount@1.0.2 CHANGELOG entry * Correct autop, hooks latest CHANGELOG versions * Publish - @wordpress/autop@1.0.6 - @wordpress/hooks@1.1.8 - @wordpress/is-shallow-equal@1.0.2 - @wordpress/wordcount@1.0.2 * Add `@wordpress/npm-package-json-lint-config` package (#119) * Add `@wordpress/npm-package-json-lint-config` package * Standardize packages `package.json` format per `@wordpress/npm-package-json-lint` * Add unused `npm-package-json-lint` rules for reference * Update `npm-package-json-lint` to `3.0.0-alpha3` * Add `valid-values-publishConfig` rule with `{"access": "public"}` option for _packages_ repo * use tabs for indentation * Update npm-package-json-lint to v3 * Update npmPackageJsonLintConfig config formatting * Use latest `3.0.1` npm-package-json-lint release and remove `.npmpackagejsonlintrc.json` * Use `lint:pkg-json` as the npmPkgJsonLint script task name * fix `pretest` test script command * Npm package.json lint config: address my own comments * Add is-plain-object as devDependency * Add wordcount@1.0.3 CHANGELOG entry * Add scripts@1.1.5 CHANGELOG entry * Add npm-package-json-lint-config@1.0.0 CHANGELOG entry * Add jest-preset-default@1.0.5 CHANGELOG entry * Add jest-console@1.0.6 CHANGELOG entry * Add i18n@1.1.1 CHANGELOG entry * Add custom-templated-path-webpack-plugin@1.0.2 CHANGELOG entry * Add browserslist-config@2.1.3 CHANGELOG entry * Add babel-preset-default@1.2.1 CHANGELOG entry * Add babel-plugin-makepot@1.0.1 CHANGELOG entry * Add browserslist-config@2.1.4 CHANGELOG entry * Add jest-preset-default@1.0.6 CHANGELOG entry * Add jest-console@1.0.7 CHANGELOG entry * Add a custom Lerna publish commit message (#125) * chore(release): publish - @wordpress/babel-plugin-makepot@1.0.1 - @wordpress/babel-preset-default@1.2.1 - @wordpress/browserslist-config@2.1.4 - @wordpress/custom-templated-path-webpack-plugin@1.0.2 - @wordpress/i18n@1.1.1 - @wordpress/jest-console@1.0.7 - @wordpress/jest-preset-default@1.0.6 - @wordpress/npm-package-json-lint-config@1.0.0 - @wordpress/scripts@1.1.5 - @wordpress/wordcount@1.0.3 * Babel preset: Enable support for async generator functions (#126) * Babel preset: Enabled support for async generator functions * Babel preset: Add unit tests for async generator functions * Babel preset: Update changelog * chore(release): publish - @wordpress/babel-preset-default@1.3.0 - @wordpress/scripts@1.1.6 * chore: update `codecov` to v3, resolves all `npm audit` issues. (#127) * Scripts: Add support for lint-pkg-json script (#128) * Scripts: Add support for lint-pkg-json script * Scripts: Update documentation for `lint-pkg-json` command * Scripts: Update changelog * chore(release): publish - @wordpress/scripts@1.2.0 * Count when a hook that doesn't have any handlers is run. (#134) Fixes #133. * chore(release): publish - @wordpress/hooks@1.2.0 * Jest Console: Add new matchers for console.log and console.info (#137) * Jest Console: Add new matchers for console.log and console.info * Jest-console: Update CHANGELOG with braking changes details * Move packages from temporary directory to packages/ * Remove all the obsolete files from the old packages * Synchronize package.json with the one from packages. * Synchronize lerna.json with the one from packages * Remove old packages build script * Add `is-shallow-equal/benchmark` to codecov ignore * Remove npm-run-all * Packages: Synchronize dependencie to avoid having copies of the same libraries * Tests: Update test config to work with local packages * ESLint initial fixes via --fix * Build: Make Webpack build work again :) * Build: Fix the issue with babel makepot plugin * Packages: Fix all linter errors * Build: Use Lerna 3 for managing packages It folows the setup of Lerna itself which demonstrates "the golden path of local file: specifiers at scale". See: lerna/lerna#1307. * Packages: Fix configuration with newly introduced packages * Testing: Try to fix jest-console tests * Testing: Try to fix jest-console tests * jest-preset-default: Alphabetize dependencies * Testing: Use toThrowError matcher for jest-console
hypest
pushed a commit
that referenced
this issue
Nov 2, 2018
…l-runtime Removes the babel/runtime explicit dependency.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
From prototype testing:
https://make.wordpress.org/design/2017/02/09/initial-gutenberg-prototype-editor-testing/#comment-25060
The text was updated successfully, but these errors were encountered: