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 | 1x 1x 1x | /**
* External dependencies
*/
import { PanelBody, TextareaControl, TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { isBetaExtension } from '../../../../../editor';
import useBlockAttributes from '../../hooks/use-block-attributes';
import './index.scss';
const VIDEOPRESS_VIDEO_CHAPTERS_FEATURE = 'videopress/video-chapters';
const isVideoChaptersEnabled =
!! window?.Jetpack_Editor_Initial_State?.available_blocks[ VIDEOPRESS_VIDEO_CHAPTERS_FEATURE ];
const CHARACTERS_PER_LINE = 31;
export default function DetailsControl( { isRequestingVideoItem } ) {
const { attributes, setAttributes } = useBlockAttributes();
if ( ! isVideoChaptersEnabled ) {
return null;
}
const { title, description } = attributes;
const isBeta = isBetaExtension( VIDEOPRESS_VIDEO_CHAPTERS_FEATURE );
// Expands the description textarea to accommodate the description
const minRows = 4;
const maxRows = 12;
const rows = description?.length
? description
.split( '\n' )
.map( line => Math.ceil( line.length / CHARACTERS_PER_LINE ) || 1 )
.reduce( ( sum, current ) => sum + current, 0 )
: minRows;
const descriptionControlRows = Math.min( maxRows, Math.max( rows, minRows ) );
const setTitleAttribute = newTitle => {
setAttributes( { title: newTitle } );
};
const setDescriptionAttribute = newDescription => {
setAttributes( { description: newDescription } );
};
return (
<PanelBody title={ __( 'Details', 'jetpack' ) } className={ isBeta ? 'is-beta' : '' }>
<TextControl
label={ __( 'Title', 'jetpack' ) }
value={ title }
placeholder={ __( 'Video title', 'jetpack' ) }
onChange={ setTitleAttribute }
disabled={ isRequestingVideoItem }
__next40pxDefaultSize={ true }
/>
<TextareaControl
label={ __( 'Description', 'jetpack' ) }
value={ description }
placeholder={ __( 'Video description', 'jetpack' ) }
onChange={ setDescriptionAttribute }
disabled={ isRequestingVideoItem }
rows={ descriptionControlRows }
/>
</PanelBody>
);
}
|