← All changes | src/editor/components/seemore/BlockRight.tsx +47 -71 trunk → 1.13.0 View file →

		@@ -1,74 +1,50 @@
1	1	import { __ } from '@wordpress/i18n';
2		-import { type AnyColor, colord } from 'colord';
3		-import type { Attributes } from '../../../types';
4		-import { findBackgroundColor, findTextColor } from '../../../util/colors';
	2	+import { colord, AnyColor } from 'colord';
	3	+import { Attributes } from '../../../types';
5	4
6		-export const BlockRight = (
7		- attributes: Partial<Attributes> & { context?: string },
8		-) => {
9		- const {
10		- bgColor,
11		- textColor,
12		- seeMoreString,
13		- disablePadding,
14		- context,
15		- footerType,
16		- seeMoreCollapse,
17		- seeMoreCollapseString,
18		- } = attributes;
19		- let backgroundColor = colord(bgColor as AnyColor).toHex();
20		- const textC = colord(textColor as AnyColor);
21		- let color = textC.isDark()
22		- ? textC.lighten(0.05).toHex()
23		- : textC.darken(0.05).toHex();
24		- const hasFooter = footerType !== 'none';
25		- const inEditor = context === 'editor';
26		- const seeMore = seeMoreString || __('Expand', 'code-block-pro');
27		-
28		- if (textColor?.startsWith('var(')) {
29		- color = findTextColor(attributes) ?? textColor;
30		- }
31		- if (bgColor?.startsWith('var(')) {
32		- backgroundColor = findBackgroundColor(attributes) ?? bgColor;
33		- }
34		-
35		- return (
36		- <div
37		- className="cbp-see-more-container"
38		- // If the user opted to collapse, store strings
39		- data-see-more-collapse-string={
40		- seeMoreCollapse
41		- ? seeMoreCollapseString || __('Collapse', 'code-block-pro')
42		- : undefined
43		- }
44		- data-see-more-string={seeMoreCollapse ? seeMore : undefined}
45		- style={{
46		- display: context === 'front' ? 'none' : 'flex',
47		- flexDirection: 'column',
48		- alignItems: 'flex-end',
49		- width: '100%',
50		- backgroundColor: 'transparent',
51		- fontSize: '12px',
52		- lineHeight: '1',
53		- position: 'relative',
54		- marginBottom: hasFooter || inEditor ? 0 : '-16px',
55		- height: hasFooter && !inEditor ? '16px' : '32px',
56		- }}
57		- >
58		- {/* span is used to avoid theme button styling */}
59		- <span
60		- role={inEditor ? 'presentation' : 'button'}
61		- tabIndex={inEditor ? -1 : 0}
62		- className="cbp-see-more-simple-btn cbp-see-more-simple-btn-hover"
63		- style={{
64		- color,
65		- backgroundColor,
66		- padding: disablePadding ? '10px 0 0' : '10px 16px',
67		- cursor: 'default',
68		- }}
69		- >
70		- {seeMore}
71		- </span>
72		- </div>
73		- );
	5	+export const BlockRight = ({
	6	+ bgColor,
	7	+ textColor,
	8	+ seeMoreString,
	9	+ disablePadding,
	10	+ context,
	11	+ footerType,
	12	+}: Partial<Attributes> & { context?: string }) => {
	13	+ const backgroundColor = colord(bgColor as AnyColor).toHex();
	14	+ const textC = colord(textColor as AnyColor);
	15	+ const color = textC.isDark()
	16	+ ? textC.lighten(0.05).toHex()
	17	+ : textC.darken(0.05).toHex();
	18	+ const hasFooter = footerType !== 'none';
	19	+ const inEditor = context === 'editor';
	20	+ return (
	21	+ <div
	22	+ className="cbp-see-more-container"
	23	+ style={{
	24	+ display: context === 'front' ? 'none' : 'flex',
	25	+ flexDirection: 'column',
	26	+ alignItems: 'flex-end',
	27	+ width: '100%',
	28	+ backgroundColor: 'transparent',
	29	+ fontSize: '12px',
	30	+ lineHeight: '1',
	31	+ position: 'relative',
	32	+ marginBottom: hasFooter || inEditor ? 0 : '-16px',
	33	+ height: hasFooter && !inEditor ? '16px' : '32px',
	34	+ }}>
	35	+ {/* span is used to avoid theme button styling */}
	36	+ <span
	37	+ role={inEditor ? 'presentation' : 'button'}
	38	+ tabIndex={inEditor ? -1 : 0}
	39	+ className="cbp-see-more-simple-btn cbp-see-more-simple-btn-hover"
	40	+ style={{
	41	+ color,
	42	+ backgroundColor,
	43	+ padding: disablePadding ? '10px 0 0' : '10px 16px',
	44	+ cursor: 'default',
	45	+ }}>
	46	+ {seeMoreString || __('Expand', 'code-block-pro')}
	47	+ </span>
	48	+ </div>
	49	+ );
74	50	};