← All changes | modules/optimization/assets/js/templates/meta-box/index.js +10 -14 1.6.2 → trunk View file →

		@@ -1,8 +1,8 @@
1	1	import { __ } from '@wordpress/i18n';
2	2	import { escapeHTML } from '@wordpress/escape-html';
3	3	import { formatFileSize } from '../../utils';
4		-import { UPGRADE_LINK } from '../../constants';
	4	+import { getErrorButton } from '../common';
5	5
6	6	const notOptimizedTemplate = () => {
7	7	return `
8	8	<p class="image-optimization-control__property">
		@@ -37,9 +37,9 @@
37	37	</div>
38	38	`;
39	39	};
40	40
41		-const errorTemplate = ( message, imagesLeft ) => {
	41	+const errorTemplate = ( { message, imagesLeft, errorType, allowRetry } ) => {
42	42	return `
43	43	<p class="image-optimization-control__property">
44	44	${ __( 'Status', 'image-optimization' ) }:
45	45
		@@ -56,19 +56,9 @@
56	56	</span>
57	57	</p>
58	58
59	59	<div class="image-optimization-control__action-button-wrapper">
60		- ${ imagesLeft === 0
61		- ? `<a class="button button-secondary button-large image-optimization-control__button"
62		- href="${ UPGRADE_LINK }"
63		- target="_blank" rel="noopener noreferrer">
64		- ${ __( 'Upgrade', 'image-optimization' ) }
65		- </a>
66		- ` : `
67		- <button class="button button-secondary button-large button-link-delete image-optimization-control__button image-optimization-control__button--try-again"
68		- type="button">
69		- ${ __( 'Try again', 'image-optimization' ) }
70		- </button>` }
	60	+ ${ getErrorButton( { imagesLeft, errorType, allowRetry } ) }
71	61	</div>
72	62	`;
73	63	};
74	64
		@@ -87,9 +77,15 @@
87	77	<p class="image-optimization-control__property">
88	78	${ __( 'Image sizes optimized', 'image-optimization' ) }:
89	79
90	80	<span class="image-optimization-control__property-value">
91		- ${ data?.sizesOptimized }
	81	+ ${ data?.sizesOptimized }/${ data?.sizesTotal }
	82	+
	83	+ <button type="button"
	84	+ class="image-optimization-control__details-button"
	85	+ aria-label="${ __( 'Open optimization details', 'image-optimization' ) }">
	86	+ (+)
	87	+ </button>
92	88	</span>
93	89	</p>
94	90
95	91	<p class="image-optimization-control__property">