PluginProbe ʕ •ᴥ•ʔ
Smart Custom 404 Error Page / trunk
Smart Custom 404 Error Page vtrunk
trunk 11.4.6 11.4.7 11.4.8
404page / assets / js / block.js
404page / assets / js Last commit date
404page-ui.js 5 years ago 404page.js 6 years ago block.js 3 years ago index.php 9 years ago lity.min.js 7 years ago
block.js
84 lines
1 wp.blocks.registerBlockType( 'petersplugins/the-url', {
2
3 title: wp.i18n.__( 'URL causing 404 error', '404page' ),
4 icon: 'editor-unlink',
5 category: 'widgets',
6 attributes: {
7 urltype: {
8 type: 'string',
9 default: 'full'
10 },
11 alignment: {
12 type: 'string',
13 default: 'none'
14 }
15 },
16 supports: {
17 color: true
18 },
19
20 edit( props ) {
21
22 const attributes = props.attributes;
23 const setAttributes = props.setAttributes;
24 const blockProps = wp.blockEditor.useBlockProps();
25
26 const alignmentClass = (attributes.alignment != null) ? 'has-text-align-' + attributes.alignment : '';
27
28 function changeType( newUrltype ) {
29 setAttributes( { urltype: newUrltype } );
30 }
31
32 function changeAlignment( newAlignment ) {
33 setAttributes( {
34 alignment: newAlignment === undefined ? 'none' : newAlignment,
35 } );
36 };
37
38 return wp.element.createElement('div', { className: alignmentClass }, [
39
40 wp.element.createElement( 'p', blockProps, wp.i18n.__( 'The URL that is causing the 404 error is displayed here', '404page' ) ),
41
42 wp.element.createElement( wp.blockEditor.InspectorControls, {}, [
43
44 wp.element.createElement( wp.components.PanelBody, {
45
46 title: wp.i18n.__( 'Display', '404page' ),
47 initialOpen: true
48
49 }, [
50
51 wp.element.createElement( wp.components.SelectControl, {
52 value: attributes.urltype,
53 label: wp.i18n.__( 'Type', '404page' ),
54 onChange: changeType,
55 options: [
56 {value: 'page', label: wp.i18n.__( 'Page', '404page') },
57 {value: 'domainpath', label: wp.i18n.__( 'Domain Path', '404page' ) },
58 {value: 'full', label: wp.i18n.__( 'Full', '404page' ) },
59 ]
60 } )
61
62 ] )
63
64 ] ),
65
66 wp.element.createElement( wp.blockEditor.BlockControls, {}, [
67
68 wp.element.createElement( wp.blockEditor.AlignmentToolbar, {
69 value: attributes.alignment,
70 onChange: changeAlignment
71 } )
72
73 ] )
74 ] )
75 },
76
77 save() {
78
79 const blockProps = wp.blockEditor.useBlockProps.save();
80
81 return null;
82 }
83
84 });