Skip to content

Commit

Permalink
prep build 009/03
Browse files Browse the repository at this point in the history
  • Loading branch information
bph committed Sep 3, 2024
2 parents 6c67b8b + 9d4f918 commit f021d44
Show file tree
Hide file tree
Showing 63 changed files with 1,625 additions and 791 deletions.
File renamed without changes.
32 changes: 16 additions & 16 deletions docs/reference-guides/interactivity-api/api-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ It provides a **local** state available to a specific HTML node and its children
The `wp-context` directive accepts a stringified JSON as a value.

```php
//render.php
// render.php
<div data-wp-context='{ "post": { "id": <?php echo $post->ID; ?> } }' >
<button data-wp-on--click="actions.logId" >
Click Me!
Expand All @@ -110,13 +110,13 @@ store( "myPlugin", {
Different contexts can be defined at different levels, and deeper levels will merge their own context with any parent one:

```html
<div data-wp-context="{ foo: 'bar' }">
<div data-wp-context='{ "foo": "bar" }'>
<span data-wp-text="context.foo"><!-- Will output: "bar" --></span>

<div data-wp-context="{ bar: 'baz' }">
<div data-wp-context='{ "bar": "baz" }'>
<span data-wp-text="context.foo"><!-- Will output: "bar" --></span>

<div data-wp-context="{ foo: 'bob' }">
<div data-wp-context='{ "foo": "bob" }'>
<span data-wp-text="context.foo"><!-- Will output: "bob" --></span>
</div>

