From acafff97f73dc8178f27c5feb38474afd18e889f Mon Sep 17 00:00:00 2001 From: Udit Desai Date: Thu, 9 Apr 2020 19:59:30 +1000 Subject: [PATCH 1/3] Document getAnchorRect prop for Popover component. (#17709) --- packages/components/src/popover/README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md index be0eca3d77358..6dc54e4e1f53c 100644 --- a/packages/components/src/popover/README.md +++ b/packages/components/src/popover/README.md @@ -127,11 +127,22 @@ Opt-in prop to show popovers fullscreen on mobile, pass `false` in this prop to ### anchorRect -A custom `DOMRect` object at which to position the popover. +A custom `DOMRect` object at which to position the popover. `anchorRect` is used when the position (custom `DOMRect` object) of the popover needs to be fixed at one location all the time. - Type: `DOMRect` - Required: No +### getAnchorRect + +A callback function which is used to override the anchor value computation algorithm. `anchorRect` will take precedence over this prop, if both are passed together. + +If you need the `DOMRect` object i.e., the position of popover to be calculated on every time, the popover re-renders, then use `getAnchorRect`. + +`getAnchorRect` callback function receives a reference to the popover anchor element as a function parameter and it should return a `DOMRect` objcet. + +- Type: `Function` +- Required: No + ## Methods ### refresh From ce9115459bcf67a7def190981ff57cb169de909c Mon Sep 17 00:00:00 2001 From: Ferdie Sletering Date: Thu, 9 Apr 2020 12:41:00 +0200 Subject: [PATCH 2/3] =?UTF-8?q?Fix:=20`$black`=20background-color=20remain?= =?UTF-8?q?s=20visible=20when=20there=20is=20n=E2=80=A6=20(#20904)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/block-library/src/cover/style.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 739742d1e6227..1742bf45f9de5 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -1,7 +1,6 @@ .wp-block-cover-image, .wp-block-cover { position: relative; - background-color: $black; background-size: cover; background-position: center center; min-height: 430px; @@ -11,7 +10,6 @@ justify-content: center; align-items: center; overflow: hidden; - &.has-parallax { background-attachment: fixed; @@ -28,9 +26,13 @@ } } - &.has-background-dim::before { - content: ""; - background-color: inherit; + &.has-background-dim { + background-color: $black; + + &::before { + content: ""; + background-color: inherit; + } } &.has-background-dim:not(.has-background-gradient)::before, From bdfbb7b9ddce02638ed05c2956d53097ed697500 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 9 Apr 2020 21:02:11 +1000 Subject: [PATCH 3/3] [Mobile] Enable cover block uploads - dev only (#21196) * RNMobile - Enable Cover for Production * RNMobile - Cover block - Move gradient background to support overlay functionality * RNMobile - Cover - Image With Focal Point - Check for url changes * Enable upload options for cover block behind dev flag * Use [].prototype.some for media-library-only prop * Use destructuring in renderBackground function * [Mobile] Cover block upload progress (#21197) * Add progress indicator for uploading media * Use default import syntax for Video component * Use optional chaining * Add z-index to upload progress bar * Fix lint Co-authored-by: Gerardo Pacheco --- .../media-upload-progress/styles.native.scss | 1 + .../components/media-upload/index.native.js | 4 +- .../block-library/src/cover/edit.native.js | 73 ++++++++++++------- .../image-with-focalpoint/index.native.js | 12 +-- 4 files changed, 52 insertions(+), 38 deletions(-) diff --git a/packages/block-editor/src/components/media-upload-progress/styles.native.scss b/packages/block-editor/src/components/media-upload-progress/styles.native.scss index 9924af03a33c4..22355ccc1ad02 100644 --- a/packages/block-editor/src/components/media-upload-progress/styles.native.scss +++ b/packages/block-editor/src/components/media-upload-progress/styles.native.scss @@ -4,4 +4,5 @@ .progressBar { background-color: $gray-lighten-30; + z-index: 1; } diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index c19045d9e021b..a2cc12e6028f7 100644 --- a/packages/block-editor/src/components/media-upload/index.native.js +++ b/packages/block-editor/src/components/media-upload/index.native.js @@ -105,9 +105,9 @@ export class MediaUpload extends React.Component { .filter( ( source ) => { return __experimentalOnlyMediaLibrary ? source.mediaLibrary - : allowedTypes.filter( ( allowedType ) => + : allowedTypes.some( ( allowedType ) => source.types.includes( allowedType ) - ).length > 0; + ); } ) .map( ( source ) => { return { diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index b41810e614529..230a129123c08 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import { View, TouchableWithoutFeedback } from 'react-native'; -import { default as Video } from 'react-native-video'; +import Video from 'react-native-video'; /** * WordPress dependencies @@ -25,6 +25,7 @@ import { MEDIA_TYPE_VIDEO, MediaPlaceholder, MediaUpload, + MediaUploadProgress, withColors, __experimentalUseGradient, } from '@wordpress/block-editor'; @@ -74,6 +75,7 @@ const Cover = ( { focalPoint, minHeight, url, + id, style, } = attributes; const CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT; @@ -122,8 +124,8 @@ const Cover = ( { url && { opacity: dimRatio / 100 }, ! gradientValue && { backgroundColor: - ( overlayColor && overlayColor.color ) || - ( style && style.color && style.color.background ) || + overlayColor?.color || + style?.color?.background || styles.overlay.color, }, // While we don't support theme colors we add a default bg color @@ -183,7 +185,10 @@ const Cover = ( { ); - const background = ( openMediaOptions, getMediaOptions ) => ( + const renderBackground = ( { + open: openMediaOptions, + getMediaOptions, + } ) => ( { getMediaOptions() } { isParentSelected && toolbarControls( openMediaOptions ) } - - { IMAGE_BACKGROUND_TYPE === backgroundType && ( - - ) } - { VIDEO_BACKGROUND_TYPE === backgroundType && ( - ); @@ -217,7 +238,8 @@ const Cover = ( { return ( { - return background( open, getMediaOptions ); - } } + render={ renderBackground } /> ); diff --git a/packages/components/src/mobile/image-with-focalpoint/index.native.js b/packages/components/src/mobile/image-with-focalpoint/index.native.js index 0997b766101bb..440b8477ff2bc 100644 --- a/packages/components/src/mobile/image-with-focalpoint/index.native.js +++ b/packages/components/src/mobile/image-with-focalpoint/index.native.js @@ -97,18 +97,10 @@ const ImageWithFocalPoint = ( { focalPoint, url } ) => { return (