about.php 12.4 KB
Newer Older
alain's avatar
alain committed
1
2
3
4
5
6
7
8
9
10
11
<?php
/**
 * About This Version administration panel.
 *
 * @package WordPress
 * @subpackage Administration
 */

/** WordPress Administration Bootstrap */
require_once __DIR__ . '/admin.php';

alain's avatar
alain committed
12
13
14
wp_enqueue_script( 'wp-components' );
wp_enqueue_style( 'wp-components' );

alain's avatar
alain committed
15
16
17
18
19
20
21
22
23
24
25
/* translators: Page title of the About WordPress page in the admin. */
$title = _x( 'About', 'page title' );

list( $display_version ) = explode( '-', get_bloginfo( 'version' ) );

require_once ABSPATH . 'wp-admin/admin-header.php';
?>
	<div class="wrap about__container">

		<div class="about__header">
			<div class="about__header-image">
alain's avatar
alain committed
26
				<img alt="<?php _e( 'Code is Poetry' ); ?>" src="images/about-badge.svg" />
alain's avatar
alain committed
27
28
			</div>

alain's avatar
alain committed
29
30
31
32
33
34
			<div class="about__header-title">
				<p>
					<?php _e( 'WordPress' ); ?>
					<?php echo $display_version; ?>
				</p>
			</div>
alain's avatar
alain committed
35

alain's avatar
alain committed
36
37
			<div class="about__header-text">
				<?php _e( 'Jazz up your stories in an editor that’s cleaner, crisper, and does more to get out of your way.' ); ?>
alain's avatar
alain committed
38
39
40
41
42
43
44
45
46
47
			</div>

			<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
				<a href="about.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'What&#8217;s New' ); ?></a>
				<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
				<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
				<a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
			</nav>
		</div>

alain's avatar
alain committed
48
49
50
		<div class="about__section is-feature has-subtle-background-color">
			<div class="column">
				<h1 class="is-smaller-heading">
alain's avatar
alain committed
51
52
					<?php
					printf(
alain's avatar
alain committed
53
54
55
						/* translators: %s: The current WordPress version number. */
						__( 'Step into WordPress %s.' ),
						$display_version
alain's avatar
alain committed
56
57
					);
					?>
alain's avatar
alain committed
58
59
				</h1>
				<p>
alain's avatar
alain committed
60
					<?php
alain's avatar
alain committed
61
					_e( 'With this new version, WordPress brings you fresh colors. The editor helps you work in a few places you couldn’t before—at least, not without getting into code or hiring a pro. The controls you use most, like changing font sizes, are in more places—right where you need them. And layout changes that should be simple, like full-height images, are even simpler to make.' );
alain's avatar
alain committed
62
63
					?>
				</p>
alain's avatar
alain committed
64
65
66
67
68
69
70
71
72
73
			</div>
		</div>

		<hr class="is-large" />

		<div class="about__section has-2-columns">
			<h2 class="is-section-header is-smaller-heading">
				<?php _e( 'Now the editor is easier to use' ); ?>
			</h2>
			<div class="column">
alain's avatar
alain committed
74
75
				<p>
					<?php
alain's avatar
alain committed
76
					_e( '<strong>Font-size adjustment in more places:</strong> now, font-size controls are right where you need them in the List and Code blocks. No more trekking to another screen to make that single change!' );
alain's avatar
alain committed
77
					?>
alain's avatar
alain committed
78
79
				</p>
				<p>
alain's avatar
alain committed
80
					<?php
alain's avatar
alain committed
81
82
83
84
85
86
					_e( '<strong>Reusable blocks:</strong> several enhancements make reusable blocks more stable and easier to use. And now they save automatically with the post when you click the Update button.' );
					?>
				</p>
				<p>
					<?php
					_e( '<strong>Inserter drag-and-drop:</strong> drag blocks and block patterns from the inserter right into your post.' );
alain's avatar
alain committed
87
88
89
					?>
				</p>
			</div>
alain's avatar
alain committed
90
91
92
93
94
			<div class="column about__image">
				<video controls>
					<source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/mp4" />
					<source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/webm" />
				</video>
alain's avatar
alain committed
95
96
97
			</div>
		</div>

alain's avatar
alain committed
98
99
100
101
102
		<div class="about__section has-2-columns">
			<h2 class="is-section-header is-smaller-heading">
				<?php _e( 'You can do more without writing custom code' ); ?>
			</h2>
			<div class="column">
alain's avatar
alain committed
103
104
				<p>
					<?php
alain's avatar
alain committed
105
106
107
108
109
110
111
112
113
114
115
					_e( '<strong>Full-height alignment:</strong> have you ever wanted to make a block, like the Cover block, fill the whole window? Now you can.' );
					?>
				</p>
				<p>
					<?php
					_e( '<strong>Buttons block:</strong> now you can choose a vertical or a horizontal layout. And you can set the width of a button to a preset percentage.' );
					?>
				</p>
				<p>
					<?php
					_e( '<strong>Social Icons block:</strong> now you can change the size of the icons.' );
