Skip to content

Commit

Permalink
prep build 5/28
Browse files Browse the repository at this point in the history
  • Loading branch information
@bph
bph committed May 28, 2024
2 parents 726b962 + 513f9ea commit 771d29d
Show file tree
Hide file tree
Showing 76 changed files with 1,009 additions and 927 deletions.
5 changes: 5 additions & 0 deletions backport-changelog/6.6/6522.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
https://github.com/WordPress/wordpress-develop/pull/6522

* https://github.com/WordPress/gutenberg/pull/60106
* https://github.com/WordPress/gutenberg/pull/60228
* https://github.com/WordPress/gutenberg/pull/61638
3 changes: 3 additions & 0 deletions backport-changelog/6.6/6656.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
https://github.com/WordPress/wordpress-develop/pull/6656

* https://github.com/WordPress/gutenberg/pull/60715
26 changes: 12 additions & 14 deletions lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1293,7 +1293,7 @@ protected function process_blocks_custom_css( $css, $selector ) {
$is_root_css = ( ! str_contains( $part, '{' ) );
if ( $is_root_css ) {
// If the part doesn't contain braces, it applies to the root level.
$processed_css .= trim( $selector ) . '{' . trim( $part ) . '}';
$processed_css .= ':root :where(' . trim( $selector ) . '){' . trim( $part ) . '}';
} else {
// If the part contains braces, it's a nested CSS rule.
$part = explode( '{', str_replace( '}', '', $part ) );
Expand All @@ -1305,7 +1305,8 @@ protected function process_blocks_custom_css( $css, $selector ) {
$part_selector = str_starts_with( $nested_selector, ' ' )
? static::scope_selector( $selector, $nested_selector )
: static::append_to_selector( $selector, $nested_selector );
$processed_css .= $part_selector . '{' . trim( $css_value ) . '}';
$final_selector = ":root :where($part_selector)";
$processed_css .= $final_selector . '{' . trim( $css_value ) . '}';
}
}
return $processed_css;
Expand All @@ -1322,6 +1323,7 @@ public function get_custom_css() {
$block_custom_css = '';
$block_nodes = $this->get_block_custom_css_nodes();
foreach ( $block_nodes as $node ) {
// The node selector will have its specificity set to 0-1-0 within process_blocks_custom_css.
$block_custom_css .= $this->get_block_custom_css( $node['css'], $node['selector'] );
}

Expand Down Expand Up @@ -1564,7 +1566,7 @@ protected function get_layout_styles( $block_metadata, $types = array() ) {
$spacing_rule['selector']
);
} else {
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s) %3$s' : ':where(%1$s-%2$s) %3$s';
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '.%2$s %3$s' : '%1$s-%2$s %3$s';
$layout_selector = sprintf(
$format,
$selector,
Expand Down Expand Up @@ -2745,7 +2747,7 @@ static function ( $pseudo_selector ) use ( $selector ) {
}

// 2. Generate and append the rules that use the general selector.
$block_rules .= static::to_ruleset( ":where($selector)", $declarations );
$block_rules .= static::to_ruleset( ":root :where($selector)", $declarations );

// 3. Generate and append the rules that use the duotone selector.
if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
Expand All @@ -2762,12 +2764,12 @@ static function ( $pseudo_selector ) use ( $selector ) {

// 5. Generate and append the feature level rulesets.
foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
$block_rules .= static::to_ruleset( ":where($feature_selector)", $individual_feature_declarations );
$block_rules .= static::to_ruleset( ":root :where($feature_selector)", $individual_feature_declarations );
}

// 6. Generate and append the style variation rulesets.
foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
$block_rules .= static::to_ruleset( $style_variation_selector, $individual_style_variation_declarations );
$block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
}

return $block_rules;
Expand Down Expand Up @@ -2816,16 +2818,12 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
$css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
// Right and left padding are applied to the first container with `.has-global-padding` class.
$css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
// Nested containers with `.has-global-padding` class do not get padding.
$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; }';
// Alignfull children of the container with left and right padding have negative margins so they can still be full width.
$css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
// The above rule is negated for alignfull children of nested containers.
$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }';
// Some of the children of alignfull blocks without content width should also get padding: text blocks and non-alignfull container blocks.
$css .= '.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
// The above rule also has to be negated for blocks inside nested `.has-global-padding` blocks.
$css .= '.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0; }';
// Nested children of the container with left and right padding that are not wide or full aligned do not get padding.
$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }';
// Nested children of the container with left and right padding that are not wide or full aligned do not get negative margin applied.
$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0; }';
}

