<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[53568] trunk/src/wp-includes/block-supports/layout.php: Editor: Add utility classnames back to blocks that have layout attributes specified.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/53568">53568</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/53568","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>SergeyBiryukov</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2022-06-23 23:07:11 +0000 (Thu, 23 Jun 2022)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Editor: Add utility classnames back to blocks that have layout attributes specified.
[https://github.com/WordPress/gutenberg/issues/38719 In 5.9 these utility classnames were removed], which removed the ability for theme/plugin authors to assign their own custom CSS related to specific layout selections. This was mostly related to the Button block.
This commit adds these classes dynamically based on attributes, rather than saving them to the serialized content.
Original PR from Gutenberg repository:
* [https://github.com/WordPress/gutenberg/pull/41487 <a href="https://core.trac.wordpress.org/ticket/41487">#41487</a> Add utility classnames back to blocks that have layout attributes specified]
Props glendaviesnz, peterwilsoncc, andrewserong, zieladam, matveb, samikeijonen.
See <a href="https://core.trac.wordpress.org/ticket/56058">#56058</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesblocksupportslayoutphp">trunk/src/wp-includes/block-supports/layout.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesblocksupportslayoutphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/block-supports/layout.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/block-supports/layout.php 2022-06-23 23:02:19 UTC (rev 53567)
+++ trunk/src/wp-includes/block-supports/layout.php 2022-06-23 23:07:11 UTC (rev 53568)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -170,8 +170,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $used_layout = $default_layout;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $class_name = wp_unique_id( 'wp-container-' );
- $gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $class_names = array();
+ $container_class = wp_unique_id( 'wp-container-' );
+ $class_names[] = $container_class;
+
+ // The following section was added to reintroduce a small set of layout classnames that were
+ // removed in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719). It is
+ // not intended to provide an extended set of classes to match all block layout attributes
+ // here.
+ if ( ! empty( $block['attrs']['layout']['orientation'] ) ) {
+ $class_names[] = 'is-' . sanitize_title( $block['attrs']['layout']['orientation'] );
+ }
+
+ if ( ! empty( $block['attrs']['layout']['justifyContent'] ) ) {
+ $class_names[] = 'is-content-justification-' . sanitize_title( $block['attrs']['layout']['justifyContent'] );
+ }
+
+ if ( ! empty( $block['attrs']['layout']['flexWrap'] ) && 'nowrap' === $block['attrs']['layout']['flexWrap'] ) {
+ $class_names[] = 'is-nowrap';
+ }
+
+ $gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> // Skip if gap value contains unsupported characters.
</span><span class="cx" style="display: block; padding: 0 10px"> // Regex for CSS value borrowed from `safecss_filter_attr`, and used here
</span><span class="cx" style="display: block; padding: 0 10px"> // because we only want to match against the value, not the CSS attribute.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -188,12 +207,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // If a block's block.json skips serialization for spacing or spacing.blockGap,
</span><span class="cx" style="display: block; padding: 0 10px"> // don't apply the user-defined value to the styles.
</span><span class="cx" style="display: block; padding: 0 10px"> $should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $style = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $style = wp_get_layout_style( ".$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
</ins><span class="cx" style="display: block; padding: 0 10px"> // This assumes the hook only applies to blocks with a single wrapper.
</span><span class="cx" style="display: block; padding: 0 10px"> // I think this is a reasonable limitation for that particular hook.
</span><span class="cx" style="display: block; padding: 0 10px"> $content = preg_replace(
</span><span class="cx" style="display: block; padding: 0 10px"> '/' . preg_quote( 'class="', '/' ) . '/',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'class="' . esc_attr( $class_name ) . ' ',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
</ins><span class="cx" style="display: block; padding: 0 10px"> $block_content,
</span><span class="cx" style="display: block; padding: 0 10px"> 1
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span></span></pre>
</div>
</div>
</body>
</html>