From 7c85de104ebbb2631296db00d2548a9f6fe7e141 Mon Sep 17 00:00:00 2001 From: Ramon Date: Tue, 9 Jul 2024 12:17:02 +1000 Subject: [PATCH 01/21] Global styles: tweak block background position preview height (#63225) * Add a gray background for the focal picker image preview, with a max-height of 180px * Add border and border radius to focal point picker image container Co-authored-by: ramonjd Co-authored-by: jasmussen --- .../block-editor/src/components/global-styles/style.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss index f55e2da6437041..f57bc79074153e 100644 --- a/packages/block-editor/src/components/global-styles/style.scss +++ b/packages/block-editor/src/components/global-styles/style.scss @@ -192,8 +192,14 @@ .components-toggle-control { margin-bottom: 0; } + .components-focal-point-picker-wrapper { + background-color: $gray-100; + width: 100%; + border-radius: $radius-block-ui; + border: $border-width solid $gray-300; + } .components-focal-point-picker__media--image { - max-height: clamp(120px, 9vh, 280px); + max-height: 180px; } } From e1e496725c9f374a98a96879b516a8017e4ed739 Mon Sep 17 00:00:00 2001 From: Ramon Date: Tue, 9 Jul 2024 12:19:04 +1000 Subject: [PATCH 02/21] Patterns: check for edited entity content property when exporting (#63227) * Because an item can either be an entity record fetched via getEntityRecord or getEditedEntityRecord check for content?.raw and content. The reason being getEditedEntityRecord calls getRawEntityRecord. getRawEntityRecord maps properties to their raw values. * Update type and add type check to keep the type linter happy Co-authored-by: ramonjd Co-authored-by: ntsekouras Co-authored-by: t-hamano Co-authored-by: youknowriad --- packages/editor/src/dataviews/actions/export-pattern.tsx | 5 ++++- packages/editor/src/dataviews/types.ts | 4 +--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/dataviews/actions/export-pattern.tsx b/packages/editor/src/dataviews/actions/export-pattern.tsx index 57fb969d2ff29c..f4e5c91c7cabfa 100644 --- a/packages/editor/src/dataviews/actions/export-pattern.tsx +++ b/packages/editor/src/dataviews/actions/export-pattern.tsx @@ -22,7 +22,10 @@ function getJsonFromItem( item: Pattern ) { { __file: item.type, title: getItemTitle( item ), - content: item.content.raw, + content: + typeof item.content === 'string' + ? item.content + : item.content?.raw, syncStatus: item.wp_pattern_sync_status, }, null, diff --git a/packages/editor/src/dataviews/types.ts b/packages/editor/src/dataviews/types.ts index 02ce9964025789..9f57ecba6174aa 100644 --- a/packages/editor/src/dataviews/types.ts +++ b/packages/editor/src/dataviews/types.ts @@ -23,9 +23,7 @@ export interface TemplateOrTemplatePart extends BasePost { export interface Pattern extends BasePost { slug: string; title: { raw: string }; - content: { - raw: string; - }; + content: { raw: string } | string; wp_pattern_sync_status: string; } From 8784fe9ca9e45551659cda847007fa992ae94023 Mon Sep 17 00:00:00 2001 From: Shreya Agarwal <78657883+shreya0204@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:20:00 +0530 Subject: [PATCH 03/21] Add justification to block toolbar in addition to sidebar (#62924) * refactor: add justification to block toolbar * refactor: remove dead code * refactor: add early return checks * refactor: remove legacy attribute Co-authored-by: shreya0204 Co-authored-by: noisysocks Co-authored-by: t-hamano Co-authored-by: tellthemachines Co-authored-by: jameskoster Co-authored-by: jasmussen --- .../block-editor/src/layouts/constrained.js | 45 ++++++++++++++++++- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js index f86791391176f9..03d2c642d02bda 100644 --- a/packages/block-editor/src/layouts/constrained.js +++ b/packages/block-editor/src/layouts/constrained.js @@ -24,6 +24,7 @@ import { getCSSRules } from '@wordpress/style-engine'; import { useSettings } from '../components/use-settings'; import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils'; import { getGapCSSValue } from '../hooks/gap'; +import { BlockControls, JustifyContentControl } from '../components'; import { shouldSkipSerialization } from '../hooks/utils'; import { LAYOUT_DEFINITIONS } from './definitions'; @@ -146,8 +147,24 @@ export default { ); }, - toolBarControls: function DefaultLayoutToolbarControls() { - return null; + toolBarControls: function DefaultLayoutToolbarControls( { + layout = {}, + onChange, + layoutBlockSupport, + } ) { + const { allowJustification = true } = layoutBlockSupport; + + if ( ! allowJustification ) { + return null; + } + return ( + + + + ); }, getLayoutStyle: function getLayoutStyle( { selector, @@ -278,3 +295,27 @@ export default { return alignments; }, }; + +const POPOVER_PROPS = { + placement: 'bottom-start', +}; + +function DefaultLayoutJustifyContentControl( { layout, onChange } ) { + const { justifyContent = 'center' } = layout; + const onJustificationChange = ( value ) => { + onChange( { + ...layout, + justifyContent: value, + } ); + }; + const allowedControls = [ 'left', 'center', 'right' ]; + + return ( + + ); +} From dbc6e11e8c2b84d48c0d78bf9a83ee45333e6d0d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 9 Jul 2024 15:50:13 +1000 Subject: [PATCH 04/21] Try inserting blocks directly in empty grid cells (#63108) Co-authored-by: tellthemachines Co-authored-by: noisysocks Co-authored-by: jasmussen Co-authored-by: andrewserong Co-authored-by: liviopv --- backport-changelog/6.7/6910.md | 3 +- lib/block-supports/layout.php | 4 +- .../components/button-block-appender/index.js | 3 +- .../src/components/grid/grid-visualizer.js | 223 +++++++++++++----- .../src/components/grid/style.scss | 50 +++- .../src/components/inserter/menu.js | 2 +- .../src/components/inserter/quick-inserter.js | 7 +- .../block-editor/src/hooks/grid-visualizer.js | 64 +++++ packages/block-editor/src/hooks/index.js | 1 + packages/block-editor/src/layouts/grid.js | 20 +- .../src/components/inserter-sidebar/index.js | 1 + 11 files changed, 296 insertions(+), 82 deletions(-) create mode 100644 packages/block-editor/src/hooks/grid-visualizer.js diff --git a/backport-changelog/6.7/6910.md b/backport-changelog/6.7/6910.md index 8e6be0dc8e7a5a..962f54be672ad3 100644 --- a/backport-changelog/6.7/6910.md +++ b/backport-changelog/6.7/6910.md @@ -2,4 +2,5 @@ https://github.com/WordPress/wordpress-develop/pull/6910 * https://github.com/WordPress/gutenberg/pull/59483 * https://github.com/WordPress/gutenberg/pull/60652 -* https://github.com/WordPress/gutenberg/pull/62777 \ No newline at end of file +* https://github.com/WordPress/gutenberg/pull/62777 +* https://github.com/WordPress/gutenberg/pull/63108 \ No newline at end of file diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index b5e2fe37faecdc..a8cc85dd304e7c 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -501,7 +501,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support if ( ! empty( $layout['rowCount'] ) ) { $layout_styles[] = array( 'selector' => $selector, - 'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(8px, auto))' ), + 'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(1rem, auto))' ), ); } } elseif ( ! empty( $layout['columnCount'] ) ) { @@ -512,7 +512,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support if ( ! empty( $layout['rowCount'] ) ) { $layout_styles[] = array( 'selector' => $selector, - 'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(8px, auto))' ), + 'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(1rem, auto))' ), ); } } else { diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js index cd1289c897824c..3ac1ef62e1e24a 100644 --- a/packages/block-editor/src/components/button-block-appender/index.js +++ b/packages/block-editor/src/components/button-block-appender/index.js @@ -18,7 +18,7 @@ import deprecated from '@wordpress/deprecated'; import Inserter from '../inserter'; function ButtonBlockAppender( - { rootClientId, className, onFocus, tabIndex }, + { rootClientId, className, onFocus, tabIndex, onSelect }, ref ) { return ( @@ -26,6 +26,7 @@ function ButtonBlockAppender( position="bottom center" rootClientId={ rootClientId } __experimentalIsQuick + onSelectOrClose={ onSelect } renderToggle={ ( { onToggle, disabled, diff --git a/packages/block-editor/src/components/grid/grid-visualizer.js b/packages/block-editor/src/components/grid/grid-visualizer.js index 41ceed87796999..0717ce21fe2d84 100644 --- a/packages/block-editor/src/components/grid/grid-visualizer.js +++ b/packages/block-editor/src/components/grid/grid-visualizer.js @@ -6,7 +6,7 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { useState, useEffect, forwardRef } from '@wordpress/element'; +import { useState, useEffect, forwardRef, useMemo } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose'; @@ -18,6 +18,7 @@ import BlockPopoverCover from '../block-popover/cover'; import { range, GridRect, getGridInfo } from './utils'; import { store as blockEditorStore } from '../../store'; import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell'; +import ButtonBlockAppender from '../button-block-appender'; export function GridVisualizer( { clientId, contentRef, parentLayout } ) { const isDistractionFree = useSelect( @@ -36,7 +37,7 @@ export function GridVisualizer( { clientId, contentRef, parentLayout } ) { window.__experimentalEnableGridInteractivity; return ( { + ( { gridClientId, gridElement, isManualGrid }, ref ) => { const [ gridInfo, setGridInfo ] = useState( () => getGridInfo( gridElement ) ); const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false ); - const [ highlightedRect, setHighlightedRect ] = useState( null ); useEffect( () => { const observers = []; @@ -88,7 +88,7 @@ const GridVisualizerGrid = forwardRef( className={ clsx( 'block-editor-grid-visualizer', { 'is-dropping-allowed': isDroppingAllowed, } ) } - clientId={ clientId } + clientId={ gridClientId } __unstablePopoverSlot="block-toolbar" >
- { isManualGrid - ? range( 1, gridInfo.numRows ).map( ( row ) => - range( 1, gridInfo.numColumns ).map( - ( column ) => ( - - - - ) - ) - ) - : Array.from( - { length: gridInfo.numItems }, - ( _, i ) => ( - - ) - ) } + { isManualGrid ? ( + + ) : ( + Array.from( { length: gridInfo.numItems }, ( _, i ) => ( + + ) ) + ) }
); } ); -function GridVisualizerCell( { color, children } ) { +function ManualGridVisualizer( { gridClientId, gridInfo } ) { + const [ highlightedRect, setHighlightedRect ] = useState( null ); + + const gridItems = useSelect( + ( select ) => select( blockEditorStore ).getBlocks( gridClientId ), + [ gridClientId ] + ); + const occupiedRects = useMemo( () => { + const rects = []; + for ( const block of gridItems ) { + const { + columnStart, + rowStart, + columnSpan = 1, + rowSpan = 1, + } = block.attributes.style?.layout || {}; + if ( ! columnStart || ! rowStart ) { + continue; + } + rects.push( + new GridRect( { + columnStart, + rowStart, + columnSpan, + rowSpan, + } ) + ); + } + return rects; + }, [ gridItems ] ); + + return range( 1, gridInfo.numRows ).map( ( row ) => + range( 1, gridInfo.numColumns ).map( ( column ) => { + const isCellOccupied = occupiedRects.some( ( rect ) => + rect.contains( column, row ) + ); + const isHighlighted = + highlightedRect?.contains( column, row ) ?? false; + return ( + + { isCellOccupied ? ( + + ) : ( + + ) } + + ); + } ) + ); +} + +function GridVisualizerCell( { color, children, className } ) { return (
{ children } @@ -148,15 +199,15 @@ function GridVisualizerCell( { color, children } ) { ); } -function GridVisualizerDropZone( { +function useGridVisualizerDropZone( column, row, gridClientId, gridInfo, - highlightedRect, - setHighlightedRect, -} ) { - const { getBlockAttributes } = useSelect( blockEditorStore ); + setHighlightedRect +) { + const { getBlockAttributes, getBlockRootClientId } = + useSelect( blockEditorStore ); const { updateBlockAttributes, moveBlocksToPosition, @@ -168,7 +219,7 @@ function GridVisualizerDropZone( { gridInfo.numColumns ); - const ref = useDropZoneWithValidation( { + return useDropZoneWithValidation( { validateDrag( srcClientId ) { const attributes = getBlockAttributes( srcClientId ); const rect = new GridRect( { @@ -221,21 +272,87 @@ function GridVisualizerDropZone( { __unstableMarkNextChangeAsNotPersistent(); moveBlocksToPosition( [ srcClientId ], - gridClientId, + getBlockRootClientId( srcClientId ), gridClientId, getNumberOfBlocksBeforeCell( column, row ) ); }, } ); +} - const isHighlighted = highlightedRect?.contains( column, row ) ?? false; - +function GridVisualizerDropZone( { + column, + row, + gridClientId, + gridInfo, + setHighlightedRect, +} ) { return (
+ ); +} + +function GridVisualizerAppender( { + column, + row, + gridClientId, + gridInfo, + setHighlightedRect, +} ) { + const { + updateBlockAttributes, + moveBlocksToPosition, + __unstableMarkNextChangeAsNotPersistent, + } = useDispatch( blockEditorStore ); + + const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell( + gridClientId, + gridInfo.numColumns + ); + + return ( + { + if ( ! block ) { + return; + } + updateBlockAttributes( block.clientId, { + style: { + layout: { + columnStart: column, + rowStart: row, + }, + }, + } ); + __unstableMarkNextChangeAsNotPersistent(); + moveBlocksToPosition( + [ block.clientId ], + gridClientId, + gridClientId, + getNumberOfBlocksBeforeCell( column, row ) + ); + } } /> ); } diff --git a/packages/block-editor/src/components/grid/style.scss b/packages/block-editor/src/components/grid/style.scss index 17513fa6496b26..a4d2c58895932e 100644 --- a/packages/block-editor/src/components/grid/style.scss +++ b/packages/block-editor/src/components/grid/style.scss @@ -12,6 +12,9 @@ pointer-events: all; } } + .block-editor-inserter * { + pointer-events: auto; + } } } @@ -20,23 +23,55 @@ } .block-editor-grid-visualizer__cell { - align-items: center; - display: flex; - justify-content: center; + display: grid; + position: relative; + + .block-editor-inserter { + color: inherit; + z-index: 32; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; + + .block-editor-grid-visualizer__appender { + box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, #0000); + color: inherit; + overflow: hidden; + height: 100%; + width: 100%; + padding: 0 !important; + opacity: 0; + } + + } + + &.is-highlighted { + .block-editor-inserter, + .block-editor-grid-visualizer__drop-zone { + background: var(--wp-admin-theme-color); + } + } + + &:hover .block-editor-grid-visualizer__appender, + .block-editor-grid-visualizer__appender:focus { + opacity: 1; + background-color: color-mix(in srgb, currentColor 20%, #0000); + } } .block-editor-grid-visualizer__drop-zone { background: rgba($gray-400, 0.1); width: 100%; height: 100%; + grid-column: 1; + grid-row: 1; // Make drop zone 8x8 at minimum so that it's easier to drag into. This will overflow the parent. min-width: $grid-unit-10; min-height: $grid-unit-10; - - &.is-highlighted { - background: var(--wp-admin-theme-color); - } } .block-editor-grid-item-resizer { @@ -60,3 +95,4 @@ } } } + diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index bcd60a687a36ff..ef741a9b6ac61e 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -88,7 +88,7 @@ function InserterMenu( shouldForceFocusBlock, _rootClientId ); - onSelect(); + onSelect( blocks ); // Check for focus loss due to filtering blocks by selected block type window.requestAnimationFrame( () => { diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index 022957df952cea..aa3d54e87a7fd1 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -85,7 +85,12 @@ export default function QuickInserter( { // When clicking Browse All select the appropriate block so as // the insertion point can work as expected. const onBrowseAll = () => { - setInserterIsOpened( { rootClientId, insertionIndex, filterValue } ); + setInserterIsOpened( { + rootClientId, + insertionIndex, + filterValue, + onSelect, + } ); }; let maxBlockPatterns = 0; diff --git a/packages/block-editor/src/hooks/grid-visualizer.js b/packages/block-editor/src/hooks/grid-visualizer.js new file mode 100644 index 00000000000000..42b45952d45d15 --- /dev/null +++ b/packages/block-editor/src/hooks/grid-visualizer.js @@ -0,0 +1,64 @@ +/** + * WordPress dependencies + */ +import { createHigherOrderComponent } from '@wordpress/compose'; +import { addFilter } from '@wordpress/hooks'; +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { GridVisualizer, useGridLayoutSync } from '../components/grid'; +import { store as blockEditorStore } from '../store'; + +function GridLayoutSync( props ) { + useGridLayoutSync( props ); +} + +function GridTools( { clientId, layout } ) { + const { isSelected, isDragging } = useSelect( ( select ) => { + const { isBlockSelected, isDraggingBlocks } = + select( blockEditorStore ); + + return { + isSelected: isBlockSelected( clientId ), + isDragging: isDraggingBlocks(), + }; + } ); + + if ( ! isSelected && ! isDragging ) { + return null; + } + + return ( + <> + + + + ); +} + +const addGridVisualizerToBlockEdit = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { + if ( props.attributes.layout?.type !== 'grid' ) { + return ; + } + + return ( + <> + + + + ); + }, + 'addGridVisualizerToBlockEdit' +); + +addFilter( + 'editor.BlockEdit', + 'core/editor/grid-visualizer', + addGridVisualizerToBlockEdit +); diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 423e1f6f0bc322..b58ede2e9d389d 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -33,6 +33,7 @@ import blockHooks from './block-hooks'; import blockBindingsPanel from './block-bindings'; import './block-renaming'; import './use-bindings-attributes'; +import './grid-visualizer'; createBlockEditFilter( [ diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index 21870fc1820939..975b79f4ba570e 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -23,7 +23,6 @@ import { appendSelectors, getBlockGapCSS } from './utils'; import { getGapCSSValue } from '../hooks/gap'; import { shouldSkipSerialization } from '../hooks/utils'; import { LAYOUT_DEFINITIONS } from './definitions'; -import { GridVisualizer, useGridLayoutSync } from '../components/grid'; const RANGE_CONTROL_MAX_VALUES = { px: 600, @@ -101,15 +100,8 @@ export default { ); }, - toolBarControls: function GridLayoutToolbarControls( { clientId } ) { - return ( - <> - { window.__experimentalEnableGridInteractivity && ( - - ) } - - - ); + toolBarControls: function GridLayoutToolbarControls() { + return null; }, getLayoutStyle: function getLayoutStyle( { selector, @@ -163,7 +155,7 @@ export default { ); if ( rowCount ) { rules.push( - `grid-template-rows: repeat(${ rowCount }, minmax(8px, auto))` + `grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))` ); } } else if ( columnCount ) { @@ -172,7 +164,7 @@ export default { ); if ( rowCount ) { rules.push( - `grid-template-rows: repeat(${ rowCount }, minmax(8px, auto))` + `grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))` ); } } else { @@ -479,7 +471,3 @@ function GridLayoutTypeControl( { layout, onChange } ) { ); } - -function GridLayoutSync( props ) { - useGridLayoutSync( props ); -} diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index dcc95c80395315..675ae5e11544bc 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -88,6 +88,7 @@ export default function InserterSidebar() { blockSectionRootClientId ?? insertionPoint.rootClientId } __experimentalInsertionIndex={ insertionPoint.insertionIndex } + onSelect={ insertionPoint.onSelect } __experimentalInitialTab={ insertionPoint.tab } __experimentalInitialCategory={ insertionPoint.category } __experimentalFilterValue={ insertionPoint.filterValue } From 43966e269d9ece80c85335dc8218d9c5f7ce5345 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 9 Jul 2024 09:25:12 +0200 Subject: [PATCH 05/21] Audio Block: Do not persist blob urls and fix undo (#63257) Co-authored-by: youknowriad Co-authored-by: Mamaduka --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/audio/block.json | 4 +++ packages/block-library/src/audio/edit.js | 26 ++++++++++++++----- .../block-library/src/audio/transforms.js | 2 +- 4 files changed, 25 insertions(+), 9 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index d81a46cd727a17..71753c7e2ed871 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -24,7 +24,7 @@ Embed a simple audio player. ([Source](https://github.com/WordPress/gutenberg/tr - **Name:** core/audio - **Category:** media - **Supports:** align, anchor, interactivity (clientNavigation), spacing (margin, padding) -- **Attributes:** autoplay, caption, id, loop, preload, src +- **Attributes:** autoplay, blob, caption, id, loop, preload, src ## Avatar diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json index 14b44704fb7e8f..bee2ff6d534a70 100644 --- a/packages/block-library/src/audio/block.json +++ b/packages/block-library/src/audio/block.json @@ -8,6 +8,10 @@ "keywords": [ "music", "sound", "podcast", "recording" ], "textdomain": "default", "attributes": { + "blob": { + "type": "string", + "__experimentalRole": "local" + }, "src": { "type": "string", "source": "attribute", diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index 0db2552b8ac264..97d3c9c5a1ae3f 100644 --- a/packages/block-library/src/audio/edit.js +++ b/packages/block-library/src/audio/edit.js @@ -26,6 +26,7 @@ import { __, _x } from '@wordpress/i18n'; import { useDispatch } from '@wordpress/data'; import { audio as icon } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; +import { useState } from '@wordpress/element'; /** * Internal dependencies @@ -45,10 +46,10 @@ function AudioEdit( { insertBlocksAfter, } ) { const { id, autoplay, loop, preload, src } = attributes; - const isTemporaryAudio = ! id && isBlobURL( src ); + const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob ); useUploadMediaFromBlobURL( { - url: src, + url: temporaryURL, allowedTypes: ALLOWED_MEDIA_TYPES, onChange: onSelectAudio, onError: onUploadError, @@ -72,7 +73,8 @@ function AudioEdit( { onReplace( embedBlock ); return; } - setAttributes( { src: newSrc, id: undefined } ); + setAttributes( { src: newSrc, id: undefined, blob: undefined } ); + setTemporaryURL(); } } @@ -95,27 +97,37 @@ function AudioEdit( { src: undefined, id: undefined, caption: undefined, + blob: undefined, } ); + setTemporaryURL(); return; } + + if ( isBlobURL( media.url ) ) { + setTemporaryURL( media.url ); + return; + } + // Sets the block's attribute and updates the edit component from the // selected media, then switches off the editing UI. setAttributes( { + blob: undefined, src: media.url, id: media.id, caption: media.caption, } ); + setTemporaryURL(); } const classes = clsx( className, { - 'is-transient': isTemporaryAudio, + 'is-transient': !! temporaryURL, } ); const blockProps = useBlockProps( { className: classes, } ); - if ( ! src ) { + if ( ! src && ! temporaryURL ) { return (
-