$css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
Expand Down
70 changes: 57 additions & 13 deletions lib/experimental/full-page-client-side-navigation.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,25 +33,69 @@ function _gutenberg_add_enhanced_pagination_to_query_block( $parsed_block ) {
add_filter( 'render_block_data', '_gutenberg_add_enhanced_pagination_to_query_block' );

/**
* Add directives to all links.
* Adds client-side navigation directives to BODY tag.
*
* Note: This should probably be done per site, not by default when this option is enabled.
*
* @param array $content The block content.
* @param string $response_body The response body.
*
* @return array The same block content with the directives needed.
* @return string The rendered template with modified BODY attributes.
*/
function _gutenberg_add_client_side_navigation_directives( $content ) {
$p = new WP_HTML_Tag_Processor( $content );
// Hack to add the necessary directives to the body tag.
// TODO: Find a proper way to add directives to the body tag.
static $body_interactive_added;
if ( ! $body_interactive_added ) {
$body_interactive_added = true;
return (string) $p . '<body data-wp-interactive="core/experimental" data-wp-context="{}">';
function _gutenberg_add_client_side_navigation_directives( $response_body ) {
$is_html_content_type = false;
foreach ( headers_list() as $header ) {
$header_parts = preg_split( '/\s*[:;]\s*/', strtolower( $header ) );
if ( count( $header_parts ) >= 2 && 'content-type' === $header_parts[0] ) {
$is_html_content_type = in_array( $header_parts[1], array( 'text/html', 'application/xhtml+xml' ), true );
}
}
return (string) $p;
if ( ! $is_html_content_type ) {
return $response_body;
}

$p = new WP_HTML_Tag_Processor( $response_body );
if ( $p->next_tag( array( 'tag_name' => 'BODY' ) ) ) {
$p->set_attribute( 'data-wp-interactive', 'core/experimental' );
$p->set_attribute( 'data-wp-context', '{}' );
$response_body = $p->get_updated_html();
}
return $response_body;
}

// TODO: Explore moving this to the server directive processing.
add_filter( 'render_block', '_gutenberg_add_client_side_navigation_directives' );
add_filter( 'gutenberg_template_output_buffer', '_gutenberg_add_client_side_navigation_directives' );

/**
* Starts output buffering at the end of the 'template_include' filter.
*
* This is to implement #43258 in core.
*
* This is a hack which would eventually be replaced with something like this in wp-includes/template-loader.php:
*
* $template = apply_filters( 'template_include', $template );
* + ob_start( 'wp_template_output_buffer_callback' );
* if ( $template ) {
* include $template;
* } elseif ( current_user_can( 'switch_themes' ) ) {
*
* @link https://core.trac.wordpress.org/ticket/43258
*
* @param string $passthrough Value for the template_include filter which is passed through.
*
* @return string Unmodified value of $passthrough.
*/
function _gutenberg_buffer_template_output( string $passthrough ): string {
ob_start(
static function ( string $output ): string {
/**
* Filters the template output buffer prior to sending to the client.
*
* @param string $output Output buffer.
* @return string Filtered output buffer.
*/
return (string) apply_filters( 'gutenberg_template_output_buffer', $output );
}
);
return $passthrough;
}
add_filter( 'template_include', '_gutenberg_buffer_template_output', PHP_INT_MAX );
34 changes: 34 additions & 0 deletions lib/theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,40 @@
"bottom": "0px",
"left": "0px"
}
},
"blocks": {
"core/button": {
"variations": {
"outline": {
"border": {
"width": "2px",
"style": "solid",
"color": "currentColor"
},
"color": {
"text": "currentColor",
"gradient": "transparent none"
},
"spacing": {
"padding": {
"top": "0.667em",
"right": "1.33em",
"bottom": "0.667em",
"left": "1.33em"
}
}
}
}
},
"core/site-logo": {
"variations": {
"rounded": {
"border": {
"radius": "9999px"
}
}
}
}
}
}
}
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@
"clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"",
"dev": "npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",
"dev:packages": "concurrently \"node ./bin/packages/watch.js\" \"tsc --build --watch\"",
"distclean": "rimraf node_modules packages/*/node_modules",
"distclean": "git clean --force -d -X",
"docs:api-ref": "node ./bin/api-docs/update-api-docs.js",
"docs:blocks": "node ./bin/api-docs/gen-block-lib-list.js",
"docs:build": "npm-run-all docs:gen docs:blocks docs:api-ref docs:theme-ref",
Expand Down
65 changes: 40 additions & 25 deletions packages/block-editor/src/components/global-styles/background-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ function backgroundSizeHelpText( value ) {
if ( value === 'contain' ) {
return __( 'Image is contained without distortion.' );
}
return __( 'Specify a fixed width.' );
return __( 'Image has a fixed width.' );
}

