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.

Sign up for GitHub

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

[AMP Stories] Ability to resize text block. #1972

Merged
merged 15 commits into from
Mar 19, 2019
Merged

[AMP Stories] Ability to resize text block. #1972

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c6ab80a
Add ResizableBox for Text block.
miina Mar 15, 2019
08a8612
Merge remote-tracking branch 'origin/amp-stories-redux' into amp-stor…
miina Mar 15, 2019
aa453a1
Adjust styles for resizer.
miina Mar 15, 2019
9f210db
Merge remote-tracking branch 'origin/amp-stories-redux' into amp-stor…
miina Mar 18, 2019
685d187
Adjust styles after Gutenberg updates.
miina Mar 18, 2019
5d24258
Display resizing dots only when hovering.
miina Mar 18, 2019
006bd89
Replicate amp-fit-text within editor.
miina Mar 18, 2019
55d5212
Prevent block wrappers having 100% width
miina Mar 18, 2019
38fcca4
Merge branch 'amp-stories-redux' into amp-story/1965-text_block_resize
swissspidy Mar 19, 2019
f24f1d8
Refactor code, move calculation function to helpers.
miina Mar 19, 2019
898ab53
Use percentage values for width and height of the text block.
miina Mar 19, 2019
7ce2945
Use amp-fit-text in the frontend.
miina Mar 19, 2019
0cc8ee3
CS fix.
miina Mar 19, 2019
1919ff0
Hide “Drop files to upload” text when dragging elements
swissspidy Mar 19, 2019
ffd0271
Remove errant MediaUploadCheck component
swissspidy Mar 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions assets/css/amp-stories.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,3 @@ amp-story-grid-layer[template="fill"] .wp-block-image { margin: 0; }
.has-background {
padding: 10px !important;
}

amp-story-grid-layer > * {
width: auto !important;
swissspidy marked this conversation as resolved.
Show resolved Hide resolved
}
80 changes: 60 additions & 20 deletions assets/src/blocks/amp-story-text/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import classnames from 'classnames';
*/
import { __ } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
import { PanelBody, SelectControl, withFallbackStyles } from '@wordpress/components';
import { PanelBody, ResizableBox, SelectControl, withFallbackStyles } from '@wordpress/components';
import { compose } from '@wordpress/compose';
import {
RichText,
Expand Down Expand Up @@ -46,22 +46,29 @@ function TextBlock( props ) {
setAttributes,
className,
fontSize,
isSelected,
setFontSize,
backgroundColor,
textColor,
setBackgroundColor,
setTextColor,
fallbackTextColor,
fallbackBackgroundColor,
toggleSelection,
} = props;

const {
placeholder,
content,
type,
ampFontFamily,
height,
width,
} = attributes;

const minTextHeight = 20;
const minTextWidth = 30;

return (
<Fragment>
<InspectorControls>
Expand Down Expand Up @@ -116,26 +123,59 @@ function TextBlock( props ) {
/>
</PanelColorSettings>
</InspectorControls>
<RichText
identifier="content"
wrapperClassName="wp-block-amp-story-text"
tagName="p"
value={ content }
onChange={ ( value ) => setAttributes( { content: value } ) }
style={ {
backgroundColor: backgroundColor.color,
color: textColor.color,
fontSize: fontSize.size ? fontSize.size + 'px' : undefined,
<ResizableBox
className={ classnames(
'amp-story-text__resize-container',
{ 'is-selected': isSelected }
) }
size={ {
height,
width,
} }
minHeight={ minTextHeight }
minWidth={ minTextWidth }
enable={ {
top: true,
right: true,
bottom: true,
left: true,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false,
swissspidy marked this conversation as resolved.
Show resolved Hide resolved
} }
onResizeStop={ ( event, direction, elt, delta ) => {
setAttributes( {
width: parseInt( width + delta.width, 10 ),
height: parseInt( height + delta.height, 10 ),
} );
toggleSelection( true );
} }
onResizeStart={ () => {
toggleSelection( false );
} }
className={ classnames( className, {
'has-text-color': textColor.color,
'has-background': backgroundColor.color,
[ backgroundColor.class ]: backgroundColor.class,
[ textColor.class ]: textColor.class,
[ fontSize.class ]: fontSize.class,
} ) }
placeholder={ placeholder || __( 'Write text…', 'amp' ) }
/>
>
<RichText
identifier="content"
wrapperClassName="wp-block-amp-story-text"
tagName="p"
value={ content }
onChange={ ( value ) => setAttributes( { content: value } ) }
style={ {
backgroundColor: backgroundColor.color,
color: textColor.color,
fontSize: fontSize.size ? fontSize.size + 'px' : undefined,
} }
className={ classnames( className, {
'has-text-color': textColor.color,
'has-background': backgroundColor.color,
[ backgroundColor.class ]: backgroundColor.class,
[ textColor.class ]: textColor.class,
[ fontSize.class ]: fontSize.class,
} ) }
placeholder={ placeholder || __( 'Write text…', 'amp' ) }
/>
</ResizableBox>
</Fragment>
);
}
Expand Down
12 changes: 12 additions & 0 deletions assets/src/blocks/amp-story-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,14 @@ const schema = {
customBackgroundColor: {
type: 'string',
},
height: {
default: 50,
type: 'number',
},
width: {
default: 100,
type: 'number',
},
};

export const settings = {
Expand Down Expand Up @@ -94,6 +102,8 @@ export const settings = {
textColor,
customBackgroundColor,
customTextColor,
width,
height,
} = attributes;

const textClass = getColorClassName( 'color', textColor );
Expand All @@ -114,6 +124,8 @@ export const settings = {
backgroundColor: backgroundClass ? undefined : customBackgroundColor,
color: textClass ? undefined : customTextColor,
fontSize: fontSizeClass ? undefined : customFontSize,
width,
height,
};

return (
Expand Down