Skip to content

Instantly share code, notes, and snippets.

@thrijith

thrijith/post_content.md Secret

Last active Dec 18, 2019
Embed
What would you like to do?
+--------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Field        | Value                                                                                                                                                                                     |
+--------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| post_content | <!-- wp:amp/amp-story-page {"mediaId":278,"mediaType":"video","mediaAlt":"grb_263","poster":"https://ampwp.test/wp-content/uploads/2019/12/1575911837-grb-263-17_1.jpg","autoAdv |
|              | anceAfter":"","autoAdvanceAfterDuration":0,"className":"has-quality-low"} --> <amp-story-page style="background-color:#ffffff" id="ca03be51-eb67-4172-8113-51e7c1d77249" class="wp-block- |
|              | amp-amp-story-page has-quality-low"><amp-story-grid-layer template="fill"><amp-video layout="fill" aria-label="grb_263" src="https://ampwp.test/wp-content/uploads/2019/12/15759 |
|              | 11837-grb-263-17-low.mp4" poster="https://ampwp.test/wp-content/uploads/2019/12/1575911837-grb-263-17_1.jpg" muted autoplay loop></amp-video></amp-story-grid-layer><amp-story-g |
|              | rid-layer template="fill"></amp-story-grid-layer></amp-story-page> <!-- /wp:amp/amp-story-page -->  <!-- wp:amp/amp-story-page {"autoAdvanceAfter":"","autoAdvanceAfterDuration":0,"class |
|              | Name":"has-quality-high"} --> <amp-story-page style="background-color:#ffffff" id="fe25c103-2f2c-450f-8166-565945ff3a3c" class="wp-block-amp-amp-story-page has-quality-high"><amp-story- |
|              | grid-layer template="fill"></amp-story-grid-layer><!-- wp:video {"id":282,"className":"has-quality-medium","positionTop":9.95,"positionLeft":4.88,"width":290,"ampAriaLabel":"grb_263-18" |
|              | ,"rtBackgroundVideoQuality":"medium"} --> <figure class="wp-block-video has-quality-medium"><video autoplay loop poster="https://ampwp.test/wp-content/uploads/2019/12/157591280 |
|              | 0-grb-263-18_1.jpg" src="https://ampwp.test/wp-content/uploads/2019/12/1575912800-grb-263-18.mp4" aria-label="grb_263-18"></video></figure> <!-- /wp:video --></amp-story-page>  |
|              | <!-- /wp:amp/amp-story-page -->                                                                                                                                                           |
+--------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { PanelBody, SelectControl } = wp.components;
const { addFilter } = wp.hooks;
const { __ } = wp.i18n;
const InspectorControls = wp.blockEditor.InspectorControls;
const apiFetch = wp.apiFetch;
// Enable Transcoder settings on the following blocks
const enableTranscoderSettingsOnBlocks = [
'amp/amp-story-page',
'core/video',
];
const { rtTranscoderBlockEditorSupport } = window;
/**
* Add background video quality attribute to block.
*
* @param {object} settings Current block settings.
* @param {string} name Name of block.
*
* @returns {object} Modified block settings.
*/
const addBackgroundVideoQualityControlAttribute = ( settings, name ) => {
if ( ! enableTranscoderSettingsOnBlocks.includes( name ) ) {
return settings;
}
//check if object exists for old Gutenberg version compatibility
if ( typeof settings.attributes !== 'undefined' ) {
settings.attributes = Object.assign( settings.attributes, {
rtBackgroundVideoQuality: {
type: 'string',
default: 'high',
},
} );
}
return settings;
};
addFilter( 'blocks.registerBlockType', 'transcoder/ampStoryBackgroundVideoQuality', addBackgroundVideoQualityControlAttribute );
/**
* Create HOC to add Transcoder settings controls to inspector controls of block.
*/
const withTranscoderSettings = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
// Do nothing if it's another block than our defined ones.
if ( ! enableTranscoderSettingsOnBlocks.includes( props.name ) ) {
return ( <BlockEdit { ...props } /> );
}
const mediaAttributes = props.attributes;
const isAMPStory = 'amp/amp-story-page' === props.name;
const isVideoBlock = 'core/video' === props.name;
const mediaId = isAMPStory ? mediaAttributes.mediaId : mediaAttributes.id;
if ( typeof mediaId !== 'undefined' ) {
if ( typeof mediaAttributes.poster === 'undefined' ) {
if ( isAMPStory && typeof mediaAttributes.mediaType !== 'undefined' &&
'video' === mediaAttributes.mediaType && ! mediaAttributes.mediaUrl.endsWith( 'mp4' ) ) {
props.setAttributes( { poster: rtTranscoderBlockEditorSupport.amp_story_fallback_poster } );
} else if ( isVideoBlock && typeof mediaAttributes.src !== 'undefined' &&
mediaAttributes.src.indexOf( 'blob:' ) !== 0 && ! mediaAttributes.src.endsWith( 'mp4' ) ) {
props.setAttributes( { poster: rtTranscoderBlockEditorSupport.amp_video_fallback_poster } );
}
} else if ( mediaAttributes.poster.endsWith( '-fallback-poster.png' ) ) {
const restBase = '/transcoder/v1/amp-media';
apiFetch( {
path: `${ restBase }/${ mediaId }`,
} ).then( data => {
const videoQuality = props.attributes.rtBackgroundVideoQuality ? props.attributes.rtBackgroundVideoQuality : 'high';
if ( false !== data && null !== data ) {
if ( data.poster.length && data[ videoQuality ].transcodedMedia.length ) {
if ( isAMPStory && typeof mediaAttributes.mediaType !== 'undefined' && 'video' === mediaAttributes.mediaType ) {
props.setAttributes( {
poster: data.poster,
mediaUrl: data[ videoQuality ].transcodedMedia,
src: data[ videoQuality ].transcodedMedia,
rtBackgroundVideoQuality: videoQuality,
} );
} else if ( isVideoBlock ) {
props.setAttributes( {
poster: data.poster,
src: data[ videoQuality ].transcodedMedia,
rtBackgroundVideoQuality: videoQuality,
} );
}
}
}
} );
}
}
const { rtBackgroundVideoQuality } = props.attributes;
// add has-quality-xy class to block
if ( rtBackgroundVideoQuality ) {
props.setAttributes( {
className: `has-quality-${ rtBackgroundVideoQuality }`,
} );
} else {
props.setAttributes( {
rtBackgroundVideoQuality: 'high',
} );
}
return (
<Fragment>
<BlockEdit { ...props }
/>
<InspectorControls>
<PanelBody
title={ __( 'Transcoder Settings', 'transcoder' ) }
initialOpen={ true }
>
<SelectControl
label={ __( 'Background Video Quality', 'transcoder' ) }
value={ rtBackgroundVideoQuality }
options={ [
{ value: 'low', label: __( 'Low', 'transcoder' ) },
{ value: 'medium', label: __( 'Medium', 'transcoder' ) },
{ value: 'high', label: __( 'High', 'transcoder' ) },
] }
onChange={
( selectedQuality ) => {
props.setAttributes( {
rtBackgroundVideoQuality: selectedQuality,
} );
}
}
/>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, 'withTranscoderSettings' );
addFilter( 'editor.BlockEdit', 'rt-transcoder-amp/with-transcoder-settings', withTranscoderSettings );

A plugin that extend core/video block attributes using above filters is active.

  • Upon saving the block with custom attributet this is the post_content.
<!-- wp:video {"id":294,"className":"has-quality-medium","rtBackgroundVideoQuality":"medium"} -->
<figure class="wp-block-video has-quality-medium"><video autoplay poster="https://ampwp.test//wp-content/uploads/2019/12/1575914247-grb-263-20_1.jpg" src="https://ampwp.test/wp-content/uploads/2019/12/1575914247-grb-263-20.mp4"></video></figure>
<!-- /wp:video -->
  • After deactivating the plugin that extens block and refreshing the post, doesn't have any change on the post content
  • While the plugin is deactivated, I updated the blocks different attribute, which removed the custom one.
<!-- wp:video {"id":294,"className":"has-quality-medium"} -->
<figure class="wp-block-video has-quality-medium"><video poster="https://ampwp.test/wp-content/uploads/2019/12/1575914247-grb-263-20_1.jpg" src="https://ampwp.test/wp-content/uploads/2019/12/1575914247-grb-263-20.mp4"></video></figure>
<!-- /wp:video -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment