← All changes | assets/src/apps/js/blocks/course-elements/course-button-read-more/edit.js +94 -94 4.3.9 → 4.4.9 View file →

		@@ -1,94 +1,94 @@
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, context } = 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		- let classOfDiv = blockProps.className;
33		- classOfDiv = classOfDiv
34		- .split( ' ' )
35		- .filter( ( cls ) => cls.startsWith( 'align' ) )
36		- .join( ' ' );
37		- return (
38		- <>
39		- <BlockControls>
40		- <AlignmentToolbar
41		- value={ attributes.textAlign }
42		- onChange={ ( newAlign ) => setAttributes( { textAlign: newAlign } ) }
43		- />
44		- <JustifyToolbar
45		- value={ attributes.justifyContent }
46		- onChange={ ( newJustify ) => setAttributes( { justifyContent: newJustify } ) }
47		- />
48		- <BlockVerticalAlignmentToolbar
49		- value={ attributes.alignItems }
50		- onChange={ ( newAlign ) => setAttributes( { alignItems: newAlign } ) }
51		- />
52		- </BlockControls>
53		- <InspectorControls>
54		- <PanelBody title={ __( 'Settings', 'learnpress' ) }>
55		- <ToggleGroupControl
56		- label={ __( 'Width', 'learnpress' ) }
57		- value={ attributes.width || '100' }
58		- onChange={ ( value ) => {
59		- setAttributes( {
60		- width: value || '100',
61		- } );
62		- } }
63		- isBlock={ true }
64		- >
65		- <ToggleGroupControlOption value="25" label="25%" />
66		- <ToggleGroupControlOption value="50" label="50%" />
67		- <ToggleGroupControlOption value="75" label="75%" />
68		- <ToggleGroupControlOption value="100" label="100%" />
69		- </ToggleGroupControl>
70		- </PanelBody>
71		- </InspectorControls>
72		- <div
73		- class="course-button-read-more"
74		- className={ classOfDiv }
75		- style={ {
76		- display: 'flex',
77		- textAlign: attributes.textAlign,
78		- alignItems: mapAlignItems[ attributes.alignItems ] || 'flex-start',
79		- justifyContent: attributes.justifyContent,
80		- } }
81		- >
82		- <a
83		- style={ {
84		- width: attributes.width ? `${ attributes.width }%` : undefined,
85		- } }
86		- >
87		- <button { ...blockProps }>{ __( 'Read more', 'learnpress' ) }</button>
88		- </a>
89		- </div>
90		- </>
91		- );
92		-};
93		-
94		-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, context } = 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	+ let classOfDiv = blockProps.className;
	33	+ classOfDiv = classOfDiv
	34	+ .split( ' ' )
	35	+ .filter( ( cls ) => cls.startsWith( 'align' ) )
	36	+ .join( ' ' );
	37	+ return (
	38	+ <>
	39	+ <BlockControls>
	40	+ <AlignmentToolbar
	41	+ value={ attributes.textAlign }
	42	+ onChange={ ( newAlign ) => setAttributes( { textAlign: newAlign } ) }
	43	+ />
	44	+ <JustifyToolbar
	45	+ value={ attributes.justifyContent }
	46	+ onChange={ ( newJustify ) => setAttributes( { justifyContent: newJustify } ) }
	47	+ />
	48	+ <BlockVerticalAlignmentToolbar
	49	+ value={ attributes.alignItems }
	50	+ onChange={ ( newAlign ) => setAttributes( { alignItems: newAlign } ) }
	51	+ />
	52	+ </BlockControls>
	53	+ <InspectorControls>
	54	+ <PanelBody title={ __( 'Settings', 'learnpress' ) }>
	55	+ <ToggleGroupControl
	56	+ label={ __( 'Width', 'learnpress' ) }
	57	+ value={ attributes.width || '100' }
	58	+ onChange={ ( value ) => {
	59	+ setAttributes( {
	60	+ width: value || '100',
	61	+ } );
	62	+ } }
	63	+ isBlock={ true }
	64	+ >
	65	+ <ToggleGroupControlOption value="25" label="25%" />
	66	+ <ToggleGroupControlOption value="50" label="50%" />
	67	+ <ToggleGroupControlOption value="75" label="75%" />
	68	+ <ToggleGroupControlOption value="100" label="100%" />
	69	+ </ToggleGroupControl>
	70	+ </PanelBody>
	71	+ </InspectorControls>
	72	+ <div
	73	+ class="course-button-read-more"
	74	+ className={ classOfDiv }
	75	+ style={ {
	76	+ display: 'flex',
	77	+ textAlign: attributes.textAlign,
	78	+ alignItems: mapAlignItems[ attributes.alignItems ] || 'flex-start',
	79	+ justifyContent: attributes.justifyContent,
	80	+ } }
	81	+ >
	82	+ <a
	83	+ style={ {
	84	+ width: attributes.width ? `${ attributes.width }%` : undefined,
	85	+ } }
	86	+ >
	87	+ <button { ...blockProps }>{ __( 'Read more', 'learnpress' ) }</button>
	88	+ </a>
	89	+ </div>
	90	+ </>
	91	+ );
	92	+};
	93	+
	94	+export default Edit;