Expand Down Expand Up @@ -356,8 +356,7 @@ The callback passed as the reference receives [the event](https://developer.mozi

### `wp-on-async`

This directive is a more performant approach for `wp-on`. It immediately yields to main to avoid contributing to a long task, allowing other interactions that otherwise would be waiting on the main thread
to run sooner. Use this async version whenever there is no need for synchronous access to the `event` object, in particular the methods `event.preventDefault()`, `event.stopPropagation()`, and `event.stopImmediatePropagation()`.
This directive is a more performant approach for `wp-on`. It immediately yields to main to avoid contributing to a long task, allowing other interactions that otherwise would be waiting on the main thread to run sooner. Use this async version whenever there is no need for synchronous access to the `event` object, in particular the methods `event.preventDefault()`, `event.stopPropagation()`, and `event.stopImmediatePropagation()`.

### `wp-on-window`

Expand All @@ -369,8 +368,7 @@ This directive allows you to attach global window events like `resize`, `copy`,

[List of supported window events.](https://developer.mozilla.org/en-US/docs/Web/API/Window#events)

The syntax of this directive is `data-wp-on-window--[window-event]` (like `data-wp-on-window--resize`
or `data-wp-on-window--languagechange`).
The syntax of this directive is `data-wp-on-window--[window-event]` (like `data-wp-on-window--resize` or `data-wp-on-window--languagechange`).

```php
<div data-wp-on-window--resize="callbacks.logWidth"></div>
Expand Down Expand Up @@ -406,8 +404,7 @@ This directive allows you to attach global document events like `scroll`, `mouse

[List of supported document events.](https://developer.mozilla.org/en-US/docs/Web/API/Document#events)

The syntax of this directive is `data-wp-on-document--[document-event]` (like `data-wp-on-document--keydown`
or `data-wp-on-document--selectionchange`).
The syntax of this directive is `data-wp-on-document--[document-event]` (like `data-wp-on-document--keydown` or `data-wp-on-document--selectionchange`).

```php
<div data-wp-on-document--keydown="callbacks.logKeydown"></div>
Expand Down Expand Up @@ -520,6 +517,8 @@ Here's another example with several `wp-init` directives on the same DOM element
<summary><em>See store used with the directive above</em></summary>

```js
import { store, getElement } from '@wordpress/interactivity';

store( "myPlugin", {
callbacks: {
logTimeInit: () => console.log( `Init at ` + new Date() ),
Expand Down Expand Up @@ -882,10 +881,10 @@ const { state } = store( "myPlugin", {
GBP: 0.85,
},
get amountInUSD() {
return state.currencyExchange[ 'USD' ] * state.amount,
return state.currencyExchange[ 'USD' ] * state.amount;
},
get amountInGBP() {
return state.currencyExchange[ 'GBP' ] * state.amount,
return state.currencyExchange[ 'GBP' ] * state.amount;
},
},
} );
Expand Down Expand Up @@ -965,7 +964,7 @@ This approach enables some functionalities that make directives flexible and pow

*In the `view.js` file of each block* the developer can define both the state and the elements of the store referencing functions like actions, side effects or derived state.

The `store` method used to set the store in javascript can be imported from `@wordpress/interactivity`.
The `store` method used to set the store in JavaScript can be imported from `@wordpress/interactivity`.

```js
// store
Expand Down Expand Up @@ -1111,7 +1110,7 @@ store( "myPlugin", {
actions: {
log: () => {
const element = getElement();
// Logs "false"
// Logs attributes
console.log('element attributes => ', element.attributes)
},
},
Expand All @@ -1122,7 +1121,7 @@ The code will log:

```json
{
"data-wp-on--click": 'actions.increaseCounter',
"data-wp-on--click": 'actions.log',
"children": ['Log'],
"onclick": event => { evaluate(entry, event); }
}
Expand All @@ -1147,6 +1146,7 @@ store('mySliderPlugin', {
3_000
);
},
},
})
```

Expand Down Expand Up @@ -1245,7 +1245,7 @@ echo $processed_html;

will output:
```html
<div data-wp-text="create-block::state.greeting">Hello, World!</div>
<div data-wp-text="myPlugin::state.greeting">Hello, World!</div>
```

### wp_interactivity_data_wp_context
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,8 @@ public static function decode( $context, $text ) {
*
* @since 6.6.0
*
* @global WP_Token_Map $html5_named_character_references
*
* @param string $context `attribute` for decoding attribute values, `data` otherwise.
* @param string $text Text document containing span of text to decode.
* @param int $at Optional. Byte offset into text where span begins, defaults to the beginning (0).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,8 @@ public static function decode( $context, $text ): string {
*
* @since 6.6.0
*
* @global WP_Token_Map $html5_named_character_references
*
* @param string $context `attribute` for decoding attribute values, `data` otherwise.
* @param string $text Text document containing span of text to decode.
* @param int $at Optional. Byte offset into text where span begins, defaults to the beginning (0).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -107,12 +107,12 @@ export default function BlockInvalidWarning( { clientId } ) {
onClick={ convert.toRecoveredBlock }
variant="primary"
>
{ __( 'Attempt Block Recovery' ) }
{ __( 'Attempt recovery' ) }
</Button>,
] }
secondaryActions={ secondaryActions }
>
{ __( 'This block contains unexpected or invalid content.' ) }
{ __( 'Block contains unexpected or invalid content.' ) }
</Warning>
{ compare && (
<Modal
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, isRTL } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import {
chevronRight,
Expand Down Expand Up @@ -38,7 +38,7 @@ const CarouselNavigation = ( {
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
icon={ chevronLeft }
icon={ isRTL() ? chevronRight : chevronLeft }
label={ __( 'Previous pattern' ) }
onClick={ handlePrevious }
disabled={ activeSlide === 0 }
Expand All @@ -47,7 +47,7 @@ const CarouselNavigation = ( {
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
icon={ chevronRight }
icon={ isRTL() ? chevronLeft : chevronRight }
label={ __( 'Next pattern' ) }
onClick={ handleNext }
disabled={ activeSlide === totalSlides - 1 }
Expand Down
28 changes: 15 additions & 13 deletions packages/block-editor/src/components/block-patterns-list/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,9 @@ import InserterDraggableBlocks from '../inserter-draggable-blocks';
import BlockPatternsPaging from '../block-patterns-paging';
import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';

const {
CompositeV2: Composite,
CompositeItemV2: CompositeItem,
useCompositeStoreV2: useCompositeStore,
} = unlock( componentsPrivateApis );
const { CompositeV2: Composite, CompositeItemV2: CompositeItem } = unlock(
componentsPrivateApis
);

const WithToolTip = ( { showTooltip, title, children } ) => {
if ( showTooltip ) {
Expand Down Expand Up @@ -206,19 +204,23 @@ function BlockPatternsList(
},
ref
) {
const compositeStore = useCompositeStore( { orientation } );
const { setActiveId } = compositeStore;
const [ activeCompositeId, setActiveCompositeId ] = useState( undefined );

useEffect( () => {
// We reset the active composite item whenever the
// available patterns change, to make sure that
// focus is put back to the start.
setActiveId( undefined );
}, [ setActiveId, shownPatterns, blockPatterns ] );
// Reset the active composite item whenever the available patterns change,
// to make sure that Composite widget can receive focus correctly when its
// composite items change. The first composite item will receive focus.
const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
shownPatterns.includes( pattern )
)?.name;
setActiveCompositeId( firstCompositeItemId );
}, [ shownPatterns, blockPatterns ] );

return (
<Composite
store={ compositeStore }
orientation={ orientation }
activeId={ activeCompositeId }
setActiveId={ setActiveCompositeId }
role="listbox"
className="block-editor-block-patterns-list"
aria-label={ label }
Expand Down
10 changes: 0 additions & 10 deletions packages/block-editor/src/components/block-toolbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ import { useShowHoveredOrFocusedGestures } from './utils';
import { store as blockEditorStore } from '../../store';
import __unstableBlockNameContext from './block-name-context';
import NavigableToolbar from '../navigable-toolbar';
import Shuffle from './shuffle';
import { useHasBlockToolbar } from './use-has-block-toolbar';

/**
Expand Down Expand Up @@ -66,22 +65,18 @@ export function PrivateBlockToolbar( {
shouldShowVisualToolbar,
showParentSelector,
isUsingBindings,
canRemove,
} = useSelect( ( select ) => {
const {
getBlockName,
getBlockMode,
getBlockParents,
getSelectedBlockClientIds,
isBlockValid,
getBlockRootClientId,
getBlockEditingMode,
getBlockAttributes,
canRemoveBlock,
} = select( blockEditorStore );
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[ 0 ];
const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
const parents = getBlockParents( selectedBlockClientId );
const firstParentClientId = parents[ parents.length - 1 ];
const parentBlockName = getBlockName( firstParentClientId );
Expand All @@ -106,7 +101,6 @@ export function PrivateBlockToolbar( {
isDefaultEditingMode: _isDefaultEditingMode,
blockType: selectedBlockClientId && getBlockType( _blockName ),
shouldShowVisualToolbar: isValid && isVisual,
rootClientId: blockRootClientId,
toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
showParentSelector:
parentBlockType &&
Expand All @@ -119,7 +113,6 @@ export function PrivateBlockToolbar( {
selectedBlockClientIds.length === 1 &&
_isDefaultEditingMode,
isUsingBindings: _isUsingBindings,
canRemove: canRemoveBlock( selectedBlockClientId ),
};
}, [] );

Expand Down Expand Up @@ -202,9 +195,6 @@ export function PrivateBlockToolbar( {
</ToolbarGroup>
</div>
) }
{ ! isMultiToolbar && canRemove && (
<Shuffle clientId={ blockClientId } />
) }
{ shouldShowVisualToolbar && isMultiToolbar && (
<BlockGroupToolbar />
) }
Expand Down
17 changes: 15 additions & 2 deletions packages/block-editor/src/components/color-palette/test/control.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { render } from '@testing-library/react';
import { render, waitFor, queryByAttribute } from '@testing-library/react';

/**
* Internal dependencies
Expand All @@ -10,9 +10,22 @@ import ColorPaletteControl from '../control';

const noop = () => {};

async function renderAndValidate( ...renderArgs ) {
const view = render( ...renderArgs );
await waitFor( () => {
const activeButton = queryByAttribute(
'data-active-item',
view.baseElement,
'true'
);
expect( activeButton ).not.toBeNull();
} );
return view;
}

describe( 'ColorPaletteControl', () => {
it( 'matches the snapshot', async () => {
const { container } = render(
const { container } = await renderAndValidate(
<ColorPaletteControl
label="Test Color"
value="#f00"
Expand Down
Loading

0 comments on commit f021d44

Please sign in to comment.