/**
Expand Down Expand Up @@ -174,13 +174,13 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
{ imgLabel }
</Truncate>
<VisuallyHidden as="span">
{ filename
{ imgUrl
? sprintf(
/* translators: %s: file name */
__( 'Selected image: %s' ),
filename
__( 'Background image: %s' ),
filename || imgLabel
)
: __( 'No image selected' ) }
: __( 'No background image selected' ) }
</VisuallyHidden>
</FlexItem>
</HStack>
Expand Down Expand Up @@ -321,7 +321,7 @@ function BackgroundImageToolsPanelItem( {
name={
<InspectorImagePreview
label={ title }
filename={ title || __( 'Untitled' ) }
filename={ title }
url={ getResolvedThemeFilePath(
url,
themeFileURIs
Expand Down Expand Up @@ -443,6 +443,14 @@ function BackgroundSizeToolsPanelItem( {
nextRepeat = undefined;
}

/*
* Next will be null when the input is cleared,
* in which case the value should be 'auto'.
*/
if ( ! next && currentValueForToggle === 'auto' ) {
next = 'auto';
}

onChange(
setImmutably( style, [ 'background' ], {
...style?.background,
Expand Down Expand Up @@ -506,7 +514,9 @@ function BackgroundSizeToolsPanelItem( {
value={ currentValueForToggle }
onChange={ updateBackgroundSize }
isBlock
help={ backgroundSizeHelpText( sizeValue ) }
help={ backgroundSizeHelpText(
sizeValue || defaultValues?.backgroundSize
) }
>
<ToggleGroupControlOption
key={ 'cover' }
Expand All @@ -519,27 +529,32 @@ function BackgroundSizeToolsPanelItem( {
label={ __( 'Contain' ) }
/>
<ToggleGroupControlOption
key={ 'fixed' }
key={ 'tile' }
value={ 'auto' }
label={ __( 'Fixed' ) }
label={ __( 'Tile' ) }
/>
</ToggleGroupControl>
{ currentValueForToggle !== undefined &&
currentValueForToggle !== 'cover' &&
currentValueForToggle !== 'contain' ? (
<UnitControl
size={ '__unstable-large' }
onChange={ updateBackgroundSize }
value={ sizeValue }
/>
) : null }
{ currentValueForToggle !== 'cover' && (
<ToggleControl
label={ __( 'Repeat' ) }
checked={ repeatCheckedValue }
onChange={ toggleIsRepeated }
/>
) }
<HStack justify="flex-start" spacing={ 2 } as="span">
{ currentValueForToggle !== undefined &&
currentValueForToggle !== 'cover' &&
currentValueForToggle !== 'contain' ? (
<UnitControl
aria-label={ __( 'Background image width' ) }
onChange={ updateBackgroundSize }
value={ sizeValue }
size={ '__unstable-large' }
__unstableInputWidth="100px"
min={ 0 }
/>
) : null }
{ currentValueForToggle !== 'cover' && (
<ToggleControl
label={ __( 'Repeat' ) }
checked={ repeatCheckedValue }
onChange={ toggleIsRepeated }
/>
) }
</HStack>
</VStack>
);
}
Expand Down
Loading

0 comments on commit 771d29d

Please sign in to comment.