From b070ce1cd3b8cc29b543db454e28b314b3fe298a Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Wed, 13 Jul 2022 01:35:22 +0100
Subject: [PATCH] Add new Draftail toolbars and command palette, with new
styles (#8806)
---
CHANGELOG.txt | 2 +
.../CommentableEditor/CommentableEditor.scss | 35 +++------
.../CommentableEditor/CommentableEditor.tsx | 4 +-
client/src/components/Draftail/Draftail.scss | 71 ++++++++++++++-----
.../Draftail/__snapshots__/index.test.js.snap | 14 ++--
client/src/components/Draftail/index.js | 30 +++++---
docs/releases/4.0.md | 2 +
package-lock.json | 14 ++--
package.json | 2 +-
.../templates/wagtailadmin/icons/bold.svg | 4 +-
.../icons/comment-large-outline.svg | 5 --
.../icons/comment-large-reversed.svg | 5 --
.../wagtailadmin/icons/comment-large.svg | 4 --
.../admin/templates/wagtailadmin/icons/h1.svg | 1 +
.../admin/templates/wagtailadmin/icons/h2.svg | 1 +
.../admin/templates/wagtailadmin/icons/h3.svg | 1 +
.../admin/templates/wagtailadmin/icons/h4.svg | 1 +
.../admin/templates/wagtailadmin/icons/h5.svg | 1 +
.../admin/templates/wagtailadmin/icons/h6.svg | 1 +
.../templates/wagtailadmin/icons/italic.svg | 4 +-
.../templates/wagtailadmin/icons/link.svg | 4 +-
.../templates/wagtailadmin/icons/list-ol.svg | 4 +-
.../templates/wagtailadmin/icons/list-ul.svg | 4 +-
wagtail/admin/wagtail_hooks.py | 21 +++---
wagtail/documents/wagtail_hooks.py | 2 +-
25 files changed, 130 insertions(+), 107 deletions(-)
delete mode 100644 wagtail/admin/templates/wagtailadmin/icons/comment-large-outline.svg
delete mode 100644 wagtail/admin/templates/wagtailadmin/icons/comment-large-reversed.svg
delete mode 100644 wagtail/admin/templates/wagtailadmin/icons/comment-large.svg
create mode 100644 wagtail/admin/templates/wagtailadmin/icons/h1.svg
create mode 100644 wagtail/admin/templates/wagtailadmin/icons/h2.svg
create mode 100644 wagtail/admin/templates/wagtailadmin/icons/h3.svg
create mode 100644 wagtail/admin/templates/wagtailadmin/icons/h4.svg
create mode 100644 wagtail/admin/templates/wagtailadmin/icons/h5.svg
create mode 100644 wagtail/admin/templates/wagtailadmin/icons/h6.svg
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 68f78d4e50..2ea43ff02a 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -58,6 +58,8 @@ Changelog
* Migrate the dashboard (home) view header to the shared header template and update designs (Paarth Agarwal)
* Update classes and styles for the shared header templates to align with UI guidelines (Paarth Agarwal)
* Clean up multiple eslint rules usage and configs to align better with the Wagtail coding guidelines (LB (Ben Johnston))
+ * Add inline toolbar for Draftail, to avoid clashing with the page’s header (Thibaud Colas)
+ * Add command palette in rich text editor to change text format with the keyboard only (Thibaud Colas)
* Add a live-updating character count to the Draftail rich text editor (Thibaud Colas)
* Add rich text editor paste to auto-create links (Thibaud Colas)
* Add rich text editor text shortcuts undo, to allow typing text normally detected as a shortcut (Thibaud Colas)
diff --git a/client/src/components/Draftail/CommentableEditor/CommentableEditor.scss b/client/src/components/Draftail/CommentableEditor/CommentableEditor.scss
index 1e649f8d49..7e93b14eb9 100644
--- a/client/src/components/Draftail/CommentableEditor/CommentableEditor.scss
+++ b/client/src/components/Draftail/CommentableEditor/CommentableEditor.scss
@@ -1,35 +1,16 @@
-.Draftail-Toolbar {
- display: flex;
- flex-wrap: wrap;
-
- .Draftail-ToolbarGroup:last-child {
- flex-grow: 1;
- }
-
- .Draftail-CommentControl {
- float: right;
- color: $color-teal;
- }
-}
-
.Draftail-CommentControl .Draftail-ToolbarButton {
- .icon-comment-large-outline {
- display: block;
+ color: theme('colors.teal.100');
+
+ .icon {
+ width: 1.875rem;
+ height: 1.875rem;
}
- .icon-comment-large-reversed {
+ &:not(:hover) .icon-comment-add-reversed {
display: none;
}
- &:hover {
- border-color: transparent;
-
- .icon-comment-large-outline {
- display: none;
- }
-
- .icon-comment-large-reversed {
- display: block;
- }
+ &:hover .icon-comment-add {
+ display: none;
}
}
diff --git a/client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx b/client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx
index db5093849c..2b9ffdbcb7 100644
--- a/client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx
+++ b/client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx
@@ -376,8 +376,8 @@ function getCommentControl(
}`}
icon={
<>
- <Icon name="comment-large-outline" />{' '}
- <Icon name="comment-large-reversed" />
+ <Icon name="comment-add" />
+ <Icon name="comment-add-reversed" />
</>
}
onClick={() => {
diff --git a/client/src/components/Draftail/Draftail.scss b/client/src/components/Draftail/Draftail.scss
index ed265c2482..90cfbaab55 100644
--- a/client/src/components/Draftail/Draftail.scss
+++ b/client/src/components/Draftail/Draftail.scss
@@ -1,13 +1,14 @@
$draftail-editor-text: $color-text-input;
-$draftail-editor-chrome: $color-white;
-$draftail-editor-chrome-text: $color-grey-2;
-$draftail-editor-chrome-active: $color-grey-2;
+$draftail-editor-chrome: theme('colors.primary.DEFAULT');
+$draftail-editor-chrome-text: $color-white;
+$draftail-editor-chrome-active: $color-white;
$draftail-editor-chrome-accent: transparent;
+$draftail-base-spacing: 0.375rem;
$draftail-editor-border: 0;
$draftail-editor-padding: 0.75rem;
-$draftail-editor-background: transparent;
-$draftail-toolbar-radius: 3px;
+$draftail-editor-background: $color-white;
+$draftail-toolbar-radius: 5px;
$draftail-toolbar-icon-size: 1em;
$draftail-editor-font-family: $font-sans;
@@ -74,10 +75,22 @@ $draftail-editor-font-family: $font-sans;
}
}
-.Draftail-ToolbarButton .icon {
- width: $draftail-toolbar-icon-size;
- height: $draftail-toolbar-icon-size;
- vertical-align: middle;
+.Draftail-ToolbarButton,
+.Draftail-ComboBox__option {
+ .icon {
+ width: $draftail-toolbar-icon-size;
+ height: $draftail-toolbar-icon-size;
+ vertical-align: middle;
+ }
+
+ .icon-h1,
+ .icon-h2,
+ .icon-h3,
+ .icon-h4,
+ .icon-h5,
+ .icon-h6 {
+ width: 1.5 * $draftail-toolbar-icon-size;
+ }
}
// When in a .full container, the editor has a specific appearance
@@ -108,7 +121,40 @@ $draftail-editor-font-family: $font-sans;
border: 1px solid $color-grey-3;
}
+.Draftail-MetaToolbar {
+ visibility: hidden;
+
+ .Draftail-Editor:focus-within &,
+ .Draftail-Editor:hover & {
+ visibility: visible;
+ }
+}
+
+.Draftail-ComboBox__option-text {
+ @apply w-label-3;
+}
+
+.Draftail-ToolbarGroup::before {
+ display: none;
+}
+
+.Draftail-ToolbarGroup--controls::before {
+ display: inline-block;
+ height: 1.875rem;
+ background-color: $color-white;
+ opacity: 0.2;
+}
+
.Draftail-ToolbarButton {
+ height: 1.875rem;
+ min-width: 1.875rem;
+ padding: 0;
+ margin-inline-end: 0.625rem;
+
+ .Draftail-ToolbarGroup:last-of-type &:last-of-type {
+ margin-inline-end: 0;
+ }
+
&[disabled] {
opacity: 0.3;
}
@@ -130,10 +176,3 @@ $draftail-editor-font-family: $font-sans;
margin: 1em 0;
padding: 1em 2em;
}
-
-// Temporary workaround for Firefox bug where the placeholder hides the list item markers.
-@supports (-moz-appearance: none) {
- .Draftail-Placeholder {
- display: none;
- }
-}
diff --git a/client/src/components/Draftail/__snapshots__/index.test.js.snap b/client/src/components/Draftail/__snapshots__/index.test.js.snap
index f73d3102da..b62a2e20a6 100644
--- a/client/src/components/Draftail/__snapshots__/index.test.js.snap
+++ b/client/src/components/Draftail/__snapshots__/index.test.js.snap
@@ -13,12 +13,12 @@ Object {
"autoCorrect": null,
"blockTypes": Array [],
"bottomToolbar": [Function],
+ "commandPalette": [Function],
"commandToolbar": [Function],
- "commands": false,
+ "commands": true,
"controls": Array [
Object {
"meta": [Function],
- "type": "MaxLength",
},
],
"decorators": Array [],
@@ -44,16 +44,12 @@ Object {
"onChange": null,
"onFocus": null,
"onSave": [Function],
- "placeholder": "Write here…",
+ "placeholder": "Write something or type ‘/’ to insert a block",
"plugins": Array [],
"rawContentState": null,
"readOnly": false,
- "showRedoControl": Object {
- "description": "Redo",
- },
- "showUndoControl": Object {
- "description": "Undo",
- },
+ "showRedoControl": false,
+ "showUndoControl": false,
"spellCheck": true,
"stateSaveInterval": 250,
"stripPastedStyles": false,
diff --git a/client/src/components/Draftail/index.js b/client/src/components/Draftail/index.js
index d07cc27c15..31f5b2c984 100644
--- a/client/src/components/Draftail/index.js
+++ b/client/src/components/Draftail/index.js
@@ -1,6 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import { DraftailEditor, MetaToolbar } from 'draftail';
+import {
+ DraftailEditor,
+ InlineToolbar,
+ MetaToolbar,
+ CommandPalette,
+} from 'draftail';
import { Provider } from 'react-redux';
import { gettext } from '../../utils/gettext';
@@ -98,6 +103,7 @@ const initEditor = (selector, originalOptions, currentScript) => {
const blockTypes = newOptions.blockTypes || [];
const inlineStyles = newOptions.inlineStyles || [];
const controls = newOptions.controls || [];
+ const commands = newOptions.commands || true;
let entityTypes = newOptions.entityTypes || [];
entityTypes = entityTypes.map(wrapWagtailIcon).map((type) => {
@@ -107,30 +113,32 @@ const initEditor = (selector, originalOptions, currentScript) => {
return { ...plugin, ...type };
});
- controls.push({
- type: 'MaxLength',
- meta: MaxLength,
- });
-
return {
rawContentState: rawContentState,
onSave: serialiseInputValue,
- placeholder: gettext('Write here…'),
+ placeholder: gettext('Write something or type ‘/’ to insert a block'),
spellCheck: true,
enableLineBreak: {
description: gettext('Line break'),
icon: BR_ICON,
},
- bottomToolbar: MetaToolbar,
- showUndoControl: { description: gettext('Undo') },
- showRedoControl: { description: gettext('Redo') },
+ bottomToolbar: (props) => (
+ <>
+ <InlineToolbar {...props} />
+ <MetaToolbar {...props} />
+ </>
+ ),
+ commandPalette: (props) => (
+ <CommandPalette {...props} noResultsText={gettext('No results')} />
+ ),
maxListNesting: 4,
stripPastedStyles: false,
...newOptions,
blockTypes: blockTypes.map(wrapWagtailIcon),
inlineStyles: inlineStyles.map(wrapWagtailIcon),
entityTypes,
- controls,
+ controls: controls.concat([{ meta: MaxLength }]),
+ commands,
enableHorizontalRule,
};
};
diff --git a/docs/releases/4.0.md b/docs/releases/4.0.md
index ffd7065984..1115538e49 100644
--- a/docs/releases/4.0.md
+++ b/docs/releases/4.0.md
@@ -17,6 +17,8 @@ When using a queryset to render a list of images, you can now use the `prefetch_
As part of the page editor redesign project sponsored by Google, we have made a number of improvements to our rich text editor:
+* Inline toolbar: The toolbar now shows inline, to avoid clashing with the page’s header.
+* Command palette: Start a block with a slash ‘/’ to open the palette and change the text format.
* Character count: The character count is displayed underneath the editor, live-updating as you type. This counts the length of the text, not of any formatting.
* Paste to auto-create links: To add a link from your copy-paste clipboard, select text and paste the URL.
* Text shortcuts undo: The editor normally converts text starting with `1. ` to a list item. It’s now possible to un-do this change and keep the text as-is. This works for all Markdown-style shortcuts.
diff --git a/package-lock.json b/package-lock.json
index 1c32fbc255..93c1f5fd5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
"@tippyjs/react": "^4.2.6",
"a11y-dialog": "^7.4.0",
"draft-js": "^0.10.5",
- "draftail": "^2.0.0-alpha.1",
+ "draftail": "^2.0.0-alpha.5",
"draftjs-filters": "^2.5.0",
"focus-trap-react": "^8.4.2",
"immer": "^9.0.6",
@@ -17872,9 +17872,9 @@
}
},
"node_modules/draftail": {
- "version": "2.0.0-alpha.1",
- "resolved": "https://registry.npmjs.org/draftail/-/draftail-2.0.0-alpha.1.tgz",
- "integrity": "sha512-D6IEHS3KBFgnPIy4Et+O2SU8hbpZ+jdLyVCVXD7uifavK5c4ZFQ/w/zkVw7/8HJoMTyUIHNNSOHmdbCPnogQRg==",
+ "version": "2.0.0-alpha.5",
+ "resolved": "https://registry.npmjs.org/draftail/-/draftail-2.0.0-alpha.5.tgz",
+ "integrity": "sha512-7wGDH95FpOAMIUKyG41tVS3YybtRoZnIDSnytVoKDqnA0eqbaV6JsQCN9p3wOWuRsTkMCwzYQbBXnyd4FcMZWg==",
"dependencies": {
"@tippyjs/react": "^4.2.6",
"decorate-component-with-props": "^1.0.2",
@@ -43801,9 +43801,9 @@
}
},
"draftail": {
- "version": "2.0.0-alpha.1",
- "resolved": "https://registry.npmjs.org/draftail/-/draftail-2.0.0-alpha.1.tgz",
- "integrity": "sha512-D6IEHS3KBFgnPIy4Et+O2SU8hbpZ+jdLyVCVXD7uifavK5c4ZFQ/w/zkVw7/8HJoMTyUIHNNSOHmdbCPnogQRg==",
+ "version": "2.0.0-alpha.5",
+ "resolved": "https://registry.npmjs.org/draftail/-/draftail-2.0.0-alpha.5.tgz",
+ "integrity": "sha512-7wGDH95FpOAMIUKyG41tVS3YybtRoZnIDSnytVoKDqnA0eqbaV6JsQCN9p3wOWuRsTkMCwzYQbBXnyd4FcMZWg==",
"requires": {
"@tippyjs/react": "^4.2.6",
"decorate-component-with-props": "^1.0.2",
diff --git a/package.json b/package.json
index 5e3b2b2952..69bbac29d1 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
"@tippyjs/react": "^4.2.6",
"a11y-dialog": "^7.4.0",
"draft-js": "^0.10.5",
- "draftail": "^2.0.0-alpha.1",
+ "draftail": "^2.0.0-alpha.5",
"draftjs-filters": "^2.5.0",
"focus-trap-react": "^8.4.2",
"immer": "^9.0.6",
diff --git a/wagtail/admin/templates/wagtailadmin/icons/bold.svg b/wagtail/admin/templates/wagtailadmin/icons/bold.svg
index a9e07e990d..0807f763a7 100755
--- a/wagtail/admin/templates/wagtailadmin/icons/bold.svg
+++ b/wagtail/admin/templates/wagtailadmin/icons/bold.svg
@@ -1,3 +1,3 @@
-<svg id="icon-bold" viewBox="0 0 16 16">
- <path d="M6.74 13.244c0.439 0.176 0.82 0.264 1.172 0.264 0.732 0 1.348-0.117 1.816-0.352s0.82-0.557 1.025-0.938c0.205-0.41 0.322-0.908 0.322-1.523 0-0.645-0.117-1.143-0.352-1.494-0.322-0.527-0.703-0.879-1.172-1.055-0.439-0.205-1.143-0.293-2.080-0.293-0.41 0-0.674 0.029-0.85 0.088v2.666l0.029 2.256c0 0.088 0.029 0.205 0.088 0.381zM6.623 6.975c0.264 0.059 0.557 0.059 0.938 0.059 0.967 0 1.699-0.176 2.197-0.527 0.498-0.381 0.732-0.996 0.732-1.875 0-0.615-0.234-1.143-0.703-1.582-0.469-0.41-1.172-0.615-2.139-0.615-0.293 0-0.645 0.029-1.084 0.117 0 0.234 0 0.439 0.029 0.645 0.029 0.674 0.059 1.465 0.029 2.314v0.82c0 0.264 0 0.469 0 0.645zM2.111 14.416v-0.762c0.264-0.059 0.439-0.088 0.586-0.117 0.439-0.059 0.762-0.146 1.025-0.264 0.088-0.146 0.146-0.293 0.176-0.41 0.059-0.381 0.088-0.908 0.088-1.641l-0.029-4.16c-0.029-1.406-0.059-2.549-0.088-3.369 0-0.498-0.029-0.791-0.088-0.908 0-0.029-0.029-0.059-0.088-0.117-0.117-0.059-0.293-0.088-0.586-0.117-0.176 0-0.469-0.059-0.938-0.117l-0.059-0.674 2.197-0.059 3.164-0.117h0.381c0.029 0 0.059 0 0.117 0s0.088 0 0.117 0c0 0 0.059 0 0.176 0s0.234 0 0.352 0h0.615c0.498 0 1.025 0.059 1.611 0.234 0.234 0.059 0.498 0.176 0.791 0.322 0.322 0.146 0.615 0.352 0.85 0.615 0.264 0.264 0.439 0.557 0.557 0.879s0.176 0.674 0.176 1.025c0 0.381-0.088 0.762-0.264 1.084-0.205 0.322-0.469 0.615-0.82 0.879-0.146 0.088-0.557 0.322-1.23 0.645 0.967 0.205 1.729 0.615 2.227 1.201s0.762 1.26 0.762 1.992c0 0.41-0.088 0.879-0.234 1.348-0.117 0.352-0.322 0.674-0.586 0.967-0.381 0.41-0.762 0.703-1.172 0.908s-0.996 0.381-1.699 0.498c-0.469 0.088-1.025 0.117-1.67 0.088l-1.641-0.029c-0.469 0-1.318 0.029-2.49 0.088-0.205 0.029-0.967 0.059-2.285 0.088z"></path>
+<svg id="icon-bold" viewBox="0 0 384 512">
+ <path d="M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z"/>
</svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/comment-large-outline.svg b/wagtail/admin/templates/wagtailadmin/icons/comment-large-outline.svg
deleted file mode 100644
index 8a36c90edc..0000000000
--- a/wagtail/admin/templates/wagtailadmin/icons/comment-large-outline.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<svg id="icon-comment-large-outline" viewBox="0 0 17 17">
- <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
- <path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.5C1 2.937 4.563 0 9 0c4.406 0 8 2.938 8 6.5 0 3.594-3.594 6.5-8 6.5-1.031 0-2-.156-2.906-.438C5.188 13.22 3.656 14 1.75 14c-.312 0-.594-.156-.719-.438-.093-.28-.062-.593.157-.812.03 0 1-1.063 1.437-2.281C1.594 9.375 1 8 1 6.5zm5.531 4.625A8.15 8.15 0 009 11.5c3.563 0 6.5-2.219 6.5-5 0-2.75-2.937-5-6.5-5-3.594 0-6.5 2.25-6.5 5 0 1.344.656 2.344 1.219 2.938l.656.687-.344.875a5.844 5.844 0 01-.625 1.25 6.976 6.976 0 001.813-.906l.594-.438.718.219zm3.125-5.406h1.969a.45.45 0 01.438.437v.438a.44.44 0 01-.438.437H9.656V9a.44.44 0 01-.437.438H8.78A.432.432 0 018.344 9V7.031H6.375a.432.432 0 01-.437-.437v-.438a.44.44 0 01.437-.437h1.969V3.75a.44.44 0 01.437-.438h.438a.45.45 0 01.437.438v1.969z" fill="#007D7E"></path>
-</svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/comment-large-reversed.svg b/wagtail/admin/templates/wagtailadmin/icons/comment-large-reversed.svg
deleted file mode 100644
index 2f50760e56..0000000000
--- a/wagtail/admin/templates/wagtailadmin/icons/comment-large-reversed.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
-<svg id="icon-comment-large-reversed" viewBox="0 0 17 17">
- <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
- <path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.5C1 2.937 4.563 0 9 0c4.406 0 8 2.938 8 6.5 0 3.594-3.594 6.5-8 6.5a9.81 9.81 0 01-3.375-.594C4.875 13.031 3.313 14 1.25 14c-.125 0-.187-.031-.25-.125a.3.3 0 01.063-.281.83.83 0 01.074-.094c.284-.337 1.296-1.541 1.644-2.906C1.656 9.469 1 8.063 1 6.5zm8.656-.781h1.969a.45.45 0 01.438.437v.438a.44.44 0 01-.438.437H9.656V9a.44.44 0 01-.437.438H8.78A.432.432 0 018.344 9V7.031H6.375a.432.432 0 01-.438-.437v-.438a.44.44 0 01.438-.437h1.969V3.75a.44.44 0 01.437-.438h.438a.45.45 0 01.437.438v1.969z" fill="#007D7E"></path>
-</svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/comment-large.svg b/wagtail/admin/templates/wagtailadmin/icons/comment-large.svg
deleted file mode 100644
index a4fc09d1b2..0000000000
--- a/wagtail/admin/templates/wagtailadmin/icons/comment-large.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg id="icon-comment-large" viewBox="0 0 17 14">
- <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
- <path d="M9 0C4.563 0 1 2.938 1 6.5c0 1.563.656 2.969 1.781 4.094-.406 1.594-1.718 2.969-1.718 3a.3.3 0 00-.063.281c.063.094.125.125.25.125 2.063 0 3.625-.969 4.375-1.594A9.81 9.81 0 009 13c4.406 0 8-2.906 8-6.5C17 2.937 13.406 0 9 0zM5 7.5c-.562 0-1-.438-1-1 0-.531.438-1 1-1 .531 0 1 .469 1 1 0 .563-.469 1-1 1zm4 0c-.562 0-1-.438-1-1 0-.531.438-1 1-1 .531 0 1 .469 1 1 0 .563-.469 1-1 1zm4 0c-.562 0-1-.438-1-1 0-.531.438-1 1-1 .531 0 1 .469 1 1 0 .563-.469 1-1 1z" fill="#007D7E"></path>
-</svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/h1.svg b/wagtail/admin/templates/wagtailadmin/icons/h1.svg
new file mode 100644
index 0000000000..df3e744964
--- /dev/null
+++ b/wagtail/admin/templates/wagtailadmin/icons/h1.svg
@@ -0,0 +1 @@
+<svg id="icon-h1" viewBox="0 0 768 512"><path d="M448.143 107.429h29.714c7.429 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.428-14.857-14.857-14.857H329.286c-8.357 0-14.857 7.429-14.857 14.857v29.714c0 8.358 6.5 14.858 14.857 14.858H359v118.857H180.714V107.429h29.715c7.428 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.429-14.857-14.857-14.857H61.857C53.5 48 47 55.429 47 62.857v29.714c0 8.358 6.5 14.858 14.857 14.858h29.714v297.142H61.857C53.5 404.571 47 412 47 419.429v29.714C47 457.5 53.5 464 61.857 464H210.43c7.428 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.429-14.858-14.857-14.858h-29.715V285.714H359v118.857h-29.714c-8.357 0-14.857 7.429-14.857 14.858v29.714c0 8.357 6.5 14.857 14.857 14.857h148.571c7.429 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.428-14.858-14.857-14.858h-29.714V107.429ZM675.411 434.286V117.411h-74.982c-24.84 15.553-51.304 32.5-75.679 49.678v67.554c22.75-15.786 50.607-33.661 71.5-47.357h3.25v247h75.911Z"/></svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/h2.svg b/wagtail/admin/templates/wagtailadmin/icons/h2.svg
new file mode 100644
index 0000000000..0db1163e25
--- /dev/null
+++ b/wagtail/admin/templates/wagtailadmin/icons/h2.svg
@@ -0,0 +1 @@
+<svg id="icon-h2" viewBox="0 0 768 512"><path d="M429.143 107.429h29.714c7.429 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.428-14.857-14.857-14.857H310.286c-8.357 0-14.857 7.429-14.857 14.857v29.714c0 8.358 6.5 14.858 14.857 14.858H340v118.857H161.714V107.429h29.715c7.428 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.429-14.857-14.857-14.857H42.857C34.5 48 28 55.429 28 62.857v29.714c0 8.358 6.5 14.858 14.857 14.858h29.714v297.142H42.857C34.5 404.571 28 412 28 419.429v29.714C28 457.5 34.5 464 42.857 464H191.43c7.428 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.429-14.858-14.857-14.858h-29.715V285.714H340v118.857h-29.714c-8.357 0-14.857 7.429-14.857 14.858v29.714c0 8.357 6.5 14.857 14.857 14.857h148.571c7.429 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.428-14.858-14.857-14.858h-29.714V107.429ZM579.107 216.536v-4.875c0-22.054 16.482-40.161 40.857-40.161 23.215 0 39.929 15.089 39.929 37.839 0 20.661-12.304 37.607-34.589 60.357L512.482 386.929v47.357h228.429v-60.822H615.786v-2.553l62.91-67.786c39.697-41.089 56.643-65.464 56.643-101.446 0-52.929-44.571-89.84-111.66-89.84-69.411 0-116.304 44.107-116.304 100.286v4.411h71.732Z"/></svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/h3.svg b/wagtail/admin/templates/wagtailadmin/icons/h3.svg
new file mode 100644
index 0000000000..6cc62a00c4
--- /dev/null
+++ b/wagtail/admin/templates/wagtailadmin/icons/h3.svg
@@ -0,0 +1 @@
+<svg id="icon-h3" viewBox="0 0 768 512"><path d="M424.143 107.429h29.714c7.429 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.428-14.857-14.857-14.857H305.286c-8.357 0-14.857 7.429-14.857 14.857v29.714c0 8.358 6.5 14.858 14.857 14.858H335v118.857H156.714V107.429h29.715c7.428 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.429-14.857-14.857-14.857H37.857C29.5 48 23 55.429 23 62.857v29.714c0 8.358 6.5 14.858 14.857 14.858h29.714v297.142H37.857C29.5 404.571 23 412 23 419.429v29.714C23 457.5 29.5 464 37.857 464H186.43c7.428 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.429-14.858-14.857-14.858h-29.715V285.714H335v118.857h-29.714c-8.357 0-14.857 7.429-14.857 14.858v29.714c0 8.357 6.5 14.857 14.857 14.857h148.571c7.429 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.428-14.858-14.857-14.858h-29.714V107.429ZM583.161 299.643h35.053c32.5 0 50.143 18.107 50.143 40.625.232 23.678-18.571 41.553-49.214 41.553-29.714 0-49.911-16.714-51.536-39.464H497.5c.696 51.768 38.536 97.732 119.786 97.732 68.018 0 127.91-35.982 127.446-94.946C744.268 295 708.75 271.089 678.107 269v-3.25c23.911-3.25 57.572-25.768 57.107-70.804-.464-49.214-49.678-83.107-114.91-83.107-74.054 0-116.304 39.929-118.393 96.34h71.268c.696-19.036 16.017-39.233 44.107-39.233 25.535 0 43.178 15.554 43.41 35.983 0 22.053-17.41 38.071-44.107 38.071h-33.428v56.643Z"/></svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/h4.svg b/wagtail/admin/templates/wagtailadmin/icons/h4.svg
new file mode 100644
index 0000000000..5413a9359f
--- /dev/null
+++ b/wagtail/admin/templates/wagtailadmin/icons/h4.svg
@@ -0,0 +1 @@
+<svg id="icon-h4" viewBox="0 0 768 512"><path d="M417.143 107.429h29.714c7.429 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.428-14.857-14.857-14.857H298.286c-8.357 0-14.857 7.429-14.857 14.857v29.714c0 8.358 6.5 14.858 14.857 14.858H328v118.857H149.714V107.429h29.715c7.428 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.429-14.857-14.857-14.857H30.857C22.5 48 16 55.429 16 62.857v29.714c0 8.358 6.5 14.858 14.857 14.858h29.714v297.142H30.857C22.5 404.571 16 412 16 419.429v29.714C16 457.5 22.5 464 30.857 464H179.43c7.428 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.429-14.858-14.857-14.858h-29.715V285.714H328v118.857h-29.714c-8.357 0-14.857 7.429-14.857 14.858v29.714c0 8.357 6.5 14.857 14.857 14.857h148.571c7.429 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.428-14.858-14.857-14.858h-29.714V107.429ZM605.411 117.411c-39.929 65.928-80.322 133.714-115.607 201.964v60.821h152.75v54.09h71.5v-54.09h37.142v-60.125h-37.142v-202.66H605.411Zm-48.75 202.66v-.928c25.303-50.839 53.857-99.822 82.875-146.714h3.018v147.642h-85.893Z"/></svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/h5.svg b/wagtail/admin/templates/wagtailadmin/icons/h5.svg
new file mode 100644
index 0000000000..467b2ef0fc
--- /dev/null
+++ b/wagtail/admin/templates/wagtailadmin/icons/h5.svg
@@ -0,0 +1 @@
+<svg id="icon-h5" viewBox="0 0 768 512"><path d="M420.143 107.429h29.714c7.429 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.428-14.857-14.857-14.857H301.286c-8.357 0-14.857 7.429-14.857 14.857v29.714c0 8.358 6.5 14.858 14.857 14.858H331v118.857H152.714V107.429h29.715c7.428 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.429-14.857-14.857-14.857H33.857C25.5 48 19 55.429 19 62.857v29.714c0 8.358 6.5 14.858 14.857 14.858h29.714v297.142H33.857C25.5 404.571 19 412 19 419.429v29.714C19 457.5 25.5 464 33.857 464H182.43c7.428 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.429-14.858-14.857-14.858h-29.715V285.714H331v118.857h-29.714c-8.357 0-14.857 7.429-14.857 14.858v29.714c0 8.357 6.5 14.857 14.857 14.857h148.571c7.429 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.428-14.858-14.857-14.858h-29.714V107.429ZM502.321 345.607c1.161 51.768 43.411 94.482 119.554 94.482 74.054 0 126.982-43.643 126.982-114.91 0-65.465-49.446-104.233-104.232-104.233-38.768 0-60.821 16.947-67.786 27.161h-3.018l6.5-70.803h145.786v-60.125H519.964L506.5 304.982h68.018c5.803-12.303 21.589-28.089 48.518-28.089 29.714 0 51.535 21.125 51.535 52 0 32.268-24.607 52.232-51.535 52.232-27.857 0-47.822-14.393-51.072-35.518h-69.643Z"/></svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/h6.svg b/wagtail/admin/templates/wagtailadmin/icons/h6.svg
new file mode 100644
index 0000000000..31bedf5c4c
--- /dev/null
+++ b/wagtail/admin/templates/wagtailadmin/icons/h6.svg
@@ -0,0 +1 @@
+<svg id="icon-h6" viewBox="0 0 768 512"><path d="M424.143 107.429h29.714c7.429 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.428-14.857-14.857-14.857H305.286c-8.357 0-14.857 7.429-14.857 14.857v29.714c0 8.358 6.5 14.858 14.857 14.858H335v118.857H156.714V107.429h29.715c7.428 0 14.857-6.5 14.857-14.858V62.857c0-7.428-7.429-14.857-14.857-14.857H37.857C29.5 48 23 55.429 23 62.857v29.714c0 8.358 6.5 14.858 14.857 14.858h29.714v297.142H37.857C29.5 404.571 23 412 23 419.429v29.714C23 457.5 29.5 464 37.857 464H186.43c7.428 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.429-14.858-14.857-14.858h-29.715V285.714H335v118.857h-29.714c-8.357 0-14.857 7.429-14.857 14.858v29.714c0 8.357 6.5 14.857 14.857 14.857h148.571c7.429 0 14.857-6.5 14.857-14.857v-29.714c0-7.429-7.428-14.858-14.857-14.858h-29.714V107.429ZM738.464 199.357c-1.857-39.464-37.839-87.286-109.339-87.286-80.321 0-129.304 60.822-129.304 168.072 0 51.071 12.072 91 33.893 118.161 21.822 27.392 53.857 41.785 93.322 41.785 65.696 0 118.625-40.16 118.625-111.893 0-66.392-47.125-102.839-98.893-102.839-42.947 0-63.839 25.536-71.964 45.036h-3.483c-1.625-53.161 15.786-100.054 56.179-100.054 22.75 0 38.304 13.929 40.625 29.018h70.339ZM579.679 330.982c0-30.411 19.964-50.607 47.125-50.607 25.767 0 46.428 19.036 46.428 50.607 0 31.804-20.428 50.375-46.428 50.375-26.465 0-47.125-19.268-47.125-50.375Z"/></svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/italic.svg b/wagtail/admin/templates/wagtailadmin/icons/italic.svg
index 83c6534fd0..5445186730 100755
--- a/wagtail/admin/templates/wagtailadmin/icons/italic.svg
+++ b/wagtail/admin/templates/wagtailadmin/icons/italic.svg
@@ -1,3 +1,3 @@
-<svg id="icon-italic" viewBox="0 0 16 16">
- <path d="M3.723 14.416l0.146-0.703c0-0.029 0.234-0.088 0.645-0.176 0.41-0.117 0.732-0.205 0.967-0.322 0.146-0.205 0.264-0.498 0.322-0.85l0.234-1.172 0.586-2.783c0.029-0.234 0.088-0.469 0.117-0.703 0.059-0.234 0.117-0.41 0.146-0.557s0.088-0.264 0.117-0.381c0.029-0.117 0.029-0.205 0.059-0.264s0.029-0.088 0.029-0.088l0.234-1.318 0.146-0.527 0.176-1.143 0.088-0.41v-0.322c-0.234-0.117-0.645-0.205-1.23-0.234-0.146 0-0.264-0.029-0.293-0.029l0.146-0.85 2.666 0.117c0.205 0 0.41 0 0.586 0 0.381 0 0.967-0.029 1.816-0.059 0.176-0.029 0.352-0.029 0.557-0.059 0.205 0 0.293 0 0.293 0 0 0.088-0.029 0.205-0.029 0.293-0.059 0.176-0.088 0.322-0.117 0.439-0.322 0.117-0.615 0.205-0.908 0.264-0.352 0.088-0.645 0.176-0.85 0.264-0.059 0.176-0.146 0.41-0.205 0.732-0.059 0.234-0.088 0.469-0.117 0.674-0.234 1.113-0.41 1.963-0.557 2.578l-0.498 2.607-0.322 1.318-0.352 1.963-0.117 0.381c0 0.029 0 0.117 0.029 0.205 0.352 0.088 0.674 0.146 0.996 0.176 0.205 0.029 0.381 0.059 0.557 0.088-0.029 0.176-0.029 0.322-0.059 0.498-0.059 0.176-0.088 0.293-0.088 0.352-0.088 0-0.176 0-0.205 0-0.117 0-0.234 0-0.352 0-0.029 0-0.117 0-0.234 0-0.088-0.029-0.498-0.088-1.201-0.146l-1.67-0.029c-0.205 0-0.703 0.029-1.436 0.088-0.41 0.059-0.703 0.059-0.82 0.088z"></path>
+<svg id="icon-italic" viewBox="0 0 320 512">
+ <path d="M320 48v32a16 16 0 0 1-16 16h-62.76l-80 320H208a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h62.76l80-320H112a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z"/>
</svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/link.svg b/wagtail/admin/templates/wagtailadmin/icons/link.svg
index 4c60f69557..7ade0b3555 100755
--- a/wagtail/admin/templates/wagtailadmin/icons/link.svg
+++ b/wagtail/admin/templates/wagtailadmin/icons/link.svg
@@ -1,3 +1,3 @@
-<svg id="icon-link" viewBox="0 0 16 16">
- <path d="M12.889 10.999c0-0.192-0.055-0.385-0.22-0.522l-1.62-1.62c-0.137-0.165-0.33-0.22-0.549-0.22s-0.385 0.082-0.549 0.247c0 0 0.055 0.055 0.137 0.137s0.137 0.137 0.165 0.165c0.027 0.027 0.082 0.082 0.137 0.165 0.055 0.055 0.082 0.11 0.082 0.192 0.027 0.055 0.027 0.137 0.027 0.22 0 0.192-0.055 0.385-0.22 0.522-0.137 0.137-0.302 0.22-0.522 0.22-0.082 0-0.137 0-0.22-0.027-0.055-0.027-0.137-0.055-0.192-0.11-0.082-0.027-0.11-0.082-0.165-0.11-0.027-0.027-0.082-0.082-0.165-0.165s-0.11-0.137-0.137-0.137c-0.165 0.137-0.247 0.33-0.247 0.549s0.055 0.412 0.22 0.549l1.593 1.62c0.165 0.137 0.33 0.22 0.549 0.22 0.192 0 0.385-0.082 0.522-0.22l1.154-1.126c0.165-0.165 0.22-0.33 0.22-0.549zM7.368 5.479c0-0.22-0.055-0.385-0.22-0.522l-1.593-1.648c-0.165-0.137-0.33-0.22-0.549-0.22-0.192 0-0.385 0.082-0.522 0.22l-1.154 1.154c-0.165 0.137-0.22 0.33-0.22 0.522 0 0.22 0.055 0.385 0.22 0.522l1.62 1.648c0.137 0.137 0.33 0.22 0.549 0.22s0.385-0.082 0.549-0.247c0-0.027-0.055-0.082-0.137-0.165s-0.137-0.137-0.165-0.165c-0.027-0.027-0.082-0.082-0.137-0.137-0.055-0.082-0.082-0.137-0.082-0.192-0.027-0.082-0.027-0.137-0.027-0.22 0-0.22 0.055-0.385 0.22-0.549 0.137-0.137 0.302-0.22 0.522-0.22 0.082 0 0.137 0.027 0.22 0.027 0.055 0.027 0.137 0.055 0.192 0.11 0.082 0.055 0.11 0.082 0.165 0.11 0.027 0.027 0.082 0.082 0.165 0.165s0.11 0.137 0.137 0.165c0.165-0.165 0.247-0.357 0.247-0.577zM14.4 10.999c0 0.632-0.22 1.181-0.659 1.593l-1.154 1.154c-0.439 0.439-0.961 0.659-1.593 0.659s-1.181-0.22-1.593-0.659l-1.62-1.648c-0.439-0.412-0.659-0.961-0.659-1.593s0.22-1.181 0.687-1.62l-0.687-0.687c-0.439 0.439-0.989 0.687-1.62 0.687s-1.181-0.22-1.62-0.659l-1.62-1.648c-0.439-0.439-0.659-0.961-0.659-1.593s0.22-1.154 0.659-1.593l1.154-1.154c0.439-0.439 0.961-0.632 1.593-0.632s1.181 0.22 1.593 0.659l1.62 1.62c0.439 0.439 0.659 0.961 0.659 1.593s-0.22 1.181-0.687 1.648l0.687 0.687c0.439-0.467 0.989-0.687 1.62-0.687s1.181 0.22 1.62 0.659l1.62 1.62c0.439 0.439 0.659 0.989 0.659 1.593z"></path>
+<svg id="icon-link" viewBox="0 0 512 512">
+ <path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>
</svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/list-ol.svg b/wagtail/admin/templates/wagtailadmin/icons/list-ol.svg
index bdeb720fb4..46f19b7525 100755
--- a/wagtail/admin/templates/wagtailadmin/icons/list-ol.svg
+++ b/wagtail/admin/templates/wagtailadmin/icons/list-ol.svg
@@ -1,3 +1,3 @@
-<svg id="icon-list-ol" viewBox="0 0 16 16">
- <path d="M4.451 12.997c0 0.362-0.121 0.652-0.386 0.869-0.241 0.217-0.555 0.314-0.917 0.314-0.507 0-0.893-0.145-1.207-0.459l0.41-0.603c0.217 0.217 0.459 0.314 0.724 0.314 0.145 0 0.241-0.048 0.338-0.097 0.121-0.072 0.169-0.169 0.169-0.29 0-0.314-0.241-0.435-0.724-0.386l-0.193-0.386c0.048-0.048 0.121-0.145 0.217-0.314 0.121-0.145 0.217-0.266 0.314-0.362 0.072-0.097 0.169-0.193 0.241-0.266v-0.024c-0.072 0-0.193 0.024-0.338 0.024s-0.266 0-0.338 0v0.362h-0.724v-1.038h2.293v0.603l-0.652 0.797c0.241 0.048 0.435 0.169 0.555 0.338 0.145 0.169 0.217 0.362 0.217 0.603zM4.451 8.676v1.086h-2.486c-0.024-0.169-0.048-0.29-0.048-0.362 0-0.241 0.072-0.459 0.169-0.652s0.241-0.338 0.386-0.459c0.145-0.121 0.314-0.241 0.459-0.338s0.29-0.193 0.386-0.29c0.121-0.097 0.169-0.217 0.169-0.314 0-0.121-0.048-0.217-0.097-0.266-0.072-0.072-0.169-0.097-0.29-0.097-0.193 0-0.386 0.145-0.555 0.41l-0.579-0.41c0.121-0.241 0.266-0.435 0.483-0.555s0.483-0.193 0.748-0.193c0.314 0 0.603 0.097 0.845 0.29 0.217 0.193 0.338 0.435 0.338 0.772 0 0.217-0.072 0.435-0.241 0.628-0.145 0.193-0.314 0.338-0.507 0.435-0.193 0.121-0.362 0.241-0.531 0.362-0.145 0.121-0.241 0.241-0.241 0.362h0.869v-0.41zM14.18 10.873v1.328c0 0.048-0.024 0.097-0.072 0.145s-0.097 0.072-0.145 0.072h-8.401c-0.048 0-0.097-0.024-0.145-0.072s-0.072-0.097-0.072-0.145v-1.328c0-0.072 0.024-0.121 0.072-0.169 0.048-0.024 0.097-0.048 0.145-0.048h8.401c0.048 0 0.097 0.024 0.145 0.048 0.048 0.048 0.072 0.097 0.072 0.169zM4.476 4.669v0.676h-2.317v-0.676h0.748c0-0.193 0-0.459 0-0.845 0-0.362 0-0.652 0-0.821v-0.097h-0.024c-0.024 0.072-0.145 0.217-0.338 0.386l-0.483-0.531 0.941-0.869h0.724v2.776zM14.18 7.348v1.304c0 0.072-0.024 0.121-0.072 0.169s-0.097 0.072-0.145 0.072h-8.401c-0.048 0-0.097-0.024-0.145-0.072s-0.072-0.097-0.072-0.169v-1.304c0-0.072 0.024-0.121 0.072-0.169s0.097-0.072 0.145-0.072h8.401c0.048 0 0.097 0.024 0.145 0.072s0.072 0.097 0.072 0.169zM14.18 3.8v1.328c0 0.072-0.024 0.121-0.072 0.169-0.048 0.024-0.097 0.048-0.145 0.048h-8.401c-0.048 0-0.097-0.024-0.145-0.048-0.048-0.048-0.072-0.097-0.072-0.169v-1.328c0-0.048 0.024-0.097 0.072-0.145s0.097-0.072 0.145-0.072h8.401c0.048 0 0.097 0.024 0.145 0.072s0.072 0.097 0.072 0.145z"></path>
+<svg id="icon-list-ol" viewBox="0 0 512 512">
+ <path d="m61.77 401 17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z">
</svg>
diff --git a/wagtail/admin/templates/wagtailadmin/icons/list-ul.svg b/wagtail/admin/templates/wagtailadmin/icons/list-ul.svg
index b00abef5d4..47c53ed6d4 100755
--- a/wagtail/admin/templates/wagtailadmin/icons/list-ul.svg
+++ b/wagtail/admin/templates/wagtailadmin/icons/list-ul.svg
@@ -1,3 +1,3 @@
-<svg id="icon-list-ul" viewBox="0 0 16 16">
- <path d="M4.241 11.759c0 0.412-0.154 0.721-0.412 1.004-0.283 0.283-0.618 0.412-1.004 0.412s-0.721-0.129-1.004-0.412c-0.283-0.283-0.412-0.592-0.412-1.004 0-0.386 0.129-0.721 0.412-1.004 0.283-0.257 0.618-0.412 1.004-0.412s0.721 0.155 1.004 0.412c0.257 0.283 0.412 0.618 0.412 1.004zM4.241 8c0 0.386-0.154 0.721-0.412 1.004-0.283 0.283-0.618 0.412-1.004 0.412s-0.721-0.129-1.004-0.412c-0.283-0.283-0.412-0.618-0.412-1.004s0.129-0.721 0.412-1.004c0.283-0.283 0.618-0.412 1.004-0.412s0.721 0.129 1.004 0.412c0.257 0.283 0.412 0.618 0.412 1.004zM14.592 11.064v1.416c0 0.052-0.026 0.103-0.077 0.155s-0.103 0.077-0.155 0.077h-8.961c-0.051 0-0.103-0.026-0.154-0.077s-0.077-0.103-0.077-0.155v-1.416c0-0.077 0.026-0.129 0.077-0.18 0.051-0.026 0.103-0.052 0.154-0.052h8.961c0.052 0 0.103 0.026 0.155 0.052 0.052 0.052 0.077 0.103 0.077 0.18zM4.241 4.241c0 0.386-0.154 0.721-0.412 1.004-0.283 0.257-0.618 0.412-1.004 0.412s-0.721-0.154-1.004-0.412c-0.283-0.283-0.412-0.618-0.412-1.004 0-0.412 0.129-0.721 0.412-1.004s0.618-0.412 1.004-0.412c0.386 0 0.721 0.129 1.004 0.412 0.257 0.283 0.412 0.592 0.412 1.004zM14.592 7.305v1.39c0 0.077-0.026 0.129-0.077 0.18s-0.103 0.077-0.155 0.077h-8.961c-0.051 0-0.103-0.026-0.154-0.077s-0.077-0.103-0.077-0.18v-1.39c0-0.077 0.026-0.129 0.077-0.18s0.103-0.077 0.154-0.077h8.961c0.052 0 0.103 0.026 0.155 0.077s0.077 0.103 0.077 0.18zM14.592 3.52v1.416c0 0.077-0.026 0.129-0.077 0.18-0.052 0.026-0.103 0.051-0.155 0.051h-8.961c-0.051 0-0.103-0.026-0.154-0.051-0.051-0.051-0.077-0.103-0.077-0.18v-1.416c0-0.051 0.026-0.103 0.077-0.155s0.103-0.077 0.154-0.077h8.961c0.052 0 0.103 0.026 0.155 0.077s0.077 0.103 0.077 0.155z"></path>
+<svg id="icon-list-ul" viewBox="0 0 512 512">
+ <path d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z">
</svg>
diff --git a/wagtail/admin/wagtail_hooks.py b/wagtail/admin/wagtail_hooks.py
index 6ac23f854e..6b22363263 100644
--- a/wagtail/admin/wagtail_hooks.py
+++ b/wagtail/admin/wagtail_hooks.py
@@ -486,7 +486,7 @@ def register_core_features(features):
"h1",
draftail_features.BlockFeature(
{
- "label": "H1",
+ "icon": "h1",
"type": "header-one",
"description": gettext("Heading %(level)d") % {"level": 1},
}
@@ -507,7 +507,7 @@ def register_core_features(features):
"h2",
draftail_features.BlockFeature(
{
- "label": "H2",
+ "icon": "h2",
"type": "header-two",
"description": gettext("Heading %(level)d") % {"level": 2},
}
@@ -528,7 +528,7 @@ def register_core_features(features):
"h3",
draftail_features.BlockFeature(
{
- "label": "H3",
+ "icon": "h3",
"type": "header-three",
"description": gettext("Heading %(level)d") % {"level": 3},
}
@@ -549,7 +549,7 @@ def register_core_features(features):
"h4",
draftail_features.BlockFeature(
{
- "label": "H4",
+ "icon": "h4",
"type": "header-four",
"description": gettext("Heading %(level)d") % {"level": 4},
}
@@ -570,7 +570,7 @@ def register_core_features(features):
"h5",
draftail_features.BlockFeature(
{
- "label": "H5",
+ "icon": "h5",
"type": "header-five",
"description": gettext("Heading %(level)d") % {"level": 5},
}
@@ -591,7 +591,7 @@ def register_core_features(features):
"h6",
draftail_features.BlockFeature(
{
- "label": "H6",
+ "icon": "h6",
"type": "header-six",
"description": gettext("Heading %(level)d") % {"level": 6},
}
@@ -947,9 +947,6 @@ def register_icons(icons):
"comment.svg",
"comment-add.svg",
"comment-add-reversed.svg",
- "comment-large.svg",
- "comment-large-outline.svg",
- "comment-large-reversed.svg",
"cross.svg",
"cut.svg",
"date.svg",
@@ -975,6 +972,12 @@ def register_icons(icons):
"globe.svg",
"grip.svg",
"group.svg",
+ "h1.svg",
+ "h2.svg",
+ "h3.svg",
+ "h4.svg",
+ "h5.svg",
+ "h6.svg",
"help.svg",
"history.svg",
"home.svg",
diff --git a/wagtail/documents/wagtail_hooks.py b/wagtail/documents/wagtail_hooks.py
index 176a2b4366..b99808217b 100644
--- a/wagtail/documents/wagtail_hooks.py
+++ b/wagtail/documents/wagtail_hooks.py
@@ -87,7 +87,7 @@ def register_document_feature(features):
draftail_features.EntityFeature(
{
"type": "DOCUMENT",
- "icon": "doc-full",
+ "icon": "doc-full-inverse",
"description": gettext("Document"),
},
js=["wagtaildocs/js/document-chooser-modal.js"],