+--------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| 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 --> |
+--------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
-
-
Save thrijith/8cff51c88151a08849faafccb7192d70 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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