Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 18x 72x 72x 18x 54x 54x 54x 54x 54x | import { RichText, useBlockProps } from '@wordpress/block-editor';
import { createHigherOrderComponent } from '@wordpress/compose';
import clsx from 'clsx';
import { getVideoPressUrl } from './url';
const VideoPressSave = CoreVideoSave => props => {
const {
attributes: {
autoplay,
caption,
controls,
guid,
loop,
muted,
playsinline,
poster,
preload,
videoPressClassNames,
className,
align,
seekbarColor,
seekbarPlayedColor,
seekbarLoadingColor,
useAverageColor,
maxWidth,
} = {},
} = props;
if ( ! guid ) {
/**
* We return the element produced by the render so Gutenberg can add the block class when cloning the element.
* This is due to the fact that React's `cloneElement` ignores the class name when we clone a component to be
* rendered (i.e. `cloneElement( <CoreVideoSave { ...props } />, { className: 'wp-block-video' } )`).
*
* @see https://github.com/WordPress/gutenberg/blob/3f1324b53cc8bb45d08d12d5321d6f88510bed09/packages/blocks/src/api/serializer.js#L78-L96
* @see https://github.com/WordPress/gutenberg/blob/c5f9bd88125282a0c35f887cc8d835f065893112/packages/editor/src/hooks/generated-class-name.js#L42
* @see https://github.com/Automattic/wp-calypso/pull/30546#issuecomment-463637946
*/
return CoreVideoSave( props );
}
const blockProps = useBlockProps.save( {
className: clsx( 'wp-block-video', className, videoPressClassNames, {
[ `align${ align }` ]: align,
} ),
} );
const url = getVideoPressUrl( guid, {
autoplay,
controls,
loop,
muted,
playsinline,
poster,
preload,
seekbarColor,
seekbarPlayedColor,
seekbarLoadingColor,
useAverageColor,
} );
let embedWrapperStyle = {};
Iif ( maxWidth && maxWidth.length > 0 && '100%' !== maxWidth ) {
embedWrapperStyle = {
maxWidth,
margin: 'auto',
};
}
return (
<figure { ...blockProps }>
<div className="wp-block-embed__wrapper" style={ embedWrapperStyle }>
{ `\n${ url }\n` /* URL needs to be on its own line. */ }
</div>
{ ! RichText.isEmpty( caption ) && (
<RichText.Content tagName="figcaption" value={ caption } />
) }
</figure>
);
};
export default createHigherOrderComponent( VideoPressSave, 'withVideoPressSave' );
|