# code-block-pro/1.28.0/src/editor/components/seemore/BlockLeft.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.28.0. 75 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.28.0/code/src/editor/components/seemore/BlockLeft.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.28.0/raw/src/editor/components/seemore/BlockLeft.tsx
- Modified: 2026-04-12T13:22:22+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-block-pro/1.28.0/code/src/editor/components/seemore/BlockLeft.tsx#L10-L20`.

```tsx
import { __ } from '@wordpress/i18n';
import { type AnyColor, colord } from 'colord';
import type { Attributes } from '../../../types';
import { findBackgroundColor } from '../../../util/colors';

export const BlockLeft = (
	attributes: Partial<Attributes> & { context?: string },
) => {
	const {
		bgColor,
		textColor,
		seeMoreString,
		disablePadding,
		context,
		footerType,
		seeMoreCollapse,
		seeMoreCollapseString,
	} = attributes;
	let backgroundColor = colord(bgColor as AnyColor).toHex();
	const textC = colord(textColor as AnyColor);
	let color = textC.isDark()
		? textC.lighten(0.05).toHex()
		: textC.darken(0.05).toHex();
	const hasFooter = footerType !== 'none';
	const inEditor = context === 'editor';
	const seeMore = seeMoreString || __('Expand', 'code-block-pro');

	if (bgColor?.startsWith('var(')) {
		backgroundColor = findBackgroundColor(attributes) ?? bgColor;
	}
	if (textColor?.startsWith('var(')) {
		color = textColor;
	}

	return (
		<div
			className="cbp-see-more-container"
			// If the user opted to collapse, store strings
			data-see-more-collapse-string={
				seeMoreCollapse
					? seeMoreCollapseString || __('Collapse', 'code-block-pro')
					: undefined
			}
			data-see-more-string={seeMoreCollapse ? seeMore : undefined}
			style={{
				display: context === 'front' ? 'none' : 'flex',
				flexDirection: 'column',
				alignItems: 'flex-start',
				width: '100%',
				backgroundColor: 'transparent',
				fontSize: '12px',
				lineHeight: '1',
				position: 'relative',
				marginBottom: hasFooter || inEditor ? 0 : '-16px',
				height: hasFooter && !inEditor ? '16px' : '32px',
			}}
		>
			{/* span is used to avoid theme button styling */}
			<span
				role={inEditor ? 'presentation' : 'button'}
				tabIndex={inEditor ? -1 : 0}
				className="cbp-see-more-simple-btn cbp-see-more-simple-btn-hover"
				style={{
					color,
					backgroundColor,
					padding: disablePadding ? '10px 0 0' : '10px 16px',
					cursor: 'default',
				}}
			>
				{seeMore}
			</span>
		</div>
	);
};

```