From 8880159f80bd9ad6507b11aa71b66e9bb4d9aa25 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 17 Jul 2019 23:19:14 +0300 Subject: [PATCH 1/5] Adjust style to allow custom fonts. --- assets/css/amp-stories-editor.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/assets/css/amp-stories-editor.css b/assets/css/amp-stories-editor.css index fffa54ec71d..f3bb66403a1 100644 --- a/assets/css/amp-stories-editor.css +++ b/assets/css/amp-stories-editor.css @@ -12,9 +12,7 @@ padding-right: 50px; } -#amp-story-editor, -.amp-story-page-preview .editor-styles-wrapper, -.amp-story-resize-container, +.editor-styles-wrapper, .block-editor-block-preview .block-editor-block-preview__content > div { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } From b171ab886ba649a7f8927a4befe3f14c245452e4 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Thu, 18 Jul 2019 12:07:23 +0300 Subject: [PATCH 2/5] Fix fonts. Again. --- assets/css/amp-stories-editor.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/css/amp-stories-editor.css b/assets/css/amp-stories-editor.css index f3bb66403a1..1bf53421b1d 100644 --- a/assets/css/amp-stories-editor.css +++ b/assets/css/amp-stories-editor.css @@ -12,7 +12,8 @@ padding-right: 50px; } -.editor-styles-wrapper, +.editor-styles-wrapper .wp-block:not([data-font-family]), +.editor-styles-wrapper #amp-story-editor, .block-editor-block-preview .block-editor-block-preview__content > div { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } From 1187d73c8af7cb704e6e1f46b97930108dcfbe03 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Thu, 18 Jul 2019 11:31:21 +0200 Subject: [PATCH 3/5] Check block dimensions and font sizes upon font family change --- .../src/stories-editor/blocks/amp-story-text/edit.js | 12 ++++++++---- .../components/with-meta-block-edit.js | 12 ++++++++---- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index c37e7c67ebd..9ffe1421feb 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -42,21 +42,24 @@ class TextBlockEdit extends Component { width, content, ampFitText, + ampFontFamily, } = attributes; - const checkFontSize = ( + const checkFontSize = ampFitText && ( prevProps.attributes.height !== height || prevProps.attributes.width !== width || - prevProps.attributes.content !== content + prevProps.attributes.content !== content || + prevProps.attributes.ampFontFamily !== ampFontFamily ); if ( checkFontSize ) { maybeUpdateFontSize( this.props ); } - const checkBlockDimensions = ( + const checkBlockDimensions = ! ampFitText && ( ! isEqual( prevProps.fontSize, fontSize ) || - ( prevProps.attributes.ampFitText !== ampFitText && ! ampFitText ) + prevProps.attributes.ampFitText !== ampFitText || + prevProps.attributes.ampFontFamily !== ampFontFamily ); if ( checkBlockDimensions ) { @@ -183,6 +186,7 @@ TextBlockEdit.propTypes = { tagName: PropTypes.string, opacity: PropTypes.number, className: PropTypes.string, + ampFontFamily: PropTypes.string, } ).isRequired, isSelected: PropTypes.bool.isRequired, onReplace: PropTypes.func.isRequired, diff --git a/assets/src/stories-editor/components/with-meta-block-edit.js b/assets/src/stories-editor/components/with-meta-block-edit.js index a93f4dc599b..2a800e7be9d 100644 --- a/assets/src/stories-editor/components/with-meta-block-edit.js +++ b/assets/src/stories-editor/components/with-meta-block-edit.js @@ -37,22 +37,25 @@ class MetaBlockEdit extends Component { height, width, ampFitText, + ampFontFamily, } = attributes; // If not selected, only change font size if height or width has changed. - const checkFontSize = ( + const checkFontSize = ampFitText && ( isSelected || prevProps.attributes.height !== height || - prevProps.attributes.width !== width + prevProps.attributes.width !== width || + prevProps.attributes.ampFontFamily !== ampFontFamily ); if ( checkFontSize ) { maybeUpdateFontSize( this.props ); } - const checkBlockDimensions = ( + const checkBlockDimensions = ! ampFitText && ( ! isEqual( prevProps.fontSize, fontSize ) || - ( prevProps.attributes.ampFitText !== ampFitText && ! ampFitText ) + prevProps.attributes.ampFitText !== ampFitText || + prevProps.attributes.ampFontFamily !== ampFontFamily ); if ( checkBlockDimensions ) { @@ -128,6 +131,7 @@ MetaBlockEdit.propTypes = { align: PropTypes.string, opacity: PropTypes.number, autoFontSize: PropTypes.number, + ampFontFamily: PropTypes.string, } ).isRequired, setAttributes: PropTypes.func.isRequired, blockContent: PropTypes.string, From 973576121b0345b4ab3fede402ca75994677a0b9 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Thu, 18 Jul 2019 12:12:20 +0200 Subject: [PATCH 4/5] Update font size when amp-fit-text has been toggled --- assets/src/stories-editor/blocks/amp-story-text/edit.js | 1 + assets/src/stories-editor/components/with-meta-block-edit.js | 1 + 2 files changed, 2 insertions(+) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 9ffe1421feb..57f1887017b 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -46,6 +46,7 @@ class TextBlockEdit extends Component { } = attributes; const checkFontSize = ampFitText && ( + prevProps.attributes.ampFitText !== ampFitText || prevProps.attributes.height !== height || prevProps.attributes.width !== width || prevProps.attributes.content !== content || diff --git a/assets/src/stories-editor/components/with-meta-block-edit.js b/assets/src/stories-editor/components/with-meta-block-edit.js index 2a800e7be9d..5f63c111f2f 100644 --- a/assets/src/stories-editor/components/with-meta-block-edit.js +++ b/assets/src/stories-editor/components/with-meta-block-edit.js @@ -43,6 +43,7 @@ class MetaBlockEdit extends Component { // If not selected, only change font size if height or width has changed. const checkFontSize = ampFitText && ( isSelected || + prevProps.attributes.ampFitText !== ampFitText || prevProps.attributes.height !== height || prevProps.attributes.width !== width || prevProps.attributes.ampFontFamily !== ampFontFamily From f2e7a5e9c8cf949f32d8839e3c47f4aab025f47c Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Thu, 18 Jul 2019 14:22:15 +0200 Subject: [PATCH 5/5] Always resize text blocks when content changes --- .../src/stories-editor/blocks/amp-story-text/edit.js | 9 +++++---- .../components/with-meta-block-edit.js | 12 ++++++------ 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/assets/src/stories-editor/blocks/amp-story-text/edit.js b/assets/src/stories-editor/blocks/amp-story-text/edit.js index 57f1887017b..c1c7a00d376 100644 --- a/assets/src/stories-editor/blocks/amp-story-text/edit.js +++ b/assets/src/stories-editor/blocks/amp-story-text/edit.js @@ -47,10 +47,10 @@ class TextBlockEdit extends Component { const checkFontSize = ampFitText && ( prevProps.attributes.ampFitText !== ampFitText || - prevProps.attributes.height !== height || + prevProps.attributes.ampFontFamily !== ampFontFamily || prevProps.attributes.width !== width || - prevProps.attributes.content !== content || - prevProps.attributes.ampFontFamily !== ampFontFamily + prevProps.attributes.height !== height || + prevProps.attributes.content !== content ); if ( checkFontSize ) { @@ -60,7 +60,8 @@ class TextBlockEdit extends Component { const checkBlockDimensions = ! ampFitText && ( ! isEqual( prevProps.fontSize, fontSize ) || prevProps.attributes.ampFitText !== ampFitText || - prevProps.attributes.ampFontFamily !== ampFontFamily + prevProps.attributes.ampFontFamily !== ampFontFamily || + prevProps.attributes.content !== content ); if ( checkBlockDimensions ) { diff --git a/assets/src/stories-editor/components/with-meta-block-edit.js b/assets/src/stories-editor/components/with-meta-block-edit.js index 5f63c111f2f..36d00c77153 100644 --- a/assets/src/stories-editor/components/with-meta-block-edit.js +++ b/assets/src/stories-editor/components/with-meta-block-edit.js @@ -32,7 +32,7 @@ class MetaBlockEdit extends Component { } componentDidUpdate( prevProps ) { - const { attributes, isSelected, fontSize } = this.props; + const { attributes, fontSize, blockContent } = this.props; const { height, width, @@ -40,13 +40,12 @@ class MetaBlockEdit extends Component { ampFontFamily, } = attributes; - // If not selected, only change font size if height or width has changed. const checkFontSize = ampFitText && ( - isSelected || prevProps.attributes.ampFitText !== ampFitText || - prevProps.attributes.height !== height || + prevProps.attributes.ampFontFamily !== ampFontFamily || prevProps.attributes.width !== width || - prevProps.attributes.ampFontFamily !== ampFontFamily + prevProps.attributes.height !== height || + prevProps.blockContent !== blockContent ); if ( checkFontSize ) { @@ -56,7 +55,8 @@ class MetaBlockEdit extends Component { const checkBlockDimensions = ! ampFitText && ( ! isEqual( prevProps.fontSize, fontSize ) || prevProps.attributes.ampFitText !== ampFitText || - prevProps.attributes.ampFontFamily !== ampFontFamily + prevProps.attributes.ampFontFamily !== ampFontFamily || + prevProps.blockContent !== blockContent ); if ( checkBlockDimensions ) {