Skip to content

[Button Block]: Add native mobile support for padding (WIP) #32218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
stacimc wants to merge 11 commits into from
Closed

[Button Block]: Add native mobile support for padding (WIP) #32218

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7235697
Refactor Button to functional component
stacimc May 24, 2021
9632d71
Merge remote-tracking branch 'upstream/trunk' into trunk
stacimc May 27, 2021
3cb05e6
Add a utility for getting the spacing inline styles
stacimc May 12, 2021
e88f28d
Add padding support to the Button block
stacimc May 12, 2021
d870ad3
Reflect style selection on frontend
stacimc May 12, 2021
51b7ef2
Fix error on mobile from missing export
stacimc May 20, 2021
c0c0492
Add support for skipSerialization to spacing block support
stacimc May 12, 2021
002619b
Allow skipping spacing support serialization (#31973)
aaronrobertshaw May 25, 2021
7703fdd
Correctly set richTextRef for Android
stacimc May 26, 2021
5888c97
Clean up refactor
stacimc May 26, 2021
584853c
First pass at padding support
stacimc May 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Clean up refactor
  • Loading branch information
@stacimc
stacimc committed May 27, 2021
commit 5888c97858126d69264b5182c3860a8371066baa
2 changes: 1 addition & 1 deletion packages/block-library/src/button/controls.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
);
}

export default function Controls ( {
export default function Controls( {
attributes,
setAttributes,
clientId,
Expand Down
41 changes: 17 additions & 24 deletions packages/block-library/src/button/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { View, AccessibilityInfo, Platform, Text } from 'react-native';
/**
* WordPress dependencies
*/
import { withInstanceId, compose } from '@wordpress/compose';
import { withInstanceId, compose, usePrevious } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import {
RichText,
Expand Down Expand Up @@ -37,16 +37,6 @@ const MIN_WIDTH_MARGINS = {
25: styles.button25?.marginLeft,
};

const usePrevious = ( value ) => {
const ref = useRef();

useEffect( () => {
ref.current = value;
}, [ value ] );

return ref.current;
};

const ButtonEdit = ( {
attributes,
colors,
Expand Down Expand Up @@ -81,16 +71,6 @@ const ButtonEdit = ( {
const wasEditorSidebarOpened = usePrevious( editorSidebarOpened );
const wasLinkSheetVisible = usePrevious( isLinkSheetVisible );

const onClearSettings = () => {
setAttributes( {
url: '',
rel: '',
linkTarget: '',
} );

onHideLinkSettings();
};

const linkSettingsActions = [
{
label: __( 'Remove link' ),
Expand Down Expand Up @@ -141,7 +121,11 @@ const ButtonEdit = ( {
( ! wasEditorSidebarOpened && editorSidebarOpened ) ||
( ! wasLinkSheetVisible && isLinkSheetVisible )
) {
if ( Platform.OS === 'android' && richTextRef && richTextRef.current ) {
if (
Platform.OS === 'android' &&
richTextRef &&
richTextRef.current
) {
richTextRef.current.blur();
onToggleButtonFocus( false );
}
Expand Down Expand Up @@ -170,14 +154,13 @@ const ButtonEdit = ( {
wasSelected,
wasEditorSidebarOpened,
wasLinkSheetVisible,
richTextRef.current
richTextRef.current,
] );

const setRef = ( nodeRef ) => {
richTextRef.current = nodeRef;
};


const getBackgroundColor = () => {
// Return named gradient value if available.
const gradientValue = getGradientValueBySlug( gradients, gradient );
Expand Down Expand Up @@ -238,6 +221,16 @@ const ButtonEdit = ( {
setIsLinkSheetVisible( false );
};

const onClearSettings = () => {
setAttributes( {
url: '',
rel: '',
linkTarget: '',
} );

onHideLinkSettings();
};

const onToggleButtonFocus = ( value ) => {
if ( value !== isButtonFocused ) {
setIsButtonFocused( value );
Expand Down