Update README (#5)

README.md

@@ -1,3 +1,17 @@
 # WP CLS Terminator
 
-POC Plugin for removing Layout shifts from Block Editor Embeds.
+Embeds and Iframes often contribute to the Layout Shift, which can be distracting to users and degrades the page experience. This plugin is a POC to eliminate Layout Shifts from WordPress block editor embeds.
+
+## Working
+Currently, a setting is provided in the block embed settings, which can help users measure embed dimensions beforehand and add them to block attributes. Later these block attributes can be used to add required dimensions to the embeds and iframes before the page is served to the end user.
+
+![image](https://user-images.githubusercontent.com/54371619/187244974-05941205-0d42-4579-92fe-09b40cd4f6e7.png)
+![image](https://user-images.githubusercontent.com/54371619/187245107-cf73638f-7624-4310-8006-31b1008243b7.png)
+
+
+### How embeds dimensions are measured
+When the user clicks on the setting button named `Terminate Layout Shift,` the current block content is rendered into an iframe until it's loaded, and then its respective height and width are measured. This process takes place several times on different viewports to ensure that dimensions are calculated for each device viewport.
+
+## Roadmap
+- Currently, terminating the Layout Shift is a manual process, which has to be done for each embed. We are exploring different approaches to make it fully automatic.
+- Provide user settings to select viewports for which dimensions should be measured.

assets/src/js/helpers.js

@@ -105,7 +105,7 @@ const CLSTerminatorButton = ({ attributes, setAttributes }) => {
 				setCalculateText(
 					sprintf(
 						/* translators: %s: Device Breakpoint */
-						__('Terminating for %s', 'wp-cls'),
+						__('Terminating for %s', 'wp-cls-terminator'),
 						breakpoint
 					)
 				);
@@ -141,7 +141,9 @@ const CLSTerminatorButton = ({ attributes, setAttributes }) => {
 
 	return (
 		<InspectorControls>
-			<PanelBody title={__('CLS Terminator Settings', 'wp-cls')}>
+			<PanelBody
+				title={__('CLS Terminator Settings', 'wp-cls-terminator')}
+			>
 				{isTerminated && (
 					<Notice
 						className="wp-cls-margin-top-bottom-12"
@@ -151,7 +153,7 @@ const CLSTerminatorButton = ({ attributes, setAttributes }) => {
 						<p>
 							{__(
 								'Layout shift for this embed has been terminated.',
-								'wp-cls'
+								'wp-cls-terminator'
 							)}
 						</p>
 					</Notice>
@@ -165,11 +167,11 @@ const CLSTerminatorButton = ({ attributes, setAttributes }) => {
 						<p>
 							{__(
 								'There was an error measuring the embed. Please try again.',
-								'wp-cls'
+								'wp-cls-terminator'
 							)}
 						</p>
 						<p>
-							<strong>{__('Error:', 'wp-cls')}</strong>{' '}
+							<strong>{__('Error:', 'wp-cls-terminator')}</strong>{' '}
 							{errorMessage ? errorMessage : 'Unknown error'}
 						</p>
 					</Notice>
@@ -182,17 +184,17 @@ const CLSTerminatorButton = ({ attributes, setAttributes }) => {
 									calculateText,
 									<Spinner key={'terminator-spinner'} />,
 							  ]
-							: __('Terminate Layout Shift', 'wp-cls')
+							: __('Terminate Layout Shift', 'wp-cls-terminator')
 					}
 					onClick={terminator}
 				/>
 				<p className="wp-cls-text-help">
 					{__(
 						'Embeds causes a layout shift when they are resized. This setting will automatically calculate the height and width of the embed and terminate the layout shift.',
-						'wp-cls'
+						'wp-cls-terminator'
 					)}{' '}
 					<a href="https://web.dev/optimize-cls/#embeds-and-iframes">
-						{__('Learn more', 'wp-cls')}
+						{__('Learn more', 'wp-cls-terminator')}
 					</a>
 				</p>
 			</PanelBody>