← All changes | assets/src/apps/js/blocks/course-elements/course-button/edit.js +95 -95 4.3.8 → 4.4.8 View file →

		@@ -1,95 +1,95 @@
1		-import { __ } from '@wordpress/i18n';
2		-import {
3		- PanelBody,
4		- __experimentalToggleGroupControl as ToggleGroupControl,
5		- __experimentalToggleGroupControlOption as ToggleGroupControlOption,
6		-} from '@wordpress/components';
7		-
8		-import {
9		- useBlockProps,
10		- BlockControls,
11		- InspectorControls,
12		- AlignmentToolbar,
13		- JustifyToolbar,
14		- BlockVerticalAlignmentToolbar,
15		-} from '@wordpress/block-editor';
16		-
17		-const Edit = ( props ) => {
18		- const { attributes = {}, setAttributes } = props;
19		- const blockProps = useBlockProps( {
20		- style: {
21		- textAlign: attributes.textAlign,
22		- width: '100%',
23		- },
24		- } );
25		-
26		- const mapAlignItems = {
27		- top: 'flex-start',
28		- center: 'center',
29		- bottom: 'flex-end',
30		- };
31		-
32		- // classOfDiv to fix align.
33		- let classOfDiv = blockProps.className;
34		- classOfDiv = classOfDiv
35		- .split( ' ' )
36		- .filter( ( cls ) => cls.startsWith( 'align' ) )
37		- .join( ' ' );
38		-
39		- return (
40		- <>
41		- <BlockControls>
42		- <AlignmentToolbar
43		- value={ attributes.textAlign }
44		- onChange={ ( newAlign ) => setAttributes( { textAlign: newAlign } ) }
45		- />
46		- <JustifyToolbar
47		- value={ attributes.justifyContent }
48		- onChange={ ( newJustify ) => setAttributes( { justifyContent: newJustify } ) }
49		- />
50		- <BlockVerticalAlignmentToolbar
51		- value={ attributes.alignItems }
52		- onChange={ ( newAlign ) => setAttributes( { alignItems: newAlign } ) }
53		- />
54		- </BlockControls>
55		- <InspectorControls>
56		- <PanelBody title={ __( 'Settings', 'learnpress' ) }>
57		- <ToggleGroupControl
58		- label={ __( 'Width', 'learnpress' ) }
59		- value={ attributes.width || '100' }
60		- onChange={ ( value ) => {
61		- setAttributes( {
62		- width: value || '100',
63		- } );
64		- } }
65		- isBlock={ true }
66		- >
67		- <ToggleGroupControlOption value="25" label="25%" />
68		- <ToggleGroupControlOption value="50" label="50%" />
69		- <ToggleGroupControlOption value="75" label="75%" />
70		- <ToggleGroupControlOption value="100" label="100%" />
71		- </ToggleGroupControl>
72		- </PanelBody>
73		- </InspectorControls>
74		- <div
75		- className={ classOfDiv }
76		- style={ {
77		- display: 'flex',
78		- textAlign: attributes.textAlign,
79		- alignItems: mapAlignItems[ attributes.alignItems ] || 'flex-start',
80		- justifyContent: attributes.justifyContent,
81		- } }
82		- >
83		- <a
84		- style={ {
85		- width: attributes.width ? `${ attributes.width }%` : undefined,
86		- } }
87		- >
88		- <button { ...blockProps }>{ __( 'Buy Now', 'learnpress' ) }</button>
89		- </a>
90		- </div>
91		- </>
92		- );
93		-};
94		-
95		-export default Edit;
	1	+import { __ } from '@wordpress/i18n';
	2	+import {
	3	+ PanelBody,
	4	+ __experimentalToggleGroupControl as ToggleGroupControl,
	5	+ __experimentalToggleGroupControlOption as ToggleGroupControlOption,
	6	+} from '@wordpress/components';
	7	+
	8	+import {
	9	+ useBlockProps,
	10	+ BlockControls,
	11	+ InspectorControls,
	12	+ AlignmentToolbar,
	13	+ JustifyToolbar,
	14	+ BlockVerticalAlignmentToolbar,
	15	+} from '@wordpress/block-editor';
	16	+
	17	+const Edit = ( props ) => {
	18	+ const { attributes = {}, setAttributes } = props;
	19	+ const blockProps = useBlockProps( {
	20	+ style: {
	21	+ textAlign: attributes.textAlign,
	22	+ width: '100%',
	23	+ },
	24	+ } );
	25	+
	26	+ const mapAlignItems = {
	27	+ top: 'flex-start',
	28	+ center: 'center',
	29	+ bottom: 'flex-end',
	30	+ };
	31	+
	32	+ // classOfDiv to fix align.
	33	+ let classOfDiv = blockProps.className;
	34	+ classOfDiv = classOfDiv
	35	+ .split( ' ' )
	36	+ .filter( ( cls ) => cls.startsWith( 'align' ) )
	37	+ .join( ' ' );
	38	+
	39	+ return (
	40	+ <>
	41	+ <BlockControls>
	42	+ <AlignmentToolbar
	43	+ value={ attributes.textAlign }
	44	+ onChange={ ( newAlign ) => setAttributes( { textAlign: newAlign } ) }
	45	+ />
	46	+ <JustifyToolbar
	47	+ value={ attributes.justifyContent }
	48	+ onChange={ ( newJustify ) => setAttributes( { justifyContent: newJustify } ) }
	49	+ />
	50	+ <BlockVerticalAlignmentToolbar
	51	+ value={ attributes.alignItems }
	52	+ onChange={ ( newAlign ) => setAttributes( { alignItems: newAlign } ) }
	53	+ />
	54	+ </BlockControls>
	55	+ <InspectorControls>
	56	+ <PanelBody title={ __( 'Settings', 'learnpress' ) }>
	57	+ <ToggleGroupControl
	58	+ label={ __( 'Width', 'learnpress' ) }
	59	+ value={ attributes.width || '100' }
	60	+ onChange={ ( value ) => {
	61	+ setAttributes( {
	62	+ width: value || '100',
	63	+ } );
	64	+ } }
	65	+ isBlock={ true }
	66	+ >
	67	+ <ToggleGroupControlOption value="25" label="25%" />
	68	+ <ToggleGroupControlOption value="50" label="50%" />
	69	+ <ToggleGroupControlOption value="75" label="75%" />
	70	+ <ToggleGroupControlOption value="100" label="100%" />
	71	+ </ToggleGroupControl>
	72	+ </PanelBody>
	73	+ </InspectorControls>
	74	+ <div
	75	+ className={ classOfDiv }
	76	+ style={ {
	77	+ display: 'flex',
	78	+ textAlign: attributes.textAlign,
	79	+ alignItems: mapAlignItems[ attributes.alignItems ] || 'flex-start',
	80	+ justifyContent: attributes.justifyContent,
	81	+ } }
	82	+ >
	83	+ <a
	84	+ style={ {
	85	+ width: attributes.width ? `${ attributes.width }%` : undefined,
	86	+ } }
	87	+ >
	88	+ <button { ...blockProps }>{ __( 'Buy Now', 'learnpress' ) }</button>
	89	+ </a>
	90	+ </div>
	91	+ </>
	92	+ );
	93	+};
	94	+
	95	+export default Edit;