-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Format API #10209
Merged
Merged
Format API #10209
Changes from all commits
Commits
Show all changes
28 commits
Select commit
Hold shift + click to select a range
944d971
Formatting API
ellatrix 578b5e5
Fix image test
ellatrix a995887
WIP: create format lib
ellatrix 636cd2f
Adjust internal value to use format attributes and name instead of el…
ellatrix 321402d
Add activeAttributes prop
ellatrix ac81865
Add FillToolbarSlot and Shortcut
ellatrix 449c789
Editor: Add keyboard shortcuts support for formatters
gziolo dee3216
Fix rebase error
ellatrix 05b4e58
Fix shortcuts
ellatrix 9b6665f
Remove registerCoreFormats
ellatrix 5b533c7
Address feedback
ellatrix 0aef345
Simplify filling slots
ellatrix ebb6604
Fix typos
ellatrix ba72e44
Fix inserter, move url function
ellatrix e9e3530
Fix rebase error
ellatrix b489b38
Enqueue format library styles
ellatrix 69c1da4
Fix formatting on collapsed selection
ellatrix acb1ac1
Remove Token API
ellatrix 6587b97
Remove obsolete RichText.Siblings slot
ellatrix 56ed177
Remove all style imports
ellatrix a5f2f9a
Fix after rebase
ellatrix 63e96ff
Fix dependency issue
ellatrix c2c9889
Use stable key for list of blocks in the inserter
gziolo b6dde3e
Fix Eslint issue for unsuded lodash method
gziolo f2b1fc9
Move Inline Elements to its own component
gziolo 6ac8887
Import rich-text store only in the entry point (follow other modules)
gziolo 35d017d
Rich Text: Expose unregister format type method
gziolo 7fd020f
Don't use index for React element keys
ellatrix File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import IconButton from '../icon-button'; | ||
| import ToolbarButtonContainer from './toolbar-button-container'; | ||
|
|
||
| function ToolbarButton( { | ||
| containerClassName, | ||
| icon, | ||
| title, | ||
| shortcut, | ||
| subscript, | ||
| onClick, | ||
| className, | ||
| isActive, | ||
| isDisabled, | ||
| extraProps, | ||
| children, | ||
| } ) { | ||
| return ( | ||
| <ToolbarButtonContainer className={ containerClassName }> | ||
| <IconButton | ||
| icon={ icon } | ||
| label={ title } | ||
| shortcut={ shortcut } | ||
| data-subscript={ subscript } | ||
| onClick={ ( event ) => { | ||
| event.stopPropagation(); | ||
| onClick(); | ||
| } } | ||
| className={ classnames( | ||
| 'components-toolbar__control', | ||
| className, | ||
| { 'is-active': isActive } | ||
| ) } | ||
| aria-pressed={ isActive } | ||
| disabled={ isDisabled } | ||
| { ...extraProps } | ||
| /> | ||
| { children } | ||
| </ToolbarButtonContainer> | ||
| ); | ||
| } | ||
|
|
||
| export default ToolbarButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| .components-toolbar__control.components-button { | ||
| display: inline-flex; | ||
| align-items: flex-end; | ||
| margin: 0; | ||
| padding: 3px; | ||
| outline: none; | ||
| cursor: pointer; | ||
| position: relative; | ||
| width: $icon-button-size; | ||
| height: $icon-button-size; | ||
|
|
||
| // Unset icon button styles | ||
| &:active, | ||
| &:not([aria-disabled="true"]):hover, | ||
| &:not([aria-disabled="true"]):focus { | ||
| outline: none; | ||
| box-shadow: none; | ||
| background: none; | ||
| border: none; | ||
| } | ||
|
|
||
| // Disabled | ||
| &:disabled { | ||
| cursor: default; | ||
| } | ||
|
|
||
| & > svg { | ||
| padding: 5px; | ||
| border-radius: $radius-round-rectangle; | ||
| height: 30px; | ||
| width: 30px; | ||
| } | ||
|
|
||
| // Subscript for numbered icon buttons, like headings | ||
| &[data-subscript] svg { | ||
| padding: 5px 10px 5px 0; | ||
| } | ||
|
|
||
| &[data-subscript]::after { | ||
| content: attr(data-subscript); | ||
| font-family: $default-font; | ||
| font-size: $default-font-size; | ||
| font-weight: 600; | ||
| line-height: 12px; | ||
| position: absolute; | ||
| right: 8px; | ||
| bottom: 10px; | ||
| } | ||
|
|
||
| // Assign hover style to child element, not the button itself | ||
| &:not(:disabled):not([aria-disabled="true"]):hover { | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| &:not(:disabled).is-active > svg, | ||
| &:not(:disabled):hover > svg { | ||
| @include formatting-button-style__hover; | ||
| } | ||
|
|
||
| // Active & toggled style | ||
| &:not(:disabled).is-active > svg { | ||
| @include formatting-button-style__active; | ||
| } | ||
|
|
||
| &:not(:disabled).is-active[data-subscript]::after { | ||
| color: $white; | ||
| } | ||
|
|
||
| // Focus style | ||
| &:not(:disabled):focus > svg { | ||
| @include formatting-button-style__focus; | ||
| } | ||
| } | ||
|
|
||
| .components-toolbar__control .dashicon { | ||
| display: block; | ||
| } |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@atimmer @pento - this will need to be synced with WordPress code codebase later this week.