Fix block API usage for wp 6.7

.changeset/fast-walls-study.md

@@ -0,0 +1,5 @@
+---
+"wptelegram-login": patch
+---
+
+Fixed the issue of block editor Zoom out not being visible when the plugin is active

plugins/wptelegram-login/js/blocks/telegram-login/Edit.tsx

@@ -1,4 +1,5 @@
 import { InspectorControls } from '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
 import type { BlockEditProps } from '@wordpress/blocks';
 import {
 	Flex,
@@ -9,7 +10,6 @@ import {
 	ToggleControl,
 } from '@wordpress/components';
 import { useCallback, useEffect } from '@wordpress/element';
-
 import { __ } from '@wpsocio/i18n';
 
 import { Output } from './Output';
@@ -28,7 +28,6 @@ const savedSettings = (window.wptelegram_login?.savedSettings ||
 export const Edit: React.FC<BlockEditProps<TelegramLoginAtts>> = ({
 	attributes,
 	setAttributes,
-	className,
 }) => {
 	const {
 		button_style,
@@ -71,6 +70,8 @@ export const Edit: React.FC<BlockEditProps<TelegramLoginAtts>> = ({
 		[setAttributes],
 	);
 
+	const blockProps = useBlockProps();
+
 	return (
 		<>
 			<InspectorControls>
@@ -114,7 +115,9 @@ export const Edit: React.FC<BlockEditProps<TelegramLoginAtts>> = ({
 					</Flex>
 				</PanelBody>
 			</InspectorControls>
-			<Output attributes={attributes} className={className} />
+			<div {...blockProps}>
+				<Output attributes={attributes} className={blockProps.className} />
+			</div>
 		</>
 	);
 };

plugins/wptelegram-login/js/blocks/telegram-login/index.tsx

@@ -17,6 +17,7 @@ const savedSettings = (window.wptelegram_login?.savedSettings ||
 	{}) as TelegramLoginAtts;
 
 registerBlockType<TelegramLoginAtts>('wptelegram/login', {
+	apiVersion: 3,
 	title: __('WP Telegram Login'),
 	icon: 'smartphone',
 	category: 'wptelegram',

plugins/wptelegram-login/js/blocks/telegram-login/style.scss

@@ -1,14 +1,10 @@
 /**
  * #.# Editor Styles
  */
-.wp-block {
-    .wp-block-wptelegram-login {
-        text-align: center;
-
-        img {
-            cursor: pointer;
-            vertical-align: middle;
-            margin-left: 6px;
-        }
-    }
+.wp-block-wptelegram-login {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
 }

plugins/wptelegram-widget/js/blocks/ajax-channel-feed/Edit.tsx

@@ -1,4 +1,4 @@
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { Dashicon, Flex, PanelBody, TextControl } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
@@ -14,7 +14,6 @@ const savedSettings = (window.wptelegram_widget?.savedSettings ||
 export const Edit: React.FC<BlockEditProps<AjaxWidgetAtts>> = ({
 	attributes,
 	setAttributes,
-	className,
 }) => {
 	const { widget_width, widget_height, username } = attributes;
 
@@ -53,18 +52,20 @@ export const Edit: React.FC<BlockEditProps<AjaxWidgetAtts>> = ({
 							label={__('Widget Width')}
 							value={widget_width}
 							onChange={onChangeWidth}
+							placeholder={`300 ${__('or')} 100%`}
 							__nextHasNoMarginBottom
 						/>
 						<TextControl
 							label={__('Widget Height')}
 							value={widget_height}
 							onChange={onChangeHeight}
+							placeholder={`300 ${__('or')} 100%`}
 							__nextHasNoMarginBottom
 						/>
 					</Flex>
 				</PanelBody>
 			</InspectorControls>
-			<div className={className}>
+			<div {...useBlockProps()}>
 				<div className="widget-label">
 					<Dashicon icon="shortcode" />
 					<span>{__('Telegram Channel Ajax Feed')}</span>

plugins/wptelegram-widget/js/blocks/ajax-channel-feed/index.tsx

@@ -1,3 +1,4 @@
+import { useBlockProps } from '@wordpress/block-editor';
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wpsocio/i18n';
 
@@ -9,14 +10,15 @@ import { blockAttributes } from './constants';
 import './style.scss';
 
 registerBlockType<AjaxWidgetAtts>('wptelegram/widget-ajax-channel-feed', {
+	apiVersion: 3,
 	title: __('Telegram Channel Ajax Feed'),
 	icon: 'format-aside',
 	category: 'wptelegram',
 	attributes: blockAttributes,
 	edit: Edit,
 	save: ({ attributes }) => {
 		return (
-			<div>
+			<div {...useBlockProps.save()}>
 				<Output attributes={attributes} />
 			</div>
 		);

plugins/wptelegram-widget/js/blocks/ajax-channel-feed/style.scss

@@ -1,7 +1,7 @@
 /**
  * #.# Editor Styles
  */
- .block-editor .wp-block-wptelegram-widget-ajax-channel-feed {
+ .wp-block-wptelegram-widget-ajax-channel-feed {
     cursor: pointer;
     flex-direction: row;
     padding: 14px;

plugins/wptelegram-widget/js/blocks/channel-feed/Edit.tsx

@@ -1,4 +1,4 @@
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import type { BlockEditProps } from '@wordpress/blocks';
 import {
 	Dashicon,
@@ -23,7 +23,6 @@ const getAuthorPhotoOptions = () => [
 export const Edit: React.FC<BlockEditProps<LegacyWidgetAtts>> = ({
 	attributes,
 	setAttributes,
-	className,
 }) => {
 	const { widget_width, author_photo, num_messages } = attributes;
 
@@ -44,7 +43,7 @@ export const Edit: React.FC<BlockEditProps<LegacyWidgetAtts>> = ({
 	const onChangeNum = useCallback(
 		(newValue: string) =>
 			setAttributes({
-				num_messages: Number.parseInt(newValue) || 5,
+				num_messages: (Number.parseInt(newValue) || 5).toString(),
 			}),
 		[setAttributes],
 	);
@@ -58,9 +57,7 @@ export const Edit: React.FC<BlockEditProps<LegacyWidgetAtts>> = ({
 							label={__('Widget Width')}
 							value={widget_width}
 							onChange={onChangeWidth}
-							type="number"
-							min="10"
-							max="100"
+							placeholder={`300 ${__('or')} 100%`}
 							__nextHasNoMarginBottom
 						/>
 						<RadioControl
@@ -81,7 +78,7 @@ export const Edit: React.FC<BlockEditProps<LegacyWidgetAtts>> = ({
 					</Flex>
 				</PanelBody>
 			</InspectorControls>
-			<div className={className} key="shortcode">
+			<div {...useBlockProps()} key="shortcode">
 				<div className="widget-label">
 					<Dashicon icon="shortcode" />
 					<span>{__('Telegram Channel Feed')}</span>

plugins/wptelegram-widget/js/blocks/channel-feed/index.tsx

@@ -1,3 +1,4 @@
+import { useBlockProps } from '@wordpress/block-editor';
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wpsocio/i18n';
 
@@ -8,14 +9,15 @@ import { blockAttributes } from './constants';
 import './style.scss';
 
 registerBlockType('wptelegram/widget-channel-feed', {
+	apiVersion: 3,
 	title: __('Telegram Channel Feed'),
 	icon: 'format-aside',
 	category: 'wptelegram',
 	attributes: blockAttributes,
 	edit: Edit,
 	save: ({ attributes }) => {
 		return (
-			<div>
+			<div {...useBlockProps.save()}>
 				<Output attributes={attributes} />
 			</div>
 		);

plugins/wptelegram-widget/js/blocks/channel-feed/style.scss

@@ -1,7 +1,7 @@
 /**
  * #.# Editor Styles
  */
- .block-editor .wp-block-wptelegram-widget-channel-feed {
+.wp-block-wptelegram-widget-channel-feed {
     cursor: pointer;
     flex-direction: row;
     padding: 14px;

plugins/wptelegram-widget/js/blocks/single-post/Edit.tsx

@@ -1,3 +1,4 @@
+import { useBlockProps } from '@wordpress/block-editor';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { Spinner } from '@wordpress/components';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
@@ -21,7 +22,6 @@ export function Edit(props: BlockEditProps<SinglePostAtts>) {
 	);
 	const [iframeHeight, setIframeHeight] = useState(0);
 
-	const { className } = props;
 	const { alignment, iframe_src } = props.attributes;
 
 	const label = __('Telegram post URL');
@@ -132,7 +132,10 @@ export function Edit(props: BlockEditProps<SinglePostAtts>) {
 				</div>
 			)}
 
-			<div className={`${className} wptelegram-widget-message`}>
+			<div
+				{...useBlockProps()}
+				className={`${useBlockProps().className} wptelegram-widget-message`}
+			>
 				<div className={'wp-block-embed__content-wrapper'}>
 					<iframe
 						ref={ref}

plugins/wptelegram-widget/js/blocks/single-post/index.tsx

@@ -6,6 +6,7 @@ import { Edit } from './Edit';
 import { blockAttributes } from './constants';
 
 registerBlockType('wptelegram/widget-single-post', {
+	apiVersion: 3,
 	title: __('Telegram Single Post'),
 	icon: 'format-aside',
 	category: 'wptelegram',
@@ -26,6 +27,7 @@ registerBlockType('wptelegram/widget-single-post', {
 		return (
 			<div
 				className={`wp-block-wptelegram-widget-single-post wptelegram-widget-message align${alignment}`}
+				// {...useBlockProps.save()}
 			>
 				<iframe title={__('Telegram post')} src={iframe_src}>
 					Your Browser Does Not Support iframes!

plugins/wptelegram-widget/js/blocks/types.ts

@@ -31,7 +31,7 @@ export type AjaxWidgetAtts = {
 export interface LegacyWidgetAtts {
 	widget_width: string;
 	author_photo: 'auto' | 'always_show' | 'always_hide';
-	num_messages: number;
+	num_messages: string;
 }
 
 export type SinglePostAtts = {

plugins/wptelegram-widget/src/includes/Main.php

@@ -393,6 +393,7 @@ private function define_shared_hooks() {
 
 		add_action( 'wp_enqueue_scripts', [ $asset_manager, 'enqueue_public_assets' ] );
 		add_action( 'admin_enqueue_scripts', [ $asset_manager, 'enqueue_public_assets' ] );
+		add_action( 'enqueue_block_assets', [ $asset_manager, 'enqueue_public_assets' ] );
 
 		add_action( 'admin_enqueue_scripts', [ $asset_manager, 'enqueue_admin_assets' ] );
 

test/e2e/specs/wptelegram-login/public-ui.spec.ts

@@ -82,7 +82,7 @@ test.describe('Public UI', () => {
 	}) => {
 		await admin.createNewPost();
 
-		await page
+		await editor.canvas
 			.getByRole('textbox', { name: 'Add title' })
 			.fill('Test post for Telegram Login block');
 

test/e2e/specs/wptelegram-widget/public-ui.spec.ts

@@ -69,7 +69,7 @@ test.describe('Public UI', () => {
 		const { postId, activeTheme } = await test.step('Prepare', async () => {
 			await admin.createNewPost();
 
-			await page
+			await editor.canvas
 				.getByRole('textbox', { name: 'Add title' })
 				.fill('A published post');
 
@@ -231,7 +231,7 @@ test.describe('Public UI', () => {
 	}) => {
 		await admin.createNewPost();
 
-		await page
+		await editor.canvas
 			.getByRole('textbox', { name: 'Add title' })
 			.fill('Test post for Telegram Login block');
 

tools/e2e-utils/src/editor/base-editor.ts

@@ -28,14 +28,14 @@ export abstract class BaseEditor {
 
 	async tearDown() {}
 
-	async setTitle(title: string): Promise<void> {
-		await this.page.getByRole('textbox', { name: 'Add title' }).fill(title);
-	}
-
 	async createNewPost() {
 		await this.admin.visitAdminPage('post-new.php');
 	}
 
+	async setTitle(title: string): Promise<void> {
+		await this.page.getByRole('textbox', { name: 'Add title' }).fill(title);
+	}
+
 	abstract publishPost(): Promise<number | null>;
 
 	abstract insertShortCode(shortCode: string): Promise<void>;

tools/e2e-utils/src/editor/block-editor.ts

@@ -18,6 +18,12 @@ export class BlockEditor extends BaseEditor {
 		await this.admin.createNewPost();
 	}
 
+	async setTitle(title: string): Promise<void> {
+		await this.editor.canvas
+			.getByRole('textbox', { name: 'Add title' })
+			.fill(title);
+	}
+
 	async publishPost() {
 		return await this.editor.publishPost();
 	}