# top-10/4.3.2/includes/frontend/blocks/src/post-count/edit.js

WebberZone Top 10 — Popular Posts, version 4.3.2. 47 lines.

- Page: https://pluginprobe.com/plugins/top-10/4.3.2/code/includes/frontend/blocks/src/post-count/edit.js
- Raw: https://pluginprobe.com/plugins/top-10/4.3.2/raw/includes/frontend/blocks/src/post-count/edit.js
- Modified: 2026-07-08T12:46:16+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/top-10/4.3.2/code/includes/frontend/blocks/src/post-count/edit.js#L10-L20`.

```javascript
/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';
import './style.scss';

import Controls from './controls';
import PostCountBlock from './post-count-block'; // Import the new component

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @param {Object}   root0              - The root object containing block properties.
 * @param {Object}   root0.context      - The context of the block.
 * @param {Object}   root0.attributes   - The attributes of the block.
 * @param {Function} root0.setAttributes - Function to set the block's attributes.
 *
 * @return {Element} Element to render.
 */
export default function Edit({ context, attributes, setAttributes }) {
	const { textAlign } = attributes;

	const blockProps = useBlockProps({
		className: clsx({
			[`has-text-align-${textAlign}`]: textAlign,
		}),
	});

	return (
		<>
			<Controls attributes={attributes} setAttributes={setAttributes} />
			<div {...blockProps}>
				<PostCountBlock attributes={attributes} context={context} />
			</div>
		</>
	);
}

```