forked from WordPress/gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 0
/
embed-placeholder.js
78 lines (76 loc) · 1.82 KB
/
embed-placeholder.js
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
/**
* WordPress dependencies
*/
import { __, _x } from '@wordpress/i18n';
import {
Button,
Placeholder,
ExternalLink,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { BlockIcon } from '@wordpress/block-editor';
const EmbedPlaceholder = ( {
icon,
label,
value,
onSubmit,
onChange,
cannotEmbed,
fallback,
tryAgain,
} ) => {
return (
<Placeholder
icon={ <BlockIcon icon={ icon } showColors /> }
label={ label }
className="wp-block-embed"
instructions={ __(
'Paste a link to the content you want to display on your site.'
) }
>
<form onSubmit={ onSubmit }>
<input
type="url"
value={ value || '' }
className="components-placeholder__input"
aria-label={ label }
placeholder={ __( 'Enter URL to embed here…' ) }
onChange={ onChange }
/>
<Button variant="primary" type="submit">
{ _x( 'Embed', 'button label' ) }
</Button>
</form>
<div className="wp-block-embed__learn-more">
<ExternalLink
href={ __(
'https://wordpress.org/documentation/article/embeds/'
) }
>
{ __( 'Learn more about embeds' ) }
</ExternalLink>
</div>
{ cannotEmbed && (
<VStack spacing={ 3 } className="components-placeholder__error">
<div className="components-placeholder__instructions">
{ __( 'Sorry, this content could not be embedded.' ) }
</div>
<HStack
expanded={ false }
spacing={ 3 }
justify="flex-start"
>
<Button variant="secondary" onClick={ tryAgain }>
{ _x( 'Try again', 'button label' ) }
</Button>{ ' ' }
<Button variant="secondary" onClick={ fallback }>
{ _x( 'Convert to link', 'button label' ) }
</Button>
</HStack>
</VStack>
) }
</Placeholder>
);
};
export default EmbedPlaceholder;