Skip to content

Commit

Permalink
Merge branch 'amp-stories-redux' into fix/block-validation-handling
Browse files Browse the repository at this point in the history
  • Loading branch information
swissspidy committed May 15, 2019
2 parents 474d5e8 + c195425 commit 6978673
Show file tree
Hide file tree
Showing 17 changed files with 253 additions and 87 deletions.
8 changes: 8 additions & 0 deletions assets/css/amp-stories.css
Original file line number Diff line number Diff line change
Expand Up @@ -74,3 +74,11 @@ amp-story-grid-layer amp-img > img {
.is-style-white.wp-block-quote {
background-image: url("../images/quote-white.svg");
}

/**
* See https://github.com/ampproject/amp-wp/issues/2283
*/
.edit-post-layout[data-block-name="core/video"] .edit-post-settings-sidebar__panel-block .block-editor-block-inspector__card + div > .components-panel__body:first-child .components-toggle-control:nth-child(2),
.edit-post-layout[data-block-name="core/video"] .edit-post-settings-sidebar__panel-block .block-editor-block-inspector__card + div > .components-panel__body:first-child .components-toggle-control:nth-child(6) {
display: none;
}
5 changes: 5 additions & 0 deletions assets/css/amp-story-card.css
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ div.amp-block-latest-stories > ul.latest-stories-carousel {
overflow-x: hidden;
}

.amp-story-embed .latest_stories__link:hover {
box-shadow: none;
-webkit-box-shadow: none;
}

/* Applies the darker gradient background, to allow the white text to display even against a white featured image. */
.latest_stories__link:after {
display: block;
Expand Down
6 changes: 3 additions & 3 deletions assets/src/components/block-navigation/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ function BlockNavigation( { blocks, selectBlock, selectedBlockClientId, isReorde
return (
<NavigableMenu
role="presentation"
className="editor-block-navigation__container block-editor-block-navigation__container"
className="block-editor-block-navigation__container"
>
<p className="editor-block-navigation__label">{ __( 'Block Navigation', 'amp' ) }</p>
<p className="block-editor-block-navigation__label">{ __( 'Block Navigation', 'amp' ) }</p>
{ hasBlocks && (
<BlockNavigationList
blocks={ blocks }
Expand All @@ -62,7 +62,7 @@ function BlockNavigation( { blocks, selectBlock, selectedBlockClientId, isReorde
/>
) }
{ ! hasBlocks && (
<p className="editor-block-navigation__paragraph">
<p className="block-editor-block-navigation__paragraph">
{ __( 'No blocks created yet.', 'amp' ) }
</p>
) }
Expand Down
8 changes: 4 additions & 4 deletions assets/src/stories-editor/blocks/amp-story-page/edit.css
Original file line number Diff line number Diff line change
Expand Up @@ -146,10 +146,10 @@ div[data-type="amp/amp-story-page"] .wp-block-image {
* Hackily hide the alignment options from the image block since they are irrelevant for an image block in a story.
* In the future the underlying alignment buttons should be removed entirely. See <https://github.com/ampproject/amp-wp/issues/2115>.
*/
.editor-block-list__block[data-type="core/image"] > div.editor-block-list__block-edit.block-editor-block-list__block-edit > div.editor-block-contextual-toolbar.block-editor-block-contextual-toolbar > div.editor-block-toolbar.block-editor-block-toolbar > div:nth-child(2),
.editor-block-list__block[data-type="core/pullquote"] > div.editor-block-list__block-edit.block-editor-block-list__block-edit > div.editor-block-contextual-toolbar.block-editor-block-contextual-toolbar > div.editor-block-toolbar.block-editor-block-toolbar > div:nth-child(2),
.editor-block-list__block[data-type="core/embed"] > div.editor-block-list__block-edit.block-editor-block-list__block-edit > div.editor-block-contextual-toolbar.block-editor-block-contextual-toolbar > div.editor-block-toolbar.block-editor-block-toolbar > div:nth-child(2),
.editor-block-list__block[data-type="core/video"] > div.editor-block-list__block-edit.block-editor-block-list__block-edit > div.editor-block-contextual-toolbar.block-editor-block-contextual-toolbar > div.editor-block-toolbar.block-editor-block-toolbar > div:nth-child(2) {
.edit-post-layout[data-block-name="core/image"] .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar > .components-toolbar,
.edit-post-layout[data-block-name="core/pullquote"] .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar > .components-toolbar,
.edit-post-layout[data-block-name="core/embed"] .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar > .components-toolbar,
.edit-post-layout[data-block-name="core/video"] .edit-post-header-toolbar__block-toolbar .block-editor-block-toolbar > .components-toolbar {
display: none;
}

Expand Down
2 changes: 1 addition & 1 deletion assets/src/stories-editor/blocks/amp-story-page/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ class EditPage extends Component {
mediaUrl: media.url,
mediaId: media.id,
mediaType,
poster: VIDEO_BACKGROUND_TYPE === mediaType && media.image ? media.image.src : undefined,
poster: VIDEO_BACKGROUND_TYPE === mediaType && media.image && media.image.src !== media.icon ? media.image.src : undefined,
} );
}

Expand Down
28 changes: 4 additions & 24 deletions assets/src/stories-editor/helpers/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { count } from '@wordpress/wordcount';
import { _x } from '@wordpress/i18n';
import { select, dispatch } from '@wordpress/data';
import { createBlock } from '@wordpress/blocks';
import { getColorClassName, RichText } from '@wordpress/block-editor';
import { getColorClassName, getColorObjectByAttributeValues, getFontSize, RichText } from '@wordpress/block-editor';

/**
* Internal dependencies
Expand Down Expand Up @@ -900,17 +900,17 @@ export const getStylesFromBlockAttributes = ( {
} ) => {
const textClass = getColorClassName( 'color', textColor );

const { colors } = select( 'core/block-editor' ).getSettings();
const { colors, fontSizes } = select( 'core/block-editor' ).getSettings();

/*
* Calculate font size using vw to make it responsive.
*
* Get the font size in px based on the slug with fallback to customFontSize.
*/
const userFontSize = fontSize ? getFontSizeFromSlug( fontSize ) : customFontSize;
const userFontSize = fontSize ? getFontSize( fontSizes, fontSize, customFontSize ).size : customFontSize;
const fontSizeResponsive = userFontSize && ( ( userFontSize / STORY_PAGE_INNER_WIDTH ) * 100 ).toFixed( 2 ) + 'vw';

const appliedBackgroundColor = getBackgroundColorWithOpacity( colors, backgroundColor, customBackgroundColor, opacity );
const appliedBackgroundColor = getBackgroundColorWithOpacity( colors, getColorObjectByAttributeValues( colors, backgroundColor, customBackgroundColor ), customBackgroundColor, opacity );

return {
backgroundColor: appliedBackgroundColor,
Expand All @@ -920,26 +920,6 @@ export const getStylesFromBlockAttributes = ( {
};
};

/**
* Get font size from slug.
*
* @param {string} slug A string containing the font slug.
*
* @return {number} Font size in pixels.
*/
const getFontSizeFromSlug = ( slug ) => {
switch ( slug ) {
case 'small':
return 19.5;
case 'large':
return 36.5;
case 'huge':
return 49.5;
default:
return 16;
}
};

/**
* Returns the settings object for the AMP story meta blocks (post title, author, date).
*
Expand Down
25 changes: 17 additions & 8 deletions assets/src/stories-editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ import { ALLOWED_BLOCKS } from './constants';
import store from './store';

const {
getSelectedBlockClientId,
getSelectedBlock,
getBlocksByClientId,
getClientIdsWithDescendants,
getBlockRootClientId,
Expand Down Expand Up @@ -147,25 +147,34 @@ let allBlocksWithChildren = getClientIdsWithDescendants();

let editorMode = getEditorMode();

let selectedBlock;

subscribe( async () => {
maybeInitializeAnimations();

const defaultBlockName = getDefaultBlockName();
const selectedBlockClientId = getSelectedBlockClientId();
const newSelectedBlock = getSelectedBlock();

// Switch default block depending on context
if ( selectedBlockClientId ) {
const selectedBlock = getBlock( selectedBlockClientId );

if ( 'amp/amp-story-page' === selectedBlock.name && 'amp/amp-story-page' !== defaultBlockName ) {
if ( newSelectedBlock ) {
if ( 'amp/amp-story-page' === newSelectedBlock.name && 'amp/amp-story-page' !== defaultBlockName ) {
setDefaultBlockName( 'amp/amp-story-page' );
} else if ( 'amp/amp-story-page' !== selectedBlock.name && 'amp/amp-story-text' !== defaultBlockName ) {
} else if ( 'amp/amp-story-page' !== newSelectedBlock.name && 'amp/amp-story-text' !== defaultBlockName ) {
setDefaultBlockName( 'amp/amp-story-text' );
}
} else if ( ! selectedBlockClientId && 'amp/amp-story-page' !== defaultBlockName ) {
} else if ( 'amp/amp-story-page' !== defaultBlockName ) {
setDefaultBlockName( 'amp/amp-story-page' );
}

if ( selectedBlock !== newSelectedBlock ) {
const editPostLayout = document.querySelector( '.edit-post-layout' );
if ( editPostLayout ) {
editPostLayout.setAttribute( 'data-block-name', newSelectedBlock ? newSelectedBlock.name : '' );
}
}

selectedBlock = newSelectedBlock;

const newBlockOrder = getBlockOrder();
const newlyAddedPages = newBlockOrder.find( ( block ) => ! blockOrder.includes( block ) );
const deletedPages = blockOrder.filter( ( block ) => ! newBlockOrder.includes( block ) );
Expand Down
31 changes: 29 additions & 2 deletions includes/class-amp-story-post-type.php
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,9 @@ public static function register() {
// In the block editor, remove the title from above the AMP Stories embed.
add_filter( 'embed_html', array( __CLASS__, 'remove_title_from_embed' ), 10, 2 );

// Change some attributes for the AMP story embed.
add_filter( 'embed_html', array( __CLASS__, 'change_embed_iframe_attributes' ), 10, 2 );

// Override the render_callback for AMP story embeds.
add_filter( 'pre_render_block', array( __CLASS__, 'override_story_embed_callback' ), 10, 2 );

Expand Down Expand Up @@ -460,7 +463,7 @@ public static function enqueue_general_styles() {
*/
public static function filter_block_editor_settings( $editor_settings, $post ) {
if ( self::POST_TYPE_SLUG === $post->post_type ) {
unset( $editor_settings['colors'] );
unset( $editor_settings['fontSizes'], $editor_settings['colors'] );
}

if ( get_current_screen()->is_block_editor && isset( $editor_settings['styles'] ) ) {
Expand Down Expand Up @@ -1251,7 +1254,7 @@ public static function render_block_latest_stories( $attributes ) {
<?php if ( $is_amp_carousel ) : ?>
<amp-carousel layout="fixed-height" height="<?php echo esc_attr( $min_height ); ?>" type="carousel" class="latest-stories-carousel">
<?php else : ?>
<ul class="latest-stories-carousel" style="height:<?php echo esc_attr( $min_height ); ?>px;">
<ul class="latest-stories-carousel">
<?php endif; ?>
<?php foreach ( $story_query->posts as $post ) : ?>
<<?php echo $is_amp_carousel ? 'div' : 'li'; ?> class="slide latest-stories__slide">
Expand Down Expand Up @@ -1423,4 +1426,28 @@ public static function remove_title_from_embed( $output, $post ) {

return preg_replace( '/<blockquote class="wp-embedded-content">.*?<\/blockquote>/', '', $output );
}

/**
* Changes the height of the AMP Story embed <iframe>.
*
* In the block editor, this embed typically appears in an <iframe>, though on the front-end it's not in an <iframe>.
* The height of the <iframe> isn't enough to display the full story, so this increases it.
*
* @param string $output The embed output.
* @param WP_Post $post The post for the embed.
* @return string The filtered embed output.
*/
public static function change_embed_iframe_attributes( $output, $post ) {
if ( self::POST_TYPE_SLUG !== get_post_type( $post ) ) {
return $output;
}

// Add 4px more height, as the <iframe> needs that to display the full image.
$new_height = strval( ( self::STORY_LARGE_IMAGE_DIMENSION / 2 ) + 4 );
return preg_replace(
'/(<iframe sandbox="allow-scripts"[^>]*\sheight=")(\w+)("[^>]*>)/',
sprintf( '${1}%s${3}', $new_height ),
$output
);
}
}
8 changes: 4 additions & 4 deletions includes/class-amp-theme-support.php
Original file line number Diff line number Diff line change
Expand Up @@ -1176,9 +1176,9 @@ public static function filter_comment_form_defaults( $args ) {
str_replace(
'%s',
sprintf( '" + %s.replyToName + "', $state_id ),
wp_json_encode( $args['title_reply_to'] )
wp_json_encode( $args['title_reply_to'], JSON_UNESCAPED_UNICODE )
),
wp_json_encode( $args['title_reply'] )
wp_json_encode( $args['title_reply'], JSON_UNESCAPED_UNICODE )
);

$args['title_reply_before'] .= sprintf(
Expand Down Expand Up @@ -1261,7 +1261,7 @@ public static function filter_cancel_comment_reply_link( $formatted_link, $link,
esc_url( remove_query_arg( 'replytocom' ) . '#' . $respond_id ),
isset( $_GET['replytocom'] ) ? '' : ' hidden', // phpcs:ignore
esc_attr( sprintf( '%s.values.comment_parent == "0"', self::get_comment_form_state_id( get_the_ID() ) ) ),
esc_attr( sprintf( 'tap:AMP.setState( %s )', wp_json_encode( $tap_state ) ) ),
esc_attr( sprintf( 'tap:AMP.setState( %s )', wp_json_encode( $tap_state, JSON_UNESCAPED_UNICODE ) ) ),
esc_html( $text )
);
}
Expand Down Expand Up @@ -1343,7 +1343,7 @@ public static function ensure_required_markup( DOMDocument $dom, $script_handles
if ( ! $schema_org_meta_script ) {
$script = $dom->createElement( 'script' );
$script->setAttribute( 'type', 'application/ld+json' );
$script->appendChild( $dom->createTextNode( wp_json_encode( amp_get_schemaorg_metadata() ) ) );
$script->appendChild( $dom->createTextNode( wp_json_encode( amp_get_schemaorg_metadata(), JSON_UNESCAPED_UNICODE ) ) );
$head->appendChild( $script );
}

Expand Down
Loading

0 comments on commit 6978673

Please sign in to comment.