alain's avatar
alain committed
116
117
118
					?>
				</p>
			</div>
alain's avatar
alain committed
119
120
			<div class="column about__image">
				<img src="https://s.w.org/images/core/5.7/about-57-cover.jpg" alt="" />
alain's avatar
alain committed
121
122
123
124
125
			</div>
		</div>

		<hr />

alain's avatar
alain committed
126
		<div class="about__section has-subtle-background-color">
alain's avatar
alain committed
127
			<div class="column">
alain's avatar
alain committed
128
				<h2 class="is-smaller-heading"><?php _e( 'A Simpler Default Color Palette' ); ?></h2>
alain's avatar
alain committed
129
130
131
			</div>
		</div>

alain's avatar
alain committed
132
133
134
135
136
137
138
139
140
141
		<div class="about__section has-subtle-background-color">
			<figure class="column about__image" id="about-image-comparison">
				<div class="about__image-comparison no-js">
					<img src="https://s.w.org/images/core/5.7/about-57-color-old.png" alt="<?php esc_attr_e( 'Dashboard with old color scheme.' ); ?>" />
					<div class="about__image-comparison-resize">
						<img src="https://s.w.org/images/core/5.7/about-57-color-new.png" alt="<?php esc_attr_e( 'Dashboard with new color scheme.' ); ?>" />
					</div>
				</div>
				<figcaption><?php _e( 'Above, the Dashboard before and after the color update in 5.7.' ); ?></figcaption>
			</figure>
alain's avatar
alain committed
142
143
		</div>

alain's avatar
alain committed
144
145
		<div class="about__section has-2-columns has-subtle-background-color">
			<div class="column">
alain's avatar
alain committed
146
147
148
				<p>
					<?php
					printf(
alain's avatar
alain committed
149
150
151
						/* translators: %s: WCAG information link. */
						__( 'This new streamlined color palette collapses all the colors that used to be in the WordPress source code down to seven core colors and a range of 56 shades that meet the <a href="%s">WCAG 2.0 AA recommended contrast ratio</a> against white or black.' ),
						'https://www.w3.org/WAI/WCAG2AAA-Conformance'
alain's avatar
alain committed
152
153
154
155
156
					);
					?>
				</p>
				<p>
					<?php
alain's avatar
alain committed
157
					_e( 'The colors are perceptually uniform from light to dark in each range, which means they start at white and get darker by the same amount with each step.' );
alain's avatar
alain committed
158
159
160
161
162
163
					?>
				</p>
			</div>
			<div class="column">
				<p>
					<?php
alain's avatar
alain committed
164
					_e( 'Half the range has a 4.5 or higher contrast ratio against black, and the other half maintains the same contrast against white.' );
alain's avatar
alain committed
165
166
167
168
169
					?>
				</p>
				<p>
					<?php
					printf(
alain's avatar
alain committed
170
171
172
						/* translators: %s: Color palette dev note link. */
						__( 'Find the new palette in the default WordPress Dashboard color scheme, and use it when you’re building themes, plugins, or any other components. For all the details, <a href="%s">check out the Color Palette dev note</a>.' ),
						'https://make.wordpress.org/core/2021/02/23/standardization-of-wp-admin-colors-in-wordpress-5-7'
alain's avatar
alain committed
173
174
175
176
177
178
					);
					?>
				</p>
			</div>
		</div>

alain's avatar
alain committed
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
		<div class="about__section has-subtle-background-color">
			<div class="column about__image">
				<picture>
					<source media="(max-width: 600px)" srcset="images/about-color-palette-vert.svg" />
					<img alt="" src="images/about-color-palette.svg" />
				</picture>
			</div>
		</div>

		<hr />

		<div class="about__section has-2-columns">
			<div class="column">
				<h3><?php _e( 'From HTTP to HTTPS in a single click' ); ?></h3>
				<p><?php _e( 'Starting now, switching a site from HTTP to HTTPS is a one-click move. WordPress will automatically update database URLs when you make the switch. No more hunting and guessing!' ); ?></p>
				<h3><?php _e( 'New Robots API' ); ?></h3>
				<p>
					<?php
					_e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the <code>max-image-preview: large</code> directive by default. That means search engines can show bigger image previews, which can boost your traffic (unless the site is marked <em>not-public</em>).' );
					?>
				</p>
			</div>
			<div class="column">
				<h3><?php _e( 'Ongoing cleanup after update to jQuery 3.5.1' ); ?></h3>
				<p><?php _e( 'For years jQuery helped make things move on the screen in ways the basic tools couldn’t—but that keeps changing, and so does jQuery.' ); ?></p>
				<p><?php _e( 'In 5.7, jQuery gets more focused and less intrusive, with fewer messages in the console.' ); ?></p>
				<h3><?php _e( 'Lazy-load your iframes' ); ?></h3>
				<p><?php _e( 'Now it’s simple to let iframes lazy-load. By default, WordPress will add a <code>loading="lazy"</code> attribute to iframe tags when both width and height are specified.' ); ?></p>
			</div>
		</div>

