Skip to content

Commit

Permalink
Merge branch 'WordPress:trunk' into trunk
Browse files Browse the repository at this point in the history
  • Loading branch information
@karthick-murugan
karthick-murugan authored Dec 20, 2024
2 parents 6ed9ff3 + 94df941 commit 09b4cf2
Show file tree
Hide file tree
Showing 6 changed files with 319 additions and 119 deletions.
101 changes: 97 additions & 4 deletions docs/how-to-guides/themes/global-settings-and-styles.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1053,16 +1053,16 @@ Pseudo selectors `:hover`, `:focus`, `:visited`, `:active`, `:link`, `:any-link`

#### Variations

A block can have a "style variation", as defined per the [block.json specification](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#styles-optional). Theme authors can define the style attributes for an existing style variation using the theme.json file. Styles for unregistered style variations will be ignored.
A block can have a "style variation," as defined in the [block.json specification](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#styles-optional). Theme authors can define the style attributes for an existing style variation using the `theme.json` file. Styles for unregistered style variations will be ignored.

Note that variations are a "block concept", they only exist bound to blocks. The `theme.json` specification respects that distinction by only allowing `variations` at the block-level but not at the top-level. It's also worth highlighting that only variations defined in the `block.json` file of the block are considered "registered": so far, the style variations added via `register_block_style` or in the client are ignored, see [this issue](https://github.com/WordPress/gutenberg/issues/49602) for more information.
Note that variations are a "block concept"—they only exist when bound to blocks. The `theme.json` specification respects this distinction by only allowing `variations` at the block level, not the top level. It’s also worth highlighting that only variations defined in the `block.json` file of the block or via `register_block_style` on the server are considered "registered" for `theme.json` styling purposes.

For example, this is how to provide styles for the existing `plain` variation for the `core/quote` block:

```json
{
"version": 3,
"styles":{
"styles": {
"blocks": {
"core/quote": {
"variations": {
Expand All @@ -1078,14 +1078,107 @@ For example, this is how to provide styles for the existing `plain` variation fo
}
```

The resulting CSS output is this:
The resulting CSS output is:

```css
.wp-block-quote.is-style-plain {
background-color: red;
}
```

It is also possible for multiple block types to share the same variation styles. There are two recommended ways to define such shared styles:

1. `theme.json` partial files
2. programmatically, using `register_block_style`

##### Variation Theme.json Partials

Like theme style variation partials, those for block style variations reside within a theme's `/styles` directory. However, they are differentiated from theme style variations by the introduction of a top-level property called `blockTypes`. The `blockTypes` property is an array of block types for which the block style variation has been registered.

Additionally, a `slug` property is available to provide consistency between the different sources that may define block style variations and to decouple the `slug` from the translatable `title` property.

The following is an example of a `theme.json` partial that defines styles for the "Variation A" block style for the Group, Columns, and Media & Text block types:

```json
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Variation A",
"slug": "variation-a",
"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
"styles": {
"color": {
"background": "#eed8d3",
"text": "#201819"
},
"elements": {
"heading": {
"color": {
"text": "#201819"
}
}
},
"blocks": {
"core/group": {
"color": {
"background": "#825f58",
"text": "#eed8d3"
},
"elements": {
"heading": {
"color": {
"text": "#eed8d3"
}
}
}
}
}
}
}
```

##### Programmatically Registering Variation Styles

As an alternative to `theme.json` partials, you can register variation styles at the same time as registering the variation itself through `register_block_style`. This is done by registering the block style for an array of block types while also passing a "style object" within the `style_data` option.

The example below registers a "Green" variation for the Group and Columns blocks. Note that the style object passed via `style_data` follows the same shape as the `styles` property of a `theme.json` partial.

```php
register_block_style(
array( 'core/group', 'core/columns' ),
array(
'name' => 'green',
'label' => __( 'Green' ),
'style_data' => array(
'color' => array(
'background' => '#4f6f52',
'text' => '#d2e3c8',
),
'blocks' => array(
'core/group' => array(
'color' => array(
'background' => '#739072',
'text' => '#e3eedd',
),
),
),
'elements' => array(
'link' => array(
'color' => array(
'text' => '#ead196',
),
':hover' => array(
'color' => array(
'text' => '#ebd9b4',
),
),
),
),
),
)
);
```

### customTemplates

<div class="callout callout-alert">Supported in WordPress from version 5.9.</div>
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/src/components/inserter/category-tabs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ function CategoryTabs( {
<Tabs.Tab
key={ category.name }
tabId={ category.name }
aria-label={ category.label }
aria-current={
category === selectedCategory ? 'true' : undefined
}
Expand Down
5 changes: 2 additions & 3 deletions packages/block-editor/src/components/text-transform-control/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# TextTransformControl

The `TextTransformControl` component is responsible for rendering a control element that allows users to select and apply text transformation options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for changing the text appearance by applying different transformations such as `none`, `uppercase`, `lowercase`, `capitalize`.

![TextTransformConrol Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true)

## Development guidelines
Expand All @@ -28,7 +28,6 @@ const MyTextTransformControlComponent = () => (
### `value`

- **Type:** `String`
- **Default:** `none`
- **Options:** `none`, `uppercase`, `lowercase`, `capitalize`

The current value of the Text Transform setting. You may only choose from the `Options` listed above.
Expand All @@ -37,4 +36,4 @@ The current value of the Text Transform setting. You may only choose from the `O

- **Type:** `Function`

A callback function invoked when the Text Transform value is changed via an interaction with any of the buttons. Called with the Text Transform value (`none`, `uppercase`, `lowercase`, `capitalize`) as the only argument.
A callback function invoked when the Text Transform value is changed via an interaction with any of the buttons. Called with the Text Transform value (`none`, `uppercase`, `lowercase`, `capitalize`) as the only argument.
69 changes: 53 additions & 16 deletions packages/block-editor/src/components/text-transform-control/stories/index.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,63 @@ import { useState } from '@wordpress/element';
*/
import TextTransformControl from '../';

export default {
const meta = {
title: 'BlockEditor/TextTransformControl',
component: TextTransformControl,
parameters: {
docs: {
canvas: { sourceState: 'shown' },
description: {
component:
'Control to facilitate text transformation selections.',
},
},
},
argTypes: {
onChange: { action: 'onChange' },
onChange: {
action: 'onChange',
control: {
type: null,
},
description: 'Handles change in text transform selection.',
table: {
type: {
summary: 'function',
},
},
},
className: {
control: { type: 'text' },
description: 'Class name to add to the control.',
table: {
type: { summary: 'string' },
},
},
value: {
control: { type: null },
description: 'Currently selected text transform.',
table: {
type: { summary: 'string' },
},
},
},
};

const Template = ( { onChange, ...args } ) => {
const [ value, setValue ] = useState();
return (
<TextTransformControl
{ ...args }
onChange={ ( ...changeArgs ) => {
onChange( ...changeArgs );
setValue( ...changeArgs );
} }
value={ value }
/>
);
};
export default meta;

export const Default = {
render: function Template( { onChange, ...args } ) {
const [ value, setValue ] = useState();

export const Default = Template.bind( {} );
return (
<TextTransformControl
{ ...args }
onChange={ ( ...changeArgs ) => {
onChange( ...changeArgs );
setValue( ...changeArgs );
} }
value={ value }
/>
);
},
};
19 changes: 10 additions & 9 deletions packages/block-library/src/query-total/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,16 @@ function render_block_core_query_total( $attributes, $content, $block ) {
$range_text = sprintf(
/* translators: 1: Start index of posts, 2: Total number of posts */
__( 'Displaying %1$s of %2$s' ),
'<strong>' . $start . '</strong>',
'<strong>' . $max_rows . '</strong>'
$start,
$max_rows
);
} else {
$range_text = sprintf(
/* translators: 1: Start index of posts, 2: End index of posts, 3: Total number of posts */
__( 'Displaying %1$s – %2$s of %3$s' ),
'<strong>' . $start . '</strong>',
'<strong>' . $end . '</strong>',
'<strong>' . $max_rows . '</strong>'
$start,
$end,
$max_rows
);
}

Expand All @@ -61,10 +61,11 @@ function render_block_core_query_total( $attributes, $content, $block ) {

case 'total-results':
default:
$output = sprintf(
'<p><strong>%d</strong> %s</p>',
$max_rows,
_n( 'result found', 'results found', $max_rows )
// translators: %d: number of results.
$total_text = sprintf( _n( '%d result found', '%d results found', $max_rows ), $max_rows );
$output = sprintf(
'<p>%s</p>',
$total_text
);
break;
}
Expand Down
Loading

0 comments on commit 09b4cf2

Please sign in to comment.