Skip to content
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 28 commits into from Oct 26, 2018
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 Oct 12, 2018
578b5e5
Fix image test
ellatrix Oct 12, 2018
a995887
WIP: create format lib
ellatrix Oct 13, 2018
636cd2f
Adjust internal value to use format attributes and name instead of el…
ellatrix Oct 15, 2018
321402d
Add activeAttributes prop
ellatrix Oct 15, 2018
ac81865
Add FillToolbarSlot and Shortcut
ellatrix Oct 15, 2018
449c789
Editor: Add keyboard shortcuts support for formatters
gziolo Oct 16, 2018
dee3216
Fix rebase error
ellatrix Oct 22, 2018
05b4e58
Fix shortcuts
ellatrix Oct 22, 2018
9b6665f
Remove registerCoreFormats
ellatrix Oct 22, 2018
5b533c7
Address feedback
ellatrix Oct 22, 2018
0aef345
Simplify filling slots
ellatrix Oct 22, 2018
ebb6604
Fix typos
ellatrix Oct 22, 2018
ba72e44
Fix inserter, move url function
ellatrix Oct 23, 2018
e9e3530
Fix rebase error
ellatrix Oct 23, 2018
b489b38
Enqueue format library styles
ellatrix Oct 23, 2018
69c1da4
Fix formatting on collapsed selection
ellatrix Oct 23, 2018
acb1ac1
Remove Token API
ellatrix Oct 23, 2018
6587b97
Remove obsolete RichText.Siblings slot
ellatrix Oct 23, 2018
56ed177
Remove all style imports
ellatrix Oct 24, 2018
a5f2f9a
Fix after rebase
ellatrix Oct 24, 2018
63e96ff
Fix dependency issue
ellatrix Oct 24, 2018
c2c9889
Use stable key for list of blocks in the inserter
gziolo Oct 25, 2018
b6dde3e
Fix Eslint issue for unsuded lodash method
gziolo Oct 25, 2018
f2b1fc9
Move Inline Elements to its own component
gziolo Oct 25, 2018
6ac8887
Import rich-text store only in the entry point (follow other modules)
gziolo Oct 25, 2018
35d017d
Rich Text: Expose unregister format type method
gziolo Oct 25, 2018
7fd020f
Don't use index for React element keys
ellatrix Oct 26, 2018
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.
+1,672 −1,058
Diff settings

Always

Just for now

Copy path View file
@@ -401,6 +401,12 @@
"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/escape-html/README.md",
"parent": "packages"
},
{
"title": "@wordpress/format-library",
"slug": "packages-format-library",
"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/format-library/README.md",
"parent": "packages"
},
{
"title": "@wordpress/hooks",
"slug": "packages-hooks",
Copy path View file
@@ -420,7 +420,12 @@ function gutenberg_register_scripts_and_styles() {
gutenberg_override_script(
'wp-rich-text',
gutenberg_url( 'build/rich-text/index.js' ),
array( 'wp-polyfill', 'wp-escape-html', 'lodash' ),
array(

This comment has been minimized.

Copy link
@gziolo

gziolo Oct 25, 2018

Member

@atimmer @pento - this will need to be synced with WordPress code codebase later this week.

'lodash',
'wp-polyfill',
'wp-data',
'wp-escape-html',
),
filemtime( gutenberg_dir_path() . 'build/rich-text/index.js' ),
true
);
@@ -509,6 +514,23 @@ function gutenberg_register_scripts_and_styles() {
filemtime( gutenberg_dir_path() . 'build/block-library/index.js' ),
true
);
gutenberg_override_script(
'wp-format-library',
gutenberg_url( 'build/format-library/index.js' ),
array(
'wp-components',
'wp-dom',
'wp-editor',
'wp-element',
'wp-i18n',
'wp-keycodes',
'wp-polyfill',
'wp-rich-text',
'wp-url',
),
filemtime( gutenberg_dir_path() . 'build/format-library/index.js' ),
true
);
gutenberg_override_script(
'wp-nux',
gutenberg_url( 'build/nux/index.js' ),
@@ -778,6 +800,14 @@ function gutenberg_register_scripts_and_styles() {
);
wp_style_add_data( 'wp-block-library', 'rtl', 'replace' );
gutenberg_override_style(
'wp-format-library',
gutenberg_url( 'build/format-library/style.css' ),
array(),
filemtime( gutenberg_dir_path() . 'build/format-library/style.css' )
);
wp_style_add_data( 'wp-format-library', 'rtl', 'replace' );
gutenberg_override_style(
'wp-edit-blocks',
gutenberg_url( 'build/block-library/editor.css' ),
@@ -1330,6 +1360,8 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
add_filter( 'user_can_richedit', '__return_true' );
wp_enqueue_script( 'wp-edit-post' );
wp_enqueue_script( 'wp-format-library' );
wp_enqueue_style( 'wp-format-library' );
global $post;
Copy path View file

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Copy path View file
@@ -35,6 +35,7 @@
"@wordpress/editor": "file:packages/editor",
"@wordpress/element": "file:packages/element",
"@wordpress/escape-html": "file:packages/escape-html",
"@wordpress/format-library": "file:packages/format-library",
"@wordpress/hooks": "file:packages/hooks",
"@wordpress/html-entities": "file:packages/html-entities",
"@wordpress/i18n": "file:packages/i18n",
@@ -55,6 +55,7 @@ export { default as TextControl } from './text-control';
export { default as TextareaControl } from './textarea-control';
export { default as ToggleControl } from './toggle-control';
export { default as Toolbar } from './toolbar';
export { default as ToolbarButton } from './toolbar-button';
export { default as Tooltip } from './tooltip';
export { default as TreeSelect } from './tree-select';
export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
@@ -38,4 +38,5 @@
@import "./textarea-control/style.scss";
@import "./toggle-control/style.scss";
@import "./toolbar/style.scss";
@import "./toolbar-button/style.scss";
@import "./tooltip/style.scss";
@@ -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;
@@ -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;
}
@@ -7,10 +7,9 @@ import { flatMap } from 'lodash';
/**
* Internal dependencies
*/
import IconButton from '../icon-button';
import ToolbarButton from '../toolbar-button';
import DropdownMenu from '../dropdown-menu';
import ToolbarContainer from './toolbar-container';
import ToolbarButtonContainer from './toolbar-button-container';

/**
* Renders a toolbar with controls.
@@ -71,28 +70,11 @@ function Toolbar( { controls = [], children, className, isCollapsed, icon, label
<ToolbarContainer className={ classnames( 'components-toolbar', className ) }>
{ flatMap( controlSets, ( controlSet, indexOfSet ) => (
controlSet.map( ( control, indexOfControl ) => (
<ToolbarButtonContainer
<ToolbarButton
key={ [ indexOfSet, indexOfControl ].join() }
className={ indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : null }
>
<IconButton
icon={ control.icon }
label={ control.title }
shortcut={ control.shortcut }
data-subscript={ control.subscript }
onClick={ ( event ) => {
event.stopPropagation();
control.onClick();
} }
className={ classnames( 'components-toolbar__control', control.className, {
'is-active': control.isActive,
} ) }
aria-pressed={ control.isActive }
disabled={ control.isDisabled }
{ ...control.extraProps }
/>
{ control.children }
</ToolbarButtonContainer>
containerClassName={ indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : null }
This conversation was marked as resolved by ellatrix

This comment has been minimized.

Copy link
@gziolo

gziolo Oct 25, 2018

Member

Nice, thanks 👍

{ ...control }
/>
) )
) ) }
{ children }
@@ -39,81 +39,3 @@ div.components-toolbar {
}
}
}

.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;
}
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.