alain's avatar
alain committed
210
211
212
213
214
215
216
217
		<hr class="is-small" />

		<div class="about__section">
			<div class="column">
				<h3><?php _e( 'Check the Field Guide for more!' ); ?></h3>
				<p>
					<?php
					printf(
alain's avatar
alain committed
218
219
220
						/* translators: %s: WordPress 5.7 Field Guide link. */
						__( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.7 Field Guide.</a>' ),
						'https://make.wordpress.org/core/2021/02/23/wordpress-5-7-field-guide'
alain's avatar
alain committed
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
					);
					?>
				</p>
			</div>
		</div>

		<hr />

		<div class="return-to-dashboard">
			<?php if ( current_user_can( 'update_core' ) && isset( $_GET['updated'] ) ) : ?>
				<a href="<?php echo esc_url( self_admin_url( 'update-core.php' ) ); ?>">
					<?php is_multisite() ? _e( 'Go to Updates' ) : _e( 'Go to Dashboard &rarr; Updates' ); ?>
				</a> |
			<?php endif; ?>
			<a href="<?php echo esc_url( self_admin_url() ); ?>"><?php is_blog_admin() ? _e( 'Go to Dashboard &rarr; Home' ) : _e( 'Go to Dashboard' ); ?></a>
		</div>
	</div>

alain's avatar
alain committed
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<?php require_once ABSPATH . 'wp-admin/admin-footer.php'; ?>

<script>
	wp.domReady( function() {
		var createElement = wp.element.createElement;
		var Fragment = wp.element.Fragment;
		var render = wp.element.render;
		var useState = wp.element.useState;
		var ResizableBox = wp.components.ResizableBox;

		var container = document.getElementById( 'about-image-comparison' );
		var images = container ? container.querySelectorAll( 'img' ) : [];
		if ( ! images.length ) {
			// Something's wrong, return early.
			return;
		}

		var beforeImage = images.item( 0 );
		var afterImage = images.item( 1 );
		var caption = container.querySelector( 'figcaption' ).innerText;

		function ImageComparison( props ) {
			var stateHelper = useState( props.width );
			var width = stateHelper[0];
			var setWidth = stateHelper[1];

			return createElement(
				'div',
				{
					className: 'about__image-comparison'
				},
				createElement( 'img', { src: beforeImage.src, alt: beforeImage.alt } ),
				createElement(
					ResizableBox,
					{
						size: {
							width: width,
							height: props.height
						},
						onResizeStop: function( event, direction, elt, delta ) {
							setWidth( parseInt( width + delta.width, 10 ) );
						},
						showHandle: true,
						enable: {
							top: false,
							right: ! wp.i18n.isRTL(),
							bottom: false,
							left: wp.i18n.isRTL(),
						},
						className: 'about__image-comparison-resize'
					},
					createElement(
						'div',
						{
							style: { width: '100%', height: '100%', overflow: 'hidden' }
						},
						createElement('img', { src: afterImage.src, alt: afterImage.alt } )
					)
				)
			);
		}

		render(
			createElement(
				Fragment,
				{},
				createElement(
					ImageComparison,
					{
						width: beforeImage.clientWidth / 2,
						height: beforeImage.clientHeight
					}
				),
				createElement( 'figcaption', {}, caption )
			),
			container
		);
	} );
</script>
<?php
alain's avatar
alain committed
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356

// These are strings we may use to describe maintenance/security releases, where we aim for no new strings.
return;

__( 'Maintenance Release' );
__( 'Maintenance Releases' );

__( 'Security Release' );
__( 'Security Releases' );

__( 'Maintenance and Security Release' );
__( 'Maintenance and Security Releases' );

/* translators: %s: WordPress version number. */
__( '<strong>Version %s</strong> addressed one security issue.' );
/* translators: %s: WordPress version number. */
__( '<strong>Version %s</strong> addressed some security issues.' );

/* translators: 1: WordPress version number, 2: Plural number of bugs. */
_n_noop(
	'<strong>Version %1$s</strong> addressed %2$s bug.',
	'<strong>Version %1$s</strong> addressed %2$s bugs.'
);

/* translators: 1: WordPress version number, 2: Plural number of bugs. Singular security issue. */
_n_noop(
	'<strong>Version %1$s</strong> addressed a security issue and fixed %2$s bug.',
	'<strong>Version %1$s</strong> addressed a security issue and fixed %2$s bugs.'
);

/* translators: 1: WordPress version number, 2: Plural number of bugs. More than one security issue. */
_n_noop(
	'<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bug.',
	'<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bugs.'
);

/* translators: %s: Documentation URL. */
__( 'For more information, see <a href="%s">the release notes</